Column Definitions

While the Grid can infer columns dynamically, you will often want explicit control over your data mapping.

Explicit Columns

import { RadiantGrid, GridColumnDef } from 'radiant-grid';

const columns: GridColumnDef[] = [
  { id: 'id', field: 'id', headerName: 'ID', width: 80, pinned: 'left' },
  { id: 'name', field: 'name', headerName: 'Full Name', width: 200 },
  { id: 'custom', headerName: 'Status', cellRenderer: ({ row }) => <span>{row.active ? '✅' : '❌'}</span> }
];

export function App() {
  return <RadiantGrid data={data} columns={columns} />;
}

The Column Enhancer

If you want the best of both worlds (dynamic inference with manual overrides), you can pass a columnEnhancer function. This acts as a middleware pipeline that receives the auto-generated column before it renders.

<RadiantGrid
  data={data}
  columnEnhancer={(col) => {
    if (col.id === 'passwordHash') return null; // Drop secret columns
    if (col.type === 'number') col.width = 100; // Resize all numbers
    return col;
  }}
/>

Column Definitions

While the Grid can infer columns dynamically, you will often want explicit control over your data mapping.

Explicit Columns

import { RadiantGrid, GridColumnDef } from 'radiant-grid';

const columns: GridColumnDef[] = [
  { id: 'id', field: 'id', headerName: 'ID', width: 80, pinned: 'left' },
  { id: 'name', field: 'name', headerName: 'Full Name', width: 200 },
  { id: 'custom', headerName: 'Status', cellRenderer: ({ row }) => <span>{row.active ? '✅' : '❌'}</span> }
];

export function App() {
  return <RadiantGrid data={data} columns={columns} />;
}

The Column Enhancer

<RadiantGrid
  data={data}
  columnEnhancer={(col) => {
    if (col.id === 'passwordHash') return null; // Drop secret columns
    if (col.type === 'number') col.width = 100; // Resize all numbers
    return col;
  }}
/>