CODEWITHSUNDEEP
javascriptreactjsecmascript-6react-table
SkyeBoniwell
SkyeBoniwell

Reputation: 7092

Highlighting or removing a row based on the click of a button in that row

I'm using React-Table and I have two buttons in the first cell of each row of my table and the code looks like this:

const columns = React.useMemo(
 () => [

 {
    Header: 'Available Aliens',
    columns: [
    {
        Header: 'Generate/Kill',
        className: "lifeForceRow",
        Cell: ({ row }) =>
                       <div>
                           <Button variant="success" onClick={() => 
                            handleGenerate(row.original.id)}>Generate</Button>
                           <Button variant="danger" onClick={() => 
                            handleKill(row.original.id)}>Kill</Button>
                       </div>
    },

    {
        Header: 'Planet',
        accessor: 'planetName'
    },
    {
        Header: 'Galaxy',
        accessor: 'galaxyName'
    }
            ]
        }
    ],
    []
)

And then the two functions that handle each click look like this:

const handleGenerate = (e) => {
    alert("Alien Generated");
}

const handleKill = (e) => {
    alert("Alien Killed");
}

Is there a way to remove the row when I click the Kill button and a way to highlight the row if I click the Generate button?

I have the buttons working because the alerts pop-up, but I can't figure out how to interact with the row that each button group belongs to.

Thanks!

Upvotes: 0

Views: 281

Answers (1)

aldokkani
aldokkani

Reputation: 910

I suppose since you are using react-table you have defined data object.
You need to modify this data object, for example filtering out the deleted row.original.id and this should re-render your component with the new rows.

Upvotes: 1

Related Questions