zubin-grid 0.2.0 → 0.2.1
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 +64 -30
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ A lightweight grid state manager for React and TypeScript.
|
|
|
10
10
|
- Typed grid API for rows, columns, heads, and tails
|
|
11
11
|
- React hooks for reading and updating state
|
|
12
12
|
- Row and column reordering helpers
|
|
13
|
-
-
|
|
13
|
+
- JSON-friendly initialization with typed row, column, and cell records
|
|
14
14
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
@@ -38,31 +38,41 @@ npm run example:build
|
|
|
38
38
|
|
|
39
39
|
## Quick start
|
|
40
40
|
|
|
41
|
-
Create a grid from
|
|
41
|
+
Create a grid from JSON-friendly row, column, and cell records:
|
|
42
42
|
|
|
43
43
|
```ts
|
|
44
|
-
import {
|
|
44
|
+
import { grid } from 'zubin-grid'
|
|
45
|
+
|
|
46
|
+
type SalesSchema = {
|
|
47
|
+
rows: Array<{ id: string; label: string }>
|
|
48
|
+
columns: Array<{ id: string; label: string }>
|
|
49
|
+
cells: Array<{ rowId: string; columnId: string; value: number }>
|
|
50
|
+
}
|
|
45
51
|
|
|
46
|
-
const
|
|
47
|
-
[
|
|
48
|
-
|
|
49
|
-
|
|
52
|
+
const initialState: SalesSchema = {
|
|
53
|
+
rows: [
|
|
54
|
+
{ id: 'north', label: 'North' },
|
|
55
|
+
{ id: 'south', label: 'South' },
|
|
50
56
|
],
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
columns: [
|
|
58
|
+
{ id: 'jan', label: 'January' },
|
|
59
|
+
{ id: 'feb', label: 'February' },
|
|
60
|
+
],
|
|
61
|
+
cells: [
|
|
62
|
+
{ rowId: 'north', columnId: 'jan', value: 12 },
|
|
63
|
+
{ rowId: 'north', columnId: 'feb', value: 9 },
|
|
64
|
+
{ rowId: 'south', columnId: 'jan', value: 7 },
|
|
65
|
+
{ rowId: 'south', columnId: 'feb', value: 15 },
|
|
66
|
+
],
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
const salesGrid = grid<SalesSchema>(initialState, {
|
|
70
|
+
rowHeaders: ['id', 'rowId'],
|
|
71
|
+
colHeaders: ['id', 'columnId'],
|
|
72
|
+
})
|
|
59
73
|
|
|
60
74
|
console.log(salesGrid.getValue('north', 'jan'))
|
|
61
75
|
// 12
|
|
62
|
-
|
|
63
|
-
salesGrid.setValue('south', 'mar', 11)
|
|
64
|
-
console.log(salesGrid.getValue('south', 'mar'))
|
|
65
|
-
// 11
|
|
66
76
|
```
|
|
67
77
|
|
|
68
78
|
## React example
|
|
@@ -70,22 +80,47 @@ console.log(salesGrid.getValue('south', 'mar'))
|
|
|
70
80
|
Create the grid once outside render, or memoize it if you build it inside a component.
|
|
71
81
|
|
|
72
82
|
```tsx
|
|
73
|
-
import {
|
|
83
|
+
import { grid, useCell } from 'zubin-grid'
|
|
84
|
+
|
|
85
|
+
type BudgetRowId = 'marketing' | 'ops'
|
|
86
|
+
type BudgetColumnId = 'planned' | 'actual'
|
|
87
|
+
|
|
88
|
+
type BudgetSchema = {
|
|
89
|
+
rows: Array<{ id: BudgetRowId; label: string }>
|
|
90
|
+
columns: Array<{ id: BudgetColumnId; label: string }>
|
|
91
|
+
cells: Array<{
|
|
92
|
+
rowId: BudgetRowId
|
|
93
|
+
columnId: BudgetColumnId
|
|
94
|
+
value: number
|
|
95
|
+
}>
|
|
96
|
+
}
|
|
74
97
|
|
|
75
|
-
const budgetGrid = grid(
|
|
76
|
-
|
|
77
|
-
[
|
|
78
|
-
|
|
79
|
-
|
|
98
|
+
const budgetGrid = grid<BudgetSchema>(
|
|
99
|
+
{
|
|
100
|
+
rows: [
|
|
101
|
+
{ id: 'marketing', label: 'Marketing' },
|
|
102
|
+
{ id: 'ops', label: 'Operations' },
|
|
103
|
+
],
|
|
104
|
+
columns: [
|
|
105
|
+
{ id: 'planned', label: 'Planned' },
|
|
106
|
+
{ id: 'actual', label: 'Actual' },
|
|
107
|
+
],
|
|
108
|
+
cells: [
|
|
109
|
+
{ rowId: 'marketing', columnId: 'planned', value: 1000 },
|
|
110
|
+
{ rowId: 'marketing', columnId: 'actual', value: 1200 },
|
|
111
|
+
{ rowId: 'ops', columnId: 'planned', value: 800 },
|
|
112
|
+
{ rowId: 'ops', columnId: 'actual', value: 950 },
|
|
113
|
+
],
|
|
114
|
+
},
|
|
80
115
|
{
|
|
81
|
-
rowHeaders: ['
|
|
82
|
-
colHeaders: ['
|
|
116
|
+
rowHeaders: ['id', 'rowId'],
|
|
117
|
+
colHeaders: ['id', 'columnId'],
|
|
83
118
|
},
|
|
84
119
|
)
|
|
85
120
|
|
|
86
121
|
export function BudgetCell(props: {
|
|
87
|
-
rowId:
|
|
88
|
-
columnId:
|
|
122
|
+
rowId: BudgetRowId
|
|
123
|
+
columnId: BudgetColumnId
|
|
89
124
|
}) {
|
|
90
125
|
const [value, setValue] = useCell(budgetGrid, props.rowId, props.columnId)
|
|
91
126
|
|
|
@@ -275,7 +310,6 @@ const persistedWithCustomAdapter = grid<SalesSchema>(initialState, {
|
|
|
275
310
|
### Store creators
|
|
276
311
|
|
|
277
312
|
- `cell(initialValue)` - creates a reactive cell
|
|
278
|
-
- `grid(cells, options)` - creates a grid from a 2D matrix
|
|
279
313
|
- `grid({ rows, columns, cells }, options)` - creates a grid from JSON-friendly state
|
|
280
314
|
- `grid(() => ({ rows, columns, cells }), options)` - lazily creates typed grid state
|
|
281
315
|
|