Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-10 01:16:39 +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 { 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={

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

@ -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

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

@ -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}

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

@ -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,