mates-grid docs

mates-grid

Column Definitions

Each ColDef is a field, a header, and optional width, pin, formatter, filter, and renderer. Cells are text unless you supply cellRenderer.

Fields, headers, and formatters

headerName defaults to a humanized field. valueFormatter only changes display — sort and filter still use the raw value.

{ field: "amount", headerName: "USD", valueFormatter: ({ value }) =>
  `$${Number(value).toLocaleString()}` }

Computed columns

Use valueGetter when the cell is not a raw field. Give it a colId so sort, filter, and pin have a stable identity.

{
  colId: "unit",
  headerName: "Unit price",
  valueGetter: ({ data }) => Number(data.amount) / Number(data.qty),
}