xontable 0.1.2 → 0.1.4

package/README.md

@@ -1,6 +1,6 @@
 # xontable
 
-A spreadsheet-like React table component for editable, Excel-style grids.
+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,7 +8,7 @@ A spreadsheet-like React table component for editable, Excel-style grids.
 npm install xontable
 ```
 
-## Usage
+## Quick Start
 
 ```tsx
 import React, { useState } from "react";
@@ -31,15 +31,83 @@ export default function App() {
 }
 ```
 
-## Column Types
-- `text`
-- `number`
-- `date`
-- `select`
-- `checkbox`
+## Styles (Required)
+
+Always import the styles once in your app:
+
+```ts
+import "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
-Use `options` or `getOptions`:
+
+Static options:
 
 ```ts
 { key: "city", label: "City", type: "select", options: [
@@ -47,26 +115,80 @@ Use `options` or `getOptions`:
 ] }
 ```
 
-## Validation
-Use `validator` per column:
+Async options:
 
 ```ts
-{ key: "qty", label: "Qty", type: "number", validator: (v) => v ? null : "Required" }
+{ key: "group", label: "Group", type: "select", getOptions: async () => groupOptions }
 ```
 
-## Readonly & Theme
+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
+
+Group columns by giving the same `group` name:
+
+```ts
+const columns: ColumnDef<Row>[] = [
+  { key: "name", label: "Name", group: "User" },
+  { key: "active", label: "Active", type: "checkbox", group: "User" },
+  { key: "group", label: "Group", type: "select", group: "Account Details" },
+  { key: "subgroup", label: "Subgroup", type: "select", group: "Account Details" },
+  { key: "city", label: "City", type: "select", group: "Login info" },
+];
+```
+
+Collapsible groups:
+
+```ts
+{ key: "active", label: "Active", group: "User", groupCollapsible: true }
+```
+
+Notes:
+- The top header row shows group labels.
+- If any column in a group has `groupCollapsible: true`, the group is collapsible.
+
+## Filters
+Each column header shows a filter icon.
+- Search inside the filter menu
+- Toggle values on/off
+
+## Readonly Mode
 
 ```tsx
-<XOnTable readOnly theme="dark" />
+<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`
 
-## Styles
-Required:
+## Troubleshooting
 
-```ts
-import "xontable/styles";
-```
+**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`.
+
+## License
+MIT

package/dist/XOnTable.js

@@ -171,7 +171,7 @@ export function XOnTable(props) {
         onGridKeyDown(e);
     }, [active.c, active.r, onGridKeyDown, selection]);
     useOutsideClick({ isOpen: filters.filterOpenKey != null, onClose: filters.closeFilter });
-    return (_jsxs("div", { className: `xontable-wrap theme-${theme}${readOnly ? " is-readonly" : ""}`, children: [_jsx("textarea", { ref: clipRef, className: "xontable-clip", name: "xontable-clip", "aria-hidden": "true", tabIndex: -1, onCopy: onCopy, onPaste: onPaste, onKeyDown: onGridKeyDownWithCopy, readOnly: true }), _jsx("div", { className: "xontable-surface", tabIndex: 0, onFocus: (e) => {
+    return (_jsxs("div", { className: `xontable-wrap theme-${theme}${readOnly ? " is-readonly" : ""}`, children: [_jsx("textarea", { ref: clipRef, className: "xontable-clip", name: "xontable-clip", "aria-hidden": "true", tabIndex: -1, onCopy: onCopy, onPaste: onPaste, onKeyDown: onGridKeyDownWithCopy, readOnly: true }), _jsx("div", { className: `xontable-surface${filters.filterOpenKey ? " is-filter-open" : ""}`, tabIndex: 0, onFocus: (e) => {
                     const target = e.target;
                     if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA"))
                         return;

package/dist/styles/xontable.base.css

@@ -1,5 +1,6 @@
 .xontable-wrap { display: block; width: 100%; height: 100%; border: 1px solid #e3e5ea; border-radius: 8px; overflow: hidden; background: #fff; --xontable-range: #1a73e8; --xontable-copy: #1a1a1a; }
-.xontable-surface { outline: none; width: 100%; height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #b9c1cd transparent; }
+.xontable-surface { outline: none; width: 100%; height: 100%; min-height: 220px; overflow: auto; scrollbar-width: thin; scrollbar-color: #b9c1cd transparent; }
+.xontable-surface.is-filter-open { overflow-x: auto; overflow-y: visible; }
 .xontable-surface::-webkit-scrollbar { width: 8px; height: 8px; }
 .xontable-surface::-webkit-scrollbar-thumb { background: #b9c1cd; border-radius: 999px; }
 .xontable-surface::-webkit-scrollbar-track { background: transparent; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xontable",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",