A React data table component with pagination, sorting, and filtering capabilities.
npm install @czkoudy/data-tableA fully-featured, headless, and highly customizable React data table component built with @tanstack/react-table and styled using Tailwind CSS. Supports sorting, filtering, grouping, pagination, row selection, and more.
- đ§Š TypeScript support
- đ¨ Tailwind CSS styling (no external CSS required)
- đ Column and global filtering
- âī¸ Sorting
- đ Grouping
- ⊠Pagination
- â
Row selection
- đšī¸ Imperative API (clear selection)
- đī¸ Custom cell rendering
- đˇī¸ Value label mapping
- đ Date formatting
- ⥠Fast and lightweight
``bash`
npm install @czkoudy/data-table @tanstack/react-table date-fnsor
pnpm add @czkoudy/data-table @tanstack/react-table date-fns
> Note: react, react-dom, @tanstack/react-table, and date-fns are peer dependencies.
`tsx
import DataTable, { DataTableProps, DataTableRef } from '@czkoudy/data-table';
const columns = [
{
accessorKey: 'name',
header: 'Name',
meta: { align: 'left' },
},
{
accessorKey: 'createdAt',
header: 'Created At',
meta: { type: 'date', align: 'center', fallback: 'N/A' },
},
{
accessorKey: 'status',
header: 'Status',
meta: {
valueLabelMap: {
active: 'đĸ Active',
inactive: 'đ´ Inactive',
falsy: 'Unknown',
},
align: 'center',
},
},
];
const data = [
{ name: 'Alice', createdAt: '2024-06-01T10:00:00Z', status: 'active' },
{ name: 'Bob', createdAt: null, status: 'inactive' },
];
function App() {
return (
data={data}
enableSearch
enableSorting
enablePagination
showRowSelectors
pageSize={10}
loading={false}
onRowClick={(row) => alert(Clicked: ${row.name})}`
/>
);
}
See DataTableProps for full API.
| Prop | Type | Description |
| ------------------ | -------------------------- | ----------------------------- |
| columns | ColumnDef | Table columns definition |data
| | T[] | Table data |enableSearch
| | boolean | Show global search input |enableSorting
| | boolean | Enable sorting |enablePagination
| | boolean | Enable pagination |showRowSelectors
| | boolean | Show row selection checkboxes |onRowClick
| | (row: T) => void | Row click handler |
| ... | ... | See source for more options |
You can pass a meta object to each column for advanced features:
`ts`
meta: {
align: 'left' | 'center' | 'right',
type: 'date', // enables date formatting
fallback: '-', // fallback for invalid dates
valueLabelMap: { [key: string]: string }, // custom value labels
filterValueExcludeList: string[], // exclude values from filter
filterValueIncludeList: string[], // include only these values in filter
disableRowClick: boolean, // disables row click for this column
}
You can use a ref to clear row selection:
`tsx
const tableRef = useRef
// Clear selection
tableRef.current?.clearSelection();
``
MIT
PRs and issues welcome! See GitHub repo.