T
TanStack•3y ago
flat-fuchsia

How can i add action buttons to rows (like `delete`)

I need to create a table that would allow to delete rows. Is it okay to just move colDefs into react component and call function passed as a prop on a button click? 
type ClientsInputProps = {
  clients: NTPClient[];
  onDelete: (id: string) => void;
};

const ClientsInput = ({ clients, onDelete }: ClientsInputProps) => {
  const NTPClientsColumns = [
    columnHelper.accessor("address", {
      header: "Address",
      cell: (info) => info.getValue(),
    }),
    columnHelper.display({
      id: "remove",
      header: "Remove",
      cell: (info) => (
        <Button onClick={() => onDelete(info.row.original.id)}> { /* <<<<<<<<<<<<<<<<<<<<< That is what I am talking about */ }
          <Trash2 size={20} />
        </Button>
      ),
    }),
  ];

  const table = useReactTable({
    data: clients,
    columns: NTPClientsColumns,
    getCoreRowModel: getCoreRowModel(),
  });

  // ...
}
type ClientsInputProps = {
  clients: NTPClient[];
  onDelete: (id: string) => void;
};

const ClientsInput = ({ clients, onDelete }: ClientsInputProps) => {
  const NTPClientsColumns = [
    columnHelper.accessor("address", {
      header: "Address",
      cell: (info) => info.getValue(),
    }),
    columnHelper.display({
      id: "remove",
      header: "Remove",
      cell: (info) => (
        <Button onClick={() => onDelete(info.row.original.id)}> { /* <<<<<<<<<<<<<<<<<<<<< That is what I am talking about */ }
          <Trash2 size={20} />
        </Button>
      ),
    }),
  ];

  const table = useReactTable({
    data: clients,
    columns: NTPClientsColumns,
    getCoreRowModel: getCoreRowModel(),
  });

  // ...
}
2 Replies
harsh-harlequin
harsh-harlequin•3y ago
I think this rather belong to table-questions instead of react-query-questions. Although I do not see why passing the onDelete as a prop would be a bad thing to do? Might be useful to wrap NTPClientsColumns in a useMemo so the column are not regenerated on every rerender
flat-fuchsia
flat-fuchsiaOP•3y ago
Yeah I did what you said at the end

Did you find this page helpful?