Skip to content

Data Grid - Columns

This section goes in details on the aspects of the columns you need to know.

Column definitions

Grid columns are definied with the columns prop. columns expects an array of objects. The columns should have this type: ColDef[].

field is the only required property since it's the column identifier. It's also used to match with RowData values.

interface ColDef {
  /**
   * The column identifier. It's used to match with [[RowData]] values.
   */
  field: string;
  …
}
<DataGrid
  columns={[{ field: 'id' }, { field: 'username' }, { field: 'age' }]}
  rows={[
    {
      id: 1,
      username: 'defunkt',
      age: 38,
    },
  ]}
/>

By default, columns are ordered according to the order they are included in the columns array.

Column headers

You can configure the headers with:

  • headerName: The title of the column rendered in the column header cell.
  • description: The description of the column rendered as tooltip if the column header name is not fully displayed.
  • hide: Hide the column.
<DataGrid
  columns={[
    { field: 'id', hide: true },
    {
      field: 'username',
      headerName: 'Username',
      description:
        'The identification used by the person with access to the online service.',
    },
    { field: 'age', headerName: 'Age' },
  ]}
  rows={rows}
/>

For more advanced header configuration, go to the rendering section.

Column width

By default, the columns have a width of 100 pixels. This is an arbitrary, easy to remember value. To change the width of a column, use the width property available in ColDef.

<DataGrid
  columns={[
    { field: 'id' },
    { field: 'username', width: 200 },
    { field: 'age' },
  ]}
  rows={rows}
/>

Column resizing ⚡️

By default, XGrid allows all columns to be resized by dragging the right portion of the column separator.

To prevent the resizing of a column, set resizable: false in the ColDef. Alternatively, to disable all columns resize, set the prop disableColumnResize={true}.

<XGrid
  columns={[
    { field: 'id' },
    { field: 'username' },
    { field: 'age', resizable: false },
  ]}
  rows={rows}
/>

Column types

To facilitate configuration of the columns, some column types are predefined. By default, columns are assumed to hold strings, so the default column string type will be applied. As a result, column sorting will use the string comparator, and the column content will be aligned to the left side of the cell.

The following are the native column types:

  • 'string' (default)
  • 'number'
  • 'date'
  • 'dateTime'

To apply a column type, you need to define the type property in your column definition.

<DataGrid
  columns={[
    { field: 'name', type: 'string' },
    { field: 'age', type: 'number' },
    { field: 'dateCreated', type: 'date', width: 130 },
    { field: 'lastLogin', type: 'dateTime', width: 180 },
  ]}
  rows={rows}
/>

Custom column types

You can extend the native column types with your own by simply spreading the necessary properties.

The demo below defines a new column type: usdPrice that extends the native number column type.

const usdPrice: ColTypeDef = {
  type: 'number',
  width: 130,
  valueFormatter: ({ value }) => valueFormatter.format(Number(value)),
  cellClassName: 'font-tabular-nums',
};
<DataGrid
  columns={[
    { field: 'status', width: 130 },
    { field: 'subTotal', ...usdPrice },
    { field: 'total', ...usdPrice },
  ]}
  rows={rows}
/>

🚧 Column groups

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #195 if you want to see it land faster.

Grouping columns allows you to have multiple levels of columns in your header and the ability, if needed, to 'open and close' column groups to show and hide additional columns.

🚧 Column reorder ⚡️

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #194 if you want to see it land faster.

Column reordering enables reordering the columns by dragging the header cells.

🚧 Column pinning ⚡️

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #193 if you want to see it land faster.

Sticky (or frozen, locked, or pinned) columns are columns that are visible at all times while the user scrolls the grid horizontally.

🚧 Column spanning

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #192 if you want to see it land faster.

Each cell takes up the width of one column. Column spanning allows to change this default behavior. It allows cells to span multiple columns. This is very close to the "column spanning" in an HTML <table>.