@snowpact/react-tanstack-query-table 1.1.1 → 1.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 +20 -20
- package/dist/index.cjs +20 -20
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +9 -8
- package/dist/index.js +5605 -2849
- package/dist/index.js.map +1 -1
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -70,14 +70,14 @@ setupSnowTable({
|
|
|
70
70
|
### 2. Use a Client Table
|
|
71
71
|
|
|
72
72
|
```tsx
|
|
73
|
-
import {
|
|
73
|
+
import { SnowClientDataTable, SnowColumnConfig } from '@snowpact/react-tanstack-query-table';
|
|
74
74
|
import { Edit, Trash } from 'lucide-react';
|
|
75
75
|
|
|
76
76
|
type User = { id: string; name: string; email: string };
|
|
77
77
|
|
|
78
78
|
const columns: SnowColumnConfig<User>[] = [{ key: 'name' }, { key: 'email' }];
|
|
79
79
|
|
|
80
|
-
<
|
|
80
|
+
<SnowClientDataTable
|
|
81
81
|
queryKey={['users']}
|
|
82
82
|
fetchAllItemsEndpoint={() => fetchUsers()}
|
|
83
83
|
columnConfig={columns}
|
|
@@ -94,27 +94,27 @@ const columns: SnowColumnConfig<User>[] = [{ key: 'name' }, { key: 'email' }];
|
|
|
94
94
|
|
|
95
95
|
| Mode | Component | Use case | Data handling |
|
|
96
96
|
| ---------- | ----------------- | ------------- | ----------------------------------------------- |
|
|
97
|
-
| **Client** | `
|
|
98
|
-
| **Server** | `
|
|
97
|
+
| **Client** | `SnowClientDataTable` | < 5,000 items | All data loaded, filtered/sorted locally |
|
|
98
|
+
| **Server** | `SnowServerDataTable` | > 5,000 items | Paginated API, server handles filtering/sorting |
|
|
99
99
|
|
|
100
|
-
###
|
|
100
|
+
### SnowClientDataTable
|
|
101
101
|
|
|
102
102
|
Best for small to medium datasets. Fetches all data once via React Query, then handles pagination, search, and sorting entirely in the browser.
|
|
103
103
|
|
|
104
104
|
```tsx
|
|
105
|
-
<
|
|
105
|
+
<SnowClientDataTable
|
|
106
106
|
queryKey={['users']}
|
|
107
107
|
fetchAllItemsEndpoint={() => api.getUsers()} // Returns User[]
|
|
108
108
|
columnConfig={columns}
|
|
109
109
|
/>
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
-
###
|
|
112
|
+
### SnowServerDataTable
|
|
113
113
|
|
|
114
114
|
Best for large datasets. The server handles pagination, search, filtering, and sorting. Returns paginated results with a total count.
|
|
115
115
|
|
|
116
116
|
```tsx
|
|
117
|
-
import {
|
|
117
|
+
import { SnowServerDataTable, ServerFetchParams } from '@snowpact/react-tanstack-query-table';
|
|
118
118
|
|
|
119
119
|
const fetchUsers = async (params: ServerFetchParams) => {
|
|
120
120
|
// params: { limit, offset, search?, sortBy?, sortOrder?, filters?, prefilter? }
|
|
@@ -125,7 +125,7 @@ const fetchUsers = async (params: ServerFetchParams) => {
|
|
|
125
125
|
};
|
|
126
126
|
};
|
|
127
127
|
|
|
128
|
-
<
|
|
128
|
+
<SnowServerDataTable queryKey={['users']} fetchServerEndpoint={fetchUsers} columnConfig={columns} />;
|
|
129
129
|
```
|
|
130
130
|
|
|
131
131
|
## Actions
|
|
@@ -252,7 +252,7 @@ actions={[
|
|
|
252
252
|
Enable fuzzy search across all columns:
|
|
253
253
|
|
|
254
254
|
```tsx
|
|
255
|
-
<
|
|
255
|
+
<SnowClientDataTable enableGlobalSearch texts={{ searchPlaceholder: 'Search users...' }} />
|
|
256
256
|
```
|
|
257
257
|
|
|
258
258
|
For custom search values (computed columns):
|
|
@@ -273,7 +273,7 @@ const columns: SnowColumnConfig<User>[] = [
|
|
|
273
273
|
Multi-select dropdown filters:
|
|
274
274
|
|
|
275
275
|
```tsx
|
|
276
|
-
<
|
|
276
|
+
<SnowClientDataTable
|
|
277
277
|
filters={[
|
|
278
278
|
{
|
|
279
279
|
key: 'status',
|
|
@@ -300,7 +300,7 @@ Multi-select dropdown filters:
|
|
|
300
300
|
Quick segmentation via tabs:
|
|
301
301
|
|
|
302
302
|
```tsx
|
|
303
|
-
<
|
|
303
|
+
<SnowClientDataTable
|
|
304
304
|
prefilters={[
|
|
305
305
|
{ id: 'all', label: 'All' },
|
|
306
306
|
{ id: 'active', label: 'Active' },
|
|
@@ -322,7 +322,7 @@ For server mode, the `prefilter` value is sent to your endpoint.
|
|
|
322
322
|
Users can show/hide columns via a settings button. Configuration is saved in cookies.
|
|
323
323
|
|
|
324
324
|
```tsx
|
|
325
|
-
<
|
|
325
|
+
<SnowClientDataTable
|
|
326
326
|
enableColumnConfiguration
|
|
327
327
|
columnConfig={[
|
|
328
328
|
{ key: 'name' }, // Always visible
|
|
@@ -337,7 +337,7 @@ Users can show/hide columns via a settings button. Configuration is saved in coo
|
|
|
337
337
|
Persist table state (pagination, search, filters, sorting) in URL query params:
|
|
338
338
|
|
|
339
339
|
```tsx
|
|
340
|
-
<
|
|
340
|
+
<SnowClientDataTable
|
|
341
341
|
persistState // State saved in URL
|
|
342
342
|
/>
|
|
343
343
|
```
|
|
@@ -368,13 +368,13 @@ URL params used:
|
|
|
368
368
|
### Sorting
|
|
369
369
|
|
|
370
370
|
```tsx
|
|
371
|
-
<
|
|
371
|
+
<SnowClientDataTable enableSorting defaultSortBy="createdAt" defaultSortOrder="desc" />
|
|
372
372
|
```
|
|
373
373
|
|
|
374
374
|
### Pagination
|
|
375
375
|
|
|
376
376
|
```tsx
|
|
377
|
-
<
|
|
377
|
+
<SnowClientDataTable
|
|
378
378
|
enablePagination
|
|
379
379
|
defaultPageSize={25}
|
|
380
380
|
displayTotalNumber // Show "X elements"
|
|
@@ -385,7 +385,7 @@ URL params used:
|
|
|
385
385
|
### Row Click
|
|
386
386
|
|
|
387
387
|
```tsx
|
|
388
|
-
<
|
|
388
|
+
<SnowClientDataTable
|
|
389
389
|
onRowClick={item => navigate(`/users/${item.id}`)}
|
|
390
390
|
activeRowId={selectedUserId} // Highlight active row
|
|
391
391
|
/>
|
|
@@ -426,7 +426,7 @@ setupSnowTable({
|
|
|
426
426
|
|
|
427
427
|
## API Reference
|
|
428
428
|
|
|
429
|
-
###
|
|
429
|
+
### SnowClientDataTable Props
|
|
430
430
|
|
|
431
431
|
| Prop | Type | Default | Description |
|
|
432
432
|
| --------------------------- | ----------------------- | -------- | ------------------------------- |
|
|
@@ -447,9 +447,9 @@ setupSnowTable({
|
|
|
447
447
|
| `defaultSortBy` | `string` | - | Initial sort column |
|
|
448
448
|
| `defaultSortOrder` | `'asc' \| 'desc'` | `'asc'` | Initial sort direction |
|
|
449
449
|
|
|
450
|
-
###
|
|
450
|
+
### SnowServerDataTable Props
|
|
451
451
|
|
|
452
|
-
Same as `
|
|
452
|
+
Same as `SnowClientDataTable`, except:
|
|
453
453
|
|
|
454
454
|
| Prop | Type | Description |
|
|
455
455
|
| --------------------- | -------------------------------------------------------------------- | ------------------------ |
|