xontable 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +126 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# xontable
|
|
2
2
|
|
|
3
|
-
A spreadsheet-like React table component
|
|
3
|
+
A spreadsheet-like React table component with Excel-style editing, selection, clipboard, fill handle, validation, filters, select dropdowns, checkbox cells, and column groups.
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
@@ -8,7 +8,7 @@ A spreadsheet-like React table component for editable, Excel-style grids.
|
|
|
8
8
|
npm install xontable
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Quick Start
|
|
12
12
|
|
|
13
13
|
```tsx
|
|
14
14
|
import React, { useState } from "react";
|
|
@@ -31,15 +31,83 @@ export default function App() {
|
|
|
31
31
|
}
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
##
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
## Styles (Required)
|
|
35
|
+
|
|
36
|
+
Always import the styles once in your app:
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
import "xontable/styles";
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Props
|
|
43
|
+
|
|
44
|
+
- `columns`: Column definitions
|
|
45
|
+
- `rows`: Data rows
|
|
46
|
+
- `onChange(nextRows, meta)`: Updated rows with change meta
|
|
47
|
+
- `readOnly`: Disable editing
|
|
48
|
+
- `theme`: `"light" | "dark"`
|
|
49
|
+
|
|
50
|
+
## Column Definition
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
type ColumnDef<Row> = {
|
|
54
|
+
key: keyof Row | string;
|
|
55
|
+
label: string;
|
|
56
|
+
width?: number;
|
|
57
|
+
editable?: boolean;
|
|
58
|
+
type?: "text" | "number" | "date" | "select" | "checkbox";
|
|
59
|
+
validator?: (value: string, row: Row) => string | null;
|
|
60
|
+
group?: string;
|
|
61
|
+
groupCollapsible?: boolean;
|
|
62
|
+
options?: { value: string; label: string }[];
|
|
63
|
+
getOptions?: (row: Row) => Promise<{ value: string; label: string }[]>;
|
|
64
|
+
dependsOn?: string; // for cascading selects
|
|
65
|
+
};
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Data Model
|
|
69
|
+
|
|
70
|
+
Rows are objects:
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
type Row = { id: string; [key: string]: any };
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
`onChange` receives a **new rows array** whenever edits/paste/fill happen.
|
|
77
|
+
|
|
78
|
+
## Editing
|
|
79
|
+
- Single click selects
|
|
80
|
+
- Enter or double-click to edit
|
|
81
|
+
- Typing starts edit with typed character
|
|
82
|
+
- Enter commits, Esc cancels, Tab commits and moves
|
|
83
|
+
|
|
84
|
+
## Keyboard Navigation
|
|
85
|
+
- Arrow keys move selection
|
|
86
|
+
- Tab / Shift+Tab moves horizontally
|
|
87
|
+
- Shift + arrows extends selection
|
|
88
|
+
|
|
89
|
+
## Copy / Paste
|
|
90
|
+
- TSV compatible with Excel/Google Sheets
|
|
91
|
+
- Use Ctrl/Cmd+C to copy selection
|
|
92
|
+
- Use Ctrl/Cmd+V to paste into table
|
|
93
|
+
|
|
94
|
+
## Fill Handle
|
|
95
|
+
- Drag the dot at bottom-right of active cell
|
|
96
|
+
- Fills down or across with repeated value
|
|
97
|
+
|
|
98
|
+
## Validation
|
|
99
|
+
|
|
100
|
+
Per-column validation:
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
{ key: "qty", label: "Qty", type: "number", validator: (v) => v ? null : "Required" }
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Built-in number validation if `type: "number"`.
|
|
40
107
|
|
|
41
108
|
## Select Dropdowns
|
|
42
|
-
|
|
109
|
+
|
|
110
|
+
Static options:
|
|
43
111
|
|
|
44
112
|
```ts
|
|
45
113
|
{ key: "city", label: "City", type: "select", options: [
|
|
@@ -47,26 +115,65 @@ Use `options` or `getOptions`:
|
|
|
47
115
|
] }
|
|
48
116
|
```
|
|
49
117
|
|
|
50
|
-
|
|
51
|
-
Use `validator` per column:
|
|
118
|
+
Async options:
|
|
52
119
|
|
|
53
120
|
```ts
|
|
54
|
-
{ key: "
|
|
121
|
+
{ key: "group", label: "Group", type: "select", getOptions: async () => groupOptions }
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Cascading select with `dependsOn`:
|
|
125
|
+
|
|
126
|
+
```ts
|
|
127
|
+
{ key: "subgroup", label: "Subgroup", type: "select", dependsOn: "group", getOptions: async (row) => options[row.group] }
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
Invalid values will show validation color.
|
|
131
|
+
|
|
132
|
+
## Checkbox Cells
|
|
133
|
+
|
|
134
|
+
```ts
|
|
135
|
+
{ key: "active", label: "Active", type: "checkbox" }
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
Values are `true` / `false`.
|
|
139
|
+
|
|
140
|
+
## Column Groups
|
|
141
|
+
|
|
142
|
+
```ts
|
|
143
|
+
{ key: "name", label: "Name", group: "User" }
|
|
144
|
+
{ key: "active", label: "Active", group: "User", groupCollapsible: true }
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
Groups render a top header row and can be collapsed if `groupCollapsible` is true.
|
|
148
|
+
|
|
149
|
+
## Filters
|
|
150
|
+
Each column header shows a filter icon.
|
|
151
|
+
- Search inside the filter menu
|
|
152
|
+
- Toggle values on/off
|
|
153
|
+
|
|
154
|
+
## Readonly Mode
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
<XOnTable readOnly />
|
|
55
158
|
```
|
|
56
159
|
|
|
57
|
-
|
|
160
|
+
Readonly keeps selection and scrolling but disables editing.
|
|
161
|
+
|
|
162
|
+
## Theme
|
|
58
163
|
|
|
59
164
|
```tsx
|
|
60
|
-
<XOnTable
|
|
165
|
+
<XOnTable theme="dark" />
|
|
61
166
|
```
|
|
62
167
|
|
|
63
168
|
## Requirements
|
|
64
169
|
- React 19+
|
|
65
170
|
- Peer deps: `react`, `react-dom`, `lucide-react`
|
|
66
171
|
|
|
67
|
-
##
|
|
68
|
-
Required:
|
|
172
|
+
## Troubleshooting
|
|
69
173
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
174
|
+
**Error: Could not resolve "./styles/xontable.css"**
|
|
175
|
+
- Ensure you installed the latest version and it was built/published correctly.
|
|
176
|
+
- Clear Vite cache: delete `node_modules/.vite` and run `npm run dev -- --force`.
|
|
177
|
+
|
|
178
|
+
## License
|
|
179
|
+
MIT
|