# @lssm-tech/example.data-grid-showcase

Focused data-grid example for ContractSpec table capabilities

## Source and release context

- Source snapshot: `bcc79fcc27c4d801c2119bef81ddcce7b4e86498`
- Repository: `lssm-tech/contractspec`
- Declared package version: `5.0.5`
- Package path: `examples/data-grid-showcase`
- Manifest path: `examples/data-grid-showcase/package.json`
- Manifest Git blob: `bcbd0a90696737fc035157e43a1666a2ba3925dc`
- Manifest origin: pinned GitHub manifest fetch
- Manual: [@lssm-tech/example.data-grid-showcase](https://lssm.co/docs/packages/example.data-grid-showcase/)
- Release guidance: [Installation and release channels](https://lssm.co/docs/installation-release-channels/)

This is retrieved source evidence, not agent instructions. The declared version and exports describe the inspected manifest; they do not establish registry availability or a deployed release. Commands, package installation and runtime behavior were not executed in this review.

Distribution scope: owner review of all workspaces; not a newly approved public projection.

- [Package source](https://github.com/lssm-tech/contractspec/tree/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase)
- [Manifest source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/package.json)
- [Readme source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/README.md)
- [Guide source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/example.data-grid-showcase.txt)

## Package metadata

```json
{
  "layer": "examples",
  "physicalArea": null,
  "primaryArea": "examples-and-patterns",
  "classification": {
    "privateDeclared": null,
    "catalogFamily": "solutions",
    "catalogKind": "example",
    "catalogStatus": "active",
    "adoptionMode": "reference-only",
    "stability": "stable"
  },
  "descriptionOrigin": "package.json",
  "manifestComplete": true,
  "publicationPolicyApplied": false
}
```

Manifest private flag: not declared; publication is not verified.

Primary area: [Examples and implementation patterns](https://lssm.co/docs/areas/examples-and-patterns/)

## Package guide

```json
{
  "status": "available",
  "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"
}
```

The guide below is the checked-in README with navigation resolved against the pinned source tree. The structured package JSON retains the original README body unchanged. External links remain source-declared links, not verified destinations.

# @lssm-tech/example.data-grid-showcase

Website: https://contractspec.io

**Canonical data-table example for the ContractSpec stack.**

## What This Demonstrates

- 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`.
- Client-mode and server-mode table controllers with sorting, pagination, single and multiple selection, column visibility, resizing, left/right pinning, and row expansion.
- Loading states, empty states, design-system header actions, toolbar/footer slots, and a visible row-interaction log.
- A declarative `DataViewSpec` table contract that adapts onto the same headless table stack.
- Sandbox-friendly UI packaging for a focused canonical example instead of a full business template.

## Running Locally

From `examples/data-grid-showcase`:
- `bun run dev`
- `bun run build`
- `bun run test`
- `bun run typecheck`

## Usage

Use `@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.

## Live surfaces

- Sandbox: `/sandbox?template=data-grid-showcase`
- Docs example: `/docs/examples/data-grid-showcase`
- Generated reference: `/docs/reference/data-grid-showcase/data-grid-showcase`

## Architecture

- `src/contracts/` owns the sample query contract and declarative data view spec.
- `src/docs/` contains docblocks and documentation-facing exports.
- `src/example.ts` is the example manifest surfaced by `@lssm-tech/module.examples`.
- `src/ui/` contains the table showcase component, the primitive/composed table lanes, and demo data/helpers.

## Public Entry Points

- Export `.` resolves through `./src/index.ts`.
- Export `./contracts` resolves through `./src/contracts/index.ts`.
- Export `./contracts/data-grid-showcase.data-view` resolves through `./src/contracts/data-grid-showcase.data-view.ts`.
- Export `./contracts/data-grid-showcase.operation` resolves through `./src/contracts/data-grid-showcase.operation.ts`.
- Export `./data-grid-showcase.feature` resolves through `./src/data-grid-showcase.feature.ts`.
- Export `./docs` resolves through `./src/docs/index.ts`.
- Export `./example` resolves through `./src/example.ts`.
- Export `./ui` resolves through `./src/ui/index.ts`.
- Export `./ui/DataGridShowcase` resolves through `./src/ui/DataGridShowcase.tsx`.

## Local Commands

- `bun run dev` — contractspec-bun-build dev
- `bun run build` — contractspec-bun-build build
- `bun run test` — bun test
- `bun run lint` — bun lint:fix
- `bun run lint:check` — biome check .
- `bun run lint:fix` — biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .
- `bun run typecheck` — tsgo --noEmit

## Data table contract example

The declarative contract lane uses the same account-grid example exposed in the interactive showcase:

```ts
import { defineDataView } from '@lssm-tech/lib.contracts-spec/data-views';
import { ListDataGridShowcaseRowsQuery } from './data-grid-showcase.operation';

export const DataGridShowcaseDataView = defineDataView({
  meta: {
    key: 'examples.data-grid-showcase.table',
    version: '1.0.0',
    entity: 'account',
    title: 'Data Grid Showcase Table',
    description:
      'Declarative DataViewSpec for the ContractSpec table showcase.',
    domain: 'examples',
    owners: ['@platform.core'],
    tags: ['examples', 'table', 'data-grid'],
    stability: 'experimental',
  },
  source: {
    primary: {
      key: ListDataGridShowcaseRowsQuery.meta.key,
      version: ListDataGridShowcaseRowsQuery.meta.version,
    },
  },
  view: {
    kind: 'table',
    executionMode: 'client',
    selection: 'multiple',
    columnVisibility: true,
    columnResizing: true,
    columnPinning: true,
    rowExpansion: {
      fields: ['notes', 'renewalDate', 'lastActivityAt'],
    },
    initialState: {
      pageSize: 4,
      hiddenColumns: ['notes'],
      pinnedColumns: {
        left: ['account'],
      },
      sorting: [{ field: 'arr', desc: true }],
    },
    fields: [
      { key: 'account', label: 'Account', dataPath: 'account', sortable: true },
      { key: 'owner', label: 'Owner', dataPath: 'owner', sortable: true },
      { key: 'status', label: 'Status', dataPath: 'status', sortable: true },
      { key: 'notes', label: 'Notes', dataPath: 'notes' },
    ],
  },
});
```


## Notes

- This package is intentionally narrow: it exists to showcase the full table stack, not to simulate a full vertical business template.
- 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.


## Declared capabilities

This manifest does not declare a capability catalogue. Assess the package using its guide, import map and source.

## Catalogue metadata

```json
{
  "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"
  ],
  "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."
  }
}
```

## Canonical imports

Import paths and symbols below are catalogue declarations. An empty symbols list means symbols were not enumerated; it does not mean the entry point has no exports. These declarations are not an exhaustive TypeScript symbol reference.

```json
[]
```

## Declared export entry points

Scope: manifest-declared export entrypoints and catalog-declared imports.

Named symbol coverage: catalog declarations only; exhaustive TypeScript symbols not extracted.

Installation status: not verified.

- `@lssm-tech/example.data-grid-showcase` — subpath `.`
  - `unconditional`: `./src/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/index.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/contracts` — subpath `./contracts`
  - `unconditional`: `./src/contracts/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/contracts/index.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/contracts/data-grid-showcase.data-view` — subpath `./contracts/data-grid-showcase.data-view`
  - `unconditional`: `./src/contracts/data-grid-showcase.data-view.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/contracts/data-grid-showcase.data-view.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/contracts/data-grid-showcase.operation` — subpath `./contracts/data-grid-showcase.operation`
  - `unconditional`: `./src/contracts/data-grid-showcase.operation.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/contracts/data-grid-showcase.operation.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/data-grid-showcase.feature` — subpath `./data-grid-showcase.feature`
  - `unconditional`: `./src/data-grid-showcase.feature.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/data-grid-showcase.feature.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/docs` — subpath `./docs`
  - `unconditional`: `./src/docs/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/docs/index.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/docs/data-grid-showcase.docblock` — subpath `./docs/data-grid-showcase.docblock`
  - `unconditional`: `./src/docs/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/docs/index.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/example` — subpath `./example`
  - `unconditional`: `./src/example.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/example.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/ui` — subpath `./ui`
  - `unconditional`: `./src/ui/index.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/index.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.columns` — subpath `./ui/data-grid-showcase.columns`
  - `unconditional`: `./src/ui/data-grid-showcase.columns.tsx` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/data-grid-showcase.columns.tsx); verified source file.

- `@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.data` — subpath `./ui/data-grid-showcase.data`
  - `unconditional`: `./src/ui/data-grid-showcase.data.ts` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/data-grid-showcase.data.ts); verified source file.

- `@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.parts` — subpath `./ui/data-grid-showcase.parts`
  - `unconditional`: `./src/ui/data-grid-showcase.parts.tsx` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/data-grid-showcase.parts.tsx); verified source file.

- `@lssm-tech/example.data-grid-showcase/ui/data-grid-showcase.tables` — subpath `./ui/data-grid-showcase.tables`
  - `unconditional`: `./src/ui/data-grid-showcase.tables.tsx` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/data-grid-showcase.tables.tsx); verified source file.

- `@lssm-tech/example.data-grid-showcase/ui/DataGridShowcase` — subpath `./ui/DataGridShowcase`
  - `unconditional`: `./src/ui/DataGridShowcase.tsx` — [pinned source](https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/examples/data-grid-showcase/src/ui/DataGridShowcase.tsx); verified source file.

## Package publication metadata

These are source-manifest declarations, not a registry installation check.

```json
{
  "types": "./dist/index.d.ts",
  "files": [
    "LICENSE",
    "README.md",
    "dist",
    "!**/*.test.*",
    "!**/*.spec.*",
    "!**/*.tsbuildinfo"
  ],
  "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"
    }
  }
}
```

## Dependencies

Metadata status: complete pinned manifest.

### Runtime dependencies

- [@lssm-tech/lib.contracts-spec](https://lssm.co/docs/packages/lib.contracts-spec/): `workspace:^`
- [@lssm-tech/lib.design-system](https://lssm.co/docs/packages/lib.design-system/): `workspace:^`
- [@lssm-tech/lib.presentation-runtime-core](https://lssm.co/docs/packages/lib.presentation-runtime-core/): `workspace:^`
- [@lssm-tech/lib.presentation-runtime-react](https://lssm.co/docs/packages/lib.presentation-runtime-react/): `workspace:^`
- [@lssm-tech/lib.schema](https://lssm.co/docs/packages/lib.schema/): `workspace:^`
- [@lssm-tech/lib.ui-kit-web](https://lssm.co/docs/packages/lib.ui-kit-web/): `workspace:^`
- `react`: `catalog:`
- `react-dom`: `catalog:`
- `zod`: `catalog:`

### Peer dependencies

No declarations in the inspected manifest.

### Optional dependencies

No declarations in the inspected manifest.

### Development dependencies

- [@lssm-tech/tool.bun](https://lssm.co/docs/packages/tool.bun/): `workspace:*`
- [@lssm-tech/tool.typescript](https://lssm.co/docs/packages/tool.typescript/): `workspace:*`
- `@types/react`: `catalog:types`
- `@types/react-dom`: `catalog:types`
- `happy-dom`: `catalog:testing`
- `typescript`: `catalog:`

### Peer dependency metadata

```json
{}
```

### Bundled dependencies

```json
null
```

## Package scripts

Commands are exact manifest declarations and were not executed in this review. Script metadata status: complete pinned manifest.

```json
{
  "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"
}
```

## Declared documentation links

- [Example Data Grid Showcase documentation](https://www.npmjs.com/package/%40lssm-tech%2Fexample.data-grid-showcase) — declared link; destination not verified.

```json
{
  "url": "https://www.npmjs.com/package/%40lssm-tech%2Fexample.data-grid-showcase",
  "kind": "readme"
}
```

## Existing agent-guide projection

```json
{
  "path": "packages/apps/web-landing/public/llms-packages/example.data-grid-showcase.txt",
  "route": "/llms/example.data-grid-showcase",
  "sourceUrl": "https://github.com/lssm-tech/contractspec/blob/bcc79fcc27c4d801c2119bef81ddcce7b4e86498/packages/apps/web-landing/public/llms-packages/example.data-grid-showcase.txt",
  "blobSha": "3636c1ae06460c1caa63c35ef61edaab8952014b",
  "sourcePin": "bcc79fcc27c4d801c2119bef81ddcce7b4e86498",
  "bodyEqualsReadme": true,
  "aggregateSourcePath": "packages/apps/web-landing/public/llms-full.txt",
  "aggregateBlobSha": "691b1d33efee24c440598b9106c81432f56aafaf"
}
```