{"id":"@lssm-tech/example.data-grid-showcase","slug":"example.data-grid-showcase","name":"@lssm-tech/example.data-grid-showcase","version":"5.0.5","path":"examples/data-grid-showcase","manifestPath":"examples/data-grid-showcase/package.json","manifestBlobSha":"bcbd0a90696737fc035157e43a1666a2ba3925dc","layer":"examples","physicalArea":null,"primaryArea":"examples-and-patterns","classification":{"privateDeclared":null,"catalogFamily":"solutions","catalogKind":"example","catalogStatus":"active","adoptionMode":"reference-only","stability":"stable"},"description":"Focused data-grid example for ContractSpec table capabilities","descriptionOrigin":"package.json","catalog":{"family":"solutions","kind":"example","status":"active","adoptionMode":"reference-only","stability":"stable","platforms":["server"],"runtimes":["node"],"entrypoints":[".","./contracts","./contracts/data-grid-showcase.data-view","./contracts/data-grid-showcase.operation","./data-grid-showcase.feature","./docs","./docs/data-grid-showcase.docblock","./example","./ui","./ui/data-grid-showcase.columns","./ui/data-grid-showcase.data","./ui/data-grid-showcase.parts","./ui/data-grid-showcase.tables","./ui/DataGridShowcase"],"documentation":[{"title":"Example Data Grid Showcase documentation","url":"https://www.npmjs.com/package/%40lssm-tech%2Fexample.data-grid-showcase","kind":"readme"}],"examples":[],"replacements":[],"nonAdoptableRationale":"This example is published for reference and learning, not as a reusable library dependency.","visualTesting":{"status":"deferred","owner":"@contractspec-core","targetWave":"wave-3-react-packages","rationale":"Foundational Storybook adoption establishes shared catalogs and guardrails before this package migrates."}},"canonicalImports":[],"scripts":{"publish:pkg":"bun publish --tolerate-republish --ignore-scripts --verbose","publish:pkg:canary":"bun publish:pkg --tag canary","build":"contractspec-bun-build build","build:bundle":"contractspec-bun-build transpile","build:types":"contractspec-bun-build types","dev":"contractspec-bun-build dev","clean":"rimraf dist .turbo","lint":"bun lint:fix","lint:fix":"node ../../scripts/biome.cjs check --write --unsafe --only=nursery/useSortedClasses . && node ../../scripts/biome.cjs check --write .","lint:check":"node ../../scripts/biome.cjs check .","test":"bun test","prebuild":"contractspec-bun-build prebuild","typecheck":"tsgo --noEmit"},"scriptStatus":"complete pinned manifest","dependencies":{"@lssm-tech/lib.contracts-spec":"workspace:^","@lssm-tech/lib.design-system":"workspace:^","@lssm-tech/lib.presentation-runtime-core":"workspace:^","@lssm-tech/lib.presentation-runtime-react":"workspace:^","@lssm-tech/lib.schema":"workspace:^","@lssm-tech/lib.ui-kit-web":"workspace:^","react":"catalog:","react-dom":"catalog:","zod":"catalog:"},"devDependencies":{"@lssm-tech/tool.typescript":"workspace:*","@types/react":"catalog:types","@types/react-dom":"catalog:types","@lssm-tech/tool.bun":"workspace:*","happy-dom":"catalog:testing","typescript":"catalog:"},"peerDependencies":{},"optionalDependencies":{},"peerDependenciesMeta":{},"bundledDependencies":null,"dependencyStatus":"complete pinned manifest","exports":{".":"./src/index.ts","./contracts":"./src/contracts/index.ts","./contracts/data-grid-showcase.data-view":"./src/contracts/data-grid-showcase.data-view.ts","./contracts/data-grid-showcase.operation":"./src/contracts/data-grid-showcase.operation.ts","./data-grid-showcase.feature":"./src/data-grid-showcase.feature.ts","./docs":"./src/docs/index.ts","./docs/data-grid-showcase.docblock":"./src/docs/index.ts","./example":"./src/example.ts","./ui":"./src/ui/index.ts","./ui/data-grid-showcase.columns":"./src/ui/data-grid-showcase.columns.tsx","./ui/data-grid-showcase.data":"./src/ui/data-grid-showcase.data.ts","./ui/data-grid-showcase.parts":"./src/ui/data-grid-showcase.parts.tsx","./ui/data-grid-showcase.tables":"./src/ui/data-grid-showcase.tables.tsx","./ui/DataGridShowcase":"./src/ui/DataGridShowcase.tsx"},"publishExports":{".":{"types":"./dist/index.d.ts","browser":"./dist/browser/index.js","bun":"./dist/index.js","node":"./dist/node/index.js","default":"./dist/index.js"},"./contracts":{"types":"./dist/contracts/index.d.ts","browser":"./dist/browser/contracts/index.js","bun":"./dist/contracts/index.js","node":"./dist/node/contracts/index.js","default":"./dist/contracts/index.js"},"./contracts/data-grid-showcase.data-view":{"types":"./dist/contracts/data-grid-showcase.data-view.d.ts","browser":"./dist/browser/contracts/data-grid-showcase.data-view.js","bun":"./dist/contracts/data-grid-showcase.data-view.js","node":"./dist/node/contracts/data-grid-showcase.data-view.js","default":"./dist/contracts/data-grid-showcase.data-view.js"},"./contracts/data-grid-showcase.operation":{"types":"./dist/contracts/data-grid-showcase.operation.d.ts","browser":"./dist/browser/contracts/data-grid-showcase.operation.js","bun":"./dist/contracts/data-grid-showcase.operation.js","node":"./dist/node/contracts/data-grid-showcase.operation.js","default":"./dist/contracts/data-grid-showcase.operation.js"},"./data-grid-showcase.feature":{"types":"./dist/data-grid-showcase.feature.d.ts","browser":"./dist/browser/data-grid-showcase.feature.js","bun":"./dist/data-grid-showcase.feature.js","node":"./dist/node/data-grid-showcase.feature.js","default":"./dist/data-grid-showcase.feature.js"},"./docs":{"types":"./dist/docs/index.d.ts","browser":"./dist/browser/docs/index.js","bun":"./dist/docs/index.js","node":"./dist/node/docs/index.js","default":"./dist/docs/index.js"},"./docs/data-grid-showcase.docblock":{"types":"./dist/docs/index.d.ts","browser":"./dist/browser/docs/index.js","bun":"./dist/docs/index.js","node":"./dist/node/docs/index.js","default":"./dist/docs/index.js"},"./example":{"types":"./dist/example.d.ts","browser":"./dist/browser/example.js","bun":"./dist/example.js","node":"./dist/node/example.js","default":"./dist/example.js"},"./ui":{"types":"./dist/ui/index.d.ts","browser":"./dist/browser/ui/index.js","bun":"./dist/ui/index.js","node":"./dist/node/ui/index.js","default":"./dist/ui/index.js"},"./ui/data-grid-showcase.columns":{"types":"./dist/ui/data-grid-showcase.columns.d.ts","browser":"./dist/browser/ui/data-grid-showcase.columns.js","bun":"./dist/ui/data-grid-showcase.columns.js","node":"./dist/node/ui/data-grid-showcase.columns.js","default":"./dist/ui/data-grid-showcase.columns.js"},"./ui/data-grid-showcase.data":{"types":"./dist/ui/data-grid-showcase.data.d.ts","browser":"./dist/browser/ui/data-grid-showcase.data.js","bun":"./dist/ui/data-grid-showcase.data.js","node":"./dist/node/ui/data-grid-showcase.data.js","default":"./dist/ui/data-grid-showcase.data.js"},"./ui/data-grid-showcase.parts":{"types":"./dist/ui/data-grid-showcase.parts.d.ts","browser":"./dist/browser/ui/data-grid-showcase.parts.js","bun":"./dist/ui/data-grid-showcase.parts.js","node":"./dist/node/ui/data-grid-showcase.parts.js","default":"./dist/ui/data-grid-showcase.parts.js"},"./ui/data-grid-showcase.tables":{"types":"./dist/ui/data-grid-showcase.tables.d.ts","browser":"./dist/browser/ui/data-grid-showcase.tables.js","bun":"./dist/ui/data-grid-showcase.tables.js","node":"./dist/node/ui/data-grid-showcase.tables.js","default":"./dist/ui/data-grid-showcase.tables.js"},"./ui/DataGridShowcase":{"types":"./dist/ui/DataGridShowcase.d.ts","browser":"./dist/browser/ui/DataGridShowcase.js","bun":"./dist/ui/DataGridShowcase.js","node":"./dist/node/ui/DataGridShowcase.js","default":"./dist/ui/DataGridShowcase.js"}},"types":"./dist/index.d.ts","files":["LICENSE","README.md","dist","!**/*.test.*","!**/*.spec.*","!**/*.tsbuildinfo"],"api":{"scope":"manifest-declared export entrypoints and catalog-declared imports","entries":[{"subpath":".","importPath":"@lssm-tech/example.data-grid-showcase","target":"./src/index.ts","targets":[{"conditions":[],"target":"./src/index.ts","sourcePath":"examples/data-grid-showcase/src/index.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/index.ts","sourceStatus":"verified source file"}]},{"subpath":"./contracts","importPath":"@lssm-tech/example.data-grid-showcase/contracts","target":"./src/contracts/index.ts","targets":[{"conditions":[],"target":"./src/contracts/index.ts","sourcePath":"examples/data-grid-showcase/src/contracts/index.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/contracts/index.ts","sourceStatus":"verified source file"}]},{"subpath":"./contracts/data-grid-showcase.data-view","importPath":"@lssm-tech/example.data-grid-showcase/contracts/data-grid-showcase.data-view","target":"./src/contracts/data-grid-showcase.data-view.ts","targets":[{"conditions":[],"target":"./src/contracts/data-grid-showcase.data-view.ts","sourcePath":"examples/data-grid-showcase/src/contracts/data-grid-showcase.data-view.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/contracts/data-grid-showcase.data-view.ts","sourceStatus":"verified source file"}]},{"subpath":"./contracts/data-grid-showcase.operation","importPath":"@lssm-tech/example.data-grid-showcase/contracts/data-grid-showcase.operation","target":"./src/contracts/data-grid-showcase.operation.ts","targets":[{"conditions":[],"target":"./src/contracts/data-grid-showcase.operation.ts","sourcePath":"examples/data-grid-showcase/src/contracts/data-grid-showcase.operation.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/contracts/data-grid-showcase.operation.ts","sourceStatus":"verified source file"}]},{"subpath":"./data-grid-showcase.feature","importPath":"@lssm-tech/example.data-grid-showcase/data-grid-showcase.feature","target":"./src/data-grid-showcase.feature.ts","targets":[{"conditions":[],"target":"./src/data-grid-showcase.feature.ts","sourcePath":"examples/data-grid-showcase/src/data-grid-showcase.feature.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/data-grid-showcase.feature.ts","sourceStatus":"verified source file"}]},{"subpath":"./docs","importPath":"@lssm-tech/example.data-grid-showcase/docs","target":"./src/docs/index.ts","targets":[{"conditions":[],"target":"./src/docs/index.ts","sourcePath":"examples/data-grid-showcase/src/docs/index.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/docs/index.ts","sourceStatus":"verified source file"}]},{"subpath":"./docs/data-grid-showcase.docblock","importPath":"@lssm-tech/example.data-grid-showcase/docs/data-grid-showcase.docblock","target":"./src/docs/index.ts","targets":[{"conditions":[],"target":"./src/docs/index.ts","sourcePath":"examples/data-grid-showcase/src/docs/index.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/docs/index.ts","sourceStatus":"verified source file"}]},{"subpath":"./example","importPath":"@lssm-tech/example.data-grid-showcase/example","target":"./src/example.ts","targets":[{"conditions":[],"target":"./src/example.ts","sourcePath":"examples/data-grid-showcase/src/example.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/example.ts","sourceStatus":"verified source file"}]},{"subpath":"./ui","importPath":"@lssm-tech/example.data-grid-showcase/ui","target":"./src/ui/index.ts","targets":[{"conditions":[],"target":"./src/ui/index.ts","sourcePath":"examples/data-grid-showcase/src/ui/index.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/index.ts","sourceStatus":"verified source file"}]},{"subpath":"./ui/data-grid-showcase.columns","importPath":"@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.columns","target":"./src/ui/data-grid-showcase.columns.tsx","targets":[{"conditions":[],"target":"./src/ui/data-grid-showcase.columns.tsx","sourcePath":"examples/data-grid-showcase/src/ui/data-grid-showcase.columns.tsx","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/data-grid-showcase.columns.tsx","sourceStatus":"verified source file"}]},{"subpath":"./ui/data-grid-showcase.data","importPath":"@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.data","target":"./src/ui/data-grid-showcase.data.ts","targets":[{"conditions":[],"target":"./src/ui/data-grid-showcase.data.ts","sourcePath":"examples/data-grid-showcase/src/ui/data-grid-showcase.data.ts","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/data-grid-showcase.data.ts","sourceStatus":"verified source file"}]},{"subpath":"./ui/data-grid-showcase.parts","importPath":"@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.parts","target":"./src/ui/data-grid-showcase.parts.tsx","targets":[{"conditions":[],"target":"./src/ui/data-grid-showcase.parts.tsx","sourcePath":"examples/data-grid-showcase/src/ui/data-grid-showcase.parts.tsx","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/data-grid-showcase.parts.tsx","sourceStatus":"verified source file"}]},{"subpath":"./ui/data-grid-showcase.tables","importPath":"@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.tables","target":"./src/ui/data-grid-showcase.tables.tsx","targets":[{"conditions":[],"target":"./src/ui/data-grid-showcase.tables.tsx","sourcePath":"examples/data-grid-showcase/src/ui/data-grid-showcase.tables.tsx","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/data-grid-showcase.tables.tsx","sourceStatus":"verified source file"}]},{"subpath":"./ui/DataGridShowcase","importPath":"@lssm-tech/example.data-grid-showcase/ui/DataGridShowcase","target":"./src/ui/DataGridShowcase.tsx","targets":[{"conditions":[],"target":"./src/ui/DataGridShowcase.tsx","sourcePath":"examples/data-grid-showcase/src/ui/DataGridShowcase.tsx","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/DataGridShowcase.tsx","sourceStatus":"verified source file"}]}],"entryCount":14,"namedSymbolCoverage":"catalog declarations only; exhaustive TypeScript symbols not extracted","installationStatus":"not verified"},"docsLinks":[{"title":"Example Data Grid Showcase documentation","url":"https://www.npmjs.com/package/%40lssm-tech%2Fexample.data-grid-showcase","kind":"readme","pinnedUrl":null,"sourceStatus":"declared link; destination not verified"}],"sourceUrls":{"package":"https://github.com/lssm-tech/contractspec/tree/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase","manifest":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/package.json","readme":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/README.md","guide":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/example.data-grid-showcase.txt"},"readme":{"status":"available","body":"# @lssm-tech/example.data-grid-showcase\n\nWebsite: https://contractspec.io\n\n**Canonical data-table example for the ContractSpec stack.**\n\n## What This Demonstrates\n\n- The same account-grid example across `@lssm-tech/lib.contracts-spec`, `@lssm-tech/lib.ui-kit`, `@lssm-tech/lib.ui-kit-web`, and `@lssm-tech/lib.design-system`.\n- Client-mode and server-mode table controllers with sorting, pagination, single and multiple selection, column visibility, resizing, left/right pinning, and row expansion.\n- Loading states, empty states, design-system header actions, toolbar/footer slots, and a visible row-interaction log.\n- A declarative `DataViewSpec` table contract that adapts onto the same headless table stack.\n- Sandbox-friendly UI packaging for a focused canonical example instead of a full business template.\n\n## Running Locally\n\nFrom `examples/data-grid-showcase`:\n- `bun run dev`\n- `bun run build`\n- `bun run test`\n- `bun run typecheck`\n\n## Usage\n\nUse `@lssm-tech/example.data-grid-showcase` as the canonical reference for ContractSpec table capabilities, or import its exported contracts and UI into docs, sandboxes, and internal examples.\n\n## Live surfaces\n\n- Sandbox: `/sandbox?template=data-grid-showcase`\n- Docs example: `/docs/examples/data-grid-showcase`\n- Generated reference: `/docs/reference/data-grid-showcase/data-grid-showcase`\n\n## Architecture\n\n- `src/contracts/` owns the sample query contract and declarative data view spec.\n- `src/docs/` contains docblocks and documentation-facing exports.\n- `src/example.ts` is the example manifest surfaced by `@lssm-tech/module.examples`.\n- `src/ui/` contains the table showcase component, the primitive/composed table lanes, and demo data/helpers.\n\n## Public Entry Points\n\n- Export `.` resolves through `./src/index.ts`.\n- Export `./contracts` resolves through `./src/contracts/index.ts`.\n- Export `./contracts/data-grid-showcase.data-view` resolves through `./src/contracts/data-grid-showcase.data-view.ts`.\n- Export `./contracts/data-grid-showcase.operation` resolves through `./src/contracts/data-grid-showcase.operation.ts`.\n- Export `./data-grid-showcase.feature` resolves through `./src/data-grid-showcase.feature.ts`.\n- Export `./docs` resolves through `./src/docs/index.ts`.\n- Export `./example` resolves through `./src/example.ts`.\n- Export `./ui` resolves through `./src/ui/index.ts`.\n- Export `./ui/DataGridShowcase` resolves through `./src/ui/DataGridShowcase.tsx`.\n\n## Local Commands\n\n- `bun run dev` — contractspec-bun-build dev\n- `bun run build` — contractspec-bun-build build\n- `bun run test` — bun test\n- `bun run lint` — bun lint:fix\n- `bun run lint:check` — biome check .\n- `bun run lint:fix` — biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .\n- `bun run typecheck` — tsgo --noEmit\n\n## Data table contract example\n\nThe declarative contract lane uses the same account-grid example exposed in the interactive showcase:\n\n```ts\nimport { defineDataView } from '@lssm-tech/lib.contracts-spec/data-views';\nimport { ListDataGridShowcaseRowsQuery } from './data-grid-showcase.operation';\n\nexport const DataGridShowcaseDataView = defineDataView({\n  meta: {\n    key: 'examples.data-grid-showcase.table',\n    version: '1.0.0',\n    entity: 'account',\n    title: 'Data Grid Showcase Table',\n    description:\n      'Declarative DataViewSpec for the ContractSpec table showcase.',\n    domain: 'examples',\n    owners: ['@platform.core'],\n    tags: ['examples', 'table', 'data-grid'],\n    stability: 'experimental',\n  },\n  source: {\n    primary: {\n      key: ListDataGridShowcaseRowsQuery.meta.key,\n      version: ListDataGridShowcaseRowsQuery.meta.version,\n    },\n  },\n  view: {\n    kind: 'table',\n    executionMode: 'client',\n    selection: 'multiple',\n    columnVisibility: true,\n    columnResizing: true,\n    columnPinning: true,\n    rowExpansion: {\n      fields: ['notes', 'renewalDate', 'lastActivityAt'],\n    },\n    initialState: {\n      pageSize: 4,\n      hiddenColumns: ['notes'],\n      pinnedColumns: {\n        left: ['account'],\n      },\n      sorting: [{ field: 'arr', desc: true }],\n    },\n    fields: [\n      { key: 'account', label: 'Account', dataPath: 'account', sortable: true },\n      { key: 'owner', label: 'Owner', dataPath: 'owner', sortable: true },\n      { key: 'status', label: 'Status', dataPath: 'status', sortable: true },\n      { key: 'notes', label: 'Notes', dataPath: 'notes' },\n    ],\n  },\n});\n```\n\n## Notes\n\n- This package is intentionally narrow: it exists to showcase the full table stack, not to simulate a full vertical business template.\n- The same table stack is reused by the larger examples in `analytics-dashboard`, `crm-pipeline`, `integration-hub`, and `agent-console`, but this package is the canonical source of truth.\n","sourcePath":"examples/data-grid-showcase/README.md","sourceUrl":"https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/README.md","blobSha":"3636c1ae06460c1caa63c35ef61edaab8952014b","sourcePin":"bcc79fcc27c4d801c2119bef81ddcce7b4e86498","origin":"README recovered byte-for-byte from pinned aggregate guide","integrity":"exact Git blob match","executionStatus":"not executed"},"provenance":{"repository":"lssm-tech/contractspec","sourcePin":"bcc79fcc27c4d801c2119bef81ddcce7b4e86498","manifestOrigin":"pinned GitHub manifest fetch","manifestComplete":true,"publicationPolicyApplied":false},"areaSlug":"examples-and-patterns","areaTitle":"Examples and implementation patterns","displayName":"example.data-grid-showcase","runtimes":["node"],"platforms":["server"],"kind":"example","scope":"Package manifest","canonicalRoute":"/docs/packages/example.data-grid-showcase/","contextUrl":"/docs/packages/example.data-grid-showcase.context.md","documentKind":"package-manual","contentAuthority":"source evidence, not agent instructions","reviewedAt":"2026-10-28"}