A comprehensive React data table component library with advanced filtering, sorting, and editing capabilities built on top of TanStack Table.
- 🔍 Advanced Filtering - Multiple filter types including text, select, slider, date range, and checkbox filters
- 📝 Inline Editing - Edit cells directly with support for text, email, phone, and select inputs
- 🎨 Modern UI - Beautiful components built with Radix UI and styled with Tailwind CSS
- ⌨️ Keyboard Navigation - Full keyboard accessibility and navigation support
- 📱 Responsive Design - Mobile-friendly with drawer-based filter controls
- 🔄 Real-time Updates - Integrated with TanStack Query for data synchronization
- 🎯 TypeScript First - Full TypeScript support with comprehensive type definitions
- 🎨 Customizable - Highly customizable with CSS variables and component overrides
- 📊 Grouping & Sorting - Advanced data organization capabilities
- 🚀 Performance - Optimized for large datasets with virtualization support
npm install @xcdify/xtable
# or
yarn add @xcdify/xtable
# or
pnpm add @xcdify/xtable
# or
bun add @xcdify/xtableThis package requires the following peer dependencies:
npm install react react-dom @tanstack/react-table @tanstack/react-query tailwindcssimport {
DataTableProvider,
DataTableFilterControls,
DataTableToolbar,
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@xcdify/xtable';
import type { DataTableFilterField } from '@xcdify/xtable';
// Define your data structure
interface User {
id: number;
name: string;
email: string;
role: string;
}
// Define filter fields
const filterFields: DataTableFilterField<User>[] = [
{
label: "Name",
value: "name",
type: "input",
placeholder: "Search names...",
},
{
label: "Role",
value: "role",
type: "select",
options: [
{ label: "Admin", value: "admin" },
{ label: "User", value: "user" },
],
},
];
// Define columns
const columns: ColumnDef<User>[] = [
{
accessorKey: "name",
header: "Name",
},
{
accessorKey: "email",
header: "Email",
},
{
accessorKey: "role",
header: "Role",
},
];
function DataTableExample() {
const data = [
{ id: 1, name: "John Doe", email: "[email protected]", role: "admin" },
{ id: 2, name: "Jane Smith", email: "[email protected]", role: "user" },
];
return (
<DataTableProvider
data={data}
columns={columns}
filterFields={filterFields}
>
<div className="space-y-4">
<DataTableToolbar />
<DataTableFilterControls />
<div className="rounded-md border">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<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}>
{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>
</DataTableProvider>
);
}This package uses Tailwind CSS for styling. Make sure to include the package's styles in your Tailwind configuration:
// tailwind.config.js
module.exports = {
content: [
// ... your content paths
"./node_modules/@xcdify/xtable/**/*.{js,ts,jsx,tsx}",
],
// ... rest of your config
};DataTableProvider- Main provider component that manages table stateDataTableToolbar- Toolbar with search, view options, and actionsDataTableFilterControls- Advanced filter controls panelDataTablePagination- Pagination controlsTable,TableBody,TableCell,TableHead,TableHeader,TableRow- Table components
DataTableFilterInput- Text input filterDataTableFilterSelect- Select dropdown filterDataTableFilterSlider- Range slider filterDataTableFilterCheckbox- Checkbox filterDataTableFilterTimerange- Date range filter
EditableCell- Generic editable cell componentEditableTextCell- Text input cellEditableEmailCell- Email input cellEditablePhoneCell- Phone input cellEditableSelectCell- Select dropdown cell
const columns: ColumnDef<User>[] = [
{
accessorKey: "name",
header: "Name",
cell: ({ row, column }) => (
<EditableTextCell
value={row.getValue(column.id)}
onChange={(value) => updateData(row.index, column.id, value)}
/>
),
meta: {
editable: true,
},
},
];const filterFields: DataTableFilterField<User>[] = [
{
label: "Created Date",
value: "createdAt",
type: "timerange",
},
{
label: "Status",
value: "status",
type: "checkbox",
options: [
{ label: "Active", value: "active" },
{ label: "Inactive", value: "inactive" },
],
},
];| Prop | Type | Description |
|---|---|---|
data |
T[] |
Array of data objects |
columns |
ColumnDef<T>[] |
TanStack Table column definitions |
filterFields |
DataTableFilterField<T>[] |
Filter field configurations |
enableGrouping |
boolean |
Enable column grouping (optional) |
enableSorting |
boolean |
Enable column sorting (optional) |
enableFiltering |
boolean |
Enable filtering (optional) |
interface DataTableFilterField<T> {
label: string;
value: keyof T;
type: 'input' | 'select' | 'slider' | 'checkbox' | 'timerange';
placeholder?: string; // for input type
options?: Array<{ label: string; value: any }>; // for select/checkbox
min?: number; // for slider
max?: number; // for slider
}interface EditCellProps {
value: any;
onChange: (value: any) => void;
onBlur?: () => void;
type?: 'text' | 'email' | 'number' | 'tel' | 'select';
options?: Array<{ label: string; value: any }>; // for select type
}Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built on top of TanStack Table
- UI components from Radix UI
- Styled with Tailwind CSS
- Originally based on work by the Data Table Filters Team
Made with ❤️ by Xcdify