React Data Grid Columns Overview

Columns are defined by the columns prop. Each entry maps a key in your data to a header and a cell. This page covers the essentials; per-column features live on their own pages: sizing, pinning, ordering & visibility and the column menu.

Defining columns

<CDataGrid
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email' },
    { key: 'role', label: 'Role' },
  ]}
  items={items}
/>

key is the property read from each item and doubles as the column id. label is the header text — it falls back to key when omitted.

Formatting values

Use formatter to transform the displayed value. It’s cheap and stays on the scroll hot path, so it’s the right tool for dates, numbers and currency:

{
  key: 'createdAt',
  label: 'Created',
  formatter: (value) => new Date(value).toLocaleDateString(),
}

formatter output is also what CSV export writes.

Rich cell content

Use render for full custom cell content — action buttons, badges, links. render returns JSX and is never used for CSV export:

{
  key: 'actions',
  label: '',
  render: (item) => (
    <button type="button" className="btn btn-sm btn-primary" onClick={() => edit(item)}>
      Edit
    </button>
  ),
}

Use formatter or render per column — formatter for values on the hot path, render for interactive content. See the column API for every key.