intable 0.0.7 → 0.0.8

package/src/pages/demo/BasicDemo.tsx

@@ -0,0 +1,19 @@
+import { Intable } from '../../../packages/intable/src'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(6)
+const data = makeData(20, 6)
+
+export const BasicDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+  />
+)

package/src/pages/demo/CellMergeDemo.tsx

@@ -0,0 +1,41 @@
+import { createMutable } from 'solid-js/store'
+import { range } from 'es-toolkit'
+import { Intable } from '../../../packages/intable/src'
+import { CellMergePlugin } from '../../../packages/intable/src/plugins/CellMergePlugin'
+import { replaceArray } from './helpers'
+
+const cols = createMutable([
+  { id: 'group',  name: 'Group',  width: 100, mergeRow: true },
+  { id: 'name',   name: 'Name',   width: 120 },
+  { id: 'value',  name: 'Value',  width: 100 },
+  { id: 'score',  name: 'Score',  width: 100 },
+] as any[])
+
+const data = createMutable(
+  range(20).map(i => ({
+    id: i,
+    group: 'G' + Math.floor(i / 4),
+    name: 'Item ' + i,
+    value: (i * 7) % 100,
+    score: (i * 13) % 100,
+  })),
+)
+
+/**
+ * The "Group" column auto-merges consecutive rows with equal values (mergeRow: true).
+ * CellMergePlugin is added manually since it's not a default plugin.
+ */
+export const CellMergeDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    plugins={[CellMergePlugin]}
+  />
+)

package/src/pages/demo/CellSelectionDemo.tsx

@@ -0,0 +1,24 @@
+import { Intable } from '../../../packages/intable/src'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(8)
+const data = makeData(30, 8)
+
+/**
+ * CellSelection is auto-loaded.
+ * Click a cell then drag or shift+click to select a range.
+ * Arrow keys to navigate.
+ */
+export const CellSelectionDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+  />
+)

package/src/pages/demo/CompositeDemo.tsx

@@ -0,0 +1,60 @@
+import { batch } from 'solid-js'
+import { createMutable } from 'solid-js/store'
+import { range } from 'es-toolkit'
+import { Intable } from '../../../packages/intable/src'
+import { VirtualScrollPlugin } from '../../../packages/intable/src/plugins/VirtualScrollPlugin'
+import { HistoryPlugin } from '../../../packages/intable/src/plugins/HistoryPlugin'
+import { DiffPlugin } from '../../../packages/intable/src/plugins/DiffPlugin'
+import { replaceArray } from './helpers'
+
+const cols = createMutable([
+  { name: 'Basic Info', children: [
+    { id: 'col_0', name: 'Name', width: 100, editable: true },
+    { id: 'col_1', name: 'Age',  width: 80,  editable: true, editor: 'number' },
+  ]},
+  { id: 'col_2', name: 'Status', width: 100, editable: true, editor: 'select', enum: { active: 'Active', inactive: 'Inactive' } },
+  { name: 'Details', children: [
+    { id: 'col_3', name: 'City',   width: 100, editable: true },
+    { id: 'col_4', name: 'Score',  width: 80,  editable: true, editor: 'number' },
+  ]},
+  ...range(5).map(i => ({ id: 'col_' + (i + 5), name: 'Extra ' + i, width: 80, editable: true })),
+] as any[])
+
+const leafColIds = range(10).map(i => 'col_' + i)
+const data = createMutable(
+  range(200).map((_, i) => ({
+    id: i,
+    ...Object.fromEntries(leafColIds.map(id => [id, `${id}_${i + 1}`])),
+    g: i % 5,
+  })),
+)
+
+cols.at(-1)!.fixed = 'right'
+
+/**
+ * Everything combined: header groups, virtual scroll, editable,
+ * expand, row selection, resize, drag, history, diff, index, border.
+ */
+export const CompositeDemo = () => (
+  <div>
+    <p class='text-sm c-gray mb-2'>All features enabled. Edit, drag, resize, select, expand, undo/redo, diff.</p>
+    <Intable
+      class='w-full h-60vh'
+      columns={cols}
+      onColumnsChange={v => replaceArray(cols, v)}
+      data={data}
+      onDataChange={v => replaceArray(data, v)}
+      index
+      border
+      stickyHeader
+      size='small'
+      colDrag
+      rowDrag
+      resizable={{ col: { enable: true }, row: { enable: true } }}
+      expand={{ enable: true, render: ({ data }) => <div class='p-2 c-blue'>{JSON.stringify(data)}</div> }}
+      rowSelection={{ enable: true, multiple: true }}
+      plugins={[VirtualScrollPlugin, HistoryPlugin, DiffPlugin]}
+      diff={{ onCommit: (d) => console.log('commit', d) }}
+    />
+  </div>
+)

package/src/pages/demo/CopyPasteDemo.tsx

@@ -0,0 +1,26 @@
+import { Intable } from '../../../packages/intable/src'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(6, { editable: true })
+const data = makeData(20, 6)
+
+/**
+ * Select a cell range then Ctrl+C to copy, Ctrl+V to paste.
+ * CopyPaste (ClipboardPlugin) is auto-loaded.
+ */
+export const CopyPasteDemo = () => (
+  <div>
+    <p class='text-sm c-gray mb-2'>Select cells → Ctrl+C to copy → click target cell → Ctrl+V to paste.</p>
+    <Intable
+      class='w-full h-50vh'
+      columns={cols}
+      onColumnsChange={v => replaceArray(cols, v)}
+      data={data}
+      onDataChange={v => replaceArray(data, v)}
+      index
+      border
+      stickyHeader
+      size='small'
+    />
+  </div>
+)

package/src/pages/demo/DiffDemo.tsx

@@ -0,0 +1,33 @@
+import { Intable } from '../../../packages/intable/src'
+import { DiffPlugin } from '../../../packages/intable/src/plugins/DiffPlugin'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(5, { editable: true })
+const data = makeData(15, 5)
+
+/**
+ * Edit cells — changed cells are highlighted.
+ * Right-click → add/delete rows shows added/removed highlights.
+ * Press Ctrl+S to commit & clear highlights.
+ */
+export const DiffDemo = () => (
+  <div>
+    <p class='text-sm c-gray mb-2'>Edit cells to see change highlights. Ctrl+S to commit.</p>
+    <Intable
+      class='w-full h-50vh'
+      columns={cols}
+      onColumnsChange={v => replaceArray(cols, v)}
+      data={data}
+      onDataChange={v => replaceArray(data, v)}
+      index
+      border
+      stickyHeader
+      size='small'
+      plugins={[DiffPlugin]}
+      diff={{
+        enable: true,
+        onCommit: (d) => console.log('Diff committed:', d),
+      }}
+    />
+  </div>
+)

package/src/pages/demo/DragDemo.tsx

@@ -0,0 +1,25 @@
+import { Intable } from '../../../packages/intable/src'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(6)
+const data = makeData(20, 6)
+
+/**
+ * Drag column headers to reorder columns.
+ * Drag the index cell (row number) to reorder rows.
+ */
+export const DragDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    colDrag
+    rowDrag
+  />
+)

package/src/pages/demo/EditableDemo.tsx

@@ -0,0 +1,58 @@
+import { z } from 'zod'
+import { createMutable } from 'solid-js/store'
+import { Intable } from '../../../packages/intable/src'
+import { ZodValidatorPlugin } from '../../../packages/intable/src/plugins/ZodValidatorPlugin'
+import { makeData, replaceArray } from './helpers'
+
+const RESERVED = ['admin', 'root', 'null']
+
+const cols = createMutable([
+  {
+    id: 'col_0', name: 'Text (1–20 chars, no reserved)', width: 180, editable: true,
+    zodSchema: z.string().min(1, 'Required').max(20, 'Max 20 characters'),
+    validator: (value: string) =>
+      RESERVED.includes(value.toLowerCase()) ? `"${value}" is a reserved word` : true,
+  },
+  {
+    id: 'col_1', name: 'Number (0–100)', width: 140, editable: true, editor: 'number',
+    zodSchema: z.coerce.number({ error: 'Must be a number' }).min(0, 'Min 0').max(100, 'Max 100'),
+  },
+  { id: 'col_2', name: 'Date',     width: 130, editable: true, editor: 'date' },
+  { id: 'col_3', name: 'Color',    width: 100, editable: true, editor: 'color' },
+  { id: 'col_4', name: 'Checkbox', width: 100, editable: true, editor: 'checkbox' },
+  {
+    id: 'col_5', name: 'Select', width: 120, editable: true, editor: 'select',
+    enum: { A: 'Option A', B: 'Option B', C: 'Option C' },
+  },
+  { id: 'col_6', name: 'Range',    width: 120, editable: true, editor: 'range' },
+  { id: 'col_7', name: 'ReadOnly', width: 100 },
+] as any[])
+
+const data = makeData(20, 8)
+
+/**
+ * Double-click (or start typing) on an editable cell to enter edit mode.
+ * Press Enter or click outside to commit. Escape to cancel.
+ *
+ * Validation:
+ *  - Text:   Zod min/max length + col.validator blocks reserved words
+ *  - Number: Zod coerce + range 0–100
+ *  - Table-level validator: blocks any value containing "error"
+ */
+export const EditableDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    plugins={[ZodValidatorPlugin]}
+    validator={(value) =>
+      String(value ?? '').toLowerCase().includes('error') ? 'Value must not contain "error"' : true
+    }
+  />
+)

package/src/pages/demo/ExpandDemo.tsx

@@ -0,0 +1,32 @@
+import { Intable } from '../../../packages/intable/src'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(6)
+const data = makeData(20, 6)
+
+/**
+ * Click the chevron on the left to expand a row.
+ * The expand render shows JSON of the row data.
+ */
+export const ExpandDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    expand={{
+      enable: true,
+      render: ({ data }) => (
+        <div class='p-3 bg-gray-50 text-sm'>
+          <b>Row Detail:</b>
+          <pre class='mt-1'>{JSON.stringify(data, null, 2)}</pre>
+        </div>
+      ),
+    }}
+  />
+)

package/src/pages/demo/HeaderGroupDemo.tsx

@@ -0,0 +1,36 @@
+import { createMutable } from 'solid-js/store'
+import { Intable } from '../../../packages/intable/src'
+import { VirtualScrollPlugin } from '../../../packages/intable/src/plugins/VirtualScrollPlugin'
+import { makeData, replaceArray } from './helpers'
+import { range } from 'es-toolkit'
+
+const cols = createMutable([
+  { name: 'Basic Info', children: [
+    { id: 'col_0', name: 'Name', width: 100 },
+    { id: 'col_1', name: 'Age', width: 80 },
+  ]},
+  { id: 'col_2', name: 'Status', width: 100 },
+  { name: 'Address', children: [
+    { id: 'col_3', name: 'City', width: 100 },
+    { id: 'col_4', name: 'Street', width: 120 },
+    { id: 'col_5', name: 'Zip', width: 80 },
+  ]},
+  ...range(6).map(i => ({ id: 'col_' + (i + 6), name: 'Extra ' + i, width: 80 })),
+] as any[])
+
+const data = makeData(100, 12)
+
+export const HeaderGroupDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    plugins={[VirtualScrollPlugin]}
+  />
+)

package/src/pages/demo/HistoryDemo.tsx

@@ -0,0 +1,28 @@
+import { Intable } from '../../../packages/intable/src'
+import { HistoryPlugin } from '../../../packages/intable/src/plugins/HistoryPlugin'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(5, { editable: true })
+const data = makeData(15, 5)
+
+/**
+ * Edit cells then press Ctrl+Z to undo, Ctrl+Y to redo.
+ * HistoryPlugin must be added manually.
+ */
+export const HistoryDemo = () => (
+  <div>
+    <p class='text-sm c-gray mb-2'>Edit a cell, then Ctrl+Z to undo, Ctrl+Y to redo.</p>
+    <Intable
+      class='w-full h-50vh'
+      columns={cols}
+      onColumnsChange={v => replaceArray(cols, v)}
+      data={data}
+      onDataChange={v => replaceArray(data, v)}
+      index
+      border
+      stickyHeader
+      size='small'
+      plugins={[HistoryPlugin]}
+    />
+  </div>
+)

package/src/pages/demo/ReactDemo.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState, createElement as h, type FC } from 'react'
+
+import { Intable, component } from '../../../packages/react/src'
+import { range } from 'es-toolkit'
+
+export const ReactDemo = component(() => {
+  const [cols, setCols] = useState([
+    { id: 'col_0', name: 'Column 1', width: 120, editable: true },
+    { name: 'HeaderGroup', children: [
+      { id: 'col_1', name: 'Column 2', width: 120, editable: true, render: (props) => h('div', { style: { color: 'red' } }, props.data[props.col.id]) },
+      { id: 'col_2', name: 'Column 3', width: 120, editable: true },
+    ] },
+    { id: 'col_3', name: 'Column 4', width: 120, editable: true },
+    { id: 'col_4', name: 'Column 5', width: 120, editable: true },
+    { id: 'col_5', name: 'Column 6', width: 120, editable: true },
+    { id: 'col_6', name: 'Column 7', editable: true },
+    { id: 'col_7', name: 'Column 8', editable: true },
+  ])
+
+  const [data, setData] = useState(range(20).map(i => {
+    const row: Record<string, any> = { id: i }
+    for (let j = 0; j < cols.length; j++) {
+      row['col_' + j] = `col_${j}_${i + 1}`
+    }
+    return row
+  }))
+  
+  return h(Intable, {
+    className: 'w-full h-60vh',
+    columns: cols,
+    onColumnsChange: v => setCols(v),
+    data: data,
+    onDataChange: v => setData(v),
+    index: true,
+    border: true,
+    stickyHeader: true,
+    size: 'small',
+    // 
+    resizable: { col: { enable: true }, row: { enable: true } },
+    // 
+    colDrag: true,
+    rowDrag: true,
+    // 
+    rowSelection: {
+      enable: true,
+      multiple: true,
+      onChange: (selected, unselected) => console.log('selected:', selected, 'unselected:', unselected),
+    },
+    expand: {
+      enable: true,
+      render: ({ data }) => (
+        h('div', { className: 'p-3 bg-gray-50 text-sm' }, [
+          h('b', null, 'Row Detail:'),
+          h('pre', { className: 'mt-1' }, JSON.stringify(data, null, 2))
+        ])
+      )
+    },
+  })
+})

package/src/pages/demo/ResizeDemo.tsx

@@ -0,0 +1,24 @@
+import { Intable } from '../../../packages/intable/src'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(6)
+const data = makeData(20, 6)
+
+/**
+ * Drag column header borders to resize columns.
+ * Row resize is also enabled — drag row bottom borders.
+ */
+export const ResizeDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    resizable={{ col: { enable: true }, row: { enable: true } }}
+  />
+)

package/src/pages/demo/RowGroupDemo.tsx

@@ -0,0 +1,43 @@
+import { createMutable } from 'solid-js/store'
+import { range } from 'es-toolkit'
+import { Intable } from '../../../packages/intable/src'
+import { replaceArray } from './helpers'
+
+const cols = createMutable([
+  { id: 'name',     name: 'Name',     width: 120 },
+  { id: 'category', name: 'Category', width: 120 },
+  { id: 'region',   name: 'Region',   width: 120 },
+  { id: 'value',    name: 'Value',    width: 100 },
+])
+
+const categories = ['Electronics', 'Clothing', 'Food']
+const regions = ['East', 'West', 'North', 'South']
+
+const data = createMutable(
+  range(40).map(i => ({
+    id: i,
+    name: 'Item ' + i,
+    category: categories[i % 3],
+    region: regions[i % 4],
+    value: Math.round(Math.random() * 1000),
+  })),
+)
+
+/**
+ * Rows are grouped by `category` then `region`.
+ * Click group headers to expand/collapse.
+ */
+export const RowGroupDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    rowGroup={{ fields: ['category', 'region'] }}
+  />
+)

package/src/pages/demo/RowSelectionDemo.tsx

@@ -0,0 +1,27 @@
+import { Intable } from '../../../packages/intable/src'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(6)
+const data = makeData(20, 6)
+
+/**
+ * Checkbox column on the left. Click to select, header checkbox for select-all.
+ */
+export const RowSelectionDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    rowSelection={{
+      enable: true,
+      multiple: true,
+      onChange: (selected, unselected) => console.log('selected:', selected, 'unselected:', unselected),
+    }}
+  />
+)

package/src/pages/demo/TreeDemo.tsx

@@ -0,0 +1,45 @@
+import { createMutable } from 'solid-js/store'
+import { Intable } from '../../../packages/intable/src'
+import { replaceArray } from './helpers'
+
+const cols = createMutable([
+  { id: 'name',  name: 'Name',  width: 200 },
+  { id: 'size',  name: 'Size',  width: 100 },
+  { id: 'type',  name: 'Type',  width: 120 },
+])
+
+const data = createMutable([
+  { id: 1, name: 'src',    size: '-', type: 'folder', children: [
+    { id: 2, name: 'index.ts', size: '2KB',  type: 'file' },
+    { id: 3, name: 'utils',    size: '-',    type: 'folder', children: [
+      { id: 4, name: 'helper.ts', size: '1KB', type: 'file' },
+      { id: 5, name: 'math.ts',   size: '3KB', type: 'file' },
+    ]},
+    { id: 6, name: 'components', size: '-', type: 'folder', children: [
+      { id: 7, name: 'App.tsx',    size: '4KB', type: 'file' },
+      { id: 8, name: 'Button.tsx', size: '1KB', type: 'file' },
+    ]},
+  ]},
+  { id: 9, name: 'package.json', size: '1KB', type: 'file' },
+  { id: 10, name: 'README.md',    size: '2KB', type: 'file' },
+])
+
+/**
+ * Tree-structured data with expand/collapse.
+ * TreePlugin must be added manually.
+ */
+export const TreeDemo = () => (
+  <Intable
+    class='w-full h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    tree={{ children: 'children' }}
+    rowKey='id'
+  />
+)

package/src/pages/demo/VirtualScrollDemo.tsx

@@ -0,0 +1,21 @@
+import { Intable } from '../../../packages/intable/src'
+import { VirtualScrollPlugin } from '../../../packages/intable/src/plugins/VirtualScrollPlugin'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(50, { width: 80 })
+const data = makeData(1000, 50)
+
+export const VirtualScrollDemo = () => (
+  <Intable
+    class='h-60vh'
+    columns={cols}
+    onColumnsChange={v => replaceArray(cols, v)}
+    data={data}
+    onDataChange={v => replaceArray(data, v)}
+    index
+    border
+    stickyHeader
+    size='small'
+    plugins={[VirtualScrollPlugin]}
+  />
+)

package/src/pages/demo/helpers.tsx

@@ -0,0 +1,39 @@
+/**
+ * Shared helpers for demo data generation.
+ */
+import { createMutable } from 'solid-js/store'
+import { batch } from 'solid-js'
+import { range } from 'es-toolkit'
+
+/** Generate flat tabular data */
+export function makeData(rows: number, colCount: number) {
+  const colIds = range(colCount).map(i => 'col_' + i)
+  return createMutable(
+    range(rows).map((_, i) =>
+      Object.fromEntries([
+        ['id', i],
+        ...colIds.map(id => [id, `${id}_${i + 1}`]),
+      ]),
+    ),
+  )
+}
+
+/** Generate column definitions */
+export function makeCols(count: number, extra?: Partial<{ width: number; editable: boolean }>) {
+  return createMutable(
+    range(count).map(i => ({
+      id: 'col_' + i,
+      name: 'Col ' + i,
+      width: 100,
+      ...extra,
+    })),
+  )
+}
+
+/** Shortcut for batch-replacing a reactive array */
+export function replaceArray<T>(arr: T[], next: T[]) {
+  batch(() => {
+    arr.length = 0
+    arr.push(...next)
+  })
+}