{"_id":"@aesclo/table","_rev":"2-5fe5195df7577f5616a7b4fea7fa7a61","name":"@aesclo/table","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@aesclo/table","version":"0.2.0","keywords":["react","table","data-table","datagrid","tanstack-table","typescript","tailwindcss","sorting","filtering","pagination","component","library","ui"],"author":{"url":"https://aesclo.com","name":"Aesclo"},"license":"MIT","_id":"@aesclo/table@0.2.0","maintainers":[{"name":"aesclo-dev-team","email":"connectaesclo@gmail.com"}],"homepage":"https://github.com/connectaesclo/aesclo-table#readme","bugs":{"url":"https://github.com/connectaesclo/aesclo-table/issues"},"dist":{"shasum":"8cd99a0c3663180fc4a954de718fe8cfc01d14cc","tarball":"https://registry.npmjs.org/@aesclo/table/-/table-0.2.0.tgz","fileCount":74,"integrity":"sha512-08Q4tbowxzzqFNMez8NdnxBu7IrWlZ0eiRpalNcDeCJoiTT/LsfxEbL7l91dbH4BzOXEONi6X2e24OczdHOgGQ==","signatures":[{"sig":"MEUCIQCEpFd9h+lkJ5P2C/9PtpFUGPr6jvi+P2xLtp8dBciEswIgODMxeBPuvOyqa8QGeIayU4yov0isfo4GfEMbpmwEYb8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13672599},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","engines":{"npm":">=8.0.0","node":">=16.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles":"./dist/style.css","./package.json":"./package.json"},"funding":{"url":"https://github.com/connectaesclo/aesclo-table","type":"github"},"gitHead":"422340d6198e6737711b8af999466eaa908a55dd","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"npm run type-check && npm run build:lib","clean":"rm -rf dist","preview":"vite preview","prebuild":"npm run clean","build:lib":"vite build","type-check":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"aesclo-dev-team","email":"connectaesclo@gmail.com"},"repository":{"url":"git+https://github.com/connectaesclo/aesclo-table.git","type":"git"},"_npmVersion":"11.3.0","description":"A feature-rich data table library built on TanStack Table with React and TypeScript","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.11.0","dependencies":{"clsx":"^2.1.0","xlsx":"^0.18.5","jspdf":"^3.0.4","date-fns":"^3.0.6","papaparse":"^5.4.1","@dnd-kit/core":"^6.3.1","jspdf-autotable":"^5.0.2","@dnd-kit/sortable":"^8.0.0","@dnd-kit/utilities":"^3.2.2","@tanstack/react-table":"^8.11.3","@tanstack/react-virtual":"^3.13.12"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.10","react":"^18.2.0","eslint":"^8.56.0","terser":"^5.44.1","postcss":"^8.4.32","react-dom":"^18.2.0","typescript":"^5.3.3","@types/node":"^20.10.6","tailwindcss":"^3.4.0","@types/react":"^18.2.46","autoprefixer":"^10.4.16","vite-plugin-dts":"^3.7.0","@types/papaparse":"^5.3.14","@types/react-dom":"^18.2.18","@vitejs/plugin-react":"^4.2.1","@typescript-eslint/parser":"^6.17.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","@typescript-eslint/eslint-plugin":"^6.17.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/table_0.2.0_1764705695082_0.20689408011287935","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@aesclo/table","version":"0.2.1","description":"A feature-rich data table library built on TanStack Table with React and TypeScript","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"},"./styles":"./dist/style.css","./package.json":"./package.json"},"scripts":{"dev":"vite","build":"npm run type-check && npm run build:lib","build:lib":"vite build","preview":"vite preview","test":"vitest run","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","type-check":"tsc --noEmit","prepublishOnly":"npm run build","clean":"rm -rf dist","prebuild":"npm run clean"},"repository":{"type":"git","url":"git+https://github.com/connectaesclo/aesclo-table.git"},"homepage":"https://github.com/connectaesclo/aesclo-table#readme","bugs":{"url":"https://github.com/connectaesclo/aesclo-table/issues"},"funding":{"type":"github","url":"https://github.com/connectaesclo/aesclo-table"},"keywords":["react","table","data-table","datagrid","tanstack-table","typescript","tailwindcss","sorting","filtering","pagination","component","library","ui"],"author":{"name":"Aesclo","url":"https://aesclo.com"},"license":"MIT","sideEffects":["**/*.css"],"engines":{"node":">=16.0.0","npm":">=8.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"dependencies":{"@dnd-kit/core":"^6.3.1","@dnd-kit/sortable":"^8.0.0","@dnd-kit/utilities":"^3.2.2","@formkit/auto-animate":"^0.9.0","@tanstack/react-table":"^8.11.3","@tanstack/react-virtual":"^3.13.12","clsx":"^2.1.0","date-fns":"^3.0.6","jspdf":"^3.0.4","jspdf-autotable":"^5.0.2","papaparse":"^5.4.1","recharts":"^3.5.1","xlsx":"^0.18.5"},"devDependencies":{"@testing-library/jest-dom":"^6.4.2","@testing-library/react":"^14.2.1","@types/node":"^20.10.6","@types/papaparse":"^5.3.14","@types/react":"^18.2.46","@types/react-dom":"^18.2.18","@typescript-eslint/eslint-plugin":"^6.17.0","@typescript-eslint/parser":"^6.17.0","@vitejs/plugin-react":"^4.2.1","autoprefixer":"^10.4.16","eslint":"^8.56.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","jsdom":"^22.1.0","postcss":"^8.4.32","react":"^18.2.0","react-dom":"^18.2.0","tailwindcss":"^3.4.0","terser":"^5.44.1","typescript":"^5.3.3","vite":"^5.0.10","vite-plugin-dts":"^3.7.0","vitest":"^1.2.0"},"_id":"@aesclo/table@0.2.1","gitHead":"0c86d2207138906fb41cb1166dfd1837b515adfa","_nodeVersion":"23.11.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-2lKk8XVFJrsbm29C5gm3RpjTXMvTNq8Vcj/ZK+hmtuLWqZP27RDOA5gCyNRsVU6tyq2hBLnAIDbyYpuLhpebhg==","shasum":"623957b5905db865b63fc043700952daffa5977b","tarball":"https://registry.npmjs.org/@aesclo/table/-/table-0.2.1.tgz","fileCount":132,"unpackedSize":15285150,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDBn9MLXAtVzJcpsv/vAl7MfXq0SWUA2rx2KqPhmNcTIAiEAvT/0Bb8FPKwmRwoPArrdSGB2BNvBam12iSrPWtNKEWg="}]},"_npmUser":{"name":"aesclo-dev-team","email":"connectaesclo@gmail.com"},"directories":{},"maintainers":[{"name":"aesclo-dev-team","email":"connectaesclo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/table_0.2.1_1765393501738_0.19229823400496993"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-02T20:01:34.983Z","modified":"2025-12-10T19:05:02.275Z","0.2.0":"2025-12-02T20:01:35.391Z","0.2.1":"2025-12-10T19:05:02.025Z"},"bugs":{"url":"https://github.com/connectaesclo/aesclo-table/issues"},"author":{"name":"Aesclo","url":"https://aesclo.com"},"license":"MIT","homepage":"https://github.com/connectaesclo/aesclo-table#readme","keywords":["react","table","data-table","datagrid","tanstack-table","typescript","tailwindcss","sorting","filtering","pagination","component","library","ui"],"repository":{"type":"git","url":"git+https://github.com/connectaesclo/aesclo-table.git"},"description":"A feature-rich data table library built on TanStack Table with React and TypeScript","maintainers":[{"name":"aesclo-dev-team","email":"connectaesclo@gmail.com"}],"readme":"# @aesclo/table\n\nA feature-rich, enterprise-ready data table library built on TanStack Table with React and TypeScript.\n\n[![npm version](https://img.shields.io/npm/v/@aesclo/table.svg)](https://www.npmjs.com/package/@aesclo/table)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## ✨ Features\n\n### Core Features\n- 🎯 **Sorting** - Multi-column sorting with customizable comparators\n- 🔍 **Filtering** - Global search and per-column filters (text, number, select, date)\n- 📄 **Pagination** - Client-side and server-side pagination support\n- 👁️ **Column Visibility** - Show/hide columns dynamically\n- 📏 **Column Resizing** - Drag to resize columns\n- 📌 **Column Pinning** - Pin columns to left or right\n- 🎨 **Row Selection** - Single and multi-row selection\n- 🔄 **Row Reordering** - Drag-and-drop rows to reorder\n\n### Premium Features\n- ⚡ **Virtual Scrolling** - Handle thousands of rows efficiently\n- ✏️ **Inline Editing** - Edit cells directly in the table\n- 📤 **Export** - Export to CSV, Excel, PDF\n- 📋 **Copy/Paste** - Copy table data to clipboard\n- 🎯 **Context Menu** - Right-click actions on rows\n- 📊 **Master-Detail** - Expandable row details\n- 🔢 **Footer Aggregations** - Sum, average, count, min, max\n- 🌳 **Nested Tables** - Tables within tables\n\n### Enterprise Features\n- 🏗️ **Column Grouping** - Group related columns under headers\n- 💾 **State Persistence** - Save table state to localStorage\n- 🌐 **Server-Side Operations** - Connect to your API\n- ♿ **Accessibility** - WCAG compliant with ARIA attributes and keyboard navigation\n\n## 📦 Installation\n\n```bash\nnpm install @aesclo/table\n```\n\n### Peer Dependencies\n```bash\nnpm install react react-dom\n```\n\n## 🚀 Quick Start\n\n### 1. Import Styles\n```tsx\nimport '@aesclo/table/styles.css';\n```\n\n### 2. Basic Usage\n```tsx\nimport { DataTable } from '@aesclo/table';\n\nfunction App() {\n  const data = [\n    { id: 1, name: 'John Doe', age: 28, email: 'john@example.com' },\n    { id: 2, name: 'Jane Smith', age: 32, email: 'jane@example.com' },\n  ];\n\n  const columns = [\n    { accessorKey: 'name', header: 'Name' },\n    { accessorKey: 'age', header: 'Age' },\n    { accessorKey: 'email', header: 'Email' },\n  ];\n\n  return (\n    <DataTable\n      data={data}\n      columns={columns}\n      enableSorting\n      enableFiltering\n      enablePagination\n    />\n  );\n}\n```\n\n## 📖 Common Use Cases\n\n### Sortable & Filterable Table\n```tsx\n<DataTable\n  data={data}\n  columns={columns}\n  enableSorting\n  enableFiltering\n  enableGlobalFilter\n  striped\n  bordered\n/>\n```\n\n### Server-Side Table\n```tsx\n<DataTable\n  data={data}\n  columns={columns}\n  manualPagination\n  manualSorting\n  manualFiltering\n  onPaginationChange={handlePaginationChange}\n  onSortingChange={handleSortingChange}\n  onFilteringChange={handleFilteringChange}\n  rowCount={totalRows}\n/>\n```\n\n### Editable Table\n```tsx\nconst columns = [\n  {\n    accessorKey: 'name',\n    header: 'Name',\n    editable: true,\n  },\n];\n\n<DataTable\n  data={data}\n  columns={columns}\n  updateData={(rowIndex, columnId, value) => {\n    // Update your data\n  }}\n/>\n```\n\n### Table with Row Selection & Export\n```tsx\n<DataTable\n  data={data}\n  columns={columns}\n  enableRowSelection\n  enableExport\n  onRowSelectionChange={(selectedRows) => {\n    console.log('Selected:', selectedRows);\n  }}\n/>\n```\n\n### Grouped Columns\n```tsx\nconst columns = [\n  {\n    header: 'Personal Info',\n    columns: [\n      { accessorKey: 'firstName', header: 'First Name' },\n      { accessorKey: 'lastName', header: 'Last Name' },\n    ],\n  },\n  {\n    header: 'Contact',\n    columns: [\n      { accessorKey: 'email', header: 'Email' },\n      { accessorKey: 'phone', header: 'Phone' },\n    ],\n  },\n];\n```\n\n### State Persistence\n```tsx\n<DataTable\n  data={data}\n  columns={columns}\n  persistState=\"my-table-key\"\n  // Table state is automatically saved and restored\n/>\n```\n\n## 🎨 Theming\n\nThe table uses CSS variables for easy theming. You can override them in your CSS:\n\n```css\n:root {\n  --table-border-color: #e5e7eb;\n  --table-header-bg: #f9fafb;\n  --table-row-hover-bg: #f3f4f6;\n  --table-selected-bg: #dbeafe;\n}\n```\n\n## 📚 API Reference\n\n### TableProps\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `data` | `TData[]` | required | Array of data objects |\n| `columns` | `TableColumn<TData>[]` | required | Column definitions |\n| `enableSorting` | `boolean` | `true` | Enable column sorting |\n| `enableFiltering` | `boolean` | `true` | Enable column filters |\n| `enableGlobalFilter` | `boolean` | `true` | Enable global search |\n| `enablePagination` | `boolean` | `true` | Enable pagination |\n| `enableRowSelection` | `boolean` | `false` | Enable row selection |\n| `enableColumnPinning` | `boolean` | `false` | Enable column pinning |\n| `enableExpanding` | `boolean` | `false` | Enable row expansion |\n| `enableVirtualization` | `boolean` | `false` | Enable virtual scrolling |\n| `enableExport` | `boolean` | `false` | Enable export buttons |\n| `pageSize` | `number` | `10` | Rows per page |\n| `striped` | `boolean` | `false` | Striped row styling |\n| `bordered` | `boolean` | `false` | Add borders |\n| `hoverable` | `boolean` | `true` | Highlight on hover |\n| `compact` | `boolean` | `false` | Compact row spacing |\n| `persistState` | `string` | - | Key for localStorage persistence |\n\nSee [full API documentation](./API.md) for all props and column options.\n\n## 🛠️ Built With\n\n- [React](https://reactjs.org/) - UI framework\n- [TanStack Table](https://tanstack.com/table) - Headless table logic\n- [TypeScript](https://www.typescriptlang.org/) - Type safety\n- [Tailwind CSS](https://tailwindcss.com/) - Styling\n- [dnd-kit](https://dndkit.com/) - Drag and drop\n- [jsPDF](https://github.com/parallax/jsPDF) - PDF export\n- [xlsx](https://github.com/SheetJS/sheetjs) - Excel export\n\n## 📄 License\n\nMIT © Aesclo\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 🐛 Issues\n\nFound a bug? Please file an issue on [GitHub](https://github.com/connectaesclo/aesclo-table/issues).\n\n## 📞 Support\n\nFor questions and support, please open an issue on GitHub.\n","readmeFilename":"README.md"}