How to pass a function main component to columns array in Tank Stack Table 8 @tanstack/react-table

[hozaifa4you]

How to pass a function main component to the columns array of objects in Tank Stack Table @tanstack/react-table. I have a function handleDelete inside the DataTable component, I want to call the handleDelete on the Delete button press inside the columns.

Is there a way or method to handle the problem??

My code Example with proper comments

"use client";
import * as React from "react";
import { CaretSortIcon } from "@radix-ui/react-icons";
import {
  ColumnDef,
  ColumnFiltersState,
  SortingState,
  VisibilityState,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";

import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const data: Payment[] = [
  {
    id: "m5gr84i9",
    amount: 316,
    status: "success",
    email: "ken99@yahoo.com",
  },
  {
    id: "3u1reuv4",
    amount: 242,
    status: "success",
    email: "Abe45@gmail.com",
  },
  {
    id: "derv1ws0",
    amount: 837,
    status: "processing",
    email: "Monserrat44@gmail.com",
  },
  {
    id: "5kma53ae",
    amount: 874,
    status: "success",
    email: "Silas22@gmail.com",
  },
  {
    id: "bhqecj4p",
    amount: 721,
    status: "failed",
    email: "carmella@hotmail.com",
  },
];

export type Payment = {
  id: string;
  amount: number;
  status: "pending" | "processing" | "success" | "failed";
  email: string;
};

/**
 * @description - I want to get the handleDelete function from the DataTable component and call it on the delete button in the action columns
 */
export const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => (
      <div className="capitalize">{row.getValue("status")}</div>
    ),
  },
  {
    accessorKey: "email",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Email
          <CaretSortIcon className="ml-2 h-4 w-4" />
        </Button>
      );
    },
    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
  },
  {
    id: "actions",
    enableHiding: false,
    cell: ({ row }) => {
      const payment = row.original;

      return (
        <Button
          variant="destructive"
          /**
           * @description - I want to call this `handleDelete` function to the delete button press below
           */
          // onClick={() => handleDelete(payment.id)}
        >
          Delete
        </Button>
      );
    },
  },
];

export default function DataTable() {
  const [tableData, setTableData] = React.useState<Payment[]>([]);
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  );
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({});
  const [rowSelection, setRowSelection] = React.useState({});

  const table = useReactTable({
    data,
    columns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  });

  /**
   * @description - I want to pass this function to the delete button in the action columns
   * @param id delete byn id
   */
  const handleDelete = (id: string) => {
    // delete the row with the id
    data.filter((item) => item.id !== id);
  };

  React.useEffect(() => {}, []);

  return (
    <div className="w-full">
      <h2 className="text-2xl font-bold text-center my-4">Tank Stack Table</h2>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id}>
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center justify-end space-x-2 py-4">
        <div className="flex-1 text-sm text-muted-foreground">
          {table.getFilteredSelectedRowModel().rows.length} of{" "}
          {table.getFilteredRowModel().rows.length} row(s) selected.
        </div>
        <div className="space-x-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            Previous
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}

[Kamino0]

You can use meta for that
https://tanstack.com/table/v8/docs/api/core/table#meta

[hozaifa4you]

It is really works. Thanks

[luxeko]

@martin-santiago here's example: https://tanstack.com/table/v8/docs/framework/react/examples/editable-data

[luxeko]

declare module '@tanstack/react-table' {
  interface TableMeta<TData extends RowData> {
    deleteData: (id: number) => void;
    viewData: (id: number) => void;
    editData: (id: number) => void;
  }
}

const ActionColumn: Partial<ColumnDef<CourseDetailWithChapter>> = {
  cell: ({getValue, row: {index}, column: {id}, table}) => {
    const initialValue = getValue() as number;

    const handleView = () => {
      table.options.meta?.viewData(initialValue);
    }
    const handleDelete = () => {
      table.options.meta?.deleteData(initialValue);
    };
    const handleEdit = () => {
      table.options.meta?.editData(initialValue);
    }

    return (
      <div className={'flex flex-row gap-x-2 whitespace-nowrap'}>
        <button onClick={handleView}>
          View
        </button>
        <button onClick={handleEdit}>
          Edit
        </button>
        <button onClick={handleDelete}>
          Delete
        </button>
      </div>
    );
  },
};

 const columns: ColumnDef<CourseDetailWithChapter>[] = useMemo<
      ColumnDef<CourseDetailWithChapter>[]
    >(
      () => [
        {
          id: 'id',
          accessorKey: 'id',
          enableHiding: false,
          header: () => <div className={'text-blackRock text-center w-full block'}>#</div>,
          cell: ({row}) => <span className={'text-center w-full block'}>{row.index + 1}</span>,
        },
        {
          id: 'action',
          accessorKey: 'id',
          enableHiding: false,
          header: () => (
            <div className={'text-blackRock text-center w-full block whitespace-nowrap'}>
              Action
            </div>
          ),
          ...ActionColumn,
        },
      ],
      [],
    );
const table = useReactTable({
		data: initData,
		columns,
		initialState: {
			pagination: {
				pageSize: 20,
			},
		},
		onSortingChange: setSorting,
		onColumnFiltersChange: setColumnFilters,
		getCoreRowModel: getCoreRowModel(),
		getPaginationRowModel: getPaginationRowModel(),
		getSortedRowModel: getSortedRowModel(),
		getFilteredRowModel: getFilteredRowModel(),
		onColumnVisibilityChange: setColumnVisibility,
		onRowSelectionChange: setRowSelection,
		state: {
			sorting,
			columnFilters,
			columnVisibility,
			rowSelection,
		},
		meta: {
			deleteData: (id: number) => {
				console.log('id >>  ',  id);
			},
                       viewData: (id: number) => {
				console.log('id >> ',  id);
			},
			editData: (id: number) => {
				console.log('id >> ',  id);
			},
		},
	});

[martin-santiago]

thank you!

[martin-santiago]

It works great, i have a question tough, have you managed to pass a react useState trough this meta propperty? in the columns I have a delete button similar to yours, but my delete request take some time because it is deleting a very nested object so it takes about 2 or 3 seconds and i want to show a loader to the client, it doesnt allow me to create a state inside the cell attribute of columns so i tought maybe i can do it trough this meta functionality

[martin-santiago]

Nevermind i found the solution, it was pretty easy!, i'll share it here

on type

declare module '@tanstack/react-table' {
  interface TableMeta<TData extends RowData> extends OriginalTableMeta<TData> {
    handleDeleteServiceCoupon: (serviceCouponId: string) => void;
    isDeleteLoading: boolean;
  }
}

on table component

  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
    //....
    meta: {
      handleDeleteServiceCoupon: (serviceCouponId: string) => {
        setIsDeleteLoading(true);
        serviceCouponsService
          .deleteServiceCoupon(serviceCouponId)
          .then(() => refreshServiceCouponsData())
          .finally(() => setIsDeleteLoading(false));
      },
      isDeleteLoading,
    },

on cell

{
    accessorKey: 'actions',
    header: 'Editar',
    cell: ({ row, table }) => {
      const serviceCoupon = row.original;
      return (
        <Menu>
          <MenuHandler>
//.....
            <button>
              {table.options.meta?.isDeleteLoading ? (
                <SmallSpinner />
              ) : (
                <DotsHorizontalIcon className="h-5 w-5" />
              )}
            </button>
          </MenuHandler>
          <MenuList>
            //....
              <button
                className="flex"
                onClick={() => {
                  table.options?.meta?.handleDeleteServiceCoupon(
                    serviceCoupon.id,
                  );
                }}
              >
                //....
          </MenuList>
        </Menu>
      );
    },
  },

it works great, this tanstack table really is a powerfull tool!

[junwen-k]

Other than meta, you can also use a function callback to generate your columns. E.g,

export const getColumns = ({ onDelete }: { onDelete: (id: string) => void }): ColumnDef<Payment>[] => [
  // ...
  {
    id: "actions",
    enableHiding: false,
    cell: ({ row }) => {
      const payment = row.original;

      return (
        <Button
          variant="destructive"
          onClick={() => onDelete(payment.id)}
        >
          Delete
        </Button>
      );
    },
  },
];

export default function DataTable() {
  // ...

  const handleDelete = useCallback((id: string) => {
    // ...
  }, []);

  const columns = useMemo(() => getColumns({ onDelete: handleDelete }), [handleDelete]);

  const table = useReactTable({
    columns,
    // ...
  });

  // ...

  return (
    // ...
  );
}

I avoid using meta because meta's typing is globally available, which many cases might not be as ideal because the callback could be specific to only certain tables. E.g, onApprove, onReject might not be applicable for other tables, etc. However, seems like using meta is the recommended way as seen in the official editable-data example.

---

Updated 2024 Oct 29

Nowadays, I usually define meta to be more specific to the table that I am building. E.g, for a transaction table with approve and reject actions.

declare module '@tanstack/react-table' {
  interface TableMeta<TData extends RowData> {
    onTransactionReject?: (context: CellContext<TData, unknown>) => void;
    onTransactionApprove?: (context: CellContext<TData, unknown>) => void;
  }
}

const columnHelper = createColumnHelper<Transaction>();

export const columns = [
  // ...
  columnHelper.display({
    id: 'actions',
    cell: (context) => (
      <div className="flex justify-end gap-2">
        <Button
          variant="destructive"
          onClick={() =>
            context.table.options.meta?.onTransactionReject?.(context)
          }
          // ...
        >
          Reject
        </Button>
        <Button
          onClick={() =>
            context.table.options.meta?.onTransactionApprove?.(context)
          }
          // ...
        >
          Approve
        </Button>
      </div>
    ),
  }),
];

export default function DataTable() {
  // ...

  const table = useReactTable({
    columns,
    meta: {
      onTransactionApprove: React.useCallback((context: CellContext<Transaction, unknown>) => {
        // ...
      }, []),
      onTransactionReject: React.useCallback((context: CellContext<Transaction, unknown>) => {
        // ...
      }, []),
    },
    // ...
  });

  // ...

  return (
    // ...
  );
}

Instead of an onApprove or onReject callback, it is now named as onTransactionApprove and onTransactionReject. I can then add other table with onUserCreate, onUserDelete or something like that without conflict. Basically, I

1. Define TableMeta type close to the file where I write the table.
2. Name the callbacks more specifically to avoid conflicts.
3. Passing entire context object back to the callbacks for maximum flexibility.

[sommeeeer]

interesting approach. gotta try that some time!

[sam-reach]

This looks like the best solution for my use case for the same reasons, I create several different tables across my application that have different handlers so adding them all to the global meta definition doesn't make sense.
Is there any reason this isn't a suggested solution in the docs?

[rown89]

This looks like the best solution for my use case for the same reasons, I create several different tables across my application that have different handlers so adding them all to the global meta definition doesn't make sense. Is there any reason this isn't a suggested solution in the docs?

We use this approach too cause we didn't catch the meta property in the docs right in time.
I think passing trought meta object is a future proof and safer way to handle callbacks.
I'm not sure about the "why".