@snowpact/react-tanstack-query-table 1.4.0 → 1.4.2
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 +19 -8
- package/dist/index.cjs +12 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1930 -1898
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Ultra-light, registry-based data table for React + TanStack Table + TanStack Query.
|
|
4
4
|
|
|
5
|
+
**[Live Demo](https://snowpact.github.io/react-tanstack-query-table/)**
|
|
6
|
+
|
|
5
7
|
## Features
|
|
6
8
|
|
|
7
|
-
- **Zero heavy dependencies**:
|
|
9
|
+
- **Zero heavy dependencies**: Only `@tanstack/react-query` and `@tanstack/react-table` as peer dependencies
|
|
8
10
|
- **Registry-based**: Inject your own i18n, Link component, confirmation dialogs
|
|
9
11
|
- **TypeScript**: Full type support with generics
|
|
10
12
|
- **Two modes**: Client-side and Server-side pagination/filtering/sorting
|
|
@@ -29,6 +31,7 @@ import '@snowpact/react-tanstack-query-table/styles.css';
|
|
|
29
31
|
### 3. Setup once
|
|
30
32
|
|
|
31
33
|
```tsx
|
|
34
|
+
// In your app entry point (main.tsx or App.tsx)
|
|
32
35
|
import { setupSnowTable } from '@snowpact/react-tanstack-query-table';
|
|
33
36
|
import { Link } from 'react-router-dom';
|
|
34
37
|
|
|
@@ -52,7 +55,7 @@ type User = { id: string; name: string; email: string; status: string };
|
|
|
52
55
|
const columns: SnowColumnConfig<User>[] = [
|
|
53
56
|
{ key: 'name', label: 'Name' },
|
|
54
57
|
{ key: 'email', label: 'Email' },
|
|
55
|
-
{ key: 'status', label: 'Status' },
|
|
58
|
+
{ key: 'status', label: 'Status', render: (item) => <Badge>{item.status}</Badge> },
|
|
56
59
|
];
|
|
57
60
|
|
|
58
61
|
<SnowClientDataTable
|
|
@@ -61,6 +64,12 @@ const columns: SnowColumnConfig<User>[] = [
|
|
|
61
64
|
columnConfig={columns}
|
|
62
65
|
enableGlobalSearch
|
|
63
66
|
enablePagination
|
|
67
|
+
enableSorting
|
|
68
|
+
enableColumnConfiguration
|
|
69
|
+
defaultPageSize={20}
|
|
70
|
+
defaultSortBy="name"
|
|
71
|
+
defaultSortOrder="asc"
|
|
72
|
+
persistState
|
|
64
73
|
/>
|
|
65
74
|
```
|
|
66
75
|
|
|
@@ -114,12 +123,14 @@ setupSnowTable({
|
|
|
114
123
|
});
|
|
115
124
|
```
|
|
116
125
|
|
|
117
|
-
|
|
118
|
-
- `
|
|
119
|
-
-
|
|
120
|
-
- `dataTable.
|
|
121
|
-
- `dataTable.
|
|
122
|
-
- `dataTable.
|
|
126
|
+
The `t` function is automatically called with:
|
|
127
|
+
- All column `key` values from your `columnConfig` (e.g., `t('name')`, `t('email')`, `t('status')`)
|
|
128
|
+
- Internal UI keys:
|
|
129
|
+
- `dataTable.search` - Search placeholder
|
|
130
|
+
- `dataTable.elements` - "elements" label
|
|
131
|
+
- `dataTable.searchEmpty` - Empty state text
|
|
132
|
+
- `dataTable.resetFilters` - Reset button tooltip
|
|
133
|
+
- `dataTable.columns` - Columns button label
|
|
123
134
|
|
|
124
135
|
### Setup with custom confirm dialog
|
|
125
136
|
|