diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index d97331c..d94dc72 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -38,6 +38,8 @@ export default function ItemTable({ data, rowCanBeSelected }) { const classes = useStyles(); const history = useHistory(); + + // See React Table Column Settings: https://react-table.tanstack.com/docs/api/useTable#column-properties const columns = React.useMemo( () => [ { Header: 'Queue', accessor: 'queue', }, @@ -46,12 +48,15 @@ export default function ItemTable({ data, rowCanBeSelected }) { { Header: 'Subject', accessor: 'subject' }, { Header: 'Status', accessor: 'status', }, { Header: 'Priority', accessor: 'priority' }, + { Header: 'Last Updated', accessor: 'lastUpdated', sortInverted: true, Cell: ({ value }) => }, + { Header: 'Department', accessor: 'department' }, + { Header: 'Building', accessor: 'building' }, + { Header: 'Date Received', accessor: 'dateReceived', sortInverted: true, Cell: ({ value }) => }, { Header: 'Last Updated', accessor: 'lastUpdated', }, { Header: 'Department', accessor: 'department' }, { Header: 'Building', accessor: 'building' }, { Header: 'Date Received', accessor: 'dateReceived', }, ], []); - const tableInstance = useTable( { columns, @@ -68,13 +73,20 @@ export default function ItemTable({ data, rowCanBeSelected }) { ); }, }, + initialState: { + sortBy: [ + { id: "queue" }, + { id: 'number' }, + { id: 'lastUpdated' }, + ], + } }, - useFilters, useFlexLayout, useSortBy, + useFilters, useFlexLayout, useSortBy, ); const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance; return ( - +