Components
Data Table
Table with clean APIs to display, search, sort, filter and perform actions on data
Usage
DataTable must be used in a client component.
You can use it:
- When you want to perform actions on the data, like selecting a row, or
- 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}
/>
);
}