From 26265707a66ce1ccc627bf2959a9cae419346852 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 27 Sep 2024 15:28:52 +0300
Subject: [PATCH] M: Improve table column width when NoHeader is on

---
 .../src/components/ui/DataTable/DataTable.tsx        | 12 +++++++++++-
 .../src/components/ui/DataTable/TableBody.tsx        |  3 ++-
 .../src/components/ui/DataTable/TableHeader.tsx      |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx b/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx
index bb1e0eb8..55540af7 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx
@@ -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}
diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
index 82c83f79..0bb3ce55 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
@@ -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)}
diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
index cf3c1700..4995217d 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx
@@ -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}