diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx index beaef77ae4..0f02bb1b6f 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx +++ b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx @@ -12,41 +12,47 @@ export const SortableTableHeader = ({ flex?: boolean; }) => ( - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column: HeaderGroup) => { - const content = column.render('Header'); + {headerGroups.map((headerGroup) => { + const { key, ...props } = headerGroup.getHeaderGroupProps(); + return ( + + {headerGroup.headers.map((column: HeaderGroup) => { + const content = column.render('Header'); - return ( - - {content} - - ); - })} - - ))} + const { key, ...props } = column.getHeaderProps( + column.canSort + ? column.getSortByToggleProps() + : undefined, + ); + + return ( + + {content} + + ); + })} + + ); + })} ); diff --git a/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx b/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx index 4bf48d5105..c560eaf7a8 100644 --- a/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx +++ b/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx @@ -89,27 +89,27 @@ export const VirtualizedTable = ({ prepareRow(row); + const { key, ...props } = row.getRowProps({ + style: { display: 'flex', top }, + }); + return ( - + {row.cells.map((cell) => { + const { key, ...props } = cell.getCellProps({ + style: { + flex: cell.column.minWidth + ? '1 0 auto' + : undefined, + }, + }); + + return ( + + {cell.render('Cell')} + + ); })} - key={row.id} - > - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} ); })}