Make column resizable optional and font customisable

Author: Rafferty97

src/table/ColumnHeader.tsx

@@ -1,3 +1,4 @@
+import { Show } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 import { PositionedColumn } from './types'
 import { Renameable } from 'src/components/Renameable'
@@ -8,6 +9,7 @@ export interface ColumnHeaderProps<K, T> {
   column: PositionedColumn<K, T>
   height: number
   columnsEditable?: boolean
+  columnsResizeable?: boolean
   setColumnName?: (id: K, name: string) => void
   setColumnSize?: (id: K, width: number) => void
   resetColumnSize?: (id: K) => void
@@ -37,20 +39,22 @@ export function ColumnHeader<K, T>(props: ColumnHeaderProps<K, T>) {
           <Dynamic component={props.column.icon} />
         </div>
       </div>
-      <ResizeBar
-        style={{
-          position: 'absolute',
-          top: '0',
-          margin: '0 0 0 -4px',
-          width: '9px',
-          height: `${props.height - 1}px`,
-          transform: `translate(${props.column.right}px, 0px)`,
-          'z-index': 10,
-        }}
-        size={props.column.width}
-        setSize={width => props.setColumnSize?.(props.column.id, width)}
-        resetSize={() => props.resetColumnSize?.(props.column.id)}
-      />
+      <Show when={props.columnsResizeable}>
+        <ResizeBar
+          style={{
+            position: 'absolute',
+            top: '0',
+            margin: '0 0 0 -4px',
+            width: '9px',
+            height: `${props.height - 1}px`,
+            transform: `translate(${props.column.right}px, 0px)`,
+            'z-index': 10,
+          }}
+          size={props.column.width}
+          setSize={width => props.setColumnSize?.(props.column.id, width)}
+          resetSize={() => props.resetColumnSize?.(props.column.id)}
+        />
+      </Show>
     </>
   )
 }

src/table/Table.css

@@ -1,4 +1,5 @@
 :root {
+  --solid-tabular-font: 0.875rem 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
   --solid-tabular-bg-color: oklch(92.8% 0.006 264.531);
   --solid-tabular-text-color: black;
   --solid-tabular-cell-color: white;
@@ -32,6 +33,8 @@
   outline: none;
   user-select: none;
   text-align: left;
+  font: var(--solid-tabular-font);
+  font-variant-numeric: tabular-nums;
   background-color: var(--solid-tabular-bg-color);
   color: var(--solid-tabular-text-color);
 

src/table/Table.tsx

@@ -1,13 +1,4 @@
-import {
-  For,
-  Show,
-  createMemo,
-  createSignal,
-  mapArray,
-  onMount,
-  onCleanup,
-  createEffect,
-} from 'solid-js'
+import { For, Show, createMemo, createSignal, mapArray, createEffect } from 'solid-js'
 import { createVirtualizer } from '@tanstack/solid-virtual'
 import { DragMode, type ActiveRange, type CellIndex, type Column } from './types'
 import { devicePixelRatio, createSize } from 'src/lib/devicePixelRatio'
@@ -40,6 +31,8 @@ export interface TableProps<K = string, T = string> {
   rowsEditable?: boolean
   /** Whether cells can be edited. */
   cellsEditable?: boolean
+  /** Whether columns can be resized. */
+  columnsResizeable?: boolean
   /** Height of cells in pixels. */
   cellHeight?: number
   /** The state of the selected cell or cells in the table. */
@@ -578,6 +571,7 @@ export default function Table<K = string, T = unknown>(props: TableProps<K, T>)
               column={column}
               height={colHeaderHeight()}
               columnsEditable={props.columnsEditable}
+              columnsResizeable={props.columnsResizeable}
               setColumnName={props.setColumnName}
               setColumnSize={props.setColumnSize}
               resetColumnSize={props.resetColumnSize}

stories/Basic.stories.tsx

@@ -48,9 +48,6 @@ export const BasicUsage: Story = {
               return newMap
             })
           }
-          cellsEditable
-          rowsEditable
-          columnsEditable
         />
       </div>
     )

stories/main.css

@@ -4,12 +4,7 @@ body {
 
 .table-wrap {
   height: 100%;
-  border: 2px solid black; /* oklch(48.011% 0.08557 182.905); */
   border-radius: 6px;
   overflow: hidden;
-  font-size: 14px;
-  /* --solid-tabular-accent-color: oklch(60% 0.118 184.704);
-  --solid-tabular-font-size-row-num: 12px;
-  --solid-tabular-text-color: red;
-  --solid-tabular-rownum-color: blue; */
+  /* --solid-tabular-accent-color: oklch(60% 0.118 184.704); */
 }