DataViews Runtime Library

1import { DataViewRenderer } from '@lssm-tech/lib.design-system';
2import { MyUserList } from './specs/users.data-view';
3
4export function UserPage() {
5  return (
6    <DataViewRenderer
7      spec={MyUserList}
8      items={users}
9      pagination={{ page: 1, pageSize: 20, total: 100 }}
10      onPageChange={(page) => fetchPage(page)}
11    />
12  );
13}

1import { defineDataView } from '@lssm-tech/lib.contracts-spec/data-views';
2import { defineTranslation } from '@lssm-tech/lib.contracts-spec/translations';
3
4const bundle = defineTranslation({
5  meta: { key: 'crm.accounts', version: '1.0.0', domain: 'crm', owners: ['@crm'] },
6  locale: 'en',
7  messages: { 'Name': { value: 'Name' }, 'Owner': { value: 'Owner' }, 'ARR': { value: 'ARR' }, 'Internal notes': { value: 'Internal notes' } },
8});
9
10export const AccountsDataView = defineDataView(bundle, {
11  meta: {
12    key: 'crm.accounts',
13    version: '1.0.0',
14    title: 'Accounts',
15    description: 'Customer account workspace',
16    domain: 'crm',
17    entity: 'account',
18    owners: ['@crm'],
19    tags: ['crm', 'accounts'],
20    stability: 'stable',
21  },
22  source: {
23    primary: { key: 'crm.accounts.list', version: '1.0.0' },
24  },
25  view: {
26    kind: 'table',
27    fields: [
28      { key: 'name', label: 'Name', dataPath: 'name', sortable: true },
29      { key: 'owner', label: 'Owner', dataPath: 'owner' },
30      { key: 'arr', label: 'ARR', dataPath: 'arr', format: { type: 'currency', currency: 'EUR' } },
31      {
32        key: 'internalNotes',
33        label: 'Internal notes',
34        dataPath: 'internalNotes',
35        visibility: { minDataDepth: 'detailed' },
36      },
37    ],
38    columns: [
39      { field: 'name' },
40      { field: 'owner' },
41      { field: 'arr' },
42      { field: 'internalNotes' },
43    ],
44    collection: {
45      viewModes: {
46        defaultMode: 'table',
47        allowedModes: ['list', 'grid', 'table'],
48      },
49      pagination: {
50        pageSize: 25,
51        pageSizeOptions: [10, 25, 50],
52      },
53      toolbar: {
54        search: true,
55        viewMode: true,
56        filters: true,
57        density: true,
58        dataDepth: true,
59      },
60      density: 'comfortable',
61      dataDepth: 'standard',
62      personalization: {
63        enabled: true,
64        persist: {
65          viewMode: true,
66          density: true,
67          dataDepth: true,
68          pageSize: true,
69        },
70      },
71    },
72  },
73});

1import { DataViewRenderer } from '@lssm-tech/lib.design-system';
2import { resolveDataViewPreferences } from '@lssm-tech/lib.personalization/data-view-preferences';
3
4const resolved = resolveDataViewPreferences({
5  spec: AccountsDataView,
6  preferences: profile.canonical,
7  insights,
8  record: savedDataViewPreference,
9});
10
11<DataViewRenderer
12  spec={AccountsDataView}
13  items={accounts}
14  defaultViewMode={resolved.viewMode}
15  defaultDensity={resolved.density}
16  defaultDataDepth={resolved.dataDepth}
17  pagination={{
18    page,
19    pageSize: resolved.pageSize ?? 25,
20    total,
21  }}
22  onViewModeChange={(viewMode) => {
23    tracker.trackDataViewInteraction({
24      dataViewKey: AccountsDataView.meta.key,
25      dataViewVersion: AccountsDataView.meta.version,
26      action: 'view_mode_changed',
27      viewMode,
28    });
29  }}
30  onDensityChange={(density) => {
31    tracker.trackDataViewInteraction({
32      dataViewKey: AccountsDataView.meta.key,
33      action: 'density_changed',
34      density,
35    });
36  }}
37  onDataDepthChange={(dataDepth) => {
38    tracker.trackDataViewInteraction({
39      dataViewKey: AccountsDataView.meta.key,
40      action: 'data_depth_changed',
41      dataDepth,
42    });
43  }}
44/>;
45

1Implement a production DataView for <entity>.
2
3Requirements:
4- Define one canonical DataViewSpec with kind 'table', collection viewModes for list/grid/table, pagination defaults, toolbar search/filter/view mode/density/dataDepth controls, and personalization persist hints.
5- Mark fields that should only appear in richer experiences with visibility.minDataDepth.
6- Render it with DataViewRenderer using plain props from resolveDataViewPreferences.
7- Track user interactions with trackDataViewInteraction for view mode, density, data depth, search, filters, sorting, and pagination.
8- Keep @lssm-tech/lib.design-system independent from @lssm-tech/lib.personalization.
9- Add focused tests for default resolution, invalid-mode fallback, data-depth projection, and behavior-derived preferred view mode.

1import { DataViewQueryGenerator } from '@lssm-tech/lib.contracts-spec/data-views/query-generator';
2
3const generator = new DataViewQueryGenerator(MyUserList);
4const params = {
5  pagination: { page: 1, pageSize: 20 },
6  filters: {
7    role: { kind: 'single', value: 'admin' },
8    revenue: { kind: 'range', from: 1000, to: 5000 },
9    lastSeenAt: { kind: 'single', value: '2026-04-28T08:30:00Z' }
10  }
11};
12
13const errors = generator.validateParams(params);
14const query = generator.generate(params);
15
16// query.input contains skip/take plus the typed filter payloads.