{"_id":"@abhishek_papl/mat-react-reusable-table","_rev":"6-d61faf2c2f50009bc4742ab340e3f955","name":"@abhishek_papl/mat-react-reusable-table","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.0":{"name":"@abhishek_papl/mat-react-reusable-table","version":"1.0.0","keywords":["react","table","data-table","grid","sortable","filterable","pagination","selection","export","csv","material-design","component","reusable","typescript","mui","react-table","data-grid"],"author":{"url":"https://github.com/uiexpert-pump","name":"Abhishek Nayak","email":"uiexpert@pumpacademy.in"},"license":"MIT","_id":"@abhishek_papl/mat-react-reusable-table@1.0.0","maintainers":[{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"}],"homepage":"https://github.com/uiexpert-pump/React_MatTable/blob/main/README.md","bugs":{"url":"https://github.com/yourusername/mat-react-reusable-table/issues"},"dist":{"shasum":"55ed49cecbc6e2106305d7604c5501bd9b5bb5ef","tarball":"https://registry.npmjs.org/@abhishek_papl/mat-react-reusable-table/-/mat-react-reusable-table-1.0.0.tgz","fileCount":10,"integrity":"sha512-YDWrkv7A2A0UQZ039rY1H1HhuJ2wMTVROAt2Jljs+E2DZzoPmpxAWJZ9fQnDumuJU4wddqzHEQxQKCkXnpjmMQ==","signatures":[{"sig":"MEYCIQC0RNSIr9FS3VzbVOK0KPl8sK1Ujb29fzr2mRejelarWAIhAM/72zc6lhyG5Dquj8LvpGK5ooMKhOvqmOESwmkw2Shy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2661299},"main":"dist/index.umd.js","types":"dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./styles":"./dist/mat-react-reusable-table.css"},"gitHead":"5aebd80e2e48fb73b955f91df737639308b2ee5e","scripts":{"dev":"vite","lint":"tsc --noEmit","test":"echo \"Error: no test specified\" && exit 1","build":"tsc && vite build","preview":"vite preview","build:lib":"vite build --mode lib","type-check":"tsc --noEmit"},"_npmUser":{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"},"repository":{"url":"git+https://github.com/uiexpert-pump/React_MatTable.git","type":"git"},"_npmVersion":"11.8.0","description":"A powerful, feature-rich, and easy-to-use React table component library with support for selection, sorting, filtering, pagination, export, and more.","directories":{},"sideEffects":false,"_nodeVersion":"24.13.1","dependencies":{"jspdf":"^4.2.1","react":">=18.0.0","react-dom":">=18.0.0","html2canvas":"^1.4.1","@mui/material":"^9.0.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^9.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.8","typescript":"^6.0.2","@types/node":"^25.5.2","@types/react":"^19.0.1","@types/react-dom":"^19.0.1","@vitejs/plugin-react":"^4.7.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mat-react-reusable-table_1.0.0_1776418801007_0.7215178979369323","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.2":{"name":"@abhishek_papl/mat-react-reusable-table","version":"1.0.2","_id":"@abhishek_papl/mat-react-reusable-table@1.0.2","maintainers":[{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"}],"dist":{"shasum":"63ffd9395f4c9df132b6a755255e8dd3ad66c96f","tarball":"https://registry.npmjs.org/@abhishek_papl/mat-react-reusable-table/-/mat-react-reusable-table-1.0.2.tgz","fileCount":10,"integrity":"sha512-ff/dxPrD3O5mXWUJ0xI5ykBoacM5Qz/ORDNsyoxObk7f1UGBZepHFoyDKML79woR6G3KtGNcr/tjfNBpxCrnsA==","signatures":[{"sig":"MEQCIDY5HHbdXn4YyVe4YS53HGGGqolMQjGyel+9msZHGjvuAiBMLe7uVll0IrkQvO8Vmy1czOoIbq+/bDZE33IbKi/Lcg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1215862},"main":"dist/index.es.js","type":"module","types":"dist/index.d.ts","exports":{".":"./dist/index.es.js","./styles":"./dist/mat-react-reusable-table.css"},"gitHead":"b141fead8ea21b4a6f8b9329a5bd70fcd4119bab","scripts":{"build":"tsc && vite build"},"_npmUser":{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"},"_npmVersion":"11.8.0","description":"A powerful, feature-rich React table component library","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.13.1","dependencies":{"jspdf":"^4.2.1","html2canvas":"^1.4.1"},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mui/material":"^9.0.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mat-react-reusable-table_1.0.2_1776427638483_0.32010487477129734","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.4":{"name":"@abhishek_papl/mat-react-reusable-table","version":"1.0.4","license":"MIT","_id":"@abhishek_papl/mat-react-reusable-table@1.0.4","maintainers":[{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"}],"dist":{"shasum":"164fdbbe87994dcb63e81026a93829f75ae90773","tarball":"https://registry.npmjs.org/@abhishek_papl/mat-react-reusable-table/-/mat-react-reusable-table-1.0.4.tgz","fileCount":26,"integrity":"sha512-FldP/UQfG6qZNS1AVA1fSD746lMoE1BSdNX+LbFR2q+LQODGjnUqp958Amt88DgNlxTvnjCETyoxEaeUAnzp3w==","signatures":[{"sig":"MEYCIQCBUcvqRWIgZ3jEhCLiGytKVMSOhG4IGVarnGLms/WSQgIhALuxp7IWLiu/5lRlvFuw2EL+r001lp8OF6eUDbdswcuz","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1233405},"main":"dist/index.es.js","type":"module","types":"dist/index.d.ts","exports":{".":"./dist/index.es.js","./styles":"./dist/mat-react-reusable-table.css"},"gitHead":"e6c3934818280f06cb32ab030220236312e169a7","scripts":{"build":"tsc -p tsconfig.build.json && vite build"},"_npmUser":{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"},"_npmVersion":"11.8.0","description":"A powerful, feature-rich React table component library","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.13.1","dependencies":{"jspdf":"^4.2.1","html2canvas":"^1.4.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.8","typescript":"^6.0.3","@types/node":"^25.6.0","vite-plugin-dts":"^4.5.4","@vitejs/plugin-react":"^6.0.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mui/material":"^9.0.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mat-react-reusable-table_1.0.4_1776505833060_0.5352903730682177","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6":{"name":"@abhishek_papl/mat-react-reusable-table","version":"1.0.6","license":"MIT","_id":"@abhishek_papl/mat-react-reusable-table@1.0.6","maintainers":[{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"}],"dist":{"shasum":"b42e46e9792bd9778c63a644ab5faa39743b884e","tarball":"https://registry.npmjs.org/@abhishek_papl/mat-react-reusable-table/-/mat-react-reusable-table-1.0.6.tgz","fileCount":26,"integrity":"sha512-vLXMSoi6K1lLTl9afH94pZajAGVvEcm9KfbCcF3DH0jbVOmjxfuTCcRg7VluE8vMKDts0qFuIzMEbQoiJw7Nbw==","signatures":[{"sig":"MEUCIQDZbM3y/dKSzFWSjRRXfLmuZ8sCPX9TIElGBOzWCQMQ+gIgEIrhFRt2Q0x1PvwBAMRQKLiCWhFEy8+nv+vyeoLAy8o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1233567},"main":"./dist/index.es.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","default":"./dist/index.es.js"},"./styles":{"default":"./dist/mat-react-reusable-table.css"}},"gitHead":"9ba49b5aee4a9033472afcb7afbbc74bb6bf7d9b","scripts":{"build":"tsc -p tsconfig.build.json && vite build"},"_npmUser":{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"},"_npmVersion":"11.8.0","description":"A powerful, feature-rich React table component library","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.13.1","dependencies":{"jspdf":"^4.2.1","html2canvas":"^1.4.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.8","typescript":"^6.0.3","@types/node":"^25.6.0","vite-plugin-dts":"^4.5.4","@vitejs/plugin-react":"^6.0.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mui/material":"^9.0.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mat-react-reusable-table_1.0.6_1776506415541_0.168523970220686","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.7":{"name":"@abhishek_papl/mat-react-reusable-table","version":"1.0.7","license":"MIT","_id":"@abhishek_papl/mat-react-reusable-table@1.0.7","maintainers":[{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"}],"dist":{"shasum":"3a27273afeada0f3acd9e868806348dd187a040d","tarball":"https://registry.npmjs.org/@abhishek_papl/mat-react-reusable-table/-/mat-react-reusable-table-1.0.7.tgz","fileCount":26,"integrity":"sha512-Vt4Efg6aBkE+tGNe6Y4rbNfSsmO6G4d/UmapNp2tFQslrvNsQdGxsgMPnfJdIOOBuSWNtFGF3ldpilJTDmOtyQ==","signatures":[{"sig":"MEUCIDC2608oovJUbLJ/O/qv0Yy+rpWQDHSEb+mRKsLJdjLQAiEA35U41XiQ4jaF5u2yx6nJvTprvj0n8iiCn+RCtQuImSg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1233586},"main":"./dist/index.es.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","default":"./dist/index.es.js"},"./styles":{"default":"./dist/mat-react-reusable-table.css"}},"gitHead":"6b37a558676acab7358b7e50845a8bcdd9a62909","scripts":{"build":"tsc -p tsconfig.build.json && vite build"},"_npmUser":{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"},"_npmVersion":"11.8.0","description":"A powerful, feature-rich React table component library","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.13.1","dependencies":{"jspdf":"^4.2.1","html2canvas":"^1.4.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.8","typescript":"^6.0.3","@types/node":"^25.6.0","vite-plugin-dts":"^4.5.4","@vitejs/plugin-react":"^6.0.1"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@mui/material":"^9.0.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mat-react-reusable-table_1.0.7_1776507316560_0.3407607854831709","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2026-04-17T09:40:00.913Z","modified":"2026-04-22T06:39:42.228Z","1.0.0":"2026-04-17T09:40:01.265Z","1.0.2":"2026-04-17T12:07:18.776Z","1.0.4":"2026-04-18T09:50:33.210Z","1.0.6":"2026-04-18T10:00:15.734Z","1.0.7":"2026-04-18T10:15:16.853Z"},"license":"MIT","description":"A powerful, feature-rich React table component library","maintainers":[{"name":"abhishek_papl","email":"uiexpert@pumpacademy.in"}],"readme":"# MAT React Reusable Table Library\r\n\r\n\r\nA powerful, feature-rich, and easy-to-use React table component library with support for selection, sorting, filtering, pagination, export, and more.\r\n\r\n> **Current Status**: Production Ready ✅\r\n\r\n## 🚀 Quick Installation\r\n\r\n### npm\r\n\r\n```bash\r\nnpm install @abhishek_papl/mat-react-reusable-table\r\n```\r\n\r\n### yarn\r\n\r\n```bash\r\nyarn add @abhishek_papl/mat-react-reusable-table\r\n```\r\n\r\n### pnpm\r\n\r\n```bash\r\npnpm add @abhishek_papl/mat-react-reusable-table\r\n```\r\n\r\n## 📦 Requirements\r\n\r\n- React >=18.0.0\r\n- React DOM >=18.0.0\r\n\r\n## 📋 Features\r\n\r\n### ✅ Implemented (Phase 1 - Core)\r\n\r\n- **Selection**\r\n  - Multi-select rows with checkboxes\r\n  - Single-select rows with radio buttons\r\n  - Header checkbox for select all/none\r\n  - Row selection state management\r\n  - External selection control\r\n\r\n- **Columns**\r\n  - Column visibility toggling (hide/show)\r\n  - Sortable columns with visual indicators (↑ ↓ ⇅)\r\n  - Custom column rendering\r\n  - Column width configuration\r\n  - Type-aware column handling (text, number, date, checkbox, select, custom)\r\n\r\n- **Rows**\r\n  - Row editing capabilities (inline editing)\r\n  - Row deletion\r\n  - Row highlighting (automatic total row detection)\r\n  - Average row highlighting support\r\n  - Scroll to specific row\r\n  - Custom row styling\r\n  - Row click callbacks\r\n\r\n- **Appearance**\r\n  - Light and dark mode support\r\n  - Fixed headers\r\n  - Row hover effects\r\n  - Responsive design\r\n  - Custom fonts support\r\n  - Material Design inspired styling\r\n  - CSS variables for theming\r\n\r\n### 🔄 In Progress / Planned (Phase 2-3)\r\n\r\n- **Search/Filter**\r\n  - Full-text search across visible columns\r\n  - Column-specific filtering with dropdowns\r\n  - Case-sensitive search option\r\n  - Multiple filter combinations\r\n\r\n- **Export**\r\n  - CSV export with filtered data option\r\n  - PDF export (planned)\r\n  - Print functionality\r\n  - `getExportData()` utility for programmatic access\r\n\r\n- **Pagination**\r\n  - Custom rows per page\r\n  - Page navigation\r\n  - Toggle pagination on/off\r\n  - Rows per page selector (5, 10, 25, 50, 100)\r\n\r\n- **Advanced**\r\n  - Controlled table state management\r\n  - Custom toolbar system with multiple modes\r\n  - Row grouping\r\n  - Virtual scrolling for large datasets\r\n  - Keyboard navigation\r\n\r\n## 📁 Project Structure\r\n\r\n```\r\nmat-react-reusable-table/\r\n├── src/\r\n│   ├── components/             # React components\r\n│   │   ├── Table.tsx          # Main table component\r\n│   │   ├── TableHead.tsx      # Table header with sorting\r\n│   │   ├── TableBody.tsx      # Table body with rows\r\n│   │   ├── TableRow.tsx       # Individual row component\r\n│   │   ├── TableCell.tsx      # Table cell with edit mode\r\n│   │   ├── TableToolbar.tsx   # Toolbar with search & export\r\n│   │   ├── Pagination.tsx     # Pagination controls\r\n│   │   └── index.ts           # Components export\r\n│   ├── context/               # React Context\r\n│   │   └── TableContext.tsx   # Global table state\r\n│   ├── hooks/                 # Custom hooks\r\n│   │   └── index.ts           # All table hooks\r\n│   │       ├── useRowSelection()\r\n│   │       ├── useSorting()\r\n│   │       ├── useFiltering()\r\n│   │       ├── useSearch()\r\n│   │       ├── usePagination()\r\n│   │       ├── useRowEditing()\r\n│   │       ├── useColumnVisibility()\r\n│   │       ├── useTableTheme()\r\n│   │       └── useExport()\r\n│   ├── types/                 # TypeScript types\r\n│   │   └── index.ts           # All type definitions\r\n│   ├── utils/                 # Utility functions\r\n│   │   └── tableUtils.ts      # Table operations\r\n│   ├── styles/                # CSS styles\r\n│   │   └── table.css          # Main table stylesheet\r\n│   └── index.ts               # Library entry point\r\n├── package.json\r\n├── tsconfig.json\r\n├── vite.config.ts\r\n└── README.md\r\n```\r\n\r\n## � Basic Usage\r\n\r\n```tsx\r\nimport React, { useState } from \"react\";\r\nimport { Table, Column, RowData } from \"@abhishek_papl/mat-react-reusable-table\";\r\nimport \"@abhishek_papl/mat-react-reusable-table/styles\";\r\n\r\ninterface User extends RowData {\r\n  id: number;\r\n  name: string;\r\n  email: string;\r\n  age: number;\r\n  status: string;\r\n}\r\n\r\nconst App = () => {\r\n  const [data] = useState<User[]>([\r\n    {\r\n      id: 1,\r\n      name: \"John Doe\",\r\n      email: \"john@example.com\",\r\n      age: 28,\r\n      status: \"Active\",\r\n    },\r\n    {\r\n      id: 2,\r\n      name: \"Jane Smith\",\r\n      email: \"jane@example.com\",\r\n      age: 34,\r\n      status: \"Active\",\r\n    },\r\n    // More data...\r\n  ]);\r\n\r\n  const columns: Column<User>[] = [\r\n    {\r\n      id: \"name\",\r\n      header: \"Name\",\r\n      accessor: \"name\",\r\n      sortable: true,\r\n      filterable: true,\r\n    },\r\n    { id: \"email\", header: \"Email\", accessor: \"email\", sortable: true },\r\n    {\r\n      id: \"age\",\r\n      header: \"Age\",\r\n      accessor: \"age\",\r\n      sortable: true,\r\n      type: \"number\",\r\n    },\r\n    {\r\n      id: \"status\",\r\n      header: \"Status\",\r\n      accessor: \"status\",\r\n      type: \"select\",\r\n      filterOptions: [\"Active\", \"Inactive\"],\r\n    },\r\n  ];\r\n\r\n  return (\r\n    <Table\r\n      columns={columns}\r\n      data={data}\r\n      rowKey=\"id\"\r\n      selectionMode=\"multi\"\r\n      enablePagination\r\n      enableSearch\r\n      enableExport\r\n      enableToolbar\r\n      theme=\"light\"\r\n      fixedHeader\r\n      responsive\r\n    />\r\n  );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n## 🎯 Component API\r\n\r\n### Table Component Props\r\n\r\n```tsx\r\ninterface TableProps<T extends RowData = RowData> {\r\n  // Data\r\n  columns: Column<T>[];\r\n  data: T[];\r\n  rowKey?: keyof T | ((row: T, index: number) => string | number);\r\n\r\n  // Selection\r\n  selectionMode?: \"single\" | \"multi\" | \"none\";\r\n  selectedRows?: Set<string | number>;\r\n  onSelectionChange?: (selected: Set<string | number>) => void;\r\n\r\n  // State Management\r\n  page?: number;\r\n  onPageChange?: (page: number) => void;\r\n  rowsPerPage?: number;\r\n  onRowsPerPageChange?: (rowsPerPage: number) => void;\r\n  sortConfig?: SortConfig;\r\n  onSortChange?: (sortConfig: SortConfig) => void;\r\n  filters?: FilterState;\r\n  onFiltersChange?: (filters: FilterState) => void;\r\n  searchQuery?: string;\r\n  onSearchChange?: (query: string) => void;\r\n\r\n  // Features\r\n  enablePagination?: boolean;\r\n  enableSearch?: boolean;\r\n  enableExport?: boolean;\r\n  enableToolbar?: boolean;\r\n  toolbarMode?: \"csv-pdf-print\" | \"pdf-print\" | \"print\" | \"none\";\r\n  enableHideColumns?: boolean;\r\n  enableColumnSorting?: boolean;\r\n  enableRowEditing?: boolean;\r\n  enableRowDeletion?: boolean;\r\n\r\n  // Row Styling\r\n  rowHighlightConfig?: {\r\n    detectTotal?: boolean;\r\n    getTotalRowIndex?: (rows: T[]) => number | null;\r\n    highlightAverageRow?: boolean;\r\n    highlightedRowIds?: (string | number)[];\r\n  };\r\n  scrollToRowIndex?: number;\r\n\r\n  // Callbacks\r\n  onRowClick?: (row: T, rowIndex: number) => void;\r\n  onRowEdit?: (row: T, changes: Partial<T>, rowIndex: number) => void;\r\n  onRowDelete?: (row: T, rowIndex: number) => void;\r\n  onExport?: (data: ExportData, format: ExportFormat) => void;\r\n\r\n  // Appearance\r\n  className?: string;\r\n  theme?: \"light\" | \"dark\";\r\n  fixedHeader?: boolean;\r\n  hoverHighlight?: boolean;\r\n  responsive?: boolean;\r\n  customFonts?: { fontFamily?: string; fontSize?: string };\r\n}\r\n```\r\n\r\n## 🪝 Custom Hooks\r\n\r\nAll hooks require the table to be wrapped with `TableProvider`:\r\n\r\n```tsx\r\nimport {\r\n  useRowSelection,\r\n  useSorting,\r\n  useFiltering,\r\n  useSearch,\r\n  usePagination,\r\n  useRowEditing,\r\n  useColumnVisibility,\r\n  useTableTheme,\r\n  useExport,\r\n} from \"mat-react-reusable-table\";\r\n\r\n// Example: useRowSelection\r\nconst { selectedRows, selectRow, selectAll, isRowSelected } = useRowSelection();\r\n\r\n// Example: usePagination\r\nconst { currentPage, totalPages, setPage, nextPage, prevPage } =\r\n  usePagination();\r\n\r\n// Example: useSearch\r\nconst { searchQuery, setSearch, clearSearch } = useSearch();\r\n```\r\n\r\n## 🎨 Theming\r\n\r\n### Built-in Themes\r\n\r\n```tsx\r\n<Table theme=\"light\" />  // Default light theme\r\n<Table theme=\"dark\" />   // Dark mode\r\n```\r\n\r\n### Custom Styles\r\n\r\nThe library uses CSS variables for easy customization:\r\n\r\n```css\r\n:root {\r\n  --mat-primary-color: #1976d2;\r\n  --mat-border-color: #e0e0e0;\r\n  --mat-hover-bg: #f5f5f5;\r\n  --mat-text-color: #333;\r\n  --mat-bg-color: #fff;\r\n  /* More variables in src/styles/table.css */\r\n}\r\n```\r\n\r\n## 📊 Column Configuration\r\n\r\n```tsx\r\ninterface Column<T = any> {\r\n  id: string; // Unique column ID\r\n  header: string; // Column header text\r\n  accessor: keyof T | ((row: T) => any); // Data accessor\r\n  sortable?: boolean; // Enable sorting\r\n  filterable?: boolean; // Enable filtering\r\n  editable?: boolean; // Enable inline editing\r\n  width?: string | number; // Column width\r\n  hidden?: boolean; // Hide column\r\n  type?: \"text\" | \"number\" | \"date\" | \"checkbox\" | \"select\" | \"custom\";\r\n  render?: (value: any, row: T, index: number) => React.ReactNode;\r\n  filterOptions?: string[] | number[]; // Filter dropdown options\r\n  className?: string; // Custom CSS class\r\n}\r\n```\r\n\r\n## 🛠️ Utility Functions\r\n\r\n```tsx\r\nimport {\r\n  getRowId,\r\n  getCellValue,\r\n  filterRowsBySearch,\r\n  filterRowsByColumns,\r\n  sortRows,\r\n  detectTotalRow,\r\n  calculateColumnAverage,\r\n  groupRowsByColumn,\r\n  getVisibleColumns,\r\n  exportToCSV,\r\n  exportToPrintText,\r\n  isAverageRow,\r\n  generateRowId,\r\n  cloneRowData,\r\n  mergeRowChanges,\r\n  hasUnsavedChanges,\r\n} from \"mat-react-reusable-table\";\r\n```\r\n\r\n## 🚀 Build & Development\r\n\r\n### Development Server\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n### Build Library\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\n### Type Checking\r\n\r\n```bash\r\nnpm run type-check\r\n```\r\n\r\n## 📦 Distribution\r\n\r\nThe library is built for both ES modules and UMD:\r\n\r\n- **ES Module**: `dist/index.es.js`\r\n- **Types**: `dist/index.d.ts`\r\n- **Styles**: `dist/styles/table.css`\r\n\r\n## 🗓️ Development Roadmap\r\n\r\n### Phase 1 ✅ (Complete)\r\n\r\n- Core components setup\r\n- Selection system\r\n- Sorting and column management\r\n- Row editing/deletion\r\n- Theme support\r\n- Responsive design\r\n\r\n### Phase 2 🔄 (In Progress)\r\n\r\n- [ ] Advanced filtering with multiple conditions\r\n- [ ] Full-text search optimization\r\n- [ ] PDF export functionality\r\n- [ ] Row grouping\r\n- [ ] Column reordering (drag & drop)\r\n\r\n### Phase 3 📋 (Planned)\r\n\r\n- [ ] Virtual scrolling for large datasets\r\n- [ ] Keyboard navigation\r\n- [ ] Accessibility (ARIA) enhancements\r\n- [ ] Custom cell validation\r\n- [ ] Row history/undo-redo\r\n- [ ] Calendar year/month summary views\r\n\r\n## 📝 License\r\n\r\nMIT\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! Please feel free to submit PRs or open issues for bugs and feature requests.\r\n\r\n## 📧 Support\r\n\r\nFor questions and support, please create an issue in the repository.\r\n\r\n---\r\n\r\n**Built with ❤️ using React + TypeScript + Vite**\r\n","readmeFilename":"README.md"}