Data Grid Columns

Learn about building columns in the Data Grid component.

source

Overview

Column definitions are the foundational building blocks of the Data Grid component. They define the structure and appearance of each column, including its label, data type, and formatting options. This creates a data-driven single source of truth for the grid's visual representation.

Thus, the DataGrid component is essentially just a layout container that simply renders column definitions. It passes the state of the column to the cell property which is what renders the actual content of each cell.

Each column has the ability to opt-in to features listed in the Features section.

Column Definitions

There are three types of column definitions:

Display
Accessor
Accessor Function

All column definitions can display custom content using the cell property. This allows you to customize the visual output appearance of each cell content.

Display Columns

Display columns are used to render static columns that do not utilize data-driven column features (e.g., filtering or sorting).

Params	Type	Required
options	`DisplayOptions<TData>`	true

Accessor Columns

Accessor columns are used to render data that is directly related to the data source and utilize all features.

Params	Type	Required
key	`string`	true
options	`AccessorOptions<TData, TValue[TKey]>`	true

Accessor Function Columns

Accessor function columns are used to render data that is derived from the data source. They are typically used to display low-level customization like aggregating data or performing complex calculations.

Params	Type	Required
accessorFn	`(data: TData) => TValue`	true
options	`AccessorOptions<TData, TValue>`	true

Shared Column Options

Both Display and Accessor columns share the following options:

Params	Type	Required	Description
`id`	`string`	true	Unique identifier for the column
`header`	`string/Fn`	true	Header text or function to generate header text
`accessor`	`Fn`	true	Accessor function or key to access data
`minWidth`	`number`	false	Minimum width of the column. Ensure your column width is large enough to fit all features and content
`width`	`number`	false	Strict width of the column. Omitting this will render a flexed column. Adding this will override all widths. Ensure your column width is large enough to fit all features and content
`maxWidth`	`number`	false	Maximum width of the column. Ensure your column width is large enough to fit all features and content
`features`	`Feature[]`	false	Array of features to enable on the column
`cell`	`CellOptions<TData, TValue>`	false	Options for rendering the cell. Not providing this will render a string.

On this page

Edit this page on Github

Data Grid Columns

Learn about building columns in the Data Grid component.

source

Overview

Each column has the ability to opt-in to features listed in the Features section.

Column Definitions

There are three types of column definitions:

Display
Accessor
Accessor Function

All column definitions can display custom content using the cell property. This allows you to customize the visual output appearance of each cell content.

Display Columns

Display columns are used to render static columns that do not utilize data-driven column features (e.g., filtering or sorting).

Params	Type	Required
options	`DisplayOptions<TData>`	true

Accessor Columns

Accessor columns are used to render data that is directly related to the data source and utilize all features.

Params	Type	Required
key	`string`	true
options	`AccessorOptions<TData, TValue[TKey]>`	true

Accessor Function Columns

Params	Type	Required
accessorFn	`(data: TData) => TValue`	true
options	`AccessorOptions<TData, TValue>`	true

Shared Column Options

Both Display and Accessor columns share the following options:

Params	Type	Required	Description
`id`	`string`	true	Unique identifier for the column
`header`	`string/Fn`	true	Header text or function to generate header text
`accessor`	`Fn`	true	Accessor function or key to access data
`minWidth`	`number`	false	Minimum width of the column. Ensure your column width is large enough to fit all features and content
`width`	`number`	false	Strict width of the column. Omitting this will render a flexed column. Adding this will override all widths. Ensure your column width is large enough to fit all features and content
`maxWidth`	`number`	false	Maximum width of the column. Ensure your column width is large enough to fit all features and content
`features`	`Feature[]`	false	Array of features to enable on the column
`cell`	`CellOptions<TData, TValue>`	false	Options for rendering the cell. Not providing this will render a string.

Cerberus Design System | Docs

import { type ColCell, type ColumnFeatures } from '@cerberus/data-grid'
import { ReactNode } from 'react'

export type DisplayOptions<TData, TKey extends keyof TData> = {
  id: string
  header: string | ((props: { colId: string }) => ReactNode)
  width?: number
  features?: { pinning?: ColumnFeatures<TData, TKey>['pinning'] }
  cell: ColCell<TData>
}

// columnHelper.display({
//   id: 'actions',
//   header: '',
//   width: 60,
//   features: {
//     pinning: true,
//   },
//   cell: () => (
//     <IconButton ariaLabel="View more options">
//       <OverflowMenuHorizontal />
//     </IconButton>
//   ),
// })

import { type ColCell, type ColumnFeatures } from '@cerberus/data-grid'
import { type ReactNode } from 'react'

export type AccessorOptions<TData, TKey extends keyof TData> = {
  id?: string
  header: string | ((props: { colId: string }) => ReactNode)
  minWidth?: number
  maxWidth?: number
  width?: number
  features?: ColumnFeatures<TData, TKey>
  cell?: ColCell<TData>
}

// columnHelper.accessor('id', {
//   header: 'ID',
//   width: 80,
//   features: {
//     pinning: 'left',
//     sort: true,
//   },
//   cell: ({ value }) => <Text>#{value}</Text>,
// })

import { type ColCell, type ColumnFeatures } from '@cerberus/data-grid'
import { type ReactNode } from 'react'

export type AccessorOptions<TData, TKey extends keyof TData> = {
  id?: string
  header: string | ((props: { colId: string }) => ReactNode)
  minWidth?: number
  maxWidth?: number
  width?: number
  features?: ColumnFeatures<TData, TKey>
  cell?: ColCell<TData>
}

// columnHelper.accessorFn((row) => `${row.firstName} ${row.lastName}`, {
//   id: 'fullName',
//   header: 'Employee',
//   width: 200,
//   features: {
//     sort: true,
//     filter: { operator: 'contains' },
//   },
//   cell: ({ row, value }) => (
//     <VStack alignItems="flex-start" gap="2">
//       <Text textStyle="body-md">{value}</Text>
//       <Text color="page.text.100" textStyle="label-sm">
//         {row.email}
//       </Text>
//     </VStack>
//   ),
// })