Skip to content

Commit 66f21c8

Browse files
Copilothotlong
Copilot
and
hotlong
committed
docs: Update fumadocs with refactored ObjectTable architecture
Updated documentation to reflect: - ObjectGrid merged into ObjectTable - Dual mode support (object-table and object-grid) - Built on data-table foundation - 20+ field type renderers - Enterprise features (sorting, search, pagination, export, etc.) - Keyboard navigation and inline editing capabilities Updated files: - content/docs/plugins/plugin-object/object-table.mdx - content/docs/plugins/plugin-object/index.mdx Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent cee7b1a commit 66f21c8

2 files changed

Lines changed: 167 additions & 131 deletions

File tree

‎content/docs/plugins/plugin-object/index.mdx‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,19 @@ The Object plugin provides seamless integration with ObjectQL backends through s
1919
The plugin provides three main components for building CRUD interfaces:
2020

2121
### ObjectTable
22-
Auto-generated tables with sorting, filtering, and pagination capabilities. Perfect for displaying lists of data from ObjectQL objects.
22+
23+
Enterprise-grade table component with dual modes: traditional CRUD operations and spreadsheet-like inline editing. Built on data-table foundation with automatic field type rendering.
24+
25+
**Features:**
26+
- Auto-generated columns from ObjectQL schema
27+
- 20+ specialized field renderers (currency, percent, date, select badges, etc.)
28+
- Multi-column sorting, search, pagination, row selection
29+
- CSV export, column resizing, column reordering
30+
- Grid mode: inline editing, keyboard navigation, frozen columns
31+
32+
**Modes:**
33+
- `object-table`: Traditional table with CRUD operations
34+
- `object-grid`: Spreadsheet-like inline editing
2335

2436
[Learn more about ObjectTable →](/docs/plugins/plugin-object/object-table)
2537

@@ -36,6 +48,9 @@ Complete CRUD views combining list, detail, and edit modes in a single component
3648
## Features
3749

3850
- **Schema-driven**: Automatically adapts to ObjectQL metadata
51+
- **Type-aware rendering**: 20+ specialized field renderers (currency, percent, badges, avatars, etc.)
52+
- **Enterprise table**: Built on data-table with sorting, search, pagination, CSV export
53+
- **Dual modes**: Traditional CRUD or spreadsheet-like inline editing
3954
- **Type-safe**: Full TypeScript support
4055
- **Lazy-loaded**: Only loads when used
4156
- **Permissions**: Applies field-level and object-level permissions
@@ -73,19 +88,36 @@ const dataSource = new ObjectQLDataSource({
7388

7489
```typescript
7590
import type {
76-
ObjectTableSchema,
91+
ObjectTableSchema,
92+
ObjectGridSchema,
7793
ObjectFormSchema,
7894
ObjectViewSchema
7995
} from '@object-ui/plugin-object';
8096

81-
// Object Table
97+
// Object Table (Traditional CRUD)
8298
const tableSchema: ObjectTableSchema = {
8399
type: 'object-table',
84100
objectName: 'users',
85-
columns: ['name', 'email', 'role'],
101+
fields: ['name', 'email', 'role'],
102+
operations: {
103+
update: true,
104+
delete: true,
105+
export: true
106+
},
107+
showSearch: true,
86108
pageSize: 20
87109
};
88110

111+
// Object Grid (Inline Editing)
112+
const gridSchema: ObjectGridSchema = {
113+
type: 'object-grid',
114+
objectName: 'inventory',
115+
fields: ['sku', 'name', 'quantity', 'price'],
116+
editable: true,
117+
keyboardNavigation: true,
118+
frozenColumns: 1
119+
};
120+
89121
// Object Form
90122
const formSchema: ObjectFormSchema = {
91123
type: 'object-form',

‎content/docs/plugins/plugin-object/object-table.mdx‎

Lines changed: 131 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,187 @@
11
---
22
title: "ObjectTable"
3+
description: "Unified table component with ObjectQL integration, built on data-table foundation"
34
---
45

56
import { InteractiveDemo } from '@/app/components/InteractiveDemo';
7+
import { ComponentDemo } from '@/app/components/ComponentDemo';
68

7-
A specialized table component that automatically fetches and displays data from ObjectQL objects with sorting, filtering, and pagination.
9+
A specialized table component that automatically fetches and displays data from ObjectQL objects. Built on the data-table foundation, it combines ObjectQL schema integration with enterprise-grade table features.
10+
11+
## Overview
12+
13+
ObjectTable supports two modes:
14+
- **Table Mode** (`type: 'object-table'`): Traditional CRUD operations with auto-generated columns
15+
- **Grid Mode** (`type: 'object-grid'`): Spreadsheet-like inline editing with keyboard navigation
16+
17+
Both modes inherit all data-table features: sorting, filtering, pagination, row selection, CSV export, column resizing, and reordering.
818

919
## Interactive Demo
1020

1121
<InteractiveDemo
1222
schema={{
1323
type: "object-table",
1424
objectName: "users",
15-
columns: [
16-
{ header: "Name", accessorKey: "name" },
17-
{ header: "Email", accessorKey: "email" },
18-
{ header: "Role", accessorKey: "role" },
19-
{ header: "Status", accessorKey: "status" }
20-
],
25+
title: "User Management",
26+
fields: ["name", "email", "role", "status"],
2127
data: [
2228
{ id: 1, name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "Active" },
2329
{ id: 2, name: "Bob Smith", email: "bob@example.com", role: "User", status: "Active" },
24-
{ id: 3, name: "Carol White", email: "carol@example.com", role: "User", status: "Inactive" }
30+
{ id: 3, name: "Carol White", email: "carol@example.com", role: "Manager", status: "Inactive" },
31+
{ id: 4, name: "David Brown", email: "david@example.com", role: "User", status: "Active" }
2532
],
2633
pageSize: 10,
27-
searchable: true,
28-
selectable: true
34+
showSearch: true,
35+
selectable: "multiple",
36+
operations: {
37+
update: true,
38+
delete: true,
39+
export: true
40+
}
2941
}}
30-
title="ObjectTable Component"
31-
description="Auto-generated table with sorting, filtering, and pagination"
42+
title="ObjectTable - Table Mode"
43+
description="Auto-generated columns with type-aware rendering and CRUD operations"
3244
/>
3345

34-
## Basic Usage
46+
## Table Mode - Basic Usage
3547

3648
```tsx
3749
import { ObjectTable } from '@object-ui/plugin-object';
38-
import { ObjectQLDataSource } from '@object-ui/data-objectql';
39-
40-
const dataSource = new ObjectQLDataSource({
41-
baseUrl: 'https://api.example.com',
42-
token: 'your-auth-token'
43-
});
4450

4551
function UsersTable() {
4652
return (
4753
<ObjectTable
4854
schema={{
4955
type: 'object-table',
5056
objectName: 'users',
51-
columns: ['name', 'email', 'status', 'created_at']
57+
fields: ['name', 'email', 'status', 'created_at'],
58+
operations: {
59+
create: true,
60+
update: true,
61+
delete: true
62+
},
63+
showSearch: true,
64+
showPagination: true,
65+
pageSize: 25
5266
}}
5367
dataSource={dataSource}
68+
onEdit={(record) => console.log('Edit:', record)}
69+
onDelete={(record) => console.log('Delete:', record)}
5470
/>
5571
);
5672
}
5773
```
5874

59-
## JSON Schema
60-
61-
```json
62-
{
63-
"type": "object-table",
64-
"objectName": "users",
65-
"columns": ["name", "email", "status"],
66-
"filters": {
67-
"status": "active"
68-
},
69-
"pageSize": 20,
70-
"sortBy": "created_at",
71-
"sortOrder": "desc"
75+
## Grid Mode - Inline Editing
76+
77+
```tsx
78+
function InventoryGrid() {
79+
return (
80+
<ObjectTable
81+
schema={{
82+
type: 'object-grid',
83+
objectName: 'inventory',
84+
fields: ['sku', 'name', 'quantity', 'price', 'status'],
85+
editable: true,
86+
keyboardNavigation: true,
87+
frozenColumns: 2,
88+
resizableColumns: true
89+
}}
90+
dataSource={dataSource}
91+
onCellChange={(row, col, value) => {
92+
console.log(`Updated: Row ${row}, Column ${col}:`, value);
93+
}}
94+
/>
95+
);
7296
}
7397
```
7498

75-
## Properties
99+
## Features from data-table
100+
101+
All ObjectTable instances automatically include:
102+
103+
✅ **Multi-column sorting** - Click headers to sort (ascending/descending/none)
104+
✅ **Real-time search** - Search across all visible columns
105+
✅ **Pagination** - Navigate large datasets efficiently
106+
✅ **Row selection** - Single or multiple selection with callbacks
107+
✅ **CSV export** - Export filtered and sorted data
108+
✅ **Column resizing** - Drag column borders to resize
109+
✅ **Column reordering** - Drag column headers to reorder
110+
111+
## Field Type Rendering
112+
113+
ObjectTable automatically uses specialized renderers based on field types:
114+
115+
- **Text**: text, textarea, markdown, html
116+
- **Numeric**: number, currency, percent
117+
- **Boolean**: checkmarks with color coding
118+
- **Date/Time**: date, datetime, time with locale formatting
119+
- **Selection**: select, multi-select with colored badges
120+
- **Contact**: email (mailto links), phone (tel links), url (external links)
121+
- **Files**: file, image with thumbnails
122+
- **Relationships**: lookup, master-detail
123+
- **Computed**: formula, summary (read-only)
124+
- **User**: user, owner with avatars
125+
126+
## Schema Properties
127+
128+
### Common Properties
76129

77130
| Property | Type | Default | Description |
78131
|----------|------|---------|-------------|
132+
| `type` | `'object-table'` \| `'object-grid'` | Required | Component mode |
79133
| `objectName` | string | Required | Name of the ObjectQL object |
80-
| `columns` | string[] | All fields | Columns to display |
81-
| `filters` | object | `{}` | Default filters to apply |
134+
| `fields` | string[] | All fields | Fields to display as columns |
135+
| `data` | any[] | - | Inline data (optional) |
82136
| `pageSize` | number | `10` | Rows per page |
83-
| `sortBy` | string | `'id'` | Default sort field |
84-
| `sortOrder` | 'asc' \| 'desc' | `'asc'` | Default sort order |
85-
| `selectable` | boolean | `false` | Enable row selection |
86-
| `searchable` | boolean | `true` | Enable search bar |
87-
88-
## Features
89-
90-
- **Automatic Data Fetching**: Connects to ObjectQL backend and fetches data automatically
91-
- **Sorting**: Click column headers to sort data
92-
- **Filtering**: Apply filters to narrow down results
93-
- **Pagination**: Navigate through large datasets efficiently
94-
- **Search**: Full-text search across all columns
95-
- **Selection**: Select single or multiple rows
96-
- **Responsive**: Adapts to different screen sizes
97-
98-
## Example: User Management Dashboard
99-
100-
```json
101-
{
102-
"type": "page",
103-
"title": "User Management",
104-
"body": [
105-
{
106-
"type": "card",
107-
"title": "Users",
108-
"className": "p-6",
109-
"children": {
110-
"type": "object-table",
111-
"objectName": "users",
112-
"columns": ["name", "email", "role", "status", "last_login"],
113-
"searchable": true,
114-
"selectable": true,
115-
"actions": [
116-
{
117-
"type": "button",
118-
"label": "New User",
119-
"variant": "default",
120-
"action": {
121-
"type": "navigate",
122-
"path": "/users/new"
123-
}
124-
}
125-
]
126-
}
127-
}
128-
]
129-
}
130-
```
137+
| `selectable` | boolean \| `'single'` \| `'multiple'` | `false` | Row selection mode |
131138

132-
## Advanced Configuration
133-
134-
### Custom Column Display
135-
136-
You can customize how columns are displayed using the column configuration:
137-
138-
```json
139-
{
140-
"type": "object-table",
141-
"objectName": "products",
142-
"columns": [
143-
{
144-
"field": "name",
145-
"header": "Product Name",
146-
"width": 200
147-
},
148-
{
149-
"field": "price",
150-
"header": "Price",
151-
"format": "currency"
152-
},
153-
{
154-
"field": "status",
155-
"header": "Status",
156-
"badge": true
157-
}
158-
]
159-
}
160-
```
139+
### Table Mode Properties
161140

162-
### Pre-filtering Data
141+
| Property | Type | Description |
142+
|----------|------|-------------|
143+
| `operations` | object | Enable CRUD operations |
144+
| `showSearch` | boolean | Show search box |
145+
| `showPagination` | boolean | Show pagination |
146+
| `defaultSort` | object | Default sorting |
163147

164-
Apply default filters that users can modify:
148+
### Grid Mode Properties
165149

166-
```json
167-
{
168-
"type": "object-table",
169-
"objectName": "orders",
170-
"columns": ["order_number", "customer", "total", "status"],
171-
"filters": {
172-
"status": ["pending", "processing"],
173-
"created_at": {
174-
"gte": "2024-01-01"
175-
}
176-
}
177-
}
150+
| Property | Type | Description |
151+
|----------|------|-------------|
152+
| `editable` | boolean | Enable inline cell editing |
153+
| `keyboardNavigation` | boolean | Arrow keys, Tab, Enter navigation |
154+
| `frozenColumns` | number | Number of left-pinned columns |
155+
| `resizableColumns` | boolean | Enable column resizing |
156+
157+
## Keyboard Shortcuts (Grid Mode)
158+
159+
| Shortcut | Action |
160+
|----------|--------|
161+
| `↑` `↓` `←` `→` | Navigate between cells |
162+
| `Tab` | Move to next cell |
163+
| `Shift + Tab` | Move to previous cell |
164+
| `Enter` | Start editing selected cell |
165+
| `Escape` | Cancel editing |
166+
167+
## Migration from ObjectGrid
168+
169+
ObjectGrid has been merged into ObjectTable:
170+
171+
**Before:**
172+
```tsx
173+
import { ObjectGrid } from '@object-ui/plugin-object';
174+
<ObjectGrid schema={{ type: 'object-grid', ... }} />
175+
```
176+
177+
**After:**
178+
```tsx
179+
import { ObjectTable } from '@object-ui/plugin-object';
180+
<ObjectTable schema={{ type: 'object-grid', ... }} />
178181
```
179182

180183
## Related Components
181184

182185
- [ObjectForm](/docs/plugins/plugin-object/object-form) - Create and edit records
183186
- [ObjectView](/docs/plugins/plugin-object/object-view) - Complete CRUD interface
187+
- [Data Table](/docs/components/complex/data-table) - Base table component

0 commit comments

Comments
 (0)