@forgedevstack/grid-table 1.0.0
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/CHANGELOG.md +91 -0
- package/README.md +253 -0
- package/dist/index.d.mts +999 -0
- package/dist/index.d.ts +999 -0
- package/dist/index.js +2806 -0
- package/dist/index.mjs +2754 -0
- package/package.json +85 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to grid-table will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [0.1.0] - 2026-01-15
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- Initial release of grid-table
|
|
13
|
+
- **GridTable** - Main table component with all features
|
|
14
|
+
- **TableProvider** - Context provider for state management
|
|
15
|
+
- **Theming** - Dark/Light theme support with customizable colors
|
|
16
|
+
- **Filtering** - Column-level and global filtering
|
|
17
|
+
- Multiple filter operators (equals, contains, startsWith, etc.)
|
|
18
|
+
- Custom filter functions
|
|
19
|
+
- Filter panel for each column
|
|
20
|
+
- Mobile drawer for filters
|
|
21
|
+
- **Sorting** - Single and multi-column sorting
|
|
22
|
+
- Custom sort functions
|
|
23
|
+
- Sort direction indicators
|
|
24
|
+
- Clear sort functionality
|
|
25
|
+
- **Drag & Drop** - Column reordering via drag and drop
|
|
26
|
+
- Visual feedback during drag
|
|
27
|
+
- Threshold to prevent accidental reorder
|
|
28
|
+
- **Column Resize** - Adjust column widths
|
|
29
|
+
- Min/max width constraints
|
|
30
|
+
- Resize handle on header cells
|
|
31
|
+
- **Pagination** - Built-in pagination
|
|
32
|
+
- Customizable page sizes
|
|
33
|
+
- First/Last page buttons
|
|
34
|
+
- Page number navigation
|
|
35
|
+
- **Row Selection** - Single and multi-select
|
|
36
|
+
- Select all/deselect all
|
|
37
|
+
- Indeterminate checkbox state
|
|
38
|
+
- **Row Expansion** - Expandable rows
|
|
39
|
+
- Custom expansion content
|
|
40
|
+
- Expand/collapse all
|
|
41
|
+
- **Responsive Design** - Mobile-first approach
|
|
42
|
+
- Configurable mobile breakpoint
|
|
43
|
+
- Mobile card layout with labels
|
|
44
|
+
- Mobile drawer for filters, sorting, columns
|
|
45
|
+
- **Skeleton Loading** - Animated loading placeholder
|
|
46
|
+
- Configurable rows and columns
|
|
47
|
+
- Matches table structure
|
|
48
|
+
- **Empty State** - Customizable empty state
|
|
49
|
+
- Custom icon, title, description
|
|
50
|
+
- Action button support
|
|
51
|
+
- **Translations** - Full i18n support
|
|
52
|
+
- All UI text is translatable
|
|
53
|
+
- Default English translations
|
|
54
|
+
- **Hooks** - Access state and actions programmatically
|
|
55
|
+
- `useTable` - Main hook with all features
|
|
56
|
+
- `useSort` - Sorting state and actions
|
|
57
|
+
- `useFilter` - Filter state and actions
|
|
58
|
+
- `usePagination` - Pagination state and actions
|
|
59
|
+
- `useDragDrop` - Drag and drop state and handlers
|
|
60
|
+
- `useBreakpoint` - Responsive breakpoint utilities
|
|
61
|
+
- **TypeScript** - Full type definitions
|
|
62
|
+
- Generic type support for row data
|
|
63
|
+
- Strict type checking
|
|
64
|
+
- **Accessibility** - ARIA attributes
|
|
65
|
+
- Role attributes
|
|
66
|
+
- Keyboard navigation (partial)
|
|
67
|
+
|
|
68
|
+
### Technical Details
|
|
69
|
+
|
|
70
|
+
- React 16.8+ compatible (uses hooks)
|
|
71
|
+
- No external dependencies (except React)
|
|
72
|
+
- Tailwind CSS for styling (peer dependency)
|
|
73
|
+
- ESM and CommonJS builds
|
|
74
|
+
- Tree-shakeable exports
|
|
75
|
+
|
|
76
|
+
## [Unreleased]
|
|
77
|
+
|
|
78
|
+
### Planned
|
|
79
|
+
|
|
80
|
+
- Virtualization for large datasets
|
|
81
|
+
- Column pinning (left/right)
|
|
82
|
+
- Column groups
|
|
83
|
+
- Export to CSV/Excel
|
|
84
|
+
- Keyboard navigation (full)
|
|
85
|
+
- Touch gestures for mobile
|
|
86
|
+
- Row reordering via drag and drop
|
|
87
|
+
- Infinite scroll pagination
|
|
88
|
+
- Server-side data support
|
|
89
|
+
- Column search
|
|
90
|
+
- Saved views/presets
|
|
91
|
+
|
package/README.md
ADDED
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
# grid-table
|
|
2
|
+
|
|
3
|
+
A powerful, headless grid table component for React with Tailwind CSS styling, drag-and-drop columns, filtering, sorting, and responsive mobile support.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Tailwind CSS + DIVs**: No `<table>` elements, fully customizable with Tailwind
|
|
8
|
+
- **React 16.8+**: Works with all React versions that support hooks
|
|
9
|
+
- **Dark/Light Theme**: Built-in theme support with customizable colors
|
|
10
|
+
- **Filtering**: Column-level and global filtering with multiple operators
|
|
11
|
+
- **Sorting**: Single and multi-column sorting with custom sort functions
|
|
12
|
+
- **Drag & Drop**: Reorder columns by dragging
|
|
13
|
+
- **Column Resize**: Adjust column widths by dragging
|
|
14
|
+
- **Pagination**: Built-in pagination with customizable page sizes
|
|
15
|
+
- **Row Selection**: Single and multi-select support
|
|
16
|
+
- **Row Expansion**: Expandable rows with custom content
|
|
17
|
+
- **Responsive**: Mobile-first design with drawer for filters/sorting
|
|
18
|
+
- **Skeleton Loading**: Beautiful loading states
|
|
19
|
+
- **Empty States**: Customizable empty state component
|
|
20
|
+
- **Context API**: No prop drilling, access state from anywhere
|
|
21
|
+
- **TypeScript**: Full type safety
|
|
22
|
+
- **Accessible**: ARIA attributes and keyboard navigation
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install grid-table
|
|
28
|
+
# or
|
|
29
|
+
pnpm add grid-table
|
|
30
|
+
# or
|
|
31
|
+
yarn add grid-table
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Quick Start
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { GridTable, ColumnDefinition } from 'grid-table';
|
|
38
|
+
|
|
39
|
+
interface User {
|
|
40
|
+
id: number;
|
|
41
|
+
name: string;
|
|
42
|
+
email: string;
|
|
43
|
+
role: string;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const columns: ColumnDefinition<User>[] = [
|
|
47
|
+
{
|
|
48
|
+
id: 'name',
|
|
49
|
+
accessor: 'name',
|
|
50
|
+
header: 'Name',
|
|
51
|
+
sortable: true,
|
|
52
|
+
filterable: true,
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
id: 'email',
|
|
56
|
+
accessor: 'email',
|
|
57
|
+
header: 'Email',
|
|
58
|
+
sortable: true,
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
id: 'role',
|
|
62
|
+
accessor: 'role',
|
|
63
|
+
header: 'Role',
|
|
64
|
+
filterType: 'select',
|
|
65
|
+
filterOptions: [
|
|
66
|
+
{ value: 'admin', label: 'Admin' },
|
|
67
|
+
{ value: 'user', label: 'User' },
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
const data: User[] = [
|
|
73
|
+
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'admin' },
|
|
74
|
+
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'user' },
|
|
75
|
+
];
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
return (
|
|
79
|
+
<GridTable
|
|
80
|
+
data={data}
|
|
81
|
+
columns={columns}
|
|
82
|
+
enableRowSelection
|
|
83
|
+
showPagination
|
|
84
|
+
showFilter
|
|
85
|
+
/>
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Theming
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import { GridTable, Theme } from 'grid-table';
|
|
94
|
+
|
|
95
|
+
const customTheme: Partial<Theme> = {
|
|
96
|
+
mode: 'dark',
|
|
97
|
+
colors: {
|
|
98
|
+
background: {
|
|
99
|
+
primary: '#1a1a2e',
|
|
100
|
+
secondary: '#16213e',
|
|
101
|
+
tertiary: '#0f3460',
|
|
102
|
+
hover: '#1a1a2e',
|
|
103
|
+
},
|
|
104
|
+
text: {
|
|
105
|
+
primary: '#eaeaea',
|
|
106
|
+
secondary: '#a0a0a0',
|
|
107
|
+
muted: '#707070',
|
|
108
|
+
},
|
|
109
|
+
accent: {
|
|
110
|
+
primary: '#e94560',
|
|
111
|
+
success: '#4ade80',
|
|
112
|
+
warning: '#fbbf24',
|
|
113
|
+
error: '#f87171',
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
<GridTable data={data} columns={columns} theme={customTheme} />;
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Translations
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
import { GridTable, Translations } from 'grid-table';
|
|
125
|
+
|
|
126
|
+
const customTranslations: Partial<Translations> = {
|
|
127
|
+
empty: 'No records found',
|
|
128
|
+
loading: 'Fetching data...',
|
|
129
|
+
search: 'Search users...',
|
|
130
|
+
rowsPerPage: 'Show',
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
<GridTable data={data} columns={columns} translations={customTranslations} />;
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## Responsive Breakpoints
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
<GridTable
|
|
140
|
+
data={data}
|
|
141
|
+
columns={columns}
|
|
142
|
+
mobileBreakpoint="tablet" // 'mobile' | 'tablet' | 'desktop'
|
|
143
|
+
showMobileLabels={true} // Show column labels on mobile cards
|
|
144
|
+
dimensions={{
|
|
145
|
+
width: { mobile: '100%', tablet: '100%', desktop: 800 },
|
|
146
|
+
height: { mobile: 400, tablet: 500, desktop: 600 },
|
|
147
|
+
}}
|
|
148
|
+
/>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Using Hooks
|
|
152
|
+
|
|
153
|
+
Access table state and actions from any child component:
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import { TableProvider, useTable, ColumnDefinition } from 'grid-table';
|
|
157
|
+
|
|
158
|
+
function TableControls() {
|
|
159
|
+
const { filter, sort, pagination, selection } = useTable();
|
|
160
|
+
|
|
161
|
+
return (
|
|
162
|
+
<div>
|
|
163
|
+
<button onClick={() => filter.clearFilters()}>Clear Filters</button>
|
|
164
|
+
<button onClick={() => sort.clearSorting()}>Clear Sort</button>
|
|
165
|
+
<span>{selection.selectedIds.size} rows selected</span>
|
|
166
|
+
</div>
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
function App() {
|
|
171
|
+
return (
|
|
172
|
+
<TableProvider data={data} columns={columns}>
|
|
173
|
+
<TableControls />
|
|
174
|
+
<GridTableContent {...props} />
|
|
175
|
+
</TableProvider>
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
## Custom Cell Rendering
|
|
181
|
+
|
|
182
|
+
```tsx
|
|
183
|
+
const columns: ColumnDefinition<User>[] = [
|
|
184
|
+
{
|
|
185
|
+
id: 'status',
|
|
186
|
+
accessor: 'status',
|
|
187
|
+
header: 'Status',
|
|
188
|
+
render: (value, row, index) => (
|
|
189
|
+
<span className={value === 'active' ? 'text-green-500' : 'text-red-500'}>
|
|
190
|
+
{value}
|
|
191
|
+
</span>
|
|
192
|
+
),
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
id: 'actions',
|
|
196
|
+
accessor: (row) => row.id,
|
|
197
|
+
header: 'Actions',
|
|
198
|
+
sortable: false,
|
|
199
|
+
filterable: false,
|
|
200
|
+
render: (value, row) => (
|
|
201
|
+
<button onClick={() => handleEdit(row)}>Edit</button>
|
|
202
|
+
),
|
|
203
|
+
},
|
|
204
|
+
];
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## API Reference
|
|
208
|
+
|
|
209
|
+
### GridTable Props
|
|
210
|
+
|
|
211
|
+
| Prop | Type | Default | Description |
|
|
212
|
+
|------|------|---------|-------------|
|
|
213
|
+
| `data` | `T[]` | Required | Array of data objects |
|
|
214
|
+
| `columns` | `ColumnDefinition<T>[]` | Required | Column definitions |
|
|
215
|
+
| `loading` | `boolean` | `false` | Show loading skeleton |
|
|
216
|
+
| `error` | `Error \| string` | `null` | Error to display |
|
|
217
|
+
| `theme` | `Partial<Theme>` | Dark theme | Custom theme colors |
|
|
218
|
+
| `translations` | `Partial<Translations>` | English | Custom text labels |
|
|
219
|
+
| `mobileBreakpoint` | `Breakpoint` | `'tablet'` | When to switch to mobile view |
|
|
220
|
+
| `enableDragDrop` | `boolean` | `true` | Allow column reordering |
|
|
221
|
+
| `enableColumnResize` | `boolean` | `true` | Allow column resizing |
|
|
222
|
+
| `enableRowSelection` | `boolean` | `false` | Enable row selection |
|
|
223
|
+
| `enableMultiSelect` | `boolean` | `false` | Allow multi-row selection |
|
|
224
|
+
| `showPagination` | `boolean` | `true` | Show pagination controls |
|
|
225
|
+
| `showFilter` | `boolean` | `true` | Show filter controls |
|
|
226
|
+
| `showGlobalFilter` | `boolean` | `true` | Show global search |
|
|
227
|
+
| `stickyHeader` | `boolean` | `true` | Sticky header on scroll |
|
|
228
|
+
|
|
229
|
+
### ColumnDefinition
|
|
230
|
+
|
|
231
|
+
| Property | Type | Description |
|
|
232
|
+
|----------|------|-------------|
|
|
233
|
+
| `id` | `string` | Unique column identifier |
|
|
234
|
+
| `accessor` | `string \| (row) => any` | Data accessor |
|
|
235
|
+
| `header` | `ReactNode \| () => ReactNode` | Header content |
|
|
236
|
+
| `width` | `ResponsiveValue<number \| string>` | Column width |
|
|
237
|
+
| `align` | `'left' \| 'center' \| 'right'` | Text alignment |
|
|
238
|
+
| `sortable` | `boolean` | Enable sorting |
|
|
239
|
+
| `filterable` | `boolean` | Enable filtering |
|
|
240
|
+
| `draggable` | `boolean` | Allow drag to reorder |
|
|
241
|
+
| `resizable` | `boolean` | Allow resize |
|
|
242
|
+
| `hidden` | `boolean` | Initially hidden |
|
|
243
|
+
| `hiddenOnMobile` | `boolean` | Hide on mobile |
|
|
244
|
+
| `render` | `(value, row, index) => ReactNode` | Custom cell renderer |
|
|
245
|
+
| `filterType` | `'text' \| 'number' \| 'select' \| ...` | Filter input type |
|
|
246
|
+
| `filterOptions` | `FilterOption[]` | Options for select filter |
|
|
247
|
+
| `sortFn` | `(a, b, dir) => number` | Custom sort function |
|
|
248
|
+
| `filterFn` | `(value, filter, op) => boolean` | Custom filter function |
|
|
249
|
+
|
|
250
|
+
## License
|
|
251
|
+
|
|
252
|
+
MIT
|
|
253
|
+
|