Gloss UI Kit v4.4 — Component Library

UnifiedBreakdownTable

A generic typed DataGridPro wrapper for breakdown data tables. Supports sortable columns, column filtering, pagination, and type-safe row definitions via the generic <TRow> parameter.

Live DataGridPro Table

Dataset Toggle

The same UnifiedBreakdownTable component handles different data shapes via its generic <TRow> type parameter. Toggle between orders and items to see different column definitions and row structures.

Usage

JSX

import { UnifiedBreakdownTable } from '@so.boss/gloss-ui';
import type { ColumnDef } from '@so.boss/gloss-ui';

interface ProductRow {
  id: string;
  name: string;
  quantity: number;
  revenue: number;
}

const columns: ColumnDef<ProductRow>[] = [
  { field: 'name', headerName: 'Product', flex: 1, minWidth: 200 },
  { field: 'quantity', headerName: 'Qty', width: 100, align: 'right', headerAlign: 'right' },
  { field: 'revenue', headerName: 'Revenue', width: 150, align: 'right', headerAlign: 'right',
    renderCell: ({ row }) => `$${row.revenue.toLocaleString()}` },
];

<UnifiedBreakdownTable<ProductRow>
  columns={columns}
  data={productData}
  pagination={{
    page: 0,
    pageSize: 10,
    total: productData.length,
    onPageChange: (page, pageSize) => { /* handle */ },
  }}
/>

Props Reference

UnifiedBreakdownTable<TRow>

Prop	Type	Default	Description
`data`	`TRow[]`	—	Array of row data. TRow must have an `id` field.
`columns`	`ColumnDef<TRow>[]`	—	Column definitions with type-safe field references
`isLoading`	`boolean`	`false`	Show loading overlay on the grid
`pagination`	`PaginationConfig`	`undefined`	Server-side pagination config (page, pageSize, total, onPageChange)
`sortModel`	`SortModel[]`	`undefined`	Controlled sort state
`onSort`	`(model: SortModel[]) => void`	`undefined`	Sort change callback
`onCellClick`	`(row, field, event) => void`	`undefined`	Cell click handler with typed row and field
`activeFilters`	`FilterChipData[]`	`undefined`	Active filter chips displayed above the grid

ColumnDef<TRow>

Field	Type	Description
`field`	`keyof TRow & string`	Type-safe key of the row object
`headerName`	`string`	Display name in the column header
`width`	`number`	Fixed column width in pixels
`flex`	`number`	Flex grow factor for responsive column sizing
`renderCell`	`(params) => ReactNode`	Custom cell renderer with typed row and value
`valueGetter`	`(params) => unknown`	Computed value getter for sorting and filtering