Delete particular item in React Table?

Question

Header: "Delete",
id:'delete',
accessor: str => "delete",

Cell: (row)=> (
<span onClick={(row) => this.onRemoveHandler(row,props)} style={{cursor:'pointer',color:'blue',textDecoration:'underline'}}>
    Delete
</span>
)

React Table This is related to the header delete span link.The code snippets shows the render the delete label with hyperlink.

Here once a user click on delete link how can I get the id of that particular row. ID has been already assgined to all the row from the json data. So,How to pass the cellInfo or rowInfo inside the onClick function .

Solution 1

If you check out the docs (specificaly under 'Renderers'), the row object the cell receives is in the following format:

{
  // Row-level props
  row: Object, // the materialized row of data
  original: , // the original row of data
  index: '', // the index of the row in the original array
  viewIndex: '', // the index of the row relative to the current view
  level: '', // the nesting level of this row
  nestingPath: '', // the nesting path of this row
  aggregated: '', // true if this row's values were aggregated
  groupedByPivot: '', // true if this row was produced by a pivot
  subRows: '', // any sub rows defined by the `subRowKey` prop

  // Cells-level props
  isExpanded: '', // true if this row is expanded
  value: '', // the materialized value of this cell
  resized: '', // the resize information for this cell's column
  show: '', // true if the column is visible
  width: '', // the resolved width of this cell
  maxWidth: '', // the resolved maxWidth of this cell
  tdProps: '', // the resolved tdProps from `getTdProps` for this cell
  columnProps: '', // the resolved column props from 'getProps' for this cell's column
  classes: '', // the resolved array of classes for this cell
  styles: '' // the resolved styles for this cell
}

Depending on what your input data looks like, you can use this information to delete from the dataset. If you plan on dynamically editing your data, you should store it in the state, so that the table component can update according to your edits. Assuming that in your state, you save your dataset as data, and use that to populate the table, you can alter the state in your onclick function:

Header: "Delete",
id:'delete',
accessor: str => "delete",

Cell: (row)=> (
<span onClick={() => {
          let data = this.state.data;
          console.log(this.state.data[row.index]);
          data.splice(row.index, 1)
          this.setState({data})
        }}>
          Delete
        </span> 
) 

so a rough approximation of your app would like this:

this.state = {
  data: <your data set>
}

<ReactTable
   data={this.state.data}
   columns={[
    <other columns you have>,
    {
    Header: "Delete",
    id:'delete',
    accessor: str => "delete",

    Cell: (row)=> (
    <span style={{cursor:'pointer',color:'blue',textDecoration:'underline'}}
          onClick={() => {
              let data = this.state.data;
              console.log(this.state.data[row.index]);
              data.splice(row.index, 1)
              this.setState({data})
            }}>
              Delete
            </span> 
    )}
   ]}
/>

And of course, you don't need to log that row to the console, that doesn't need to be there. This is also just the quickest and easiest way to handle it, you could instead use the row object to get any specific element you want (id, name, etc.) and use that to remove from the dataset

An important note though: There is a big difference between viewIndex and index, index is what you want to use for your specific case

Solution 2

If you are like me and are using React-Table v7 and you are also using a hooks based approach in your components you will want to do it this way.

const [data, setData] = useState([]);
const columns = React.useMemo(
      () => [
        {
          Header: 'Header1',
          accessor: 'Header1Accessor',
        },
        {
          Header: 'Header2',
          accessor: 'Header2Accessor',
        },
        {
          Header: 'Delete',
          id: 'delete',
          accessor: (str) => 'delete',

      Cell: (tableProps) => (
        <span style={{cursor:'pointer',color:'blue',textDecoration:'underline'}}
          onClick={() => {
            // ES6 Syntax use the rvalue if your data is an array.
            const dataCopy = [...data];
            // It should not matter what you name tableProps. It made the most sense to me.
            dataCopy.splice(tableProps.row.index, 1);
            setData(dataCopy);
          }}>
         Delete
        </span>
      ),
    },
  ],
  [data],
  );
// Name of your table component
<ReactTable
  data={data}
  columns={columns}
/>

The important part is when you are defining your columns make sure that the data in your parent component state is part of the dependency array in React.useMemo.

Comments

[Bradley Marques]

Richard, can you provide some more information. I am dealing with this exact problem, but when I try and delete I end up overwriting my entire array in state with an empty one. This causes my table to not render. I am using a functional component with React's useState hook. Assume all needed imports. Parent.js ======= const Parent = () => {

[Bradley Marques]

Sorry here is the code. const columns = React.useMemo( () => [ { Header: 'col1', accessor: 'col1data', }, { Header: 'col2', accessor: 'col2data', }, { Header: 'Actions', id: 'delete', accessor: (str) => 'delete', // Your cell solution here. ); My issue is that the initialization of data returns an empty array. When a splice is done it sets state to the empty array. In other words my table fails to get parent component state.

[Bradley Marques]

github.com/tannerlinsley/react-table/discussions/2254 You can see more detail here on this issue in Tanner Linsley's repository. I go into much more detail. Hopefully this helps!

[Daniel Kmak]

Good tip with keeping data in dependency array of columns memo.

[Nabeel Hussain Shah]

i was not passing the data in the column dependency array and i was having a big problem in my use case as i was also using checkbox for selection, when i deleted the row, the selectedRowIds in react table would not update according to the new data and an error was thrown. Some times missing these tiny details have a big impact on the functionality