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 />);
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 />);
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
ObjectonSortPayload
Object An object containing the sortId and next sortDirection.