Data Grid - Columns

A fast and extendable data table and data grid for React. It's a feature-rich compoent available in MIT or Enterprise versions.

Column width

Column groups

Country	Area, sq. km.	Population	Nominal GDP

Column sizing

Name	Rating	Address	Phone	Country

<DataGrid
  style={{ maxHeight: 300, width: '100%' }}
  columns={[
    { field: 'name', label: 'Name' },
    { field: 'rating', label: 'Rating' },
    { field: 'address', label: 'Address' },
    { field: 'phone', label: 'Phone' },
    { field: 'country', label: 'Country' },
  ]}
  rowsData={data}
  defaultColumnOptions={{ resizable: true }}
/>

Benchmark

Column reorder

Column sticky

Country	Area, sq. km.	Population Total	Population Urban	GDP Total	GDP Agriculture	GDP Industry	GDP Services

<DataGrid
  style={{ maxHeight: 300, width: '100%' }}
  columns={[
    { field: 'Country', label: 'Country' },
    { field: 'Area', label: 'Area, sq. km.' },
    { field: 'Population_Total', label: 'Population Total' },
    { field: 'Population_Urban', label: 'Population Urban' },
    { field: 'GDP_Total', label: 'GDP Total' },
    { field: 'GDP_Agriculture', label: 'GDP Agriculture' },
    { field: 'GDP_Industry', label: 'GDP Industry' },
    { field: 'GDP_Services', label: 'GDP Services' },
  ]}
  rowsData={data}
/>

Column spanning

API

<DataGrid />