@snowpact/react-tanstack-query-table 1.5.0 → 1.5.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 CHANGED
@@ -7,7 +7,7 @@ Ultra-light, registry-based data table for React + TanStack Table + TanStack Que
7
7
  ## Features
8
8
 
9
9
  - **Zero heavy dependencies**: Only `@tanstack/react-query` and `@tanstack/react-table` as peer dependencies
10
- - **Registry-based**: Inject your own i18n, Link component, confirmation dialogs
10
+ - **Registry-based**: Inject your own i18n and Link component
11
11
  - **TypeScript**: Full type support with generics
12
12
  - **Two modes**: Client-side and Server-side pagination/filtering/sorting
13
13
  - **Customizable**: Override styles via CSS variables or registry
@@ -41,7 +41,6 @@ const t = (key: string) => translations[key] || key;
41
41
  setupSnowTable({
42
42
  t,
43
43
  LinkComponent: Link,
44
- confirm: ({ title }) => window.confirm(title),
45
44
  });
46
45
  ```
47
46
 
@@ -116,10 +115,6 @@ const { t } = i18n;
116
115
  setupSnowTable({
117
116
  t: (key) => t(key),
118
117
  LinkComponent: Link,
119
- confirm: ({ title, content }) => {
120
- const message = typeof content === 'string' ? `${title}\n\n${content}` : title;
121
- return window.confirm(message);
122
- },
123
118
  });
124
119
  ```
125
120
 
@@ -132,28 +127,6 @@ The `t` function is automatically called with:
132
127
  - `dataTable.resetFilters` - Reset button tooltip
133
128
  - `dataTable.columns` - Columns button label
134
129
 
135
- ### Setup with custom confirm dialog
136
-
137
- ```tsx
138
- import { useConfirmDialog } from './your-confirm-hook';
139
-
140
- // If you have a hook-based confirm dialog
141
- const confirmDialog = useConfirmDialog();
142
-
143
- setupSnowTable({
144
- t,
145
- LinkComponent: Link,
146
- confirm: async ({ title, content, confirmText, cancelText }) => {
147
- return confirmDialog.open({
148
- title,
149
- description: content,
150
- confirmLabel: confirmText,
151
- cancelLabel: cancelText,
152
- });
153
- },
154
- });
155
- ```
156
-
157
130
  ### Override component styles (rare)
158
131
 
159
132
  For deep customization, override internal Tailwind classes:
@@ -162,7 +135,6 @@ For deep customization, override internal Tailwind classes:
162
135
  setupSnowTable({
163
136
  t,
164
137
  LinkComponent: Link,
165
- confirm: ({ title }) => window.confirm(title),
166
138
  styles: {
167
139
  button: {
168
140
  visual: 'rounded-full bg-primary text-primary-foreground',
@@ -252,6 +224,8 @@ Actions appear as buttons in each row:
252
224
 
253
225
  ### Endpoint Action
254
226
 
227
+ For API calls with built-in mutation handling:
228
+
255
229
  ```tsx
256
230
  {
257
231
  type: 'endpoint',
@@ -259,14 +233,32 @@ Actions appear as buttons in each row:
259
233
  label: 'Delete',
260
234
  variant: 'danger',
261
235
  endpoint: (item) => api.deleteUser(item.id),
262
- onSuccess: () => queryClient.invalidateQueries(['users']),
263
- confirm: {
264
- title: 'Delete user?',
265
- content: 'This action cannot be undone.',
236
+ onSuccess: () => {
237
+ toast.success('User deleted');
238
+ queryClient.invalidateQueries(['users']);
266
239
  },
240
+ onError: (error) => toast.error(error.message),
267
241
  }
268
242
  ```
269
243
 
244
+ ### Endpoint with Confirmation
245
+
246
+ Use `withConfirm` for optional confirmation before the endpoint is called:
247
+
248
+ ```tsx
249
+ {
250
+ type: 'endpoint',
251
+ icon: TrashIcon,
252
+ label: 'Delete',
253
+ variant: 'danger',
254
+ endpoint: (item) => api.deleteUser(item.id),
255
+ withConfirm: (item) => myConfirmDialog(`Delete ${item.name}?`),
256
+ onSuccess: () => queryClient.invalidateQueries(['users']),
257
+ }
258
+ ```
259
+
260
+ If `withConfirm` returns `false`, the endpoint is not called.
261
+
270
262
  ### Dynamic Actions
271
263
 
272
264
  ```tsx