ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-06-26 13:00:39 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

M: Improve table column width when NoHeader is on
Some checks failed
Frontend CI / build (22.x) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Ivan 2024-09-27 15:29:03 +03:00
parent df81c4e125
commit f3ffa8bd2b
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]); }, [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 ( return (
<div tabIndex={-1} id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}> <div tabIndex={-1} id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}>
<table className='w-full'> <table className='w-full' style={{ ...columnSizeVars }}>
{!noHeader ? ( {!noHeader ? (
<TableHeader <TableHeader
table={tableImpl} table={tableImpl}

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

@ -93,7 +93,8 @@ function TableBody<TData>({
style={{ style={{
cursor: onRowClicked || onRowDoubleClicked ? 'pointer' : 'auto', cursor: onRowClicked || onRowDoubleClicked ? 'pointer' : 'auto',
paddingBottom: dense ? '0.25rem' : '0.5rem', 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)} onClick={event => handleRowClicked(row, event)}
onDoubleClick={event => (onRowDoubleClicked ? onRowDoubleClicked(row.original, event) : undefined)} 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={{ style={{
paddingRight: enableSorting && header.column.getCanSort() ? '0px' : '2px', paddingRight: enableSorting && header.column.getCanSort() ? '0px' : '2px',
textAlign: 'start', textAlign: 'start',
width: header.getSize(), width: `calc(var(--header-${header?.id}-size) * 1px)`,
cursor: enableSorting && header.column.getCanSort() ? 'pointer' : 'auto' cursor: enableSorting && header.column.getCanSort() ? 'pointer' : 'auto'
}} }}
onClick={enableSorting ? header.column.getToggleSortingHandler() : undefined} onClick={enableSorting ? header.column.getToggleSortingHandler() : undefined}