Column resize initial draft

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/table-list/table-list.tsx

@@ -72,6 +72,8 @@ export function TableList<Data>({
     },
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
+    enableColumnResizing: true,
+    columnResizeMode: 'onChange',
   });
 
   return (

src/renderer/components/table/table-header.module.scss

@@ -1,4 +1,31 @@
 .sortableColumn {
   cursor: pointer;
   user-select: none;
+}
+
+.resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 5px;
+  background: rgba(0, 0, 0, 0.5);
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+}
+
+.resizer.isResizing {
+  background: blue;
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .resizer {
+    opacity: 0;
+  }
+
+  *:hover > .resizer {
+    opacity: 1;
+  }
 }

src/renderer/components/table/table-header.tsx

@@ -2,6 +2,7 @@ import styles from "./table-header.module.scss";
 import React from "react";
 import type { Table } from "@tanstack/react-table";
 import { flexRender } from '@tanstack/react-table';
+import { cssNames } from "../../utils";
 
 interface TableHeaderProps<Data> {
   table: Table<Data>;
@@ -13,7 +14,7 @@ export function TableHeader<Data>({ table }: TableHeaderProps<Data>) {
       {table.getHeaderGroups().map(headerGroup => (
         <tr key={headerGroup.id}>
           {headerGroup.headers.map(header => (
-            <th key={header.id}>
+            <th key={header.id} style={{ position: 'relative', width: header.getSize() }}>
               {header.isPlaceholder ? null : (
                 <div
                   {...{
@@ -31,6 +32,13 @@ export function TableHeader<Data>({ table }: TableHeaderProps<Data>) {
                     asc: ' 🔼',
                     desc: ' 🔽',
                   }[header.column.getIsSorted() as string] ?? null}
+                  {header.column.getCanResize() && (
+                    <div
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                      className={cssNames(styles.resizer, { [styles.isResizing]: header.column.getIsResizing() })}
+                    ></div>
+                  )}
                 </div>
               )}
             </th>

src/renderer/components/table/virtual-table.tsx

@@ -36,7 +36,7 @@
               <tr key={row.id}>
                 {row.getVisibleCells().map(cell => {
                   return (
-                    <td key={cell.id}>
+                    <td key={cell.id} style={{ width: cell.column.getSize() }}>
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()