The DataTable component is a simple wrapper around the amazing Tanstack Table component.
This abstraction is used to provide a more consistent API for the data table component. If you need more control over the table, you can use the @tanstack/table module directly.
import { DataTable } from '~/core/ui/DataTable';
function DataTableExample() {
const columns = [
{
header: 'ID',
accessorKey: 'id',
},
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Email',
accessorKey: 'email',
},
{
header: 'Phone',
accessorKey: 'phone',
},
];
const data = [
{
id: 1,
firstName: 'John',
lastName: 'Doe',
email: 'johndoe@example.com',
phone: '123-456-7890',
},
{
id: 2,
firstName: 'Jane',
lastName: 'Doe',
email: 'janedoe@example.com',
phone: '098-765-4321',
},
{
id: 3,
firstName: 'Alice',
lastName: 'Johnson',
email: 'alicejohnson@example.com',
phone: '111-222-3333',
},
{
id: 4,
firstName: 'Bob',
lastName: 'Smith',
email: 'bobsmith@example.com',
phone: '444-555-6666',
},
{
id: 5,
firstName: 'Charlie',
lastName: 'Brown',
phone: '777-888-9999',
email: 'charliebrown@exmaple.com',
},
];
return <DataTable data={data} columns={columns} />;
}Props
You can pass the following props to the DataTable component:
data- The data to display in the tablecolumns- The columns to display in the tablerenderSubComponent- A function that returns a React element to render as a sub component for each rowpageIndex- The current page indexpageSize- The current page sizepageCount- The current page countonPaginationChange- A function that is called when the pagination changestableProps- Additional props to pass to the table component
More Examples
Checkbox Selection
An example of how to use the DataTable component with checkbox selection.
import { ColumnDef } from '@tanstack/react-table';
import { useState } from 'react';
import DataTable from '~/core/ui/DataTable';
import { Checkbox } from '~/core/ui/Checkbox';
function DataTableExampleWithCheckboxes() {
const [store, setStore] = useState<number[]>([]);
const columns: ColumnDef<(typeof data)[number]>[] = [
{
id: 'checkbox',
header: () => {
return (
<Checkbox
checked={store.length === data.length}
onCheckedChange={(checked) => {
if (checked) {
setStore(data.map((row) => row.id));
} else {
setStore([]);
}
}}
/>
);
},
cell: ({ row }) => {
const original = row.original;
const id = original.id;
return (
<div>
<Checkbox
checked={store.includes(id)}
onCheckedChange={(checked) => {
if (checked) {
setStore((ids) => [...ids, original.id]);
} else {
setStore(store.filter((id) => id !== original.id));
}
}}
/>
</div>
);
},
},
{
header: 'First Name',
accessorKey: 'firstName',
},
{
header: 'Last Name',
accessorKey: 'lastName',
},
{
header: 'Email',
accessorKey: 'email',
},
{
header: 'Phone',
accessorKey: 'phone',
},
];
const data = [
{
id: 1,
firstName: 'John',
lastName: 'Doe',
email: 'johndoe@example.com',
phone: '123-456-7890',
},
{
id: 2,
firstName: 'Jane',
lastName: 'Doe',
email: 'janedoe@example.com',
phone: '098-765-4321',
},
{
id: 3,
firstName: 'Alice',
lastName: 'Johnson',
email: 'alicejohnson@example.com',
phone: '111-222-3333',
},
{
id: 4,
firstName: 'Bob',
lastName: 'Smith',
email: 'bobsmith@example.com',
phone: '444-555-6666',
},
{
id: 5,
firstName: 'Charlie',
lastName: 'Brown',
phone: '777-888-9999',
email: 'charliebrown@exmaple.com',
},
];
return <DataTable data={data} columns={columns} />;
}
export default DataTableExampleWithCheckboxes;