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: "[email protected]",
  },
  {
    id: "3u1reuv4",
    amount: 242,
    status: "success",
    email: "[email protected]",
  },
  {
    id: "derv1ws0",
    amount: 837,
    status: "processing",
    email: "[email protected]",
  },
  {
    id: "5kma53ae",
    amount: 874,
    status: "success",
    email: "[email protected]",
  },
  {
    id: "bhqecj4p",
    amount: 721,
    status: "failed",
    email: "[email protected]",
  },
];

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.

[sommeeeer]

interesting approach. gotta try that some time!