From 9247f932dc6cc21b010e36c004771c1ed82823e3 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 23 Aug 2022 15:52:32 +0300
Subject: [PATCH] Setting different widths for columns

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/table/virtual-table.tsx        | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/table/virtual-table.tsx b/src/renderer/components/table/virtual-table.tsx
index b28620a3a2..4da8687af4 100644
--- a/src/renderer/components/table/virtual-table.tsx
+++ b/src/renderer/components/table/virtual-table.tsx
@@ -5,7 +5,7 @@
 
  import React from "react";
  import { flexRender, Row } from "@tanstack/react-table"
- import type { Table } from "@tanstack/react-table";
+ import type { Table, Cell } from "@tanstack/react-table";
  import { TableHeader } from "./table-header";
  import { useVirtualizer } from "@tanstack/react-virtual";
  
@@ -22,11 +22,10 @@
     getScrollElement: () => tableContainerRef.current,
     estimateSize: () => 55,
     overscan: 5,
-    count: rows.length
+    count: rows.length,
+    paddingStart: 60 // header width
   })
 
-  console.log(`${rowVirtualizer.getTotalSize()}px`)
-  
   return (
     <>
       <div className={className} ref={tableContainerRef}>
@@ -55,11 +54,7 @@
                 >
                   {row.getVisibleCells().map(cell => {
                     return (
-                      <div key={cell.id} style={{
-                        width: cell.column.getSize(),
-                        flexGrow: 0,
-                        flexShrink: 0,
-                      }}>
+                      <div key={cell.id} style={getCellWidthStyles(table, cell)}>
                         {flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext()
@@ -76,4 +71,22 @@
     </>
   )
 }
- 
\ No newline at end of file
+ 
+function getCellWidthStyles<T>(table: Table<T>, cell: Cell<T, unknown>) {
+  const cellResized = cell.column.id in table.getState().columnSizing;
+  const cellFixed = cell.column.getCanResize();
+
+  if (cellResized || cellFixed) {
+    return {
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: cell.column.getSize()
+    }
+  }
+
+  return {
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: "0%",
+  }
+}
\ No newline at end of file