@reactorui/datagrid 1.2.1 → 1.2.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 +172 -33
- package/dist/components/DataGrid/DataGrid.d.ts +1 -1
- package/dist/components/DataGrid/DataGrid.d.ts.map +1 -1
- package/dist/components/DataGrid/DataGrid.js +6 -3
- package/dist/components/Filter/FilterControls.js +1 -1
- package/dist/hooks/useDataGrid.d.ts +8 -2
- package/dist/hooks/useDataGrid.d.ts.map +1 -1
- package/dist/hooks/useDataGrid.js +24 -24
- package/dist/types/index.d.ts +18 -3
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,6 +29,7 @@ A high-performance, feature-rich React data grid component with TypeScript suppo
|
|
|
29
29
|
- 🎯 **Rich Event System** - 20+ events covering every user interaction
|
|
30
30
|
- 📊 **Granular Loading States** - Action-specific loading indicators
|
|
31
31
|
- 📜 **Scrollable Layout** - Fixed headers with `maxHeight` and `stickyHeader` props
|
|
32
|
+
- 📥 **Load More Support** - Incremental data loading with continuation tokens
|
|
32
33
|
- ⚡ **Zero Dependencies** - Only React as peer dependency
|
|
33
34
|
|
|
34
35
|
## 📦 Installation
|
|
@@ -276,10 +277,11 @@ function ServerSideExample() {
|
|
|
276
277
|
const [loadingState, setLoadingState] = useState<LoadingState>({});
|
|
277
278
|
const [totalRecords, setTotalRecords] = useState(0);
|
|
278
279
|
const [currentPage, setCurrentPage] = useState(1);
|
|
280
|
+
const [pageSize, setPageSize] = useState(25);
|
|
279
281
|
const [error, setError] = useState<string | null>(null);
|
|
280
282
|
|
|
281
283
|
// Fetch data from your API
|
|
282
|
-
const fetchData = async (page: number, filters: ActiveFilter[], search: string) => {
|
|
284
|
+
const fetchData = async (page: number, size: number, filters: ActiveFilter[], search: string) => {
|
|
283
285
|
setLoadingState({ data: true });
|
|
284
286
|
setError(null);
|
|
285
287
|
|
|
@@ -287,7 +289,7 @@ function ServerSideExample() {
|
|
|
287
289
|
const response = await fetch('/api/users', {
|
|
288
290
|
method: 'POST',
|
|
289
291
|
headers: { 'Content-Type': 'application/json' },
|
|
290
|
-
body: JSON.stringify({ page, pageSize:
|
|
292
|
+
body: JSON.stringify({ page, pageSize: size, filters, search }),
|
|
291
293
|
});
|
|
292
294
|
|
|
293
295
|
const result = await response.json();
|
|
@@ -301,36 +303,44 @@ function ServerSideExample() {
|
|
|
301
303
|
};
|
|
302
304
|
|
|
303
305
|
useEffect(() => {
|
|
304
|
-
fetchData(1, [], '');
|
|
306
|
+
fetchData(1, pageSize, [], '');
|
|
305
307
|
}, []);
|
|
306
308
|
|
|
307
309
|
return (
|
|
308
310
|
<DataGrid
|
|
309
311
|
data={data}
|
|
310
|
-
|
|
312
|
+
loadingState={loadingState}
|
|
311
313
|
totalRecords={totalRecords}
|
|
312
314
|
currentPage={currentPage}
|
|
313
315
|
error={error}
|
|
314
|
-
pageSize={
|
|
316
|
+
pageSize={pageSize}
|
|
317
|
+
paginationMode="server"
|
|
318
|
+
filterMode="server"
|
|
319
|
+
// Pagination callbacks - YOU handle the server call
|
|
320
|
+
onPageChange={(page) => {
|
|
321
|
+
setCurrentPage(page);
|
|
322
|
+
fetchData(page, pageSize, [], '');
|
|
323
|
+
}}
|
|
324
|
+
onPageSizeChange={(size) => {
|
|
325
|
+
setPageSize(size);
|
|
326
|
+
setCurrentPage(1);
|
|
327
|
+
fetchData(1, size, [], '');
|
|
328
|
+
}}
|
|
315
329
|
// Filter callbacks - YOU handle the server call
|
|
316
330
|
onApplyFilter={(filter, allFilters) => {
|
|
317
331
|
setLoadingState({ filter: true });
|
|
318
|
-
fetchData(1, allFilters, '');
|
|
332
|
+
fetchData(1, pageSize, allFilters, '');
|
|
319
333
|
}}
|
|
320
334
|
onClearFilters={() => {
|
|
321
|
-
fetchData(1, [], '');
|
|
335
|
+
fetchData(1, pageSize, [], '');
|
|
322
336
|
}}
|
|
323
337
|
onSearchChange={(term) => {
|
|
324
338
|
setLoadingState({ search: true });
|
|
325
|
-
fetchData(1, [], term);
|
|
326
|
-
}}
|
|
327
|
-
onPageChange={(page) => {
|
|
328
|
-
setCurrentPage(page);
|
|
329
|
-
fetchData(page, [], '');
|
|
339
|
+
fetchData(1, pageSize, [], term);
|
|
330
340
|
}}
|
|
331
341
|
onTableRefresh={() => {
|
|
332
342
|
setLoadingState({ refresh: true });
|
|
333
|
-
fetchData(currentPage, [], '');
|
|
343
|
+
fetchData(currentPage, pageSize, [], '');
|
|
334
344
|
}}
|
|
335
345
|
/>
|
|
336
346
|
);
|
|
@@ -388,6 +398,50 @@ For large datasets, enable scrollable body with fixed headers:
|
|
|
388
398
|
<DataGrid data={data} maxHeight={500} />
|
|
389
399
|
```
|
|
390
400
|
|
|
401
|
+
## 📥 Load More (Incremental Loading)
|
|
402
|
+
|
|
403
|
+
For large datasets where you don't want to fetch everything upfront, use the Load More pattern. The button appears in the toolbar when more data is available.
|
|
404
|
+
|
|
405
|
+
```tsx
|
|
406
|
+
import { useState } from 'react';
|
|
407
|
+
import { DataGrid } from '@reactorui/datagrid';
|
|
408
|
+
|
|
409
|
+
function IncrementalLoadExample() {
|
|
410
|
+
const [data, setData] = useState([]);
|
|
411
|
+
const [continuationToken, setContinuationToken] = useState<string | null>(null);
|
|
412
|
+
const [loadingMore, setLoadingMore] = useState(false);
|
|
413
|
+
|
|
414
|
+
const handleLoadMore = async () => {
|
|
415
|
+
setLoadingMore(true);
|
|
416
|
+
try {
|
|
417
|
+
const result = await fetchData({ continuationToken });
|
|
418
|
+
setData((prev) => [...prev, ...result.items]); // Append to existing
|
|
419
|
+
setContinuationToken(result.continuationToken); // null = no more data
|
|
420
|
+
} finally {
|
|
421
|
+
setLoadingMore(false);
|
|
422
|
+
}
|
|
423
|
+
};
|
|
424
|
+
|
|
425
|
+
return (
|
|
426
|
+
<DataGrid
|
|
427
|
+
data={data}
|
|
428
|
+
enableLoadMore={true}
|
|
429
|
+
hasMore={continuationToken !== null}
|
|
430
|
+
loadingMore={loadingMore}
|
|
431
|
+
onLoadMore={handleLoadMore}
|
|
432
|
+
pageSize={25} // Pagination still works on loaded data
|
|
433
|
+
/>
|
|
434
|
+
);
|
|
435
|
+
}
|
|
436
|
+
```
|
|
437
|
+
|
|
438
|
+
**Key Points:**
|
|
439
|
+
|
|
440
|
+
- **Button location:** Appears in the toolbar (left of search) when `enableLoadMore && hasMore`
|
|
441
|
+
- **Pagination unaffected:** Client-side pagination works normally on loaded data
|
|
442
|
+
- **Parent manages state:** You control data array, continuation token, and loading state
|
|
443
|
+
- **No total required:** Works with APIs that only return a continuation token
|
|
444
|
+
|
|
391
445
|
## 🎯 Event System
|
|
392
446
|
|
|
393
447
|
### Filter Events
|
|
@@ -396,6 +450,7 @@ For large datasets, enable scrollable body with fixed headers:
|
|
|
396
450
|
<DataGrid
|
|
397
451
|
data={data}
|
|
398
452
|
enableFilters={true}
|
|
453
|
+
filterMode="server"
|
|
399
454
|
// Called when "Apply Filter" is clicked
|
|
400
455
|
onApplyFilter={(filter, allFilters) => {
|
|
401
456
|
console.log('New filter:', filter);
|
|
@@ -493,15 +548,15 @@ For large datasets, enable scrollable body with fixed headers:
|
|
|
493
548
|
|
|
494
549
|
### Data & State
|
|
495
550
|
|
|
496
|
-
| Prop | Type | Default | Description
|
|
497
|
-
| -------------- | ---------------- | ------------- |
|
|
498
|
-
| `data` | `T[]` | **Required** | Array of data to display
|
|
499
|
-
| `columns` | `Column<T>[]` | Auto-detected | Column definitions
|
|
500
|
-
| `loading` | `boolean` | `false` | Simple loading state (backward compat)
|
|
501
|
-
| `loadingState` | `LoadingState` | `{}` | Granular loading states
|
|
502
|
-
| `totalRecords` | `number` | - | Total records for
|
|
503
|
-
| `currentPage` | `number` | - | Controlled current page
|
|
504
|
-
| `error` | `string \| null` | - | Error message to display
|
|
551
|
+
| Prop | Type | Default | Description |
|
|
552
|
+
| -------------- | ---------------- | ------------- | -------------------------------------- |
|
|
553
|
+
| `data` | `T[]` | **Required** | Array of data to display |
|
|
554
|
+
| `columns` | `Column<T>[]` | Auto-detected | Column definitions |
|
|
555
|
+
| `loading` | `boolean` | `false` | Simple loading state (backward compat) |
|
|
556
|
+
| `loadingState` | `LoadingState` | `{}` | Granular loading states |
|
|
557
|
+
| `totalRecords` | `number` | - | Total records for pagination display |
|
|
558
|
+
| `currentPage` | `number` | - | Controlled current page |
|
|
559
|
+
| `error` | `string \| null` | - | Error message to display |
|
|
505
560
|
|
|
506
561
|
### Layout & Styling
|
|
507
562
|
|
|
@@ -516,16 +571,31 @@ For large datasets, enable scrollable body with fixed headers:
|
|
|
516
571
|
|
|
517
572
|
### Features
|
|
518
573
|
|
|
519
|
-
| Prop | Type | Default | Description
|
|
520
|
-
| -------------------- | ----------------------------------------- | ---------- |
|
|
521
|
-
| `enableSearch` | `boolean` | `true` | Show search input
|
|
522
|
-
| `enableSorting` | `boolean` | `true` | Enable column sorting
|
|
523
|
-
| `enableFilters` | `boolean` | `true` | Show filter controls
|
|
524
|
-
| `enableSelection` | `boolean` | `true` | Show row checkboxes
|
|
525
|
-
| `enableDelete` | `boolean` | `false` | Show delete button
|
|
526
|
-
| `enableRefresh` | `boolean` | `false` | Show refresh button
|
|
527
|
-
| `deleteConfirmation` | `boolean` | `false` | Confirm before delete
|
|
528
|
-
| `
|
|
574
|
+
| Prop | Type | Default | Description |
|
|
575
|
+
| -------------------- | ----------------------------------------- | ---------- | --------------------- |
|
|
576
|
+
| `enableSearch` | `boolean` | `true` | Show search input |
|
|
577
|
+
| `enableSorting` | `boolean` | `true` | Enable column sorting |
|
|
578
|
+
| `enableFilters` | `boolean` | `true` | Show filter controls |
|
|
579
|
+
| `enableSelection` | `boolean` | `true` | Show row checkboxes |
|
|
580
|
+
| `enableDelete` | `boolean` | `false` | Show delete button |
|
|
581
|
+
| `enableRefresh` | `boolean` | `false` | Show refresh button |
|
|
582
|
+
| `deleteConfirmation` | `boolean` | `false` | Confirm before delete |
|
|
583
|
+
| `paginationMode` | `'client' \| 'server'` | `'client'` | Pagination behavior |
|
|
584
|
+
| `filterMode` | `'client' \| 'server' \| 'client&server'` | `'client'` | Filter behavior |
|
|
585
|
+
|
|
586
|
+
### Load More
|
|
587
|
+
|
|
588
|
+
| Prop | Type | Default | Description |
|
|
589
|
+
| ---------------- | ------------ | ------- | --------------------------------------- |
|
|
590
|
+
| `enableLoadMore` | `boolean` | `false` | Show "Load More" button in toolbar |
|
|
591
|
+
| `hasMore` | `boolean` | `false` | Whether more data is available to load |
|
|
592
|
+
| `loadingMore` | `boolean` | `false` | Show loading spinner on button |
|
|
593
|
+
| `onLoadMore` | `() => void` | - | Called when Load More button is clicked |
|
|
594
|
+
|
|
595
|
+
**paginationMode options:**
|
|
596
|
+
|
|
597
|
+
- `'client'` (default) - Slices data locally, `totalRecords` is display-only
|
|
598
|
+
- `'server'` - No local slicing, parent handles pagination via `onPageChange`/`onPageSizeChange`
|
|
529
599
|
|
|
530
600
|
**filterMode options:**
|
|
531
601
|
|
|
@@ -560,6 +630,7 @@ For large datasets, enable scrollable body with fixed headers:
|
|
|
560
630
|
| `onSelectionChange` | `(rows) => void` | Selection changed |
|
|
561
631
|
| `onCellClick` | `(value, row, column, event) => void` | Cell clicked |
|
|
562
632
|
| `onBulkDelete` | `(rows) => void` | Delete clicked |
|
|
633
|
+
| `onLoadMore` | `() => void` | Load More clicked |
|
|
563
634
|
|
|
564
635
|
_\* Filter callbacks only fire when `filterMode="server"` or `filterMode="client&server"`_
|
|
565
636
|
|
|
@@ -640,7 +711,14 @@ import { DataGrid } from '@reactorui/datagrid';
|
|
|
640
711
|
|
|
641
712
|
test('handles filter application', async () => {
|
|
642
713
|
const onApplyFilter = jest.fn();
|
|
643
|
-
render(
|
|
714
|
+
render(
|
|
715
|
+
<DataGrid
|
|
716
|
+
data={testData}
|
|
717
|
+
enableFilters={true}
|
|
718
|
+
filterMode="server"
|
|
719
|
+
onApplyFilter={onApplyFilter}
|
|
720
|
+
/>
|
|
721
|
+
);
|
|
644
722
|
|
|
645
723
|
// Select column, enter value, click Apply
|
|
646
724
|
const selects = screen.getAllByRole('combobox');
|
|
@@ -663,6 +741,44 @@ test('applies custom theme', () => {
|
|
|
663
741
|
|
|
664
742
|
expect(container.firstChild).toHaveClass('dark:bg-zinc-900');
|
|
665
743
|
});
|
|
744
|
+
|
|
745
|
+
test('client mode slices data locally', () => {
|
|
746
|
+
const largeData = Array.from({ length: 50 }, (_, i) => ({ id: i, name: `User ${i}` }));
|
|
747
|
+
render(<DataGrid data={largeData} pageSize={10} paginationMode="client" />);
|
|
748
|
+
|
|
749
|
+
// Should only show 10 rows
|
|
750
|
+
const rows = screen.getAllByRole('row');
|
|
751
|
+
expect(rows.length - 1).toBe(10); // minus header
|
|
752
|
+
});
|
|
753
|
+
|
|
754
|
+
test('server mode does not slice data', () => {
|
|
755
|
+
const pageData = Array.from({ length: 5 }, (_, i) => ({ id: i, name: `User ${i}` }));
|
|
756
|
+
render(<DataGrid data={pageData} totalRecords={100} pageSize={10} paginationMode="server" />);
|
|
757
|
+
|
|
758
|
+
// Shows all 5 rows (server already sliced)
|
|
759
|
+
const rows = screen.getAllByRole('row');
|
|
760
|
+
expect(rows.length - 1).toBe(5);
|
|
761
|
+
|
|
762
|
+
// But displays totalRecords
|
|
763
|
+
expect(screen.getByText(/of 100 records/)).toBeInTheDocument();
|
|
764
|
+
});
|
|
765
|
+
|
|
766
|
+
test('shows Load More button when enabled and hasMore', () => {
|
|
767
|
+
const onLoadMore = jest.fn();
|
|
768
|
+
render(<DataGrid data={testData} enableLoadMore={true} hasMore={true} onLoadMore={onLoadMore} />);
|
|
769
|
+
|
|
770
|
+
const loadMoreButton = screen.getByText('Load More');
|
|
771
|
+
expect(loadMoreButton).toBeInTheDocument();
|
|
772
|
+
|
|
773
|
+
fireEvent.click(loadMoreButton);
|
|
774
|
+
expect(onLoadMore).toHaveBeenCalledTimes(1);
|
|
775
|
+
});
|
|
776
|
+
|
|
777
|
+
test('hides Load More button when hasMore is false', () => {
|
|
778
|
+
render(<DataGrid data={testData} enableLoadMore={true} hasMore={false} />);
|
|
779
|
+
|
|
780
|
+
expect(screen.queryByText('Load More')).not.toBeInTheDocument();
|
|
781
|
+
});
|
|
666
782
|
```
|
|
667
783
|
|
|
668
784
|
## ⚠️ Migration Guide
|
|
@@ -739,6 +855,29 @@ function MyGrid() {
|
|
|
739
855
|
/>
|
|
740
856
|
```
|
|
741
857
|
|
|
858
|
+
### Pagination Mode (New in v1.2.2)
|
|
859
|
+
|
|
860
|
+
`totalRecords` no longer automatically triggers server-side pagination. Use explicit `paginationMode`:
|
|
861
|
+
|
|
862
|
+
```tsx
|
|
863
|
+
// Client-side pagination (default) - totalRecords is display only
|
|
864
|
+
<DataGrid
|
|
865
|
+
data={allData}
|
|
866
|
+
totalRecords={500} // Just for display: "Showing 1-25 of 500"
|
|
867
|
+
pageSize={25}
|
|
868
|
+
// paginationMode="client" is the default
|
|
869
|
+
/>
|
|
870
|
+
|
|
871
|
+
// Server-side pagination - parent handles slicing
|
|
872
|
+
<DataGrid
|
|
873
|
+
data={currentPageData}
|
|
874
|
+
totalRecords={500}
|
|
875
|
+
paginationMode="server" // Explicit opt-in
|
|
876
|
+
onPageChange={handlePageChange}
|
|
877
|
+
onPageSizeChange={handlePageSizeChange}
|
|
878
|
+
/>
|
|
879
|
+
```
|
|
880
|
+
|
|
742
881
|
## 🔧 Development
|
|
743
882
|
|
|
744
883
|
```bash
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DataGridProps } from '../../types';
|
|
2
2
|
export declare const DataGrid: <T extends {
|
|
3
3
|
[key: string]: any;
|
|
4
|
-
} = any>({ data, columns: columnsProp, loading: simpleLoading, loadingState: externalLoadingState, totalRecords: externalTotalRecords, error: externalError, currentPage: externalCurrentPage, enableSearch, enableSorting, enableFilters, enableSelection, enableDelete, enableRefresh, deleteConfirmation, filterMode, maxHeight, stickyHeader, pageSize, pageSizeOptions, variant, size, className, theme: customTheme, onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, onTableRefresh, onBulkDelete, endpoint, httpConfig, serverPageSize, onDataLoad, onDataError, onLoadingStateChange, ...rest }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
} = any>({ data, columns: columnsProp, loading: simpleLoading, loadingState: externalLoadingState, totalRecords: externalTotalRecords, error: externalError, currentPage: externalCurrentPage, enableSearch, enableSorting, enableFilters, enableSelection, enableDelete, enableRefresh, deleteConfirmation, paginationMode, filterMode, enableLoadMore, hasMore, loadingMore, onLoadMore, maxHeight, stickyHeader, pageSize, pageSizeOptions, variant, size, className, theme: customTheme, onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, onTableRowClick, onTableRowDoubleClick, onRowSelect, onSelectionChange, onTableRowHover, onCellClick, onTableRefresh, onBulkDelete, endpoint, httpConfig, serverPageSize, onDataLoad, onDataError, onLoadingStateChange, ...rest }: DataGridProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
//# sourceMappingURL=DataGrid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAwB,MAAM,aAAa,CAAC;AA0ClE,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,GAAG,EAAE,
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAwB,MAAM,aAAa,CAAC;AA0ClE,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,GAAG,EAAE,qzBAgF9D,aAAa,CAAC,CAAC,CAAC,4CAwalB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
// File: src/components/DataGrid/DataGrid.tsx
|
|
3
3
|
import React, { useMemo, useCallback } from 'react';
|
|
4
4
|
import { useDataGrid } from '../../hooks';
|
|
@@ -22,7 +22,9 @@ loading: simpleLoading = false, loadingState: externalLoadingState,
|
|
|
22
22
|
// External state (controlled mode)
|
|
23
23
|
totalRecords: externalTotalRecords, error: externalError, currentPage: externalCurrentPage,
|
|
24
24
|
// Features
|
|
25
|
-
enableSearch = true, enableSorting = true, enableFilters = true, enableSelection = true, enableDelete = false, enableRefresh = false, deleteConfirmation = false, filterMode = 'client',
|
|
25
|
+
enableSearch = true, enableSorting = true, enableFilters = true, enableSelection = true, enableDelete = false, enableRefresh = false, deleteConfirmation = false, paginationMode = 'client', filterMode = 'client',
|
|
26
|
+
// Load More
|
|
27
|
+
enableLoadMore = false, hasMore = false, loadingMore = false, onLoadMore,
|
|
26
28
|
// Layout
|
|
27
29
|
maxHeight, stickyHeader = false,
|
|
28
30
|
// Pagination
|
|
@@ -101,6 +103,7 @@ endpoint, httpConfig, serverPageSize, onDataLoad, onDataError, onLoadingStateCha
|
|
|
101
103
|
totalRecords: externalTotalRecords,
|
|
102
104
|
currentPage: externalCurrentPage,
|
|
103
105
|
loading: isDataLoading,
|
|
106
|
+
paginationMode,
|
|
104
107
|
filterMode,
|
|
105
108
|
onPageChange,
|
|
106
109
|
onPageSizeChange,
|
|
@@ -174,7 +177,7 @@ endpoint, httpConfig, serverPageSize, onDataLoad, onDataError, onLoadingStateCha
|
|
|
174
177
|
}
|
|
175
178
|
return (_jsxs("div", { className: `${theme.container} ${className} ${hasFixedLayout ? 'flex flex-col' : ''}`, style: hasFixedLayout && maxHeight
|
|
176
179
|
? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }
|
|
177
|
-
: undefined, ...rest, children: [_jsx("div", { className: "px-4 py-4 flex-shrink-0", children: _jsxs("div", { className: "flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: `text-sm ${theme.text}`, children: "Show" }), _jsx("select", { value: currentPageSize, onChange: (e) => setCurrentPageSize(parseInt(e.target.value)), disabled: isAnyLoading, className: theme.select, children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) }), _jsx("span", { className: `text-sm ${theme.text}`, children: "entries" }), enableFilters && (_jsx(FilterControls, { columns: columns, activeFilters: activeFilters, onApplyFilter: addFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters, disabled: isDataLoading, filterLoading: isFilterLoading, theme: theme }))] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [enableSearch && (_jsxs("div", { className: "w-64 relative", children: [_jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search...", disabled: isAnyLoading, className: theme.searchInput }), isSearchLoading && (_jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: _jsx(Spinner, { className: `w-4 h-4 ${theme.textMuted}` }) }))] })), enableRefresh && (_jsx("button", { onClick: handleRefresh, disabled: isAnyLoading, title: isRefreshLoading ? 'Refreshing...' : 'Refresh data', className: `${theme.buttonSecondary} flex items-center justify-center`, children: _jsx("svg", { className: "w-4 h-4", style: isRefreshLoading ? { animation: 'spin 1s linear infinite' } : undefined, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) })), enableDelete && enableSelection && (_jsxs("button", { onClick: handleDelete, disabled: selectedRows.size === 0 || isAnyLoading, title: selectedRows.size === 0
|
|
180
|
+
: undefined, ...rest, children: [_jsx("div", { className: "px-4 py-4 flex-shrink-0", children: _jsxs("div", { className: "flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: `text-sm ${theme.text}`, children: "Show" }), _jsx("select", { value: currentPageSize, onChange: (e) => setCurrentPageSize(parseInt(e.target.value)), disabled: isAnyLoading, className: theme.select, children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) }), _jsx("span", { className: `text-sm ${theme.text}`, children: "entries" }), enableFilters && (_jsx(FilterControls, { columns: columns, activeFilters: activeFilters, onApplyFilter: addFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters, disabled: isDataLoading, filterLoading: isFilterLoading, theme: theme }))] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [enableLoadMore && hasMore && (_jsx("button", { onClick: onLoadMore, disabled: loadingMore || isAnyLoading, title: "Load more records", className: `${theme.buttonSecondary} flex items-center gap-1.5 ${loadingMore ? 'opacity-75' : ''}`, children: loadingMore ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "w-4 h-4" }), _jsx("span", { className: "text-sm", children: "Loading..." })] })) : (_jsxs(_Fragment, { children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) }), _jsx("span", { className: "text-sm", children: "Load More" })] })) })), enableSearch && (_jsxs("div", { className: "w-64 relative", children: [_jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search...", disabled: isAnyLoading, className: theme.searchInput }), isSearchLoading && (_jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: _jsx(Spinner, { className: `w-4 h-4 ${theme.textMuted}` }) }))] })), enableRefresh && (_jsx("button", { onClick: handleRefresh, disabled: isAnyLoading, title: isRefreshLoading ? 'Refreshing...' : 'Refresh data', className: `${theme.buttonSecondary} flex items-center justify-center`, children: _jsx("svg", { className: "w-4 h-4", style: isRefreshLoading ? { animation: 'spin 1s linear infinite' } : undefined, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) })), enableDelete && enableSelection && (_jsxs("button", { onClick: handleDelete, disabled: selectedRows.size === 0 || isAnyLoading, title: selectedRows.size === 0
|
|
178
181
|
? 'Select rows to delete'
|
|
179
182
|
: isDeleteLoading
|
|
180
183
|
? 'Deleting...'
|
|
@@ -184,5 +184,5 @@ export const FilterControls = ({ columns, activeFilters, onApplyFilter, onRemove
|
|
|
184
184
|
padding: 14,
|
|
185
185
|
left: popoverPosition.left,
|
|
186
186
|
zIndex: 99999,
|
|
187
|
-
}, children: _jsxs("div", { className: "
|
|
187
|
+
}, children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: `text-base font-semibold ${theme.text.replace('text-gray-700', 'text-gray-900').replace('dark:text-zinc-300', 'dark:text-zinc-100')}`, children: "Add Filter" }), _jsx("button", { onClick: () => setIsOpen(false), className: `p-1 ${theme.textMuted} hover:${theme.text} rounded-md ${theme.buttonSecondary.replace(/px-3 py-2 bg-\S+ /g, '')} transition-colors`, children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsxs("div", { children: [_jsx("label", { className: `block text-sm font-medium ${theme.text} mb-1.5`, children: "Column" }), _jsxs("select", { value: filterColumn, onChange: (e) => handleColumnChange(e.target.value), disabled: isDisabled, className: `w-full px-3 py-2.5 ${theme.select}`, children: [_jsx("option", { value: "", children: "Select column" }), filterableColumns.map((col) => (_jsx("option", { value: String(col.key), children: col.label }, String(col.key))))] })] }), _jsxs("div", { children: [_jsx("label", { className: `block text-sm font-medium ${theme.text} mb-1.5`, children: "Operator" }), _jsx("select", { value: filterOperator, onChange: (e) => setFilterOperator(e.target.value), disabled: isDisabled || !filterColumn, className: `w-full px-3 py-2.5 ${theme.select}`, children: operatorOptions.map((op) => (_jsx("option", { value: op.value, children: op.label }, op.value))) })] }), _jsxs("div", { children: [_jsx("label", { className: `block text-sm font-medium ${theme.text} mb-1.5`, children: "Value" }), renderValueInput()] }), _jsx("button", { onClick: handleApply, disabled: isDisabled || !canApply, className: `w-full px-4 py-2.5 ${theme.button} font-medium`, children: "Apply Filter" })] }) }), document.body)] }));
|
|
188
188
|
};
|
|
@@ -5,6 +5,12 @@ interface UseDataGridProps<T> {
|
|
|
5
5
|
totalRecords?: number;
|
|
6
6
|
currentPage?: number;
|
|
7
7
|
loading?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Pagination behavior mode:
|
|
10
|
+
* - 'client' (default): Slices data locally, totalRecords used for display only
|
|
11
|
+
* - 'server': No local slicing, parent handles pagination via onPageChange/onPageSizeChange
|
|
12
|
+
*/
|
|
13
|
+
paginationMode?: 'client' | 'server';
|
|
8
14
|
/**
|
|
9
15
|
* Filter behavior mode:
|
|
10
16
|
* - 'client' (default): Filters locally, no onApplyFilter callback
|
|
@@ -21,7 +27,7 @@ interface UseDataGridProps<T> {
|
|
|
21
27
|
onClearFilters?: () => void;
|
|
22
28
|
onFilterChange?: (filters: ActiveFilter[]) => void;
|
|
23
29
|
}
|
|
24
|
-
export declare const useDataGrid: <T extends BaseRowData>({ data, pageSize, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading, filterMode, onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, }: UseDataGridProps<T>) => {
|
|
30
|
+
export declare const useDataGrid: <T extends BaseRowData>({ data, pageSize, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading, paginationMode, filterMode, onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, }: UseDataGridProps<T>) => {
|
|
25
31
|
data: T[];
|
|
26
32
|
processedData: T[];
|
|
27
33
|
paginatedData: T[];
|
|
@@ -49,7 +55,7 @@ export declare const useDataGrid: <T extends BaseRowData>({ data, pageSize, tota
|
|
|
49
55
|
selectedData: T[];
|
|
50
56
|
hasSelection: boolean;
|
|
51
57
|
getRowId: (row: T) => string;
|
|
52
|
-
|
|
58
|
+
isServerPagination: boolean;
|
|
53
59
|
};
|
|
54
60
|
export {};
|
|
55
61
|
//# sourceMappingURL=useDataGrid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataGrid.d.ts","sourceRoot":"","sources":["../../src/hooks/useDataGrid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAOjF,UAAU,gBAAgB,CAAC,CAAC;IAC1B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,eAAe,CAAC;IAGnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACpE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACpD;AAMD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"useDataGrid.d.ts","sourceRoot":"","sources":["../../src/hooks/useDataGrid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAOjF,UAAU,gBAAgB,CAAC,CAAC;IAC1B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAErC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,eAAe,CAAC;IAGnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5D,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IACpE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACpD;AAMD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,EAAE,8QAgBhD,gBAAgB,CAAC,CAAC,CAAC;;;;;;;;;;;0BAkHX,MAAM;sBASJ,MAAM;2BAaR,MAAM;+BAQN,MAAM;;;wBAsBJ,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC;0BAoB5B,MAAM;;uBA4BsB,MAAM,YAAY,OAAO;0BASlD,OAAO;;;;;;oBA3LZ,CAAC,KAAG,MAAM;;CA2PnB,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { compareValues, sortData } from '../utils';
|
|
|
4
4
|
// ============================================================================
|
|
5
5
|
// Hook Implementation
|
|
6
6
|
// ============================================================================
|
|
7
|
-
export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading = false, filterMode = 'client', onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, }) => {
|
|
7
|
+
export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRecords, currentPage: externalCurrentPage, loading: externalLoading = false, paginationMode = 'client', filterMode = 'client', onPageChange, onPageSizeChange, onSortChange, onSearchChange, onApplyFilter, onRemoveFilter, onClearFilters, onFilterChange, }) => {
|
|
8
8
|
// ===== Internal State =====
|
|
9
9
|
const [searchTerm, setSearchTermState] = useState('');
|
|
10
10
|
const [activeFilters, setActiveFilters] = useState([]);
|
|
@@ -17,8 +17,8 @@ export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRe
|
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
setCurrentPageSizeState(pageSize);
|
|
19
19
|
}, [pageSize]);
|
|
20
|
-
// Determine if
|
|
21
|
-
const
|
|
20
|
+
// Determine if pagination is server-controlled
|
|
21
|
+
const isServerPagination = paginationMode === 'server';
|
|
22
22
|
const currentPage = externalCurrentPage ?? internalPage;
|
|
23
23
|
// ===== Row ID Generation =====
|
|
24
24
|
const rowIdMap = useMemo(() => {
|
|
@@ -41,7 +41,7 @@ export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRe
|
|
|
41
41
|
const processedData = useMemo(() => {
|
|
42
42
|
// Determine if we should filter locally
|
|
43
43
|
const shouldFilterLocally = filterMode === 'client' || filterMode === 'client&server';
|
|
44
|
-
if (
|
|
44
|
+
if (isServerPagination && filterMode === 'server') {
|
|
45
45
|
// Server mode with controlled data - parent handles everything, just sort
|
|
46
46
|
return sortConfig.column ? sortData(data, sortConfig.column, sortConfig.direction) : data;
|
|
47
47
|
}
|
|
@@ -65,17 +65,17 @@ export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRe
|
|
|
65
65
|
result = sortData(result, sortConfig.column, sortConfig.direction);
|
|
66
66
|
}
|
|
67
67
|
return result;
|
|
68
|
-
}, [data, searchTerm, activeFilters, sortConfig,
|
|
68
|
+
}, [data, searchTerm, activeFilters, sortConfig, isServerPagination, filterMode]);
|
|
69
69
|
// ===== Pagination =====
|
|
70
70
|
const paginatedData = useMemo(() => {
|
|
71
|
-
if (
|
|
71
|
+
if (isServerPagination)
|
|
72
72
|
return data; // Parent handles pagination
|
|
73
73
|
const start = (currentPage - 1) * currentPageSize;
|
|
74
74
|
return processedData.slice(start, start + currentPageSize);
|
|
75
|
-
}, [processedData, currentPage, currentPageSize,
|
|
75
|
+
}, [processedData, currentPage, currentPageSize, isServerPagination, data]);
|
|
76
76
|
// ===== Pagination Info =====
|
|
77
77
|
const paginationInfo = useMemo(() => {
|
|
78
|
-
const total =
|
|
78
|
+
const total = isServerPagination ? (externalTotalRecords ?? 0) : processedData.length;
|
|
79
79
|
const totalPages = Math.ceil(total / currentPageSize) || 1;
|
|
80
80
|
const start = total === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;
|
|
81
81
|
const end = Math.min(currentPage * currentPageSize, total);
|
|
@@ -89,7 +89,7 @@ export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRe
|
|
|
89
89
|
hasNext: currentPage < totalPages,
|
|
90
90
|
hasPrevious: currentPage > 1,
|
|
91
91
|
};
|
|
92
|
-
}, [processedData, currentPage, currentPageSize,
|
|
92
|
+
}, [processedData, currentPage, currentPageSize, isServerPagination, externalTotalRecords]);
|
|
93
93
|
// ===== Selection =====
|
|
94
94
|
const selectedData = useMemo(() => {
|
|
95
95
|
return data.filter((row) => selectedRows.has(getRowId(row)));
|
|
@@ -97,31 +97,31 @@ export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRe
|
|
|
97
97
|
// ===== Actions =====
|
|
98
98
|
const setSearchTerm = useCallback((term) => {
|
|
99
99
|
setSearchTermState(term);
|
|
100
|
-
if (!
|
|
100
|
+
if (!isServerPagination)
|
|
101
101
|
setInternalPage(1);
|
|
102
102
|
onSearchChange?.(term);
|
|
103
|
-
}, [
|
|
103
|
+
}, [isServerPagination, onSearchChange]);
|
|
104
104
|
const setSort = useCallback((column) => {
|
|
105
105
|
const newConfig = {
|
|
106
106
|
column,
|
|
107
107
|
direction: sortConfig.column === column && sortConfig.direction === 'asc' ? 'desc' : 'asc',
|
|
108
108
|
};
|
|
109
109
|
setSortConfig(newConfig);
|
|
110
|
-
if (!
|
|
110
|
+
if (!isServerPagination)
|
|
111
111
|
setInternalPage(1);
|
|
112
112
|
onSortChange?.(newConfig);
|
|
113
|
-
}, [sortConfig,
|
|
113
|
+
}, [sortConfig, isServerPagination, onSortChange]);
|
|
114
114
|
const setCurrentPage = useCallback((page) => {
|
|
115
|
-
if (!
|
|
115
|
+
if (!isServerPagination)
|
|
116
116
|
setInternalPage(page);
|
|
117
117
|
onPageChange?.(page, { ...paginationInfo, currentPage: page });
|
|
118
|
-
}, [
|
|
118
|
+
}, [isServerPagination, paginationInfo, onPageChange]);
|
|
119
119
|
const setCurrentPageSize = useCallback((size) => {
|
|
120
120
|
setCurrentPageSizeState(size);
|
|
121
|
-
if (!
|
|
121
|
+
if (!isServerPagination)
|
|
122
122
|
setInternalPage(1); // Reset to page 1 when page size changes
|
|
123
123
|
onPageSizeChange?.(size);
|
|
124
|
-
}, [
|
|
124
|
+
}, [isServerPagination, onPageSizeChange]);
|
|
125
125
|
const navigateNext = useCallback(() => {
|
|
126
126
|
if (paginationInfo.hasNext) {
|
|
127
127
|
setCurrentPage(currentPage + 1);
|
|
@@ -139,19 +139,19 @@ export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRe
|
|
|
139
139
|
// Replace existing filter on same column or add new
|
|
140
140
|
const newFilters = [...activeFilters.filter((f) => f.column !== filter.column), fullFilter];
|
|
141
141
|
setActiveFilters(newFilters);
|
|
142
|
-
if (!
|
|
142
|
+
if (!isServerPagination)
|
|
143
143
|
setInternalPage(1);
|
|
144
144
|
// Fire callbacks only for 'server' or 'client&server' modes
|
|
145
145
|
if (filterMode !== 'client') {
|
|
146
146
|
onApplyFilter?.(fullFilter, newFilters);
|
|
147
147
|
onFilterChange?.(newFilters);
|
|
148
148
|
}
|
|
149
|
-
}, [activeFilters,
|
|
149
|
+
}, [activeFilters, isServerPagination, filterMode, onApplyFilter, onFilterChange]);
|
|
150
150
|
const removeFilter = useCallback((index) => {
|
|
151
151
|
const removed = activeFilters[index];
|
|
152
152
|
const newFilters = activeFilters.filter((_, i) => i !== index);
|
|
153
153
|
setActiveFilters(newFilters);
|
|
154
|
-
if (!
|
|
154
|
+
if (!isServerPagination)
|
|
155
155
|
setInternalPage(1);
|
|
156
156
|
// Fire callbacks only for 'server' or 'client&server' modes
|
|
157
157
|
if (filterMode !== 'client') {
|
|
@@ -159,17 +159,17 @@ export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRe
|
|
|
159
159
|
onRemoveFilter?.(removed, newFilters);
|
|
160
160
|
onFilterChange?.(newFilters);
|
|
161
161
|
}
|
|
162
|
-
}, [activeFilters,
|
|
162
|
+
}, [activeFilters, isServerPagination, filterMode, onRemoveFilter, onFilterChange]);
|
|
163
163
|
const clearFilters = useCallback(() => {
|
|
164
164
|
setActiveFilters([]);
|
|
165
|
-
if (!
|
|
165
|
+
if (!isServerPagination)
|
|
166
166
|
setInternalPage(1);
|
|
167
167
|
// Fire callbacks only for 'server' or 'client&server' modes
|
|
168
168
|
if (filterMode !== 'client') {
|
|
169
169
|
onClearFilters?.();
|
|
170
170
|
onFilterChange?.([]);
|
|
171
171
|
}
|
|
172
|
-
}, [
|
|
172
|
+
}, [isServerPagination, filterMode, onClearFilters, onFilterChange]);
|
|
173
173
|
// ===== Selection Actions =====
|
|
174
174
|
const selectRow = useCallback((rowId, selected) => {
|
|
175
175
|
setSelectedRows((prev) => {
|
|
@@ -232,6 +232,6 @@ export const useDataGrid = ({ data, pageSize = 10, totalRecords: externalTotalRe
|
|
|
232
232
|
hasSelection: selectedRows.size > 0,
|
|
233
233
|
getRowId,
|
|
234
234
|
// Mode
|
|
235
|
-
|
|
235
|
+
isServerPagination,
|
|
236
236
|
};
|
|
237
237
|
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -126,10 +126,8 @@ export interface DataGridProps<T = BaseRowData> extends Omit<HTMLAttributes<HTML
|
|
|
126
126
|
* @deprecated Prefer loadingState for granular control
|
|
127
127
|
*/
|
|
128
128
|
loading?: boolean;
|
|
129
|
-
/** Total records for pagination display (server
|
|
129
|
+
/** Total records for pagination display (used by both client and server modes) */
|
|
130
130
|
totalRecords?: number;
|
|
131
|
-
/** Whether more data is available (server-side) */
|
|
132
|
-
hasMore?: boolean;
|
|
133
131
|
/** Error message to display */
|
|
134
132
|
error?: string | null;
|
|
135
133
|
enableSearch?: boolean;
|
|
@@ -139,6 +137,12 @@ export interface DataGridProps<T = BaseRowData> extends Omit<HTMLAttributes<HTML
|
|
|
139
137
|
enableDelete?: boolean;
|
|
140
138
|
enableRefresh?: boolean;
|
|
141
139
|
deleteConfirmation?: boolean;
|
|
140
|
+
/**
|
|
141
|
+
* Pagination behavior mode:
|
|
142
|
+
* - 'client' (default): Slices data locally, totalRecords used for display only
|
|
143
|
+
* - 'server': No local slicing, parent handles pagination via onPageChange/onPageSizeChange
|
|
144
|
+
*/
|
|
145
|
+
paginationMode?: 'client' | 'server';
|
|
142
146
|
/**
|
|
143
147
|
* Filter behavior mode:
|
|
144
148
|
* - 'client' (default): Filters data locally, no onApplyFilter callback fired
|
|
@@ -146,6 +150,17 @@ export interface DataGridProps<T = BaseRowData> extends Omit<HTMLAttributes<HTML
|
|
|
146
150
|
* - 'client&server': Filters locally AND fires callback
|
|
147
151
|
*/
|
|
148
152
|
filterMode?: 'client' | 'server' | 'client&server';
|
|
153
|
+
/**
|
|
154
|
+
* Show "Load More" button to fetch additional batches of data.
|
|
155
|
+
* Parent manages appending data and tracking continuation token.
|
|
156
|
+
*/
|
|
157
|
+
enableLoadMore?: boolean;
|
|
158
|
+
/** Whether more data is available to load (e.g., continuationToken !== null) */
|
|
159
|
+
hasMore?: boolean;
|
|
160
|
+
/** Whether a load more request is in progress */
|
|
161
|
+
loadingMore?: boolean;
|
|
162
|
+
/** Called when Load More button is clicked */
|
|
163
|
+
onLoadMore?: () => void;
|
|
149
164
|
pageSize?: number;
|
|
150
165
|
pageSizeOptions?: number[];
|
|
151
166
|
/** Current page (controlled mode for server-side) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reactorui/datagrid",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"description": "A flexible, high-performance React data grid component with TypeScript support, advanced filtering, pagination, sorting, and customizable theming",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|