ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

M: Improve table column width when NoHeader is on

Browse Source
This commit is contained in:
Ivan 2024-09-27 15:28:52 +03:00
parent 9814010a17
commit 26265707a6
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx
View File

@ -138,9 +138,19 @@ function DataTable<TData extends RowData>({
}
}, [rows, dense, noHeader, contentHeight]);
const columnSizeVars = useMemo(() => {
const headers = tableImpl.getFlatHeaders();
const colSizes: Record<string, number> = {};
for (const header of headers) {
colSizes[`--header-${header.id}-size`] = header.getSize();
colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
}
return colSizes;
}, [tableImpl.getState().columnSizingInfo, tableImpl.getState().columnSizing]);
return (
<div tabIndex={-1} id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}>
<table className='w-full'>
<table className='w-full' style={{ ...columnSizeVars }}>
{!noHeader ? (
<TableHeader
table={tableImpl}

3
rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
View File

@ -93,7 +93,8 @@ function TableBody<TData>({
style={{
cursor: onRowClicked || onRowDoubleClicked ? 'pointer' : 'auto',
paddingBottom: dense ? '0.25rem' : '0.5rem',
paddingTop: dense ? '0.25rem' : '0.5rem'
paddingTop: dense ? '0.25rem' : '0.5rem',
width: noHeader && index === 0 ? `calc(var(--col-${cell.column.id}-size) * 1px)` : 'auto'
}}
onClick={event => handleRowClicked(row, event)}
onDoubleClick={event => (onRowDoubleClicked ? onRowDoubleClicked(row.original, event) : undefined)}

2
rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
View File

@ -41,7 +41,7 @@ function TableHeader<TData>({
style={{
paddingRight: enableSorting && header.column.getCanSort() ? '0px' : '2px',
textAlign: 'start',
width: header.getSize(),
width: `calc(var(--header-${header?.id}-size) * 1px)`,
cursor: enableSorting && header.column.getCanSort() ? 'pointer' : 'auto'
}}
onClick={enableSorting ? header.column.getToggleSortingHandler() : undefined}