diff --git a/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx b/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx index 9d639bfea8e6..d479caaa50cd 100644 --- a/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx +++ b/frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx @@ -9,12 +9,15 @@ import { TableCell } from '../TableCell/TableCell'; import { CellSortable } from '../SortableTableHeader/CellSortable/CellSortable'; import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { styled } from '@mui/material'; const HeaderCell = (header: Header) => { const column = header.column; const isDesc = column.getIsSorted() === 'desc'; const align = column.columnDef.meta?.align || undefined; const width = column.columnDef.meta?.width || undefined; + const fixedWidth = width && typeof width === 'number' ? width : undefined; + const content = column.columnDef.header; return ( (header: Header) => { paddingTop: 0, paddingBottom: 0, width, + maxWidth: fixedWidth, + minWidth: fixedWidth, }} + ariaTitle={typeof content === 'string' ? content : undefined} > {header.isPlaceholder ? null - : flexRender(column.columnDef.header, header.getContext())} + : flexRender(content, header.getContext())} ); }; +const TableContainer = styled('div')(({ theme }) => ({ + overflowX: 'auto', +})); + /** * Use with react-table v8 */ @@ -51,42 +61,44 @@ export const PaginatedTable = ({ return ( <> - - - {tableInstance.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - +
+ + {tableInstance.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + - {tableInstance.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - - ))} - -
+ }} + > + {tableInstance.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ))} + + ))} + + + 0} show={ diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx index d319cf682c7b..ca31f01fbc40 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx +++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx @@ -91,21 +91,17 @@ export const CellSortable: FC = ({ }, [align]); useEffect(() => { - const updateTitle = () => { - const newTitle = - ariaTitle && - ref.current && - ref?.current?.offsetWidth < ref?.current?.scrollWidth - ? `${children}` - : ''; + const newTitle = + ariaTitle && + ref.current && + ref?.current?.offsetWidth < ref?.current?.scrollWidth + ? `${children}` + : ''; - if (newTitle !== title) { - setTitle(newTitle); - } - }; - - updateTitle(); - }, [setTitle, ariaTitle]); // eslint-disable-line react-hooks/exhaustive-deps + if (newTitle !== title) { + setTitle(newTitle); + } + }, [setTitle, ariaTitle]); return ( { const { @@ -439,6 +439,8 @@ export const PaginatedProjectFeatureToggles = ({ } /> } + bodyClass='noop' + style={{ cursor: 'inherit' }} >
({ const PaginatedProjectOverview: FC<{ storageKey?: string; -}> = ({ storageKey = 'project-overview' }) => { +}> = ({ storageKey = 'project-overview-v2' }) => { const projectId = useRequiredPathParam('projectId'); const { project } = useProjectOverview(projectId, { refreshInterval,