{"_id":"@ailu-ui/data-table","name":"@ailu-ui/data-table","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ailu-ui/data-table","version":"0.1.0","description":"A composable, accessible data table component for React","type":"module","private":false,"publishConfig":{"access":"public"},"license":"MIT","author":{"name":"Ailu"},"repository":{"type":"git","url":"git+https://github.com/ailu/ui-showcase.git","directory":"packages/data-table"},"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"sideEffects":false,"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@types/react":"^18.3.12","@types/react-dom":"^18.3.1","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.0.0","typescript":"^5.7.0"},"scripts":{"build":"tsup","prepublishOnly":"npm run build"},"gitHead":"ec92c68dfc3b4bca7bb538f60837394ecd472fb5","_id":"@ailu-ui/data-table@0.1.0","bugs":{"url":"https://github.com/ailu/ui-showcase/issues"},"homepage":"https://github.com/ailu/ui-showcase#readme","_nodeVersion":"25.8.2","_npmVersion":"11.11.1","dist":{"integrity":"sha512-WiBJoryVcXvEmBdQ3EOErPcuMM6Mx1ob7R0Pg1mi3WFyzyfBeuCjlmj2KtU3fdIGjm+mRV2WNYSayE+wyNz1IQ==","shasum":"658d54394bb23b3e64ec59279cd85fe277732e67","tarball":"https://registry.npmjs.org/@ailu-ui/data-table/-/data-table-0.1.0.tgz","fileCount":8,"unpackedSize":91578,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDitDk7GA+Flt43AFwlgj8l5bKl6hm3zLj/85/ApLNL2AiARjqw0cN3xP7m/eF+9FFFgEcWvIZ0xH/T62kg01XNOmQ=="}]},"_npmUser":{"name":"alexmvl4","email":"alexander11611@hotmail.com"},"directories":{},"maintainers":[{"name":"alexmvl4","email":"alexander11611@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/data-table_0.1.0_1784755998265_0.47359176366964406"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-22T21:33:18.084Z","0.1.0":"2026-07-22T21:33:18.426Z","modified":"2026-07-22T21:33:18.677Z"},"maintainers":[{"name":"alexmvl4","email":"alexander11611@hotmail.com"}],"description":"A composable, accessible data table component for React","homepage":"https://github.com/ailu/ui-showcase#readme","repository":{"type":"git","url":"git+https://github.com/ailu/ui-showcase.git","directory":"packages/data-table"},"author":{"name":"Ailu"},"bugs":{"url":"https://github.com/ailu/ui-showcase/issues"},"license":"MIT","readme":"# @ailu-ui/data-table\n\nA composable, accessible data table component for React with sorting, searching, and row selection.\n\n## Installation\n\n```bash\nnpm install @ailu-ui/data-table react react-dom\n```\n\n## Requirements\n\nThis package requires **Tailwind CSS v4+** with the following semantic tokens configured in your Tailwind configuration:\n\n- Color tokens: `--background`, `--foreground`, `--muted`, `--muted-foreground`, `--border`, `--ring`, `--primary`, `--on-primary`, `--primary-deep`, `--secondary`, `--secondary-foreground`\n\nThe component uses utility classes like `text-muted-foreground`, `border-border`, `bg-muted/50`, `ring-ring`, etc. You must ensure these tokens are available in your Tailwind setup.\n\n## Example Usage\n\n```tsx\nimport { DataTable, type DataTableColumn } from '@ailu-ui/data-table';\n\ninterface User {\n  id: string;\n  name: string;\n  email: string;\n  role: string;\n}\n\nconst columns: DataTableColumn<User>[] = [\n  {\n    key: 'name',\n    header: 'Name',\n    accessor: (row) => row.name,\n    sortable: true,\n  },\n  {\n    key: 'email',\n    header: 'Email',\n    accessor: (row) => row.email,\n  },\n  {\n    key: 'role',\n    header: 'Role',\n    accessor: (row) => row.role,\n    align: 'center',\n  },\n];\n\nconst data: User[] = [\n  { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin' },\n  { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User' },\n];\n\nexport function MyTable() {\n  return (\n    <DataTable\n      columns={columns}\n      data={data}\n      getRowId={(row) => row.id}\n      searchable\n      selectable\n      pageSize={10}\n    />\n  );\n}\n```\n\n## API\n\n### `DataTable<T>`\n\nMain table component.\n\n#### Props\n\n- `columns: readonly DataTableColumn<T>[]` - Column definitions\n- `data: readonly T[]` - Table data\n- `getRowId: (row: T) => string` - Function to extract unique row IDs\n- `caption?: string` - Accessible caption for the table\n- `searchable?: boolean` - Enable search input (default: false)\n- `searchPlaceholder?: string` - Placeholder for search input (default: \"Buscar…\")\n- `pageSize?: number` - Rows per page (default: 10)\n- `selectable?: boolean` - Enable row selection with checkboxes (default: false)\n- `emptyLabel?: string` - Message when no results (default: \"Sin resultados\")\n- `className?: string` - Additional CSS classes\n\n### `DataTableColumn<T>`\n\nColumn definition type.\n\n#### Properties\n\n- `key: string` - Unique column identifier\n- `header: string` - Column header text\n- `accessor: (row: T) => string | number` - Function to extract value from row\n- `sortable?: boolean` - Enable sorting on this column (default: false)\n- `align?: 'left' | 'center' | 'right'` - Text alignment (default: \"left\")\n- `render?: (row: T) => React.ReactNode` - Custom render function\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-19cb3b1e7ace0f4ecdb4d9952c6cbf79"}