Data Grid - Rows

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

Row sorting

Enable sorting

You can enable sorting by setting the sortable option. Then sort a column by clicking on the column header.

<DataGrid
  columns={[
    { field: 'name', sortable: true },
    { field: 'phone' },
  ]}
/>

To enable sorting for all columns, set sorting in the default column definition.

<DataGrid
  columns={[
    { field: 'name' },
    { field: 'phone' },
  ]}
  defaultColumnOptions={{ sortable: true }}
/>

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={{ sortable: true }}
/>

Multi-column sorting

You can sort multiple by columns at the same time. Hold the Shift key down while clicking the column header.

Custom sorting

You can customize the comparison function with the sortingCompartor option. For instance, a column might have date strings as the row data.

Name	Birthday

<DataGrid
  style={{ maxHeight: 300, width: '100%' }}
  columns={[
    { field: 'name', label: 'Name' },
    { field: 'birthday', label: 'Birthday', sortingComparator },
  ]}
  rowsData={data}
  defaultColumnOptions={{ sortable: true }}
/>

Sorting order

By default, the sorting order loops between these tree different modes:

const sortingOrder = ['asc', 'desc', null];

In practice, when you click a column that is not sorted, it will sort ascending (asc). The next click will make it sort descending (desc). Another click will remove the sort (null).

You can provide a custom sortingOrder value to customize this behavior.

Controllable sort

You can control the sort from the outside. The component supports tree props to do so: