DataGrid Columns

Columns are defined as an array of ColumnDefinitions. Several options are available to describe how cell content needs to be rendered. All columns definitions require a unique (per table) key property that unambiguously identifies it.

Value Selection

By default, a cell's value is determined from the property in the data that corresponds to the key in the column definition. This can optionally be overriden with the getValue getter that allows you to select or compute a value based on a row.

{
  key: 'computed',
  width: 200,
  getValue: (row) => `${row.lat}, ${row.long}`,
},

Alignment

Use the align property to justify content at either edge of a cell, or to the center.

{
  key: 'end',
  align: 'end',
},

Flex

If the columns take up less space than available, you can make them flex to fill up the available space. Use a flex property on the column definition to specify how much of the available space you want to allocate to the column. This number is a unitless number that specifies the feaction of available space that this column will take. Resizing a column removes its ability to flex.

{
  key: 'third',
  flex: 2,
},

Pinned Columns

Use the pin property to pin columns at the start or end of the grid. It is possible to pin multiple columns at either side of the grid.

{
  key: 'firstName',
  pin: 'start',
},

Custom Content

Use the renderContent option to gain more control over what exactly gets rendered in a cell. This works exactly like a render prop and you can return any valid react node from it.

{
  key: 'location',
  width: 150,
  getValue: (row) => [row.lat, row.long],
  renderContent: ({ value: [lat, long] }) => (
    <Link
      noWrap
      sx={{ display: 'block' }}
      href={`https://www.google.com/maps/search/?api=1&query=${lat},${long}`}
    >
      {lat}, {long}
    </Link>
  ),
  header: 'Location',
},