Components · data

Data grid

A full data grid: sortable columns, per-column filters, row selection, expandable detail rows, column show/hide, and lazy server-side loading in either paginated or infinite (“load more”) mode. The two grids below are driven by React with a mock server that adds latency — watch the skeleton rows on each load.

Lazy — paginated

Sorting, filtering and paging are sent to loadPage(); the grid renders skeleton rows while the “server” responds. Try sorting a column, typing in a filter, selecting rows, and expanding a row. Double-click a Mission or Grade cell to edit inline, and drag a column header to reorder.

DataGrid · lazyMode="pagination"

Loading React…

Lazy — infinite (load more)

DataGrid · lazyMode="infinite"

Loading React…

Usage

JSX

import { DataGrid } from "@diametral/design-system/react";

const columns = [
  { key: "id", header: "ID", sortable: true, align: "right", width: "64px" },
  { key: "name", header: "Mission", sortable: true, filterable: true },
  { key: "entity", header: "Entity", sortable: true, filterable: true },
  { key: "margin", header: "Margin %", sortable: true, align: "right",
    render: (r) => <span className="ds-numeric">{r.margin} %</span> },
];

// lazy/server mode: called on mount and on every sort/filter/page change
async function loadPage({ page, pageSize, sort, filters }) {
  const res = await fetch(`/api/missions?page=${page}&size=${pageSize}` +
    `&sort=${sort?.key ?? ""}:${sort?.dir ?? ""}`);
  const { rows, total } = await res.json();
  return { rows, total };
}

<DataGrid
  title="Missions"
  columns={columns}
  loadPage={loadPage}
  lazyMode="pagination"   // or "infinite"
  pageSize={8}
  selectable filterable
  expandable
  renderDetail={(r) => <div>Full detail for {r.name}</div>}
  onSelectionChange={(keys) => console.log(keys)}
/>

// Client mode: pass `rows` instead of `loadPage` for in-memory sort/filter/page.