@snowpact/react-tanstack-query-table 1.5.1 → 1.5.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 +18 -22
- package/dist/index.cjs +12 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +26 -17
- package/dist/index.js +1423 -1403
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -197,7 +197,7 @@ const fetchUsers = async (params: ServerFetchParams) => {
|
|
|
197
197
|
|
|
198
198
|
## Actions
|
|
199
199
|
|
|
200
|
-
Actions appear as buttons in each row
|
|
200
|
+
Actions appear as buttons in each row:
|
|
201
201
|
|
|
202
202
|
### Click Action
|
|
203
203
|
|
|
@@ -222,47 +222,43 @@ Actions appear as buttons in each row. You have full control over what happens w
|
|
|
222
222
|
}
|
|
223
223
|
```
|
|
224
224
|
|
|
225
|
-
###
|
|
225
|
+
### Endpoint Action
|
|
226
226
|
|
|
227
|
-
|
|
227
|
+
For API calls with built-in mutation handling:
|
|
228
228
|
|
|
229
229
|
```tsx
|
|
230
230
|
{
|
|
231
|
-
type: '
|
|
231
|
+
type: 'endpoint',
|
|
232
232
|
icon: TrashIcon,
|
|
233
233
|
label: 'Delete',
|
|
234
234
|
variant: 'danger',
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
toast.success('User deleted');
|
|
240
|
-
queryClient.invalidateQueries(['users']);
|
|
241
|
-
}
|
|
235
|
+
endpoint: (item) => api.deleteUser(item.id),
|
|
236
|
+
onSuccess: () => {
|
|
237
|
+
toast.success('User deleted');
|
|
238
|
+
queryClient.invalidateQueries(['users']);
|
|
242
239
|
},
|
|
240
|
+
onError: (error) => toast.error(error.message),
|
|
243
241
|
}
|
|
244
242
|
```
|
|
245
243
|
|
|
246
|
-
###
|
|
244
|
+
### Endpoint with Confirmation
|
|
245
|
+
|
|
246
|
+
Use `withConfirm` for optional confirmation before the endpoint is called:
|
|
247
247
|
|
|
248
248
|
```tsx
|
|
249
249
|
{
|
|
250
|
-
type: '
|
|
250
|
+
type: 'endpoint',
|
|
251
251
|
icon: TrashIcon,
|
|
252
252
|
label: 'Delete',
|
|
253
253
|
variant: 'danger',
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
toast.success('User deleted');
|
|
258
|
-
queryClient.invalidateQueries(['users']);
|
|
259
|
-
} catch (error) {
|
|
260
|
-
toast.error('Failed to delete user');
|
|
261
|
-
}
|
|
262
|
-
},
|
|
254
|
+
endpoint: (item) => api.deleteUser(item.id),
|
|
255
|
+
withConfirm: (item) => myConfirmDialog(`Delete ${item.name}?`),
|
|
256
|
+
onSuccess: () => queryClient.invalidateQueries(['users']),
|
|
263
257
|
}
|
|
264
258
|
```
|
|
265
259
|
|
|
260
|
+
If `withConfirm` returns `false`, the endpoint is not called.
|
|
261
|
+
|
|
266
262
|
### Dynamic Actions
|
|
267
263
|
|
|
268
264
|
```tsx
|