v0.3.0

Author: Rafferty97

README.md

@@ -85,20 +85,19 @@ The `Table` component is the main entry point, and has two generic type paramete
 | `activeRange` | `ActiveRange` | The current selection state. |
 | `setActiveRange` | `(range: ActiveRange) => void` | Callback to update the selection state. |
 | `columnsResizeable` | `boolean` | Enables column resizing. |
-| `columnsEditable` | `boolean` | Enables column operations (insert/delete/rename). |
-| `rowsEditable` | `boolean` | Enables row operations (insert/delete). |
+| `columnsRenameable` | `boolean` | Enables column renaming. |
+| `addColumnButton` | `boolean` | Whether to render an "add column" button. |
+| `addRowButton` | `boolean` | Whether to render an "add row" button. |
 | `cellHeight` | `number` | Height of cells in pixels (default: 29). |
-| `cellContent` | `(column: Column) => Component<CellContentProps<Value>>` | Component used to render the content of cells for a particular column. |
+| `getCellContent` | `(column: Column) => Component<CellContentProps<Value>>` | Component used to render the content of cells for a particular column. |
 | `getColumnIcon` | `(column: Column) => Component` | Gets the icon for a particular column. |
 | `getColumnSize` | `(column: Column) => number` | Get column width. |
 | `setColumnSize` | `(column: Column, width: number) => void` | Set column width. |
 | `resetColumnSize` | `(column: Column) => void` | Reset column width. |
 | `getColumnName` | `(column: Column) => string` | Get column name. |
 | `setColumnName` | `(column: Column, name: string) => void` | Set column name. |
-| `insertColumns` | `(index: number, count: number) => void` | Insert columns. |
-| `insertRows` | `(index: number, count: number) => void` | Insert rows. |
-| `removeColumns` | `(index: number, count: number) => void` | Remove columns. |
-| `removeRows` | `(index: number, count: number) => void` | Remove rows. |
+| `onInsertColumns` | `(index: number, count: number) => void` | Insert columns. |
+| `onInsertRows` | `(index: number, count: number) => void` | Insert rows. |
 | `onViewportChanged` | `(start: number, end: number) => void` | Called whenever the range of rows visible in the viewport changes. |
 | `onCellContextMenu` | `(ev: MouseEvent, row: number, column: Column) => void` | Fired when a cell context menu is opened. |
 | `onCopy` | `(min: CellIndex, max: CellIndex) => void` | Called when cells are copied. |

TODO

@@ -1,4 +1,4 @@
-- Generalise `setCellValue` to range of cells
+- Events
+  - Generalise `setCellValue` to range of cells
 - Extract out context menu
-- Lift cell component to top level?
 - Column auto-sizing

src/index.tsx

@@ -1,5 +1,3 @@
-import Table from 'src/table/Table'
-import type { ActiveRange } from 'src/table/types'
-import { createTextContent, createCheckboxContent } from './components/CellContent'
-
-export { Table, ActiveRange, createTextContent, createCheckboxContent }
+export { Table } from 'src/table/Table'
+export type { ActiveRange } from 'src/table/types'
+export { createTextContent, createCheckboxContent } from './components/CellContent'

src/stories/Table.stories.tsx

@@ -48,7 +48,7 @@ const meta = {
         <Table
           columns={columns()}
           numRows={numRows()}
-          cellContent={props.cellContent}
+          getCellContent={props.getCellContent}
           getCellValue={(row, col) => data()[row]![col]!}
           setCellValue={(row, col, value) => {
             const newData = data().slice()
@@ -71,7 +71,7 @@ const meta = {
   url?: string
   accentColor: string
   setCellValue: (row: number, column: string, value: unknown) => void
-  cellContent?: (column: string) => Component<CellContentProps>
+  getCellContent?: (column: string) => Component<CellContentProps>
 }>
 
 export default meta

src/table/ColumnHeader.tsx

@@ -8,7 +8,7 @@ import './ColumnHeader.css'
 export interface ColumnHeaderProps<Column, Value> {
   column: PositionedColumn<Column, Value>
   height: number
-  columnsEditable?: boolean
+  columnsRenameable?: boolean
   columnsResizeable?: boolean
   setColumnName?: (column: Column, name: string) => void
   setColumnSize?: (column: Column, width: number) => void
@@ -33,7 +33,7 @@ export function ColumnHeader<K, T>(props: ColumnHeaderProps<K, T>) {
             class="solid-tabular/renameable"
             value={props.column.name}
             setValue={name => props.setColumnName?.(props.column.column, name)}
-            disabled={!props.columnsEditable}
+            disabled={!props.columnsRenameable}
           />
           <div style={{ flex: '1' }} />
           <Dynamic component={props.column.icon} />

src/table/Table.tsx

@@ -29,16 +29,18 @@ export interface TableProps<Column, Value = unknown> {
   columns: Column[]
   /** The number of rows. */
   numRows: number
-  /** Whether columns can be inserted, removed, modified and re-ordered. */
-  columnsEditable?: boolean
-  /** Whether rows can be inserted, removed and re-ordered. */
-  rowsEditable?: boolean
   /** Whether columns can be resized. */
   columnsResizeable?: boolean
+  /** Whether columns can be renamed. */
+  columnsRenameable?: boolean
+  /** Whether to render an "add column" button. */
+  addColumnButton?: boolean
+  /** Whether to render an "add column" button. */
+  addRowButton?: boolean
   /** Height of cells in pixels. */
   cellHeight?: number
   /** Component used to render the content of cells for a particular column. */
-  cellContent?: (column: Column) => Component<CellContentProps<Value>> | undefined
+  getCellContent?: (column: Column) => Component<CellContentProps<Value>> | undefined
   /** Gets the icon for a particular column. */
   getColumnIcon?: (column: Column) => Component | undefined
   /** The state of the selected cell or cells in the table. */
@@ -60,13 +62,9 @@ export interface TableProps<Column, Value = unknown> {
   /** Sets the name of the given column. */
   setColumnName?: (column: Column, name: string) => void
   /** Inserts a numer of columns into the table. */
-  insertColumns?: (index: number, count: number) => void
+  onInsertColumns?: (index: number, count: number) => void
   /** Inserts a number of rows into the table. */
-  insertRows?: (index: number, count: number) => void
-  /** Removes a number of columns from the table. */
-  removeColumns?: (index: number, count: number) => void
-  /** Removes a number of rows from the table. */
-  removeRows?: (index: number, count: number) => void
+  onInsertRows?: (index: number, count: number) => void
   /** Called whenever the range of rows visible in the viewport changes. */
   onViewportChanged?: (start: number, end: number) => void
   /** Fired when a cell context menu is opened. */
@@ -83,7 +81,7 @@ export interface TableProps<Column, Value = unknown> {
   onScrollPositionChange?: (scrollLeft: number, scrollTop: number) => void
 }
 
-export default function Table<Column, Value = unknown>(props: TableProps<Column, Value>) {
+export function Table<Column, Value = unknown>(props: TableProps<Column, Value>) {
   // The root DOM element of the table
   let tableEl: HTMLDivElement | undefined
 
@@ -237,7 +235,7 @@ export default function Table<Column, Value = unknown>(props: TableProps<Column,
           return props.getColumnName?.(column) ?? String(column)
         },
         get component() {
-          return props.cellContent?.(column) ?? DEFAULT_CELL_CONTENT
+          return props.getCellContent?.(column) ?? DEFAULT_CELL_CONTENT
         },
         get icon() {
           return props.getColumnIcon?.(column)
@@ -538,8 +536,8 @@ export default function Table<Column, Value = unknown>(props: TableProps<Column,
 
   // Append row button
   const appendRow = () => {
-    if (!props.insertRows) return
-    props.insertRows(numRows(), 1)
+    if (!props.onInsertRows) return
+    props.onInsertRows(numRows(), 1)
 
     // Scroll to the last row
     scrollToCell(props.numRows, undefined)
@@ -612,7 +610,7 @@ export default function Table<Column, Value = unknown>(props: TableProps<Column,
             <ColumnHeader
               column={column}
               height={colHeaderHeight()}
-              columnsEditable={props.columnsEditable}
+              columnsRenameable={props.columnsRenameable}
               columnsResizeable={props.columnsResizeable}
               setColumnName={props.setColumnName}
               setColumnSize={props.setColumnSize}
@@ -622,12 +620,12 @@ export default function Table<Column, Value = unknown>(props: TableProps<Column,
           )}
         </For>
 
-        <Show when={props.columnsEditable}>
+        <Show when={props.addColumnButton}>
           <AddColumnButton
             tableWidth={tableWidth()}
             width={DEFAULT_COLUMN_SIZE}
             height={colHeaderHeight()}
-            onPointerDown={() => props.insertColumns?.(numCols(), 1)}
+            onPointerDown={() => props.onInsertColumns?.(numCols(), 1)}
           />
         </Show>
 
@@ -672,7 +670,7 @@ export default function Table<Column, Value = unknown>(props: TableProps<Column,
         <Show when={activeCellData()} keyed>
           {({ row, column }) => (
             <CellInputContainer
-              component={props.cellContent?.(column) ?? DEFAULT_CELL_CONTENT}
+              component={props.getCellContent?.(column) ?? DEFAULT_CELL_CONTENT}
               rect={activeCellOutline()!}
               value={props.getCellValue(row, column)}
               setValue={value => props.setCellValue?.(row, column, value)}
@@ -686,7 +684,7 @@ export default function Table<Column, Value = unknown>(props: TableProps<Column,
       </div>
 
       {/* Add row button */}
-      <Show when={props.rowsEditable}>
+      <Show when={props.addRowButton}>
         <AddRowButton
           tableWidth={tableWidth()}
           cellHeight={cellHeight()}