{"_id":"@abdasis/datatable","_rev":"2-390de0e6931f70089e93018e2b3f4597","name":"@abdasis/datatable","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@abdasis/datatable","version":"1.0.0","keywords":["react","datatable","table","nextjs","tailwindcss","shadcn","ui","tanstack","typescript"],"author":{"name":"QuickPay Team"},"license":"MIT","_id":"@abdasis/datatable@1.0.0","maintainers":[{"name":"abdasis","email":"id.abdasis@gmail.com"}],"homepage":"https://github.com/abdasis/datatable#readme","bugs":{"url":"https://github.com/abdasis/datatable/issues"},"dist":{"shasum":"bb4e9e526f5f3b60d9e3eeaac899a3aca602beb5","tarball":"https://registry.npmjs.org/@abdasis/datatable/-/datatable-1.0.0.tgz","fileCount":10,"integrity":"sha512-NotPNcFa5HROQJEsvNWxZTCY52A6m4NpMj4a51U7tyYYrgBtokkFICwJiFLJqW4NXRtvqNGodNmLiL0x3asIvg==","signatures":[{"sig":"MEQCIHddCnvACkRVMvgar89irR2uWS1mmGIAR9Rb9bTLM/uuAiBFVMQHyX/ZXpPQeq+74Dyq1LDyEqXoLzo3iCveqb9shQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":295654},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepare":"npm run build","lint:fix":"eslint src --ext .ts,.tsx --fix"},"_npmUser":{"name":"abdasis","actor":{"name":"abdasis","type":"user","email":"id.abdasis@gmail.com"},"email":"id.abdasis@gmail.com"},"repository":{"url":"git+https://github.com/abdasis/datatable.git","type":"git"},"_npmVersion":"10.9.2","description":"A powerful and configurable DataTable component with TailwindCSS and shadcn/ui for Next.js applications","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","eslint":"^8.0.0","rollup":"^4.0.0","typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup-plugin-dts":"^6.0.0","eslint-plugin-react":"^7.33.0","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-typescript":"^11.0.0","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.0.0","@typescript-eslint/eslint-plugin":"^6.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"clsx":"^2.0.0","react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":"^3.0.0","lucide-react":"^0.400.0","tailwind-merge":"^2.0.0","@tanstack/react-table":"^8.0.0","class-variance-authority":"^0.7.0","@tanstack/match-sorter-utils":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/datatable_1.0.0_1751298303369_0.3124045741713457","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@abdasis/datatable","version":"1.0.1","description":"A powerful and configurable DataTable component with TailwindCSS and shadcn/ui for Next.js applications","type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","prepare":"npm run build","test":"jest","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix"},"keywords":["react","datatable","table","nextjs","tailwindcss","shadcn","ui","tanstack","typescript"],"author":{"name":"QuickPay Team"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/abdasis/datatable.git"},"bugs":{"url":"https://github.com/abdasis/datatable/issues"},"homepage":"https://github.com/abdasis/datatable#readme","peerDependencies":{"@tanstack/match-sorter-utils":"^8.0.0","@tanstack/react-table":"^8.0.0","class-variance-authority":"^0.7.0","clsx":"^2.0.0","lucide-react":"^0.400.0","react":">=18.0.0","react-dom":">=18.0.0","tailwind-merge":"^2.0.0","tailwindcss":"^3.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-typescript":"^11.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","eslint":"^8.0.0","eslint-plugin-react":"^7.33.0","eslint-plugin-react-hooks":"^4.6.0","rollup":"^4.0.0","rollup-plugin-dts":"^6.0.0","rollup-plugin-peer-deps-external":"^2.2.4","tslib":"^2.8.1","typescript":"^5.0.0"},"_id":"@abdasis/datatable@1.0.1","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Q0x4nu23Bt+WcGFcQHHEFwvkVQY1xMPt233XtHfQEynn8Mi6Yi8gzW2Ve+yyz7wyI8/LxoYbwACX8pFKMs2mbw==","shasum":"5eb8d83ff52f509d51f1f8cce9283e368942e754","tarball":"https://registry.npmjs.org/@abdasis/datatable/-/datatable-1.0.1.tgz","fileCount":10,"unpackedSize":295649,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEMCHzCGWOA/x7Nu7x7IQ1E2i0jnf8fv+oULi3FjtSfaTMYCIDACaRa91xurAVHisWhq8joS0M0Z3hO/pRCeO2RxkoiV"}]},"_npmUser":{"name":"abdasis","email":"id.abdasis@gmail.com","actor":{"name":"abdasis","email":"id.abdasis@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"abdasis","email":"id.abdasis@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/datatable_1.0.1_1751298408714_0.5701741519984296"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-30T15:45:03.266Z","modified":"2025-06-30T15:46:49.071Z","1.0.0":"2025-06-30T15:45:03.545Z","1.0.1":"2025-06-30T15:46:48.895Z"},"bugs":{"url":"https://github.com/abdasis/datatable/issues"},"author":{"name":"QuickPay Team"},"license":"MIT","homepage":"https://github.com/abdasis/datatable#readme","keywords":["react","datatable","table","nextjs","tailwindcss","shadcn","ui","tanstack","typescript"],"repository":{"type":"git","url":"git+https://github.com/abdasis/datatable.git"},"description":"A powerful and configurable DataTable component with TailwindCSS and shadcn/ui for Next.js applications","maintainers":[{"name":"abdasis","email":"id.abdasis@gmail.com"}],"readme":"# @abdasis/datatable\n\nA powerful, configurable, and modern DataTable component for React/Next.js applications with TailwindCSS and shadcn/ui support.\n\n## ✨ Features\n\n- 🚀 **Client & Server-side rendering** support\n- 🎨 **Customizable UI** with your own shadcn/ui components\n- 🔧 **Advanced configuration panel** with persistent settings\n- 📱 **Responsive design** with mobile-friendly interface\n- 🔍 **Global search & column filtering**\n- 📊 **Sorting, pagination & row selection**\n- 💾 **localStorage persistence** for table configurations\n- 📤 **Export functionality** support\n- 🎯 **TypeScript first** with full type safety\n- ⚡ **Performance optimized** with memo and callbacks\n\n## 📦 Installation\n\n```bash\nnpm install @abdasis/datatable\n# or\nyarn add @abdasis/datatable\n# or\npnpm add @abdasis/datatable\n```\n\n### Peer Dependencies\n\nMake sure you have these dependencies installed:\n\n```bash\nnpm install react react-dom @tanstack/react-table @tanstack/match-sorter-utils lucide-react tailwindcss class-variance-authority clsx tailwind-merge\n```\n\n## 🚀 Quick Start\n\n### 1. Prepare Your UI Components\n\nThe package requires you to provide your own UI components (typically from shadcn/ui):\n\n```tsx\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/ui/table\";\n// ... import other UI components\n\nconst uiComponents = {\n Button,\n Input,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n // ... other components\n};\n```\n\n### 2. Basic Usage\n\n```tsx\nimport { DataTable, type ColumnDef } from \"@abdasis/datatable\";\n\ninterface User {\n id: number;\n name: string;\n email: string;\n status: \"active\" | \"inactive\";\n}\n\nconst columns: ColumnDef[] = [\n {\n id: \"name\",\n header: \"Name\",\n accessorKey: \"name\",\n },\n {\n id: \"email\",\n header: \"Email\",\n accessorKey: \"email\",\n },\n {\n id: \"status\",\n header: \"Status\",\n accessorKey: \"status\",\n },\n];\n\nconst data: User[] = [\n { id: 1, name: \"John Doe\", email: \"john@example.com\", status: \"active\" },\n { id: 2, name: \"Jane Smith\", email: \"jane@example.com\", status: \"inactive\" },\n];\n\nfunction MyTable() {\n return (\n \n );\n}\n```\n\n## 📋 Required UI Components\n\nYou need to provide these components from your UI library (e.g., shadcn/ui):\n\n```tsx\ninterface UIComponents {\n // Basic components\n Button: React.ComponentType;\n Input: React.ComponentType;\n\n // Table components\n Table: React.ComponentType;\n TableBody: React.ComponentType;\n TableCell: React.ComponentType;\n TableHead: React.ComponentType;\n TableHeader: React.ComponentType;\n TableRow: React.ComponentType;\n\n // Form components\n Checkbox: React.ComponentType;\n Select: React.ComponentType;\n SelectContent: React.ComponentType;\n SelectItem: React.ComponentType;\n SelectTrigger: React.ComponentType;\n SelectValue: React.ComponentType;\n\n // Dropdown components\n DropdownMenu: React.ComponentType;\n DropdownMenuCheckboxItem: React.ComponentType;\n DropdownMenuContent: React.ComponentType;\n DropdownMenuItem: React.ComponentType;\n DropdownMenuLabel: React.ComponentType;\n DropdownMenuSeparator: React.ComponentType;\n DropdownMenuTrigger: React.ComponentType;\n\n // Other components\n Badge: React.ComponentType;\n}\n```\n\n### For TableConfigPanel (additional components):\n\n```tsx\ninterface TableConfigUIComponents {\n // All UIComponents above, plus:\n Switch: React.ComponentType;\n Label: React.ComponentType;\n Popover: React.ComponentType;\n PopoverContent: React.ComponentType;\n PopoverTrigger: React.ComponentType;\n Collapsible: React.ComponentType;\n CollapsibleContent: React.ComponentType;\n CollapsibleTrigger: React.ComponentType;\n Separator: React.ComponentType;\n}\n```\n\n## 🎛️ Configuration Panel\n\nEnable the advanced configuration panel for your users:\n\n```tsx\n {\n console.log(\"Configuration changed:\", config);\n }}\n/>\n```\n\nThe configuration panel provides:\n\n- View mode toggle (List/Board)\n- Column visibility controls\n- Sorting and filtering options\n- Persistent settings via localStorage\n\n## 🖥️ Server-Side Rendering\n\nFor server-side data fetching and pagination:\n\n```tsx\n {\n // Handle server-side sorting\n },\n onColumnFiltersChange: (filters) => {\n // Handle server-side filtering\n },\n onPaginationChange: (pagination) => {\n // Handle server-side pagination\n },\n onGlobalFilterChange: (globalFilter) => {\n // Handle server-side global search\n },\n }}\n uiComponents={uiComponents}\n/>\n```\n\n## 🎨 Customization Examples\n\n### With Row Actions\n\n```tsx\n console.log(\"Edit\", row),\n icon: ,\n },\n {\n label: \"Delete\",\n onClick: (row) => console.log(\"Delete\", row),\n icon: ,\n variant: \"destructive\",\n },\n ]}\n/>\n```\n\n### With Filterable Columns\n\n```tsx\n\n```\n\n### With Row Selection\n\n```tsx\n {\n console.log(\"Selected rows:\", selectedRows);\n }}\n/>\n```\n\n## 📝 API Reference\n\n### DataTable Props\n\n| Prop | Type | Default | Description |\n| ------------------------ | ------------------------------------------------------------------------------- | ----------- | ------------------------------------------ |\n| `columns` | `ColumnDef[]` | - | **Required.** Column definitions |\n| `data` | `TData[]` | - | **Required.** Table data |\n| `uiComponents` | `UIComponents` | - | **Required.** UI component implementations |\n| `renderMode` | `\"client\" \\| \"server\"` | `\"client\"` | Rendering mode |\n| `serverConfig` | `DataTableServerConfig` | - | Server-side configuration |\n| `enableGlobalFilter` | `boolean` | `true` | Enable global search |\n| `enableColumnFilters` | `boolean` | `true` | Enable column filters |\n| `enableSorting` | `boolean` | `true` | Enable sorting |\n| `enablePagination` | `boolean` | `true` | Enable pagination |\n| `enableRowSelection` | `boolean` | `false` | Enable row selection |\n| `enableColumnVisibility` | `boolean` | `true` | Enable column visibility toggle |\n| `enableConfigPanel` | `boolean` | `false` | Enable advanced config panel |\n| `initialPageSize` | `number` | `10` | Initial page size |\n| `tableId` | `string` | `\"default\"` | Unique identifier for localStorage |\n| `filterableColumns` | `Array<{id: string, title: string}>` | `[]` | Columns that can be filtered |\n| `rowActions` | `Array<{label: string, onClick: Function, icon?: ReactNode, variant?: string}>` | `[]` | Row action buttons |\n| `onRowSelectionChange` | `(selectedRows: TData[]) => void` | - | Row selection callback |\n| `onExport` | `() => void` | - | Export button callback |\n| `onConfigChange` | `(config: TableConfigState) => void` | - | Configuration change callback |\n\n## 🔧 Development\n\n### Setup\n\n```bash\ngit clone \ncd quickpay-datatable-npm\nnpm install\n```\n\n### Build\n\n```bash\nnpm run build\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\n## 📄 License\n\nMIT\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📞 Support\n\nIf you have any questions or issues, please open an issue on our GitHub repository.\n\n---\n\nBuilt with ❤️ by the QuickPay Team\n","readmeFilename":"README.md"}