{"_id":"@asnewyla/table","name":"@asnewyla/table","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@asnewyla/table","version":"0.2.0","description":"Styled table with sorting, filtering, row selection, and pagination","license":"MIT","repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/table"},"publishConfig":{"access":"public"},"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"},"./styles.css":"./dist/index.css"},"sideEffects":["*.css"],"keywords":["react","table","data-grid","styled","accessible"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@asnewyla/unstyled-table":"0.2.0"},"devDependencies":{"@testing-library/jest-dom":"^6.4.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.0","@vitest/coverage-v8":"^2.0.0","jsdom":"^24.0.0","react":"^18.3.0","react-dom":"^18.3.0","tsup":"^8.1.0","typescript":"^5.5.0","vitest":"^2.0.0"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","type-check":"tsc --noEmit"},"_nodeVersion":"24.19.0","_id":"@asnewyla/table@0.2.0","dist":{"integrity":"sha512-+mJ3bsE7PiSgfE0cjrD+2L0zooEBM7sU+IKLhh/Kp7DaPJPKBpIvCECqRmmQrN4KZgyWjEs6GoRJjtTJ4dHrug==","shasum":"73eeef97d68774eefc423e9c876f6d7f8112c681","tarball":"https://registry.npmjs.org/@asnewyla/table/-/table-0.2.0.tgz","fileCount":11,"unpackedSize":34057,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCBwy3V+begrp4pKKQujmdEUpkiZLhnoyl2alZI3ChoEAIgdVrw1jGbN5d1xttEy3wO5UM1mVOYKEuTWBlzTVP8jvc="}]},"_npmUser":{"name":"asnewyla","email":"asnewyla@gmail.com"},"directories":{},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/table_0.2.0_1787860430169_0.23040441396006628"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-27T19:53:50.011Z","0.2.0":"2026-08-27T19:53:50.358Z","modified":"2026-08-27T19:53:50.527Z"},"maintainers":[{"name":"asnewyla","email":"asnewyla@gmail.com"}],"description":"Styled table with sorting, filtering, row selection, and pagination","keywords":["react","table","data-grid","styled","accessible"],"repository":{"type":"git","url":"git+https://github.com/xavierDelaFuente/xd-components.git","directory":"packages/table"},"license":"MIT","readme":"# @asnewyla/table\n\nStyled table built on `@asnewyla/unstyled-table`. A thin wrapper — it adds\nCSS and nothing else: same props, same behavior, same DOM, just styled.\n\n## Install\n\n```bash\nnpm install @asnewyla/table\n```\n\nImport the stylesheet once, anywhere in your app:\n\n```ts\nimport '@asnewyla/table/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Table } from '@asnewyla/table';\n\ninterface Person {\n  id: string;\n  name: string;\n  age: number;\n}\n\nconst people: Person[] = [\n  { id: '1', name: 'Ada Lovelace', age: 36 },\n  { id: '2', name: 'Alan Turing', age: 41 },\n];\n\nconst columns = [\n  { key: 'name', header: 'Name', sortable: true },\n  { key: 'age', header: 'Age' },\n];\n\n<Table data={people} columns={columns} getRowKey={(row) => row.id} />\n\n// Filtering, selection, pagination — all straight from the primitive\n<Table\n  data={people}\n  columns={columns}\n  getRowKey={(row) => row.id}\n  filterable\n  selectable\n  paginated\n  pageSize={10}\n/>\n```\n\n### Props\n\nEvery prop is `@asnewyla/unstyled-table`'s own `UnstyledTableProps<T>` —\nsee its README for the full sorting/filtering/selection/pagination API.\nThis package adds no props of its own; `className` merges with the base\n`xd-table` class (base class first) the same way every styled component\nin this library does.\n\n### Theming\n\nOverride the CSS custom properties — defaults adapt automatically to\n`prefers-color-scheme` via `@asnewyla/tokens`:\n\n```css\n:root {\n  --xd-color-primary: #0d9488;\n  --xd-color-border: #cbd5e1;\n  --xd-color-surface: #ffffff;\n}\n```\n\nPagination footer alignment defaults to right (`flex-end`) and isn't a\ncomponent prop — override `--xd-table-pagination-justify` from any\nancestor, either globally or per table:\n\n```css\n/* every <Table> on the page */\n:root {\n  --xd-table-pagination-justify: center;\n}\n```\n\n```tsx\n// just this one — wrap it in something that sets the variable\n<div style={{ '--xd-table-pagination-justify': 'space-between' } as CSSProperties}>\n  <Table data={data} columns={columns} paginated />\n</div>\n```\n\nAccepts any `justify-content` value: `flex-start`, `center`, `flex-end`,\n`space-between`, `space-around`, `space-evenly`.\n\n### Not yet supported\n\nInherits `@asnewyla/unstyled-table`'s own limitations — see its README:\nno native `FormData` form participation.\n\nThe search input and pagination controls render as siblings of the\n`<table>` element, not inside a shared wrapper — `className` only reaches\nthe `<table>` itself. This package's CSS still styles all of it (the\npagination controls via an adjacent-sibling selector, the search input via\nits own `aria-label`), but the search input's styling isn't scoped to any\none `<Table>` instance — it will also match any other element on the page\nan app happens to give the same `aria-label=\"Search table\"`.\n\nPagination buttons render as icons (CSS-drawn chevrons, no icon asset),\nkeyed off a `data-pagination-action` attribute the primitive sets on each\nbutton. Requires `@asnewyla/unstyled-table` to have shipped first/last\npage navigation and that attribute — on an older primitive version the\nbuttons still work, just as blank icon-shaped buttons.\n\n## License\n\nMIT\n","readmeFilename":"","_rev":"1-ff374d23717c5b102805bc5f1e552b7e"}