​
Usage

DataTable must be used in a client component.

You can use it:

  1. When you want to perform actions on the data, like selecting a row, or
  2. When you want to display a different set of columns based on some condition.

user-table-client.tsx

"use client";

import DataTable from "@trytoolify/ui/data-table";

const data = [
    { id: 1, name: "John Doe", age: 25, gender: "male" },
    { id: 2, name: "Jane", age: 27, gender: "female" },
];

export default function UserTableClient({ data }: { data: any[] }) {
    const [selectedRow, setSelectedRow] = useState<any>(null);

    function onRowsSelectedCallback(selectedRows: any) {
        setSelectedRow(selectedRows[0]);
    }

    const columns = [
        {
            accessorKey: "age",
            header: "Age",
        },
        {
            accessorKey: "name",
            header: "Name",
            cell: ({ row }) => {
                const data = row.original;

                return <div>{data.name}</div>;
            },
        },
    ];

    return (
        <DataTable
            selectionMode="single"
            onRowsSelected={onRowsSelectedCallback}
            columns={columns}
            data={data}
            pageSize={10}
            isSearchable={true}
        />
    );
}
Copy ButtonDialog