DataViews Runtime Library

The @lssm/lib.contracts/data-views and @lssm/lib.design-system libraries provide the runtime logic and UI components to render DataViews in your application.

Installation

npm install @lssm/lib.contracts @lssm/lib.design-system

DataViewRenderer

The primary component for rendering any DataView. It automatically selects the correct layout (List, Table, Grid, Detail) based on the spec.

import { DataViewRenderer } from '@lssm/lib.design-system';
import { MyUserList } from './specs/users.data-view';

export function UserPage() {
  return (
    <DataViewRenderer
      spec={MyUserList}
      items={users}
      pagination={{ page: 1, pageSize: 20, total: 100 }}
      onPageChange={(page) => fetchPage(page)}
    />
  );
}

Props

  • spec: The DataViewSpec definition.
  • items: Array of data items to render.
  • filters: Current filter state object.
  • onFilterChange: Callback when filters change.
  • pagination: Object with page, pageSize, total.
  • onPageChange: Callback when page changes.

Query Generation

The DataViewQueryGenerator utility helps translate DataView parameters (filters, sorting, pagination) into query arguments for your backend.

import { DataViewQueryGenerator } from '@lssm/lib.contracts/data-views/query-generator';

const generator = new DataViewQueryGenerator(MyUserList);
const query = generator.generate({
  pagination: { page: 1, pageSize: 20 },
  filters: { role: 'admin' }
});

// query.input contains { skip: 0, take: 20, role: 'admin' }