useSort

The useSort plugin adds sorting functionality to your DataTable.

In order to mark a column as sortable, add sortable: true to any of the columns specified in your columns array. Then initialize the useSort() hook in your component and pass it to the DataTable as part of the plugins array.

Result

Loading...

Live Editor

const NameColumn = function ({ rowIndex, columnKey, value, dataTableId }) { const [localValue, setLocalValue] = React.useState(value); React.useEffect(() => { setLocalValue(value); }, [value]); return ( <TextField id={`${dataTableId}-${columnKey}-${rowIndex}`} value={localValue} onChange={setLocalValue} aria-label={`Edit ${columnKey}`} /> ); }; const columns = [ { id: 'name-1', key: 'name', label: 'Name', cellRenderer: NameColumn, sortable: true, }, { id: 'income-1', key: 'income', label: 'Income', }, { id: 'type-1', key: 'type', label: 'Type', sortable: true, }, { id: 'date-1', key: 'date', label: 'Birth Date', sortable: true, dateFormat: 'MM/dd/yyyy', }, ]; const initialData = [ { id: 1, name: 'Moe', income: 1000, type: 'personal', date: '04/12/1990', }, { id: 2, name: 'Larry', income: null, type: 'business', date: '05/1/1980', }, { id: 3, name: 'Curly', income: 1, type: 'other', date: '07/28/2004', }, { id: 4, name: 'Raphael', income: 1000, type: 'personal', date: '01/01/2012', }, { id: 5, name: 'Michelangelo', income: null, type: 'business', date: '08/14/2015', }, { id: 6, name: 'Donatello', income: 1, type: 'other', date: '06/02/2006', }, { id: 7, name: 'Leonardo', income: 1, type: 'other', date: '09/01/2008', }, { id: 8, name: 'Joe', income: 1, type: 'other', date: '10/10/2010', }, { id: 9, name: 'Bob', income: 1, type: 'other', date: '04/04/2004', }, { id: 10, name: 'Sue', income: 1, type: 'other', date: '12/05/2015', }, { id: 11, name: 'Marry', income: 1, type: 'other', date: '08/11/2001', }, ]; const Example = () => { const [data, setData] = React.useState(initialData); const sortPlugin = useSort(); return ( <DataTable id="demo-component" columns={columns} data={data} plugins={[sortPlugin]} responsive /> ); }; render(<Example />);

const NameColumn = function ({ rowIndex, columnKey, value, dataTableId }) {
  const [localValue, setLocalValue] = React.useState(value);

  React.useEffect(() => {
    setLocalValue(value);
  }, [value]);

  return (
    <TextField
      id={`${dataTableId}-${columnKey}-${rowIndex}`}
      value={localValue}
      onChange={setLocalValue}
      aria-label={`Edit ${columnKey}`}
    />
  );
};

const columns = [
  {
    id: 'name-1',
    key: 'name',
    label: 'Name',
    cellRenderer: NameColumn,
    sortable: true,
  },
  {
    id: 'income-1',
    key: 'income',
    label: 'Income',
  },
  {
    id: 'type-1',
    key: 'type',
    label: 'Type',
    sortable: true,
  },
  {
    id: 'date-1',
    key: 'date',
    label: 'Birth Date',
    sortable: true,
    dateFormat: 'MM/dd/yyyy',
  },
];

const initialData = [
  {
    id: 1,
    name: 'Moe',
    income: 1000,
    type: 'personal',
    date: '04/12/1990',
  },
  {
    id: 2,
    name: 'Larry',
    income: null,
    type: 'business',
    date: '05/1/1980',
  },
  {
    id: 3,
    name: 'Curly',
    income: 1,
    type: 'other',
    date: '07/28/2004',
  },
  {
    id: 4,
    name: 'Raphael',
    income: 1000,
    type: 'personal',
    date: '01/01/2012',
  },
  {
    id: 5,
    name: 'Michelangelo',
    income: null,
    type: 'business',
    date: '08/14/2015',
  },
  {
    id: 6,
    name: 'Donatello',
    income: 1,
    type: 'other',
    date: '06/02/2006',
  },
  {
    id: 7,
    name: 'Leonardo',
    income: 1,
    type: 'other',
    date: '09/01/2008',
  },
  {
    id: 8,
    name: 'Joe',
    income: 1,
    type: 'other',
    date: '10/10/2010',
  },
  {
    id: 9,
    name: 'Bob',
    income: 1,
    type: 'other',
    date: '04/04/2004',
  },
  {
    id: 10,
    name: 'Sue',
    income: 1,
    type: 'other',
    date: '12/05/2015',
  },
  {
    id: 11,
    name: 'Marry',
    income: 1,
    type: 'other',
    date: '08/11/2001',
  },
];

const Example = () => {
  const [data, setData] = React.useState(initialData);
  const sortPlugin = useSort();

  return (
    <DataTable
      id="demo-component"
      columns={columns}
      data={data}
      plugins={[sortPlugin]}
      responsive
    />
  );
};

render(<Example />);

Statefully Managed

Result

Loading...

Live Editor

const NameColumn = function ({ id, rowIndex, columnKey, value, dataTableId }) { const [localValue, setLocalValue] = React.useState(value); React.useEffect(() => { setLocalValue(value); }, [value]); return ( <TextField id={`${dataTableId}-${columnKey}-${rowIndex}`} value={localValue} onChange={setLocalValue} aria-label={`Edit ${columnKey}`} /> ); }; const columns = [ { id: 'name-2', key: 'name', label: 'Name', cellRenderer: NameColumn, sortable: true, }, { id: 'income-2', key: 'income', label: 'Income', sortable: true, }, { id: 'type-2', key: 'type', label: 'Type', sortable: true, }, { id: 'date-2', key: 'date', label: 'Birth Date', sortable: true, dateFormat: 'MM/dd/yyyy', }, ]; const initialData = [ { id: 1, name: 'Moe', income: 1000, type: 'personal', date: '04/12/1990', }, { id: 2, name: 'Larry', income: null, type: 'business', date: '05/1/1980', }, { id: 3, name: 'Curly', income: 1, type: 'other', date: '07/28/2004', }, { id: 4, name: 'Raphael', income: 1000, type: 'personal', date: '01/01/2012', }, { id: 5, name: 'Michelangelo', income: null, type: 'business', date: '08/14/2015', }, { id: 6, name: 'Donatello', income: 1, type: 'other', date: '06/02/2006', }, { id: 7, name: 'Leonardo', income: 1, type: 'other', date: '09/01/2008', }, { id: 8, name: 'Joe', income: 1, type: 'other', date: '10/10/2010', }, { id: 9, name: 'Bob', income: 1, type: 'other', date: '04/04/2004', }, { id: 10, name: 'Sue', income: 1, type: 'other', date: '12/05/2015', }, { id: 11, name: 'Marry', income: 1, type: 'other', date: '08/11/2001', }, ]; const Example = () => { const [sortId, setSortId] = React.useState('date-2'); const [sortDirection, setSortDirection] = React.useState('desc'); const [data, setData] = React.useState(initialData); const sortPlugin = useSort({ sortId, sortDirection, onSort: (e, payload) => { setSortId(payload.sortId); setSortDirection(payload.sortDirection); }, }); return ( <DataTable id="demo-component-stateful" columns={columns} data={data} plugins={[sortPlugin]} responsive /> ); }; render(<Example />);

const NameColumn = function ({ id, rowIndex, columnKey, value, dataTableId }) {
  const [localValue, setLocalValue] = React.useState(value);

  React.useEffect(() => {
    setLocalValue(value);
  }, [value]);

  return (
    <TextField
      id={`${dataTableId}-${columnKey}-${rowIndex}`}
      value={localValue}
      onChange={setLocalValue}
      aria-label={`Edit ${columnKey}`}
    />
  );
};

const columns = [
  {
    id: 'name-2',
    key: 'name',
    label: 'Name',
    cellRenderer: NameColumn,
    sortable: true,
  },
  {
    id: 'income-2',
    key: 'income',
    label: 'Income',
    sortable: true,
  },
  {
    id: 'type-2',
    key: 'type',
    label: 'Type',
    sortable: true,
  },
  {
    id: 'date-2',
    key: 'date',
    label: 'Birth Date',
    sortable: true,
    dateFormat: 'MM/dd/yyyy',
  },
];

const initialData = [
  {
    id: 1,
    name: 'Moe',
    income: 1000,
    type: 'personal',
    date: '04/12/1990',
  },
  {
    id: 2,
    name: 'Larry',
    income: null,
    type: 'business',
    date: '05/1/1980',
  },
  {
    id: 3,
    name: 'Curly',
    income: 1,
    type: 'other',
    date: '07/28/2004',
  },
  {
    id: 4,
    name: 'Raphael',
    income: 1000,
    type: 'personal',
    date: '01/01/2012',
  },
  {
    id: 5,
    name: 'Michelangelo',
    income: null,
    type: 'business',
    date: '08/14/2015',
  },
  {
    id: 6,
    name: 'Donatello',
    income: 1,
    type: 'other',
    date: '06/02/2006',
  },
  {
    id: 7,
    name: 'Leonardo',
    income: 1,
    type: 'other',
    date: '09/01/2008',
  },
  {
    id: 8,
    name: 'Joe',
    income: 1,
    type: 'other',
    date: '10/10/2010',
  },
  {
    id: 9,
    name: 'Bob',
    income: 1,
    type: 'other',
    date: '04/04/2004',
  },
  {
    id: 10,
    name: 'Sue',
    income: 1,
    type: 'other',
    date: '12/05/2015',
  },
  {
    id: 11,
    name: 'Marry',
    income: 1,
    type: 'other',
    date: '08/11/2001',
  },
];

const Example = () => {
  const [sortId, setSortId] = React.useState('date-2');
  const [sortDirection, setSortDirection] = React.useState('desc');
  const [data, setData] = React.useState(initialData);
  const sortPlugin = useSort({
    sortId,
    sortDirection,
    onSort: (e, payload) => {
      setSortId(payload.sortId);
      setSortDirection(payload.sortDirection);
    },
  });

  return (
    <DataTable
      id="demo-component-stateful"
      columns={columns}
      data={data}
      plugins={[sortPlugin]}
      responsive
    />
  );
};

render(<Example />);

Plugin

PluginProperties

Type: Object

Properties

• sortId String? Initial sorted column id (matches column key).
• sortDirection String? The initial sorted column direction. One of 'desc' or 'asc'.
• onSort Function? A callback that will be called whenever a sort action occurs.

useSort

Create a plugin hook that enables DataTable sorting for columns with sortable: true by adding a sorting component to the table bar.

Parameters

• props PluginProperties (optional, default {})

Returns Plugin

onSort

A callback that will be called whenever a filter is applied.

Parameters

• Event Object
• onSortPayload Object An object containing the sortId and next sortDirection.