intable 0.0.6 → 0.0.8

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)
+  })
+}

package/src/pages/demo/index.tsx

@@ -0,0 +1,180 @@
+/**
+ * Plugin test demo index — renders a list of demo sections,
+ * one per plugin, to visually verify each feature.
+ */
+import { createSignal, createEffect, onCleanup, For, Show, mergeProps } from 'solid-js'
+import { useSearchParams } from '@solidjs/router'
+
+import { BasicDemo } from './BasicDemo'
+import { VirtualScrollDemo } from './VirtualScrollDemo'
+import { HeaderGroupDemo } from './HeaderGroupDemo'
+import { CellSelectionDemo } from './CellSelectionDemo'
+import { EditableDemo } from './EditableDemo'
+import { ExpandDemo } from './ExpandDemo'
+import { RowSelectionDemo } from './RowSelectionDemo'
+import { ResizeDemo } from './ResizeDemo'
+import { DragDemo } from './DragDemo'
+import { RowGroupDemo } from './RowGroupDemo'
+import { CellMergeDemo } from './CellMergeDemo'
+import { HistoryDemo } from './HistoryDemo'
+import { DiffDemo } from './DiffDemo'
+import { TreeDemo } from './TreeDemo'
+import { CopyPasteDemo } from './CopyPasteDemo'
+import { CompositeDemo } from './CompositeDemo'
+import { ReactDemo } from './ReactDemo'
+
+// ── Theme CSS (equivalent to: import 'intable/theme/*') ──────────────────────
+import antdCss         from '../../../packages/intable/src/theme/antd.scss?inline'
+import elementPlusCss  from '../../../packages/intable/src/theme/element-plus.scss?inline'
+import darkCss         from '../../../packages/intable/src/theme/dark.scss?inline'
+import shadcnCss       from '../../../packages/intable/src/theme/shadcn.scss?inline'
+import stripeCss       from '../../../packages/intable/src/theme/stripe.scss?inline'
+import materialCss     from '../../../packages/intable/src/theme/material.scss?inline'
+import githubCss       from '../../../packages/intable/src/theme/github.scss?inline'
+
+const THEMES = [
+  { name: 'Default',      css: '',            color: '#e5e7eb' },
+  { name: 'Antd',         css: antdCss,       color: '#1677ff' },
+  { name: 'Element Plus', css: elementPlusCss,color: '#409eff' },
+  { name: 'Dark',         css: darkCss,       color: '#0d1117' },
+  { name: 'GitHub',       css: githubCss,     color: '#1f2328' },
+  { name: 'Shadcn',       css: shadcnCss,     color: '#18181b' },
+  { name: 'Stripe',       css: stripeCss,     color: '#635bff' },
+  { name: 'Material',     css: materialCss,   color: '#6750a4' },
+]
+
+const STYLE_ID = 'intable-theme-override'
+
+function applyTheme(css: string) {
+  let el = document.getElementById(STYLE_ID) as HTMLStyleElement | null
+  if (!el) {
+    el = document.createElement('style')
+    el.id = STYLE_ID
+    document.head.appendChild(el)
+  }
+  el.textContent = css
+}
+
+// ── Custom theme dropdown ─────────────────────────────────────────────────────
+function ThemeSelect(props: { themes: typeof THEMES; value: string; onChange: (v: string) => void }) {
+  const [open, setOpen] = createSignal(false)
+  let ref!: HTMLDivElement
+
+  const current = () => props.themes.find(t => t.name === props.value)!
+
+  const handleOutside = (e: MouseEvent) => {
+    if (!ref.contains(e.target as Node)) setOpen(false)
+  }
+  createEffect(() => {
+    if (open()) document.addEventListener('mousedown', handleOutside)
+    else document.removeEventListener('mousedown', handleOutside)
+  })
+  onCleanup(() => document.removeEventListener('mousedown', handleOutside))
+
+  return (
+    <div ref={ref} class='relative w-full'>
+      <button
+        type='button'
+        class='flex items-center gap-1.5 w-full text-xs px-2 py-1.5 rd-1 b-(1 solid #d1d5db) bg-white c-#374151 cursor-pointer text-left'
+        onClick={() => setOpen(o => !o)}
+      >
+        <span class='inline-block w-2.5 h-2.5 rd-full shrink-0 b-(1 solid #0002)' style={{ background: current().color }} />
+        <span class='flex-1'>{current().name}</span>
+        <svg class='w-3 h-3 c-gray shrink-0' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'>
+          <path stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' />
+        </svg>
+      </button>
+      <Show when={open()}>
+        <div class='absolute top-full left-0 right-0 mt-0.5 bg-white b-(1 solid #d1d5db) rd-1 shadow-md z-50 py-0.5'>
+          <For each={props.themes}>{t => (
+            <button
+              type='button'
+              class={`flex items-center gap-1.5 w-full px-2 py-1.5 text-xs text-left cursor-pointer transition-colors ${
+                props.value === t.name ? 'bg-blue-50 c-blue-600 font-medium' : 'hover:bg-gray-50 c-#374151'
+              }`}
+              onClick={() => { props.onChange(t.name); setOpen(false) }}
+            >
+              <span class='inline-block w-2.5 h-2.5 rd-full shrink-0 b-(1 solid #0002)' style={{ background: t.color }} />
+              {t.name}
+            </button>
+          )}</For>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+// ── Demo list ─────────────────────────────────────────────────────────────────
+const demos = [
+  { name: 'Basic',           comp: BasicDemo,          desc: 'Minimal table with index, border, sticky header' },
+  { name: 'VirtualScroll',   comp: VirtualScrollDemo,  desc: 'Virtual scroll (X+Y) with 10k rows × 50 cols' },
+  { name: 'HeaderGroup',     comp: HeaderGroupDemo,     desc: 'Nested column header groups with colspan/rowspan' },
+  { name: 'CellSelection',   comp: CellSelectionDemo,   desc: 'Click and drag to select cell ranges' },
+  { name: 'Editable',        comp: EditableDemo,        desc: 'Double-click cells to edit (text, number, select, date…)' },
+  { name: 'Expand',          comp: ExpandDemo,          desc: 'Expandable rows with custom detail render' },
+  { name: 'RowSelection',    comp: RowSelectionDemo,    desc: 'Checkbox row selection (single & multiple)' },
+  { name: 'Resize',          comp: ResizeDemo,          desc: 'Drag column/row borders to resize' },
+  { name: 'Drag',            comp: DragDemo,            desc: 'Drag-and-drop column & row reordering' },
+  { name: 'RowGroup',        comp: RowGroupDemo,        desc: 'Group rows by field values with collapsible headers' },
+  { name: 'CellMerge',       comp: CellMergeDemo,       desc: 'Merge cells (rowspan/colspan)' },
+  { name: 'CopyPaste',       comp: CopyPasteDemo,       desc: 'Copy / paste cell ranges (Ctrl+C / Ctrl+V)' },
+  { name: 'Tree',            comp: TreeDemo,            desc: 'Tree-structured data with expand/collapse' },
+  { name: 'History',         comp: HistoryDemo,         desc: 'Undo / Redo (Ctrl+Z / Ctrl+Y)' },
+  { name: 'Diff',            comp: DiffDemo,            desc: 'Track changes & commit (Ctrl+S)' },
+  { name: 'Composite',       comp: CompositeDemo,       desc: 'All features combined' },
+  { name: 'React',           comp: ReactDemo,           desc: 'React integration demo' }
+]
+
+export const DemoApp = () => {
+  const [_qs, setQs] = useSearchParams<any>()
+  const qs = mergeProps({ active: demos[0].name, theme: THEMES[0].name }, () => _qs)
+
+  createEffect(() => {
+    const t = THEMES.find(t => t.name === qs.theme)
+    applyTheme(t?.css ?? '')
+  })
+
+  onCleanup(() => document.getElementById(STYLE_ID)?.remove())
+
+  return (
+    <div class='flex h-100vh'>
+      {/* sidebar */}
+      <nav class='w-52 shrink-0 of-y-auto b-r-(1 solid #e5e7eb) p-2 bg-#fafafa flex flex-col gap-1'>
+        <h2 class='font-bold text-lg px-2 py-1'>Plugin Demos</h2>
+
+        {/* Theme switcher — custom dropdown for proper color rendering */}
+        <div class='px-2 pb-2 b-b-(1 solid #e5e7eb) mb-1 relative'>
+          <label class='text-xs c-gray font-medium tracking-wide uppercase block mb-1'>Theme</label>
+          <ThemeSelect themes={THEMES} value={qs.theme} onChange={t => setQs({ theme: t })} />
+        </div>
+
+        {/* Demo list */}
+        <For each={demos}>{d => (
+          <button
+            class={`block w-full text-left px-3 py-1.5 rd-1 text-sm truncate cursor-pointer ${qs.active === d.name ? 'bg-blue-500 c-white' : 'hover:bg-gray/10'}`}
+            onClick={() => setQs({ active: d.name })}
+          >
+            {d.name}
+          </button>
+        )}</For>
+      </nav>
+
+      {/* main */}
+      <main class='flex-1 w-0 p-4 of-auto'>
+        <For each={demos}>{d => (
+          <Show when={qs.active === d.name}>
+            <div class='flex items-baseline gap-3 mb-1'>
+              <h2 class='font-bold text-xl'>{d.name}</h2>
+              <span class='text-xs c-gray font-mono'>Theme: {qs.theme}</span>
+            </div>
+            <p class='c-gray text-sm mb-3'>{d.desc}</p>
+            <d.comp />
+          </Show>
+        )}</For>
+      </main>
+    </div>
+  )
+}
+
+export default DemoApp
+

package/src/pages/index.tsx

@@ -0,0 +1,2 @@
+import { Website } from './website'
+export default Website

package/src/pages/website.scss

@@ -0,0 +1,37 @@
+/* intable official website — supplemental styles
+ * These override the component's default light-theme CSS variables
+ * so the live demo section matches the OLED dark aesthetic.
+ */
+
+/* ── Live demo: dark-theme table overrides ─────────────────────────────────── */
+.wt-live-demo {
+  /* Override the .data-table's own CSS variable declarations */
+  .data-table {
+    --bg: #0a0a12;
+    --c-primary: #6366f1;
+    --menu-bg: #1e1e2e;
+    --li-hover-bg: rgba(255, 255, 255, .06);
+    --table-b-c: rgba(255, 255, 255, .07);
+    --table-c: #cbd5e1;
+    --table-bg: #0a0a12;
+    --table-header-c: #64748b;
+    --table-header-bg: #0f0f1a;
+    --table-row-hover-bg: rgba(255, 255, 255, .04);
+    --select-area-bg: rgba(99, 102, 241, .15);
+    color-scheme: dark;
+
+    background: #0a0a12;
+
+    th, td {
+      border-color: rgba(255, 255, 255, .07);
+    }
+
+    thead th {
+      background: #0f0f1a;
+    }
+
+    tr:hover > td {
+      background: rgba(255, 255, 255, .04);
+    }
+  }
+}