nabs-ui-grid

Schema-driven high-performance data grid control for Nabs UI.

Highlights

• Typed, schema-driven columns and interaction metadata.
• Data finding with global search and per-column filtering.
• Sorting, paging, grouping, row selection, and aggregate footer values.
• Inline and dialog editing modes.
• Supports static objects and async/API sources for schema and data.
• Supports direct JSON Schema references using x-grid metadata extensions.
• Supports server mode via serverDataSource(query, schema).
• Supports static JSON-island setup payloads (jsonIsland) that include schema/jsonSchema + data.

Usage

import { Grid } from "@net-advantage/nabs-ui-grid";
import type { GridSchema } from "@net-advantage/nabs-ui-grid";

const schema: GridSchema = {
  idField: "id",
  pageSize: 8,
  pageSizeOptions: [8, 16, 32],
  columns: [
    { key: "name", label: "Name", type: "string", sortable: true, filterable: true, editable: true },
    { key: "department", label: "Department", type: "string", sortable: true, filterable: true, groupable: true, editable: true },
    { key: "salary", label: "Salary", type: "number", sortable: true, filterable: true, editable: true, format: "currency", aggregate: "avg" },
    { key: "active", label: "Active", type: "boolean", sortable: true, filterable: true, editable: true },
  ],
};

const rows = [
  { id: 1, name: "Ada Lovelace", department: "Engineering", salary: 160000, active: true },
  { id: 2, name: "Alan Turing", department: "Research", salary: 172500, active: true },
];

export function Example() {
  return <Grid schema={schema} data={rows} editMode="both" />;
}

API Source Usage

<Grid
  schemaSource="/api/grid-schema"
  dataSource="/api/grid-data"
  fetcher={async (url) => {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Failed request: ${response.status}`);
    }
    return response.json();
  }}
/>

JSON Schema Reference Usage

import { Grid } from "@net-advantage/nabs-ui-grid";
import type { GridJsonSchema } from "@net-advantage/nabs-ui-grid";

const employeeJsonSchema: GridJsonSchema = {
  type: "object",
  required: ["employee", "salary"],
  properties: {
    id: { type: "integer", title: "Id", "x-grid": { sortable: true, editable: false } },
    employee: { type: "string", title: "Employee", "x-grid": { filterable: true, editable: true } },
    department: {
      type: "string",
      title: "Department",
      enum: ["Engineering", "Research", "Product"],
      "x-grid": { groupable: true, editable: true },
    },
    salary: {
      type: "number",
      title: "Salary",
      format: "currency",
      "x-grid": { aggregate: "avg", editor: "number", editable: true },
    },
    active: { type: "boolean", title: "Active", "x-grid": { editable: true, editor: "checkbox" } },
  },
  "x-grid": {
    idField: "id",
    pageSize: 10,
    pageSizeOptions: [10, 20, 50],
    defaultSort: { columnKey: "salary", direction: "desc" },
    selectionMode: "multiple",
    footer: {
      showColumnAggregates: true,
      rowAggregates: ["filteredRows", "pagedRows", "selectedRows", "groupCount"],
    },
  },
};

<Grid jsonSchema={employeeJsonSchema} data={rows} />;

You can also load JSON Schema remotely:

<Grid
  jsonSchemaSource="/api/grid/json-schema"
  dataSource="/api/grid/data"
  fetcher={async (url) => {
    const response = await fetch(url);
    return response.json();
  }}
/>

Server Mode

<Grid
  mode="server"
  schema={schema}
  serverDataSource={async (query) => {
    const response = await fetch("/api/grid/query", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(query),
    });

    return response.json();
  }}
/>

Static JSON-Island Setup

const island = {
  mode: "client",
  schema,
  data: rows,
};

<Grid jsonIsland={JSON.stringify(island)} />;