fix: pagination and column width

Unleash · Dec 19, 2023 · dce91b0 · dce91b0
1 parent 8306073
commit dce91b0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 52 deletions.
diff --git 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 = <T extends object>(header: Header<T, unknown>) => {
     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 (
         <CellSortable
@@ -28,15 +31,22 @@ const HeaderCell = <T extends object>(header: Header<T, unknown>) => {
                 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())}
         </CellSortable>
     );
 };
 
+const TableContainer = styled('div')(({ theme }) => ({
+    overflowX: 'auto',
+}));
+
 /**
  * Use with react-table v8
  */
@@ -51,42 +61,44 @@ export const PaginatedTable = <T extends object>({
 
     return (
         <>
-            <Table>
-                <TableHead>
-                    {tableInstance.getHeaderGroups().map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
-                            {headerGroup.headers.map((header) => (
-                                <HeaderCell {...header} key={header.id} />
-                            ))}
-                        </TableRow>
-                    ))}
-                </TableHead>
-                <TableBody
-                    role='rowgroup'
-                    sx={{
-                        '& tr': {
-                            '&:hover': {
-                                '.show-row-hover': {
-                                    opacity: 1,
+            <TableContainer>
+                <Table>
+                    <TableHead>
+                        {tableInstance.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => (
+                                    <HeaderCell {...header} key={header.id} />
+                                ))}
+                            </TableRow>
+                        ))}
+                    </TableHead>
+                    <TableBody
+                        role='rowgroup'
+                        sx={{
+                            '& tr': {
+                                '&:hover': {
+                                    '.show-row-hover': {
+                                        opacity: 1,
+                                    },
                                 },
                             },
-                        },
-                    }}
-                >
-                    {tableInstance.getRowModel().rows.map((row) => (
-                        <TableRow key={row.id}>
-                            {row.getVisibleCells().map((cell) => (
-                                <TableCell key={cell.id}>
-                                    {flexRender(
-                                        cell.column.columnDef.cell,
-                                        cell.getContext(),
-                                    )}
-                                </TableCell>
-                            ))}
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
+                        }}
+                    >
+                        {tableInstance.getRowModel().rows.map((row) => (
+                            <TableRow key={row.id}>
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(
+                                            cell.column.columnDef.cell,
+                                            cell.getContext(),
+                                        )}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
             <ConditionallyRender
                 condition={tableInstance.getRowModel().rows.length > 0}
                 show={

diff --git 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<ICellSortableProps> = ({
     }, [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 (
         <StyledTableCell

diff --git a/...mponent/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx b/...mponent/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
@@ -251,7 +251,7 @@ export const PaginatedProjectFeatureToggles = ({
                             header: name,
                             meta: {
                                 align: 'center',
-                                width: '1%',
+                                width: 90,
                             },
                             cell: ({ getValue }) => {
                                 const {
@@ -439,6 +439,8 @@ export const PaginatedProjectFeatureToggles = ({
                         }
                     />
                 }
+                bodyClass='noop'
+                style={{ cursor: 'inherit' }}
             >
                 <div
                     ref={bodyLoadingRef}
@@ -461,7 +463,7 @@ export const PaginatedProjectFeatureToggles = ({
                     <ConditionallyRender
                         condition={featuresExportImport && !loading}
                         show={
-                            // FIXME: export only selected rows?
+                            // TODO: `export all` backend
                             <ExportDialog
                                 showExportDialog={showExportDialog}
                                 data={data}

diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx
@@ -39,7 +39,7 @@ const StyledContentContainer = styled(Box)(({ theme }) => ({
 
 const PaginatedProjectOverview: FC<{
     storageKey?: string;
-}> = ({ storageKey = 'project-overview' }) => {
+}> = ({ storageKey = 'project-overview-v2' }) => {
     const projectId = useRequiredPathParam('projectId');
     const { project } = useProjectOverview(projectId, {
         refreshInterval,