Sort

By default only the Amount, Autocomplete, Checkbox, Date, Number Select and String columns are sortable.

You need to specify the sortOrder for each options of your Select column to make it works.

{
  typeCell: 'select',
  options: [
    {
      value: 'one',
      label: 'First',
      sortOrder: 1,
    }, {
      value: 'three',
      label: 'Third',
      sortOrder: 3,
    }, {
      value: 'two',
      label: 'Second',
      sortOrder: 2
    }
  ]
}

note

The sortOrder only affect the sorting. The menu items order keeps following the order of the options property.

Unsupported column types

You can activate the sorting on others column types by setting the sortable property to true. We recommend using a custom sorting function for those columns as the default result will be unpredictable.

Custom sorting

You can use your own sorting algorithm for any type of column with the sortComparator property.

const badgeValue = (badge) => {
  switch (badge) {
    case 'ok':
      return 1;
    case 'in-progress':
      return 2;
    default:
      return -1
  }
};

const config = {
  columns: [
    {
      typeCell: 'badge_status',
      sortable: true,
      sortComparator: (a, b) => badgeValue(a) - badgeValue(b)
    },
    ...
  ],
  ...
};

interface sortComparator {
  (a, b, rowA:Row, rowB:Row): number
}