xontable 0.1.1 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # xontable
 
-A spreadsheet-like React table component with selection, clipboard, fill handle, validation, filters, select dropdowns, and checkbox cells.
+A spreadsheet-like React table component with Excel-style editing, selection, clipboard, fill handle, validation, filters, select dropdowns, checkbox cells, and column groups.
 
 ## Install
 
@@ -8,22 +8,172 @@ A spreadsheet-like React table component with selection, clipboard, fill handle,
 npm install xontable
 ```
 
-## Usage
+## Quick Start
 
 ```tsx
+import React, { useState } from "react";
 import { XOnTable, type ColumnDef } from "xontable";
 import "xontable/styles";
 
+type Row = { id: string; name: string; qty: string };
+
 const columns: ColumnDef<Row>[] = [
-  { key: "name", label: "Name", type: "text", editable: true },
+  { key: "name", label: "Name", editable: true },
   { key: "qty", label: "Qty", type: "number", editable: true },
 ];
 
-<XOnTable columns={columns} rows={rows} onChange={setRows} />;
+export default function App() {
+  const [rows, setRows] = useState<Row[]>([
+    { id: "1", name: "Rice", qty: "10" },
+  ]);
+
+  return <XOnTable columns={columns} rows={rows} onChange={setRows} />;
+}
+```
+
+## Styles (Required)
+
+Always import the styles once in your app:
+
+```ts
+import "xontable/styles";
 ```
 
-## Notes
-- Built for React 19+
-- Styles are included via `xontable/styles`
+## Props
+
+- `columns`: Column definitions
+- `rows`: Data rows
+- `onChange(nextRows, meta)`: Updated rows with change meta
+- `readOnly`: Disable editing
+- `theme`: `"light" | "dark"`
+
+## Column Definition
+
+```ts
+type ColumnDef<Row> = {
+  key: keyof Row | string;
+  label: string;
+  width?: number;
+  editable?: boolean;
+  type?: "text" | "number" | "date" | "select" | "checkbox";
+  validator?: (value: string, row: Row) => string | null;
+  group?: string;
+  groupCollapsible?: boolean;
+  options?: { value: string; label: string }[];
+  getOptions?: (row: Row) => Promise<{ value: string; label: string }[]>;
+  dependsOn?: string; // for cascading selects
+};
+```
+
+## Data Model
+
+Rows are objects:
+
+```ts
+type Row = { id: string; [key: string]: any };
+```
+
+`onChange` receives a **new rows array** whenever edits/paste/fill happen.
+
+## Editing
+- Single click selects
+- Enter or double-click to edit
+- Typing starts edit with typed character
+- Enter commits, Esc cancels, Tab commits and moves
+
+## Keyboard Navigation
+- Arrow keys move selection
+- Tab / Shift+Tab moves horizontally
+- Shift + arrows extends selection
+
+## Copy / Paste
+- TSV compatible with Excel/Google Sheets
+- Use Ctrl/Cmd+C to copy selection
+- Use Ctrl/Cmd+V to paste into table
+
+## Fill Handle
+- Drag the dot at bottom-right of active cell
+- Fills down or across with repeated value
+
+## Validation
+
+Per-column validation:
+
+```ts
+{ key: "qty", label: "Qty", type: "number", validator: (v) => v ? null : "Required" }
+```
+
+Built-in number validation if `type: "number"`.
+
+## Select Dropdowns
+
+Static options:
+
+```ts
+{ key: "city", label: "City", type: "select", options: [
+  { value: "tokyo", label: "Tokyo" }
+] }
+```
+
+Async options:
+
+```ts
+{ key: "group", label: "Group", type: "select", getOptions: async () => groupOptions }
+```
+
+Cascading select with `dependsOn`:
+
+```ts
+{ key: "subgroup", label: "Subgroup", type: "select", dependsOn: "group", getOptions: async (row) => options[row.group] }
+```
+
+Invalid values will show validation color.
+
+## Checkbox Cells
+
+```ts
+{ key: "active", label: "Active", type: "checkbox" }
+```
+
+Values are `true` / `false`.
+
+## Column Groups
+
+```ts
+{ key: "name", label: "Name", group: "User" }
+{ key: "active", label: "Active", group: "User", groupCollapsible: true }
+```
+
+Groups render a top header row and can be collapsed if `groupCollapsible` is true.
+
+## Filters
+Each column header shows a filter icon.
+- Search inside the filter menu
+- Toggle values on/off
+
+## Readonly Mode
+
+```tsx
+<XOnTable readOnly />
+```
+
+Readonly keeps selection and scrolling but disables editing.
+
+## Theme
+
+```tsx
+<XOnTable theme="dark" />
+```
+
+## Requirements
+- React 19+
+- Peer deps: `react`, `react-dom`, `lucide-react`
+
+## Troubleshooting
+
+**Error: Could not resolve "./styles/xontable.css"**
+- Ensure you installed the latest version and it was built/published correctly.
+- Clear Vite cache: delete `node_modules/.vite` and run `npm run dev -- --force`.
 
-See the root `BOOK.md` for full developer documentation.
+## License
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xontable",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -11,17 +11,16 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./styles": "./src/styles/xontable.css"
+    "./styles": "./dist/styles/xontable.css"
   },
   "sideEffects": [
-    "./src/styles/xontable.css"
+    "./dist/styles/xontable.css"
   ],
   "files": [
-    "dist",
-    "src/styles"
+    "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && node ./scripts/copy-styles.mjs",
     "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
     "prepublishOnly": "npm run clean && npm run build"
   },