50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T675,'use client'; import {useState} from 'react'; import { Table, useTablePagination, paginateData, proportional, } from '@astryxdesign/core/Table'; import type {TableColumn} from '@astryxdesign/core/Table'; import {Section} from '@astryxdesign/core/Section'; interface User extends Record { id: string; name: string; email: string; role: string; } const names = [ 'Alice Johnson', 'Bob Smith', 'Charlie Brown', 'Diana Prince', 'Eve Davis', 'Frank Miller', 'Grace Lee', 'Hank Wilson', 'Ivy Chen', 'Jack Turner', 'Karen White', 'Leo Garcia', 'Mia Thompson', 'Noah Martinez', 'Olivia Clark', 'Paul Harris', 'Quinn Walker', 'Rachel Adams', 'Sam Robinson', 'Tina Scott', ]; const roles = ['Engineer', 'Designer', 'Manager', 'Admin', 'Analyst']; const users: User[] = names.map((name, i) => ({ id: String(i + 1), name, email: `${name.split(' ')[0].toLowerCase()}@example.com`, role: roles[i % roles.length], })); const columns: TableColumn[] = [ {key: 'name', header: 'Name', width: proportional(1)}, {key: 'email', header: 'Email', width: proportional(2)}, {key: 'role', header: 'Role', width: proportional(1)}, ]; export default function TablePaginatedTable() { const [page, setPage] = useState(1); const pageSize = 5; const plugin = useTablePagination({ page, onPageChange: setPage, totalItems: users.length, pageSize, }); return (

); } 55:T1063,{ "schemaVersion": 2, "item": { "name": "example-table-paginated-data", "path": "examples/table/paginated-data", "aliases": [], "kind": "example" }, "source": { "package": "@astryxdesign/cli", "version": "0.7.3" }, "files": [ { "id": "primary", "target": "../TablePaginatedTable.tsx", "registryTarget": "components/astryx/examples/TablePaginatedTable.tsx", "registryPath": "registry/example-table-paginated-data/TablePaginatedTable.tsx", "sha256": "a32f77b9ca1ea5d8b990c061cb2d080a55198bba0073d636c75a2d8ea3b38b3d", "content": "'use client';\n\nimport {useState} from 'react';\nimport {\n Table,\n useTablePagination,\n paginateData,\n proportional,\n} from '@astryxdesign/core/Table';\nimport type {TableColumn} from '@astryxdesign/core/Table';\nimport {Section} from '@astryxdesign/core/Section';\n\ninterface User extends Record {\n id: string;\n name: string;\n email: string;\n role: string;\n}\n\nconst names = [\n 'Alice Johnson',\n 'Bob Smith',\n 'Charlie Brown',\n 'Diana Prince',\n 'Eve Davis',\n 'Frank Miller',\n 'Grace Lee',\n 'Hank Wilson',\n 'Ivy Chen',\n 'Jack Turner',\n 'Karen White',\n 'Leo Garcia',\n 'Mia Thompson',\n 'Noah Martinez',\n 'Olivia Clark',\n 'Paul Harris',\n 'Quinn Walker',\n 'Rachel Adams',\n 'Sam Robinson',\n 'Tina Scott',\n];\n\nconst roles = ['Engineer', 'Designer', 'Manager', 'Admin', 'Analyst'];\n\nconst users: User[] = names.map((name, i) => ({\n id: String(i + 1),\n name,\n email: `${name.split(' ')[0].toLowerCase()}@example.com`,\n role: roles[i % roles.length],\n}));\n\nconst columns: TableColumn[] = [\n {key: 'name', header: 'Name', width: proportional(1)},\n {key: 'email', header: 'Email', width: proportional(2)},\n {key: 'role', header: 'Role', width: proportional(1)},\n];\n\nexport default function TablePaginatedTable() {\n const [page, setPage] = useState(1);\n const pageSize = 5;\n\n const plugin = useTablePagination({\n page,\n onPageChange: setPage,\n totalItems: users.length,\n pageSize,\n });\n\n return (\n

\n \n

\n );\n}\n", "variants": [ { "format": "javascript", "target": "../TablePaginatedTable.jsx", "registryTarget": "components/astryx/examples/TablePaginatedTable.jsx", "sha256": "dc17534d242ab1bcc4186c7f1563807b9b14ef42da9dd725aa2d90fa1528c31f", "content": "'use client';;\nimport {useState} from 'react';\nimport {\n Table,\n useTablePagination,\n paginateData,\n proportional,\n} from '@astryxdesign/core/Table';\nimport {Section} from '@astryxdesign/core/Section';\n\nconst names = [\n 'Alice Johnson',\n 'Bob Smith',\n 'Charlie Brown',\n 'Diana Prince',\n 'Eve Davis',\n 'Frank Miller',\n 'Grace Lee',\n 'Hank Wilson',\n 'Ivy Chen',\n 'Jack Turner',\n 'Karen White',\n 'Leo Garcia',\n 'Mia Thompson',\n 'Noah Martinez',\n 'Olivia Clark',\n 'Paul Harris',\n 'Quinn Walker',\n 'Rachel Adams',\n 'Sam Robinson',\n 'Tina Scott',\n];\n\nconst roles = ['Engineer', 'Designer', 'Manager', 'Admin', 'Analyst'];\n\nconst users = names.map((name, i) => ({\n id: String(i + 1),\n name,\n email: `${name.split(' ')[0].toLowerCase()}@example.com`,\n role: roles[i % roles.length],\n}));\n\nconst columns = [\n {key: 'name', header: 'Name', width: proportional(1)},\n {key: 'email', header: 'Email', width: proportional(2)},\n {key: 'role', header: 'Role', width: proportional(1)},\n];\n\nexport default function TablePaginatedTable() {\n const [page, setPage] = useState(1);\n const pageSize = 5;\n\n const plugin = useTablePagination({\n page,\n onPageChange: setPage,\n totalItems: users.length,\n pageSize,\n });\n\n return (\n

\n \n

\n );\n}\n" } ] } ] } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@astryxdesign/core@0.7.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40astryxdesign%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@astryxdesign/core@0.7.3"}]]}]}],["$","li","@stylexjs/stylex@0.19.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40stylexjs%2Fstylex","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@stylexjs/stylex@0.19.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@astryx","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@astryxdesign/core/reset.css\" {\n\n}\n\n@import \"@astryxdesign/core/astryx.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/example-table-paginated-data/TablePaginatedTable.tsx","content":"$54","type":"registry:block","target":"components/astryx/examples/TablePaginatedTable.tsx"},{"path":"registry/example-table-paginated-data/astryx-receipt.json","content":"$55","type":"registry:file","target":"components/astryx/examples/.astryx/example-table-paginated-data.json"}],"className":"h-[70svh] min-h-80"}]]}]