# React Table Power A powerful, modern, and highly reusable DataTable component for React with TypeScript support. [![npm version](https://img.shields.io/npm/v/react-datatable-kit.svg?style=flat-square)](https://www.npmjs.com/package/react-datatable-kit) [![npm downloads](https://img.shields.io/npm/dm/react-datatable-kit.svg?style=flat-square)](https://www.npmjs.com/package/react-datatable-kit) [![license](https://img.shields.io/npm/l/react-datatable-kit.svg?style=flat-square)](https://github.com/danhnhdeveloper308/react-datatable-kit/blob/main/LICENSE) ## Features - 🚀 Built with [TanStack Table v8](https://tanstack.com/table/v8) (React Table) - 🎭 Works with [React 18+](https://reactjs.org/) - ⚡️ Supports both Next.js [App Router](https://nextjs.org/docs/app) & [Pages Router](https://nextjs.org/docs/pages) - 🌐 CSR and SSR Compatible - 💅 Customizable with CSS classes and modular design - 🔍 Advanced filtering, sorting, and searching - 📊 Export data to CSV, Excel, and PDF - 📱 Fully responsive design - ♿ Accessible (WCAG 2.1 compliant) - 🌙 Dark mode support - ⚙️ TypeScript support - 👍 Zero configuration required for basic usage ## Installation ```bash # With npm npm install react-datatable-kit @tanstack/react-table # With yarn yarn add react-datatable-kit @tanstack/react-table # With pnpm pnpm add react-datatable-kit @tanstack/react-table ``` Optional dependencies based on your needs: ```bash # For form handling npm install react-hook-form zod # For animations npm install framer-motion # For data export (only needed if you use export functionality) npm install papaparse xlsx jspdf jspdf-autotable ``` ## Basic Usage ```tsx import React from 'react'; import { DataTable } from 'react-datatable-kit'; import 'react-datatable-kit/css'; // Import the styles // Sample data const data = [ { id: 1, name: 'John Doe', age: 28, city: 'New York' }, { id: 2, name: 'Jane Smith', age: 34, city: 'Los Angeles' }, { id: 3, name: 'Bob Johnson', age: 42, city: 'Chicago' }, ]; // Column definitions const columns = [ { accessorKey: 'id', header: 'ID' }, { accessorKey: 'name', header: 'Name', sortable: true }, { accessorKey: 'age', header: 'Age', sortable: true }, { accessorKey: 'city', header: 'City', sortable: true }, ]; function App() { return (

Users Table

); } export default App; ``` ## Advanced Usage ### Server-side Pagination, Sorting and Filtering ```tsx import React from 'react'; import { DataTable } from 'react-datatable-kit'; import 'react-datatable-kit/css'; function ServerSideTable() { return ( ); } ``` ### Row Selection and Bulk Actions ```tsx import React from 'react'; import { DataTable } from 'react-datatable-kit'; import 'react-datatable-kit/css'; function SelectableTable() { const handleBulkDelete = (selectedRows, selectedKeys) => { console.log('Deleting:', selectedKeys); // Implement your deletion logic here }; const handleBulkExport = (selectedRows, selectedKeys) => { console.log('Exporting:', selectedRows); // Implement your export logic here }; return ( , onClick: handleBulkDelete, variant: 'destructive', }, { key: 'export', label: 'Export Selected', icon: , onClick: handleBulkExport, }, ]} /> ); } ``` ### Row Actions and CRUD Operations ```tsx import React, { useState } from 'react'; import { DataTable } from 'react-datatable-kit'; import 'react-datatable-kit/css'; function CrudTable() { const [tableData, setTableData] = useState(data); const handleDelete = (id) => { setTableData(prev => prev.filter(item => item.id !== id)); }; const handleEdit = (formData, id) => { setTableData(prev => prev.map(item => item.id === id ? { ...item, ...formData } : item) ); }; const handleCreate = (formData) => { const newId = Math.max(...tableData.map(item => item.id)) + 1; setTableData(prev => [...prev, { id: newId, ...formData }]); }; return ( { // Open edit dialog or navigate to edit page console.log('Edit row:', row); }, variant: 'outline', }, { key: 'delete', label: 'Delete', onClick: (row) => { handleDelete(row.id); }, variant: 'destructive', }, ]} eventHandlers={{ onCreate: handleCreate, onUpdate: handleEdit, onDelete: handleDelete, }} /> ); } ``` ### Advanced Filtering ```tsx const filterConfig = [ { key: 'status', label: 'Status', type: 'select', options: [ { label: 'Active', value: 'active' }, { label: 'Inactive', value: 'inactive' }, { label: 'Pending', value: 'pending' }, ], }, { key: 'dateRange', label: 'Created Date', type: 'dateRange', }, { key: 'amount', label: 'Amount', type: 'number', }, ]; function FilterableTable() { return ( ); } ``` ### Data Export ```tsx function ExportableTable() { return ( ); } ``` ### Custom Column Rendering ```tsx const columns = [ { accessorKey: 'id', header: 'ID', }, { accessorKey: 'name', header: 'Name', cell: ({ row }) => (

{row.original.name}

), }, { accessorKey: 'status', header: 'Status', cell: ({ row }) => (

{row.original.status}

), }, ]; ``` ### Expandable Rows ```tsx function ExpandableTable() { return ( (

Details for {row.name}

{JSON.stringify(row, null, 2)}

), }} /> ); } ``` ### Using the DataTable Hooks For more advanced use cases, you can use the hooks directly: ```tsx import React from 'react'; import { useDataTable, useColumnVisibility, useTableExport } from 'react-datatable-kit'; function CustomTable() { const tableOptions = useDataTable({ data, columns, pagination: { pageSize: 10, }, sorting: [{ field: 'name', direction: 'asc' }], }); const { setPage, setSort, setGlobalFilter, selectedRowKeys, data: tableData } = tableOptions; // Now you can build your own custom UI using these functions return (

setGlobalFilter(e.target.value)} /> {/* Build your custom table UI */}

); } ``` ## API Reference ### `DataTable` Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `data` | `Array