>(null);\n\n const handleExportData = () => {\n // Get filtered and sorted data\n const table = tableRef.current?.table;\n const filteredRows = table?.getFilteredRowModel().rows;\n const data = filteredRows?.map(row => row.original);\n \n // Export logic here\n exportToCsv(data);\n };\n\n const handleResetFilters = () => {\n const table = tableRef.current?.table;\n table?.resetGlobalFilter();\n table?.resetColumnFilters();\n table?.resetSorting();\n // Reset smart filters\n table?.setSmartFilters([]);\n };\n\n const handleScrollToTop = () => {\n tableRef.current?.elementsRef.current?.tableRef.current?.scrollIntoView();\n };\n\n return (\n <>\n \n \n \n \n
\n \n ]\n }}\n />\n \n );\n}\n```\n\n#### Available Ref Properties\n\n```tsx\ninterface ClientDataTableRef {\n // TanStack Table instance - full table control\n table: Table;\n \n // React Query result - data and loading states\n query: UseQueryResult;\n \n // DOM element references\n elementsRef: {\n tableRef: RefObject; // Table container\n toolbarRef: RefObject; // Toolbar\n containerRef: RefObject; // Full component\n paginationRef: RefObject; // Pagination\n };\n}\n```\n\n### Column Features Configuration\n\nFine-tune each column's behavior with detailed options:\n\n```tsx\nconst columns: ColumnDef[] = [\n {\n accessorKey: 'name',\n header: 'Product Name',\n columnType: 'string',\n \n // Aggregation control\n enableAggregation: true,\n aggregationFn: 'count',\n \n // Smart filter control (inherited from columnType, can be overridden)\n enableSmartFilter: true,\n \n // Column sizing\n size: 200,\n minSize: 100,\n maxSize: 400,\n \n // Pinning\n enablePinning: true,\n \n // Sorting\n enableSorting: true,\n sortDescFirst: false,\n \n // Filtering\n enableColumnFilter: true,\n enableGlobalFilter: true\n }\n];\n```\n\n### State Management & URL Sharing\n\nControl table state and enable URL sharing for bookmarkable table states:\n\n```tsx\n {\n console.log('Pagination changed:', pagination);\n }}\n onSortingChange={(sorting) => {\n console.log('Sorting changed:', sorting);\n }}\n/>\n```\n\n### Server-Side Integration\n\nFor `ServerDataTable`, implement server endpoints that handle the query parameters:\n\n```tsx\n// Frontend\n \n useQuery({\n queryKey: ['products', params],\n queryFn: () => fetchProducts(params)\n })\n }\n/>\n\n// Backend integration example\ninterface TableQuery {\n offset?: number; // Skip N rows\n limit?: number; // Take N rows\n search?: string; // Global search term\n order?: 'asc' | 'desc' | null; // Sort direction\n orderBy?: string; // Sort column\n filters?: Filter[]; // Column-specific filters (including smart filters)\n}\n\ninterface Filter {\n field: string; // Column identifier\n value: any; // Filter value\n type: string; // Filter operation (equals, contains, isEqualUser, etc.)\n}\n\n// Your API should return:\ninterface TableResult {\n data: T[]; // Current page data\n count: number; // Total records (for pagination)\n}\n```\n\n## š Internationalization\n\nFull i18n support with multiple localization layers:\n\n```tsx\nimport { frTranslations, enTranslations } from '@21jumpclick/data-table';\nimport { fr } from 'date-fns/locale';\nimport { frFR } from '@mui/material/locale';\n\n\n {/* MUI locale */}\n \n \n\n```\n\n## š Feature Matrix\n\n| Feature | BasicDataTable | ClientDataTable | ServerDataTable |\n|---------|---------------|-----------------|------------|\n| Column sorting | ā
| ā
| ā
|\n| Column filtering | ā
| ā
| ā
|\n| Global search | ā
| ā
| ā
|\n| Pagination | ā
| ā
| ā
|\n| Smart filters | ā
| ā
| ā
|\n| Row selection | ā
| ā
| ā
|\n| Column grouping | ā
| ā
| ā
|\n| Column aggregation | ā
| ā
| ā
|\n| Column pinning | ā
| ā
| ā
|\n| URL state sharing | ā
| ā
| ā
|\n| Loading states | - | ā
| ā
|\n| Refresh button | - | ā
| ā
|\n\n## š TypeScript Support\n\nFull TypeScript support with comprehensive type definitions:\n\n```tsx\nimport type { \n ColumnDef,\n BasicDataTableProps,\n ClientDataTableRef,\n DefaultTableState \n} from '@21jumpclick/data-table';\n\n// All components are fully typed\n// IntelliSense works out of the box\n// Type-safe column definitions\n// Proper ref typing\n```\n\n## š Examples & Documentation\n\n- **Live Demo:** [Complete example app](./src/App.tsx) with all features demonstrated\n- **Column Types:** [Custom column implementations](./src/ColumnTypeDef/)\n- **Smart Filters:** [Advanced filtering examples](./src/CustomSmartFilters/)\n- **Theming:** [Theme customization guide](./src/theme.ts)\n- **Type Definitions:** [Extended table types](./lib/table.d.ts)\n\n## š Built With\n\n- **[TanStack Table v8](https://tanstack.com/table/latest)** - Powerful table logic\n- **[Material-UI v5/v6](https://mui.com/)** - Beautiful, accessible components\n- **[TanStack Query v5](https://tanstack.com/query/latest)** - Server state management\n- **[TypeScript](https://www.typescriptlang.org/)** - Type safety and great DX\n\n## š License\n\nMIT Ā© [21JumpClick](https://github.com/21JumpClick/DataTable)\n\n---\n\n**Ready to build amazing data tables?** Start with our [Quick Start](#-quick-start) guide or explore the [live examples](./src/App.tsx) to see all features in action! š\n","readmeFilename":"README.md"}