Skip to content

Commit 61d8446

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Add ObjectGrid component with inline editing and keyboard navigation
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 406a4e8 commit 61d8446

5 files changed

Lines changed: 768 additions & 0 deletions

File tree

‎docs/reference/objectgrid-examples.md‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
# ObjectGrid Examples
2+
3+
Enhanced table component with Airtable-like features.
4+
5+
## Basic Grid with Keyboard Navigation
6+
7+
```typescript
8+
import { ObjectGrid } from '@object-ui/plugin-object';
9+
10+
const gridSchema = {
11+
type: 'object-grid',
12+
objectName: 'contacts',
13+
14+
// Define which fields to show
15+
fields: ['name', 'email', 'status', 'company'],
16+
17+
// Enable keyboard navigation (arrow keys, Tab, Enter)
18+
keyboardNavigation: true,
19+
20+
// Inline data for demo
21+
data: [
22+
{
23+
id: 1,
24+
name: 'John Doe',
25+
email: 'john@example.com',
26+
status: 'active',
27+
company: 'Acme Corp'
28+
},
29+
{
30+
id: 2,
31+
name: 'Jane Smith',
32+
email: 'jane@example.com',
33+
status: 'active',
34+
company: 'TechStart'
35+
}
36+
]
37+
};
38+
39+
<ObjectGrid schema={gridSchema} />
40+
```
41+
42+
**Features:**
43+
- ↑↓←→ arrow keys to navigate cells
44+
- Tab/Shift+Tab to move between cells
45+
- Enter to view/edit cell content
46+
- Escape to cancel editing
47+
48+
## Editable Grid
49+
50+
Enable inline cell editing with double-click or Enter key:
51+
52+
```typescript
53+
const editableGridSchema = {
54+
type: 'object-grid',
55+
objectName: 'contacts',
56+
fields: ['name', 'email', 'phone', 'status'],
57+
58+
// Enable inline editing
59+
editable: true,
60+
keyboardNavigation: true,
61+
62+
data: [
63+
{ id: 1, name: 'John Doe', email: 'john@example.com', phone: '555-0100', status: 'active' },
64+
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', phone: '555-0101', status: 'pending' }
65+
]
66+
};
67+
68+
<ObjectGrid
69+
schema={editableGridSchema}
70+
onCellChange={(row, column, newValue) => {
71+
console.log(`Row ${row}, Column ${column} changed to:`, newValue);
72+
}}
73+
/>
74+
```
75+
76+
**Editing Actions:**
77+
- Double-click on any cell to start editing
78+
- Press Enter on selected cell to edit
79+
- Press Enter again or Tab to save and move to next cell
80+
- Press Escape to cancel editing
81+
82+
## Grid with Frozen Columns
83+
84+
Pin columns to the left for better horizontal scrolling:
85+
86+
```typescript
87+
const frozenGridSchema = {
88+
type: 'object-grid',
89+
objectName: 'products',
90+
91+
fields: [
92+
'name', // Column 0 - frozen
93+
'sku', // Column 1 - frozen
94+
'description', // Column 2+
95+
'price',
96+
'stock',
97+
'category',
98+
'supplier',
99+
'lastUpdated'
100+
],
101+
102+
// Freeze first 2 columns (name, sku)
103+
frozenColumns: 2,
104+
105+
keyboardNavigation: true
106+
};
107+
108+
<ObjectGrid schema={frozenGridSchema} dataSource={myDataSource} />
109+
```
110+
111+
## Grid with Column Resizing
112+
113+
```typescript
114+
const resizableGridSchema = {
115+
type: 'object-grid',
116+
objectName: 'tasks',
117+
fields: ['title', 'description', 'assignee', 'dueDate', 'status'],
118+
119+
// Enable column resizing
120+
resizableColumns: true,
121+
keyboardNavigation: true
122+
};
123+
124+
<ObjectGrid schema={resizableGridSchema} dataSource={myDataSource} />
125+
```
126+
127+
**Usage:**
128+
- Hover over column header border
129+
- Click and drag to resize column width
130+
- Each column remembers its size
131+
132+
## Grid with Row Selection
133+
134+
```typescript
135+
const selectableGridSchema = {
136+
type: 'object-grid',
137+
objectName: 'users',
138+
fields: ['name', 'email', 'role', 'status'],
139+
140+
// Enable row selection
141+
selectable: 'multiple',
142+
keyboardNavigation: true,
143+
144+
data: [
145+
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active' },
146+
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active' },
147+
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive' }
148+
]
149+
};
150+
151+
<ObjectGrid
152+
schema={selectableGridSchema}
153+
onRowSelect={(selectedRows) => {
154+
console.log('Selected rows:', selectedRows);
155+
}}
156+
/>
157+
```
158+
159+
## Complete Example: Editable CRM Grid
160+
161+
```typescript
162+
const crmGridSchema = {
163+
type: 'object-grid',
164+
objectName: 'contacts',
165+
title: 'Contact Management',
166+
167+
fields: [
168+
'fullName',
169+
'email',
170+
'phone',
171+
'company',
172+
'status',
173+
'tags',
174+
'lifetimeValue',
175+
'owner',
176+
'lastContactDate'
177+
],
178+
179+
// Enable all features
180+
editable: true,
181+
keyboardNavigation: true,
182+
resizableColumns: true,
183+
frozenColumns: 1, // Keep name column frozen
184+
selectable: 'multiple',
185+
pageSize: 50
186+
};
187+
188+
function ContactsPage() {
189+
const handleCellChange = (row, column, newValue) => {
190+
// Save to backend
191+
console.log(`Updating row ${row}, ${column} = ${newValue}`);
192+
};
193+
194+
const handleRowSelect = (selectedRows) => {
195+
console.log(`Selected ${selectedRows.length} contacts`);
196+
};
197+
198+
return (
199+
<div className="p-6">
200+
<ObjectGrid
201+
schema={crmGridSchema}
202+
dataSource={myDataSource}
203+
onCellChange={handleCellChange}
204+
onRowSelect={handleRowSelect}
205+
/>
206+
</div>
207+
);
208+
}
209+
```
210+
211+
## Keyboard Shortcuts Reference
212+
213+
| Shortcut | Action |
214+
|----------|--------|
215+
| ↑ | Move selection up |
216+
| ↓ | Move selection down |
217+
| ← | Move selection left |
218+
| → | Move selection right |
219+
| Tab | Move to next cell (right/down) |
220+
| Shift+Tab | Move to previous cell (left/up) |
221+
| Enter | Start editing selected cell |
222+
| Enter (while editing) | Save and exit edit mode |
223+
| Escape | Cancel edit, close editor |
224+
| Double-click | Start editing cell |
225+
226+
## Feature Comparison
227+
228+
| Feature | ObjectTable | ObjectGrid |
229+
|---------|-------------|------------|
230+
| Auto-generate columns | ✓ | ✓ |
231+
| Type-aware cell rendering | ✓ | ✓ |
232+
| Basic row selection | ✓ | ✓ |
233+
| Keyboard navigation | - | ✓ |
234+
| Inline cell editing | - | ✓ |
235+
| Frozen columns | - | ✓ |
236+
| Column resizing | - | ✓ |
237+
| Tab/Enter navigation | - | ✓ |
238+
| Optimized for large data | ✓ | Future |
239+
| Virtual scrolling | - | Future |
240+
241+
## When to Use ObjectGrid vs ObjectTable
242+
243+
**Use ObjectGrid when:**
244+
- Users need to edit data inline
245+
- Keyboard navigation is important
246+
- Working with spreadsheet-like data
247+
- Need column freezing for wide tables
248+
- Interactive data entry is the primary use case
249+
250+
**Use ObjectTable when:**
251+
- Primary use is viewing/reading data
252+
- Need CRUD operations (create, edit, delete via forms)
253+
- Need pagination and filtering
254+
- Simpler interaction model is preferred
255+
- Better for mobile/responsive layouts

0 commit comments

Comments
 (0)