Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-18 01:18:23 +02:00
Code Issues Projects Releases Wiki Activity

fix: pagination and column width

Browse Source
This commit is contained in:
Tymoteusz Czech 2023-12-19 16:24:43 +01:00
parent 8306073e1f
commit dce91b0e90
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
4 changed files with 62 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx
View File

@ -9,12 +9,15 @@ import { TableCell } from '../TableCell/TableCell';
import { CellSortable } from '../SortableTableHeader/CellSortable/CellSortable'; import { CellSortable } from '../SortableTableHeader/CellSortable/CellSortable';
import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar'; import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { styled } from '@mui/material';
const HeaderCell = <T extends object>(header: Header<T, unknown>) => { const HeaderCell = <T extends object>(header: Header<T, unknown>) => {
const column = header.column; const column = header.column;
const isDesc = column.getIsSorted() === 'desc'; const isDesc = column.getIsSorted() === 'desc';
const align = column.columnDef.meta?.align || undefined; const align = column.columnDef.meta?.align || undefined;
const width = column.columnDef.meta?.width || undefined; const width = column.columnDef.meta?.width || undefined;
const fixedWidth = width && typeof width === 'number' ? width : undefined;
const content = column.columnDef.header;
return ( return (
<CellSortable <CellSortable
@ -28,15 +31,22 @@ const HeaderCell = <T extends object>(header: Header<T, unknown>) => {
paddingTop: 0, paddingTop: 0,
paddingBottom: 0, paddingBottom: 0,
width, width,
maxWidth: fixedWidth,
minWidth: fixedWidth,
}} }}
ariaTitle={typeof content === 'string' ? content : undefined}
> >
{header.isPlaceholder {header.isPlaceholder
? null ? null
: flexRender(column.columnDef.header, header.getContext())} : flexRender(content, header.getContext())}
</CellSortable> </CellSortable>
); );
}; };
const TableContainer = styled('div')(({ theme }) => ({
overflowX: 'auto',
}));
/** /**
* Use with react-table v8 * Use with react-table v8
*/ */
@ -51,42 +61,44 @@ export const PaginatedTable = <T extends object>({
return ( return (
<> <>
<Table> <TableContainer>
<TableHead> <Table>
{tableInstance.getHeaderGroups().map((headerGroup) => ( <TableHead>
<TableRow key={headerGroup.id}> {tableInstance.getHeaderGroups().map((headerGroup) => (
{headerGroup.headers.map((header) => ( <TableRow key={headerGroup.id}>
<HeaderCell {...header} key={header.id} /> {headerGroup.headers.map((header) => (
))} <HeaderCell {...header} key={header.id} />
</TableRow> ))}
))} </TableRow>
</TableHead> ))}
<TableBody </TableHead>
role='rowgroup' <TableBody
sx={{ role='rowgroup'
'& tr': { sx={{
'&:hover': { '& tr': {
'.show-row-hover': { '&:hover': {
opacity: 1, '.show-row-hover': {
opacity: 1,
},
}, },
}, },
}, }}
}} >
> {tableInstance.getRowModel().rows.map((row) => (
{tableInstance.getRowModel().rows.map((row) => ( <TableRow key={row.id}>
<TableRow key={row.id}> {row.getVisibleCells().map((cell) => (
{row.getVisibleCells().map((cell) => ( <TableCell key={cell.id}>
<TableCell key={cell.id}> {flexRender(
{flexRender( cell.column.columnDef.cell,
cell.column.columnDef.cell, cell.getContext(),
cell.getContext(), )}
)} </TableCell>
</TableCell> ))}
))} </TableRow>
</TableRow> ))}
))} </TableBody>
</TableBody> </Table>
</Table> </TableContainer>
<ConditionallyRender <ConditionallyRender
condition={tableInstance.getRowModel().rows.length > 0} condition={tableInstance.getRowModel().rows.length > 0}
show={ show={

24
frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
View File

@ -91,21 +91,17 @@ export const CellSortable: FC<ICellSortableProps> = ({
}, [align]); }, [align]);
useEffect(() => { useEffect(() => {
const updateTitle = () => { const newTitle =
const newTitle = ariaTitle &&
ariaTitle && ref.current &&
ref.current && ref?.current?.offsetWidth < ref?.current?.scrollWidth
ref?.current?.offsetWidth < ref?.current?.scrollWidth ? `${children}`
? `${children}` : '';
: '';
if (newTitle !== title) { if (newTitle !== title) {
setTitle(newTitle); setTitle(newTitle);
} }
}; }, [setTitle, ariaTitle]);
updateTitle();
}, [setTitle, ariaTitle]); // eslint-disable-line react-hooks/exhaustive-deps
return ( return (
<StyledTableCell <StyledTableCell

6
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
View File

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

2
frontend/src/component/project/Project/ProjectOverview.tsx
View File

@ -39,7 +39,7 @@ const StyledContentContainer = styled(Box)(({ theme }) => ({
const PaginatedProjectOverview: FC<{ const PaginatedProjectOverview: FC<{
storageKey?: string; storageKey?: string;
}> = ({ storageKey = 'project-overview' }) => { }> = ({ storageKey = 'project-overview-v2' }) => {
const projectId = useRequiredPathParam('projectId'); const projectId = useRequiredPathParam('projectId');
const { project } = useProjectOverview(projectId, { const { project } = useProjectOverview(projectId, {
refreshInterval, refreshInterval,