diff --git a/frontend/beCompliant/src/components/Table.tsx b/frontend/beCompliant/src/components/Table.tsx index 405f5c91..6a407d4d 100644 --- a/frontend/beCompliant/src/components/Table.tsx +++ b/frontend/beCompliant/src/components/Table.tsx @@ -8,6 +8,7 @@ import { getSortedRowModel, Row, RowData, + SortingState, useReactTable, } from '@tanstack/react-table'; import { useColumnVisibility } from '../hooks/useColumnVisibility'; @@ -20,6 +21,7 @@ import { Column, OptionalField, Question, Table, User } from '../api/types'; import { getSortFuncForColumn } from './table/TableSort'; import { TableActions } from './tableActions/TableActions'; import { TableFilters } from './tableActions/TableFilter'; +import { useEffect, useState } from 'react'; type Props = { filters: TableFilters; @@ -49,6 +51,18 @@ export function TableComponent({ showOnlyFillModeColumns, ] = useColumnVisibility(); + const initialSorting: SortingState = JSON.parse( + localStorage.getItem(`sortingState_${tableData.id}`) || '[]' + ); + const [sorting, setSorting] = useState(initialSorting); + + useEffect(() => { + localStorage.setItem( + `sortingState_${tableData.id}`, + JSON.stringify(sorting) + ); + }, [sorting, tableData.id]); + const columns: ColumnDef[] = tableData.columns.map( (field, index) => ({ header: ({ column }) => ( @@ -165,7 +179,9 @@ export function TableComponent({ data: data, state: { columnVisibility, + sorting, }, + onSortingChange: setSorting, autoResetAll: false, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(),