{"_id":"@allem-ui/data-grid","_rev":"4-32bca9770004ba162f457b36e353279b","name":"@allem-ui/data-grid","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@allem-ui/data-grid","version":"0.0.1","keywords":["allem-ui","data-grid","table","sorting","filtering","react","tanstack"],"author":{"url":"https://kingallem.com","name":"Ahmed Allem"},"license":"MIT","_id":"@allem-ui/data-grid@0.0.1","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"homepage":"https://github.com/kingofmit/allem-ui#readme","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"dist":{"shasum":"f0cc07f0ecb4be3b0247a3b5e48e8fb727a8e906","tarball":"https://registry.npmjs.org/@allem-ui/data-grid/-/data-grid-0.0.1.tgz","fileCount":7,"integrity":"sha512-4coSVjG4i5hCA2TMQSczUjd4dGUsCjh1eLP+CKHNPyRomhorVqRts8NbAHu2Gkzp47W7Lit8sa7aS4i5dn6DfQ==","signatures":[{"sig":"MEYCIQCXyX+jUZq2vAYJpIIREcA81Z7weBBhvnC/2GsR0TmRJAIhAMdlNIgqvEwmzXvHhdMDqFZVyhBlea6NGOmiqmotlS0q","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":75846},"main":"./dist/index.js","_from":"file:allem-ui-data-grid-0.0.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/195aabe753d5bf6afa6f6a55a9a39e86/allem-ui-data-grid-0.0.1.tgz","_integrity":"sha512-4coSVjG4i5hCA2TMQSczUjd4dGUsCjh1eLP+CKHNPyRomhorVqRts8NbAHu2Gkzp47W7Lit8sa7aS4i5dn6DfQ==","repository":{"url":"git+https://github.com/kingofmit/allem-ui.git","type":"git","directory":"packages/data-grid"},"_npmVersion":"11.12.1","description":"Advanced data grid with sorting, filtering, and virtualization for Allem UI","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","dependencies":{"@tanstack/react-table":"^8.21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.8.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0","@allem-ui/react":">=0.0.1","@allem-ui/theme":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/data-grid_0.0.1_1779396104820_0.30576713368998165","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@allem-ui/data-grid","version":"0.0.2","keywords":["allem-ui","data-grid","table","sorting","filtering","react","tanstack"],"author":{"url":"https://kingallem.com","name":"Ahmed Allem"},"license":"MIT","_id":"@allem-ui/data-grid@0.0.2","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"homepage":"https://github.com/kingofmit/allem-ui#readme","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"dist":{"shasum":"7e40e967856104015a9426d61fdf2ebe939dc3b2","tarball":"https://registry.npmjs.org/@allem-ui/data-grid/-/data-grid-0.0.2.tgz","fileCount":8,"integrity":"sha512-l+2d9Ph4Hyo03WmihhjDgdLgG3sEwAa6+H/9W6Z5HGbJ0xuSRh28oxSGMatJQxP5aZbD8ynUNIytbbsz42QZZQ==","signatures":[{"sig":"MEYCIQDsQQv/+WXKV274DO9mDtLxPaluiN/aRyzukWDfVarxXAIhAI5vbCXdd6V0WEDvySwx03Qwp7VI8YE14MlEOl/G423O","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78933},"main":"./dist/index.js","_from":"file:allem-ui-data-grid-0.0.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/55b9207953bb405aace68be6c4d4b933/allem-ui-data-grid-0.0.2.tgz","_integrity":"sha512-l+2d9Ph4Hyo03WmihhjDgdLgG3sEwAa6+H/9W6Z5HGbJ0xuSRh28oxSGMatJQxP5aZbD8ynUNIytbbsz42QZZQ==","repository":{"url":"git+https://github.com/kingofmit/allem-ui.git","type":"git","directory":"packages/data-grid"},"_npmVersion":"11.12.1","description":"Advanced data grid with sorting, filtering, and virtualization for Allem UI","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","dependencies":{"@tanstack/react-table":"^8.21.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.0","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0","@allem-ui/react":">=0.0.1","@allem-ui/theme":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/data-grid_0.0.2_1779493714430_0.6522720872260697","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@allem-ui/data-grid","version":"0.0.3","keywords":["allem-ui","data-grid","table","sorting","filtering","react","tanstack"],"author":{"url":"https://kingallem.com","name":"Ahmed Allem"},"license":"MIT","_id":"@allem-ui/data-grid@0.0.3","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"homepage":"https://github.com/kingofmit/allem-ui#readme","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"dist":{"shasum":"3d609e1bd9a3d400cc4bfd4c14d7038d3274500e","tarball":"https://registry.npmjs.org/@allem-ui/data-grid/-/data-grid-0.0.3.tgz","fileCount":8,"integrity":"sha512-84nwbXYd9JEg3Oho9YOACHo5p+mfXaXOpzjPf/bG88MpK+FcoP0aeUF6sh6EO6RMHZ6QBit7mZWJ4RAZiQXvCQ==","signatures":[{"sig":"MEQCIFaxpky+5GJcXwr/fSHVoe9iwYJIvDBQyAyPEDsq7XhQAiAcZcJCsRFX5QGmqK4zVKjxnv76B49fXwk5MjhIHeZVxw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78933},"main":"./dist/index.js","_from":"file:allem-ui-data-grid-0.0.3.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/10a8e7e5651aa4e40d67583e2e2508c5/allem-ui-data-grid-0.0.3.tgz","_integrity":"sha512-84nwbXYd9JEg3Oho9YOACHo5p+mfXaXOpzjPf/bG88MpK+FcoP0aeUF6sh6EO6RMHZ6QBit7mZWJ4RAZiQXvCQ==","repository":{"url":"git+https://github.com/kingofmit/allem-ui.git","type":"git","directory":"packages/data-grid"},"_npmVersion":"11.12.1","description":"Advanced data grid with sorting, filtering, and virtualization for Allem UI","directories":{},"sideEffects":false,"_nodeVersion":"26.0.0","dependencies":{"@tanstack/react-table":"^8.21.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^19.2.0","react-dom":"^19.2.0","typescript":"^5.9.0","@types/react":"^19.2.0","@types/react-dom":"^19.2.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0","@allem-ui/react":">=0.0.1","@allem-ui/theme":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/data-grid_0.0.3_1779495641442_0.810873960719096","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@allem-ui/data-grid","version":"0.0.4","description":"Advanced data grid with sorting, filtering, and virtualization for Allem UI","license":"MIT","author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"dependencies":{"@tanstack/react-table":"^8.21.3"},"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","tsup":"^8.5.0","typescript":"^5.9.0"},"peerDependencies":{"@allem-ui/react":">=0.0.4","@allem-ui/theme":">=0.0.3","react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0"},"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/data-grid"},"keywords":["allem-ui","data-grid","table","sorting","filtering","react","tanstack"],"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist"},"_id":"@allem-ui/data-grid@0.0.4","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"homepage":"https://github.com/kingofmit/allem-ui#readme","_integrity":"sha512-7KBh8NtOwUSBEcHeT59QiCgpD1cb+lEXs3CeN2Rml2YBlUruha7L33ExJJt5UYXpJjw/gYno9dpq2M1Zx+ykkA==","_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/403dcda617f5738a1d1db0b41f2b011a/allem-ui-data-grid-0.0.4.tgz","_from":"file:allem-ui-data-grid-0.0.4.tgz","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-7KBh8NtOwUSBEcHeT59QiCgpD1cb+lEXs3CeN2Rml2YBlUruha7L33ExJJt5UYXpJjw/gYno9dpq2M1Zx+ykkA==","shasum":"7ca52233c7294b562fa9a04be134b1be953349ad","tarball":"https://registry.npmjs.org/@allem-ui/data-grid/-/data-grid-0.0.4.tgz","fileCount":8,"unpackedSize":79383,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCAk3D+Cp6/aLHo1AGEeZcQr97w/6fA3gOSYNKj2BgxiAIgIma1WwgooePMF22mW+bGvGhmyW7IokhVKTwOcP/7CcY="}]},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/data-grid_0.0.4_1779581028497_0.7644293365959935"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-21T20:41:44.670Z","modified":"2026-05-24T00:03:48.817Z","0.0.1":"2026-05-21T20:41:44.950Z","0.0.2":"2026-05-22T23:48:34.571Z","0.0.3":"2026-05-23T00:20:41.585Z","0.0.4":"2026-05-24T00:03:48.698Z"},"bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"license":"MIT","homepage":"https://github.com/kingofmit/allem-ui#readme","keywords":["allem-ui","data-grid","table","sorting","filtering","react","tanstack"],"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/data-grid"},"description":"Advanced data grid with sorting, filtering, and virtualization for Allem UI","maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"readme":"<p align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/kingofmit/allem-ui/main/.github/AllemUI.png\" alt=\"Allem UI Data Grid\" />\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@allem-ui/data-grid\"><img src=\"https://img.shields.io/npm/v/@allem-ui/data-grid.svg\" alt=\"npm version\" /></a>\n  <a href=\"https://github.com/kingofmit/allem-ui/blob/main/LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License\" /></a>\n  <img src=\"https://img.shields.io/badge/react-19-61dafb\" alt=\"React 19\" />\n  <img src=\"https://img.shields.io/badge/tailwind-v4-38bdf8\" alt=\"Tailwind v4\" />\n  <img src=\"https://img.shields.io/badge/tanstack_table-v8-orange\" alt=\"TanStack Table\" />\n  <img src=\"https://img.shields.io/badge/typescript-strict-blue\" alt=\"TypeScript\" />\n</p>\n\n# @allem-ui/data-grid\n\nAdvanced data grid with sorting, filtering, and pagination for Allem UI -- powered by TanStack Table.\n\n## Installation\n\n```bash\nnpm install @allem-ui/data-grid @allem-ui/react @allem-ui/theme\n```\n\n## Tailwind CSS Setup\n\nAdd the following to your main CSS file (e.g. `globals.css`) so Tailwind generates the utility classes used by the components:\n\n```css\n@import \"tailwindcss\";\n@source \"@allem-ui/react\";\n@source \"@allem-ui/data-grid\";\n@source \"@allem-ui/theme\";\n```\n\n> **Note:** The `@source` directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.\n\n## Quick Start\n\n```tsx\nimport { DataGrid, DataGridToolbar, DataGridPagination } from \"@allem-ui/data-grid\";\nimport type { ColumnDef } from \"@allem-ui/data-grid\";\n\nconst columns: ColumnDef<User>[] = [\n  { accessorKey: \"name\", header: \"Name\" },\n  { accessorKey: \"email\", header: \"Email\" },\n  { accessorKey: \"role\", header: \"Role\" },\n];\n\nexport function UsersTable() {\n  return (\n    <div>\n      <DataGridToolbar />\n      <DataGrid data={users} columns={columns} />\n      <DataGridPagination />\n    </div>\n  );\n}\n```\n\n## Components\n\n| Component | Description |\n|-----------|-------------|\n| `DataGrid` | Main data table with sorting, filtering, and row selection |\n| `DataGridToolbar` | Search, filter controls, and bulk actions bar |\n| `DataGridPagination` | Page navigation with page size selector |\n| `DataGridColumnHeader` | Sortable column header with sort indicators |\n\n## Features\n\n- **Powered by TanStack Table** -- Built on [TanStack Table v8](https://tanstack.com/table) for robust data handling\n- **Sorting** -- Click column headers to sort ascending/descending\n- **Filtering** -- Global search and per-column filtering\n- **Pagination** -- Client-side pagination with configurable page sizes\n- **Composable** -- Use DataGrid alone or with Toolbar and Pagination\n- **Dark mode** -- First-class dark mode with `dark:` Tailwind prefix\n- **TypeScript strict** -- Full type safety with generic `ColumnDef<T>` types\n- **Tree-shakeable** -- ESM + CJS builds, import only what you use\n\n## Part of Allem UI\n\nThis is a standalone package in the [Allem UI](https://github.com/kingofmit/allem-ui) monorepo. For core components, see [`@allem-ui/react`](https://www.npmjs.com/package/@allem-ui/react).\n\n## Support\n\nIf you find Allem UI useful, consider supporting its development:\n\n<a href=\"https://buymeacoffee.com/kingofmit\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" height=\"50\" /></a>\n\n## License\n\n[MIT](https://github.com/kingofmit/allem-ui/blob/main/LICENSE) - [Ahmed Allem](https://kingallem.com)\n","readmeFilename":"README.md"}