Is there a basic example to show a functional button in cell on react-table?

[proasian42]

Since the react-table is updated, the formatter is not anymore. I would like to know if there is a way to call a button in a cell. A button will be called to edit or delete the row if the user clicks it.

I would appreciate it if there is a basic code or example for that. Thank you!

[BhanukaBandara997]

Hi were you able to find a sample code or example on this scenario?

[flamingo-peacock]

So I set mine up in the column config. snipet here

const columns = useMemo(
    () => [
 {
        accessor: 'caseId',
        Header: 'Case Id',
        Cell: (object, _unused) => {
          const { value } = object;
          return <Link to={`/cases/${value}`}>{value}</Link>;
        },
      },
      {
        accessor: 'partyIds',
        Header: 'Party Ids',
        Cell: (object, _unused) => {
          const { value } = object;
          return <>{value.join(', ')}</>;
        },
      },
      { accessor: 'startDate', Header: 'Start Date' },
      { accessor: 'endDate', Header: 'End Date' },
      {
        accessor: 'status',
        Header: 'Status',
        Cell: (object, _unused) => {
          return (
            <EditCaseStatusButton onUpdate={onUpdateStatus} object={object} />
          );
        },
      },
      ...])
      ```
      
      So Link is a Link obviously and EditCaseStatusButton is a custom component that has an onClick using that onUpdate function. object is the data from the table. object.value gives you the value of the cell. object.row, gives you the values of other cells in the row. (in my case I need the case Id from the first column)

[imSamiul]

Can it be implemented in this way?

columnHelper.display({
  id: 'status',
  header: 'Status',
  cell: ({ row }) => {
    const object = row.original;
    return (
      <EditCaseStatusButton onUpdate={onUpdateStatus} object={object} />
    );
  },
}),