Skip to content

Commit c71ff5b

Browse files
NadavShaarNadavShaar
authored
Merge pull request #92 from NadavShaar/row-selection-and-edit-row-improvements
V1.1.0
2 parents a8095b2 + 8034cc8 commit c71ff5b

15 files changed

Lines changed: 127 additions & 82 deletions

‎.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
README.md

‎README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# react-grid-table
22

3-
> A modular table, based on a CSS grid layout, optimized for customization.
3+
> A modular table, based on a CSS grid layout, optimized for fast configuration and deep customization.
44
55
[![NPM](https://img.shields.io/npm/v/@nadavshaar/react-grid-table.svg)](https://www.npmjs.com/package/@nadavshaar/react-grid-table) [![Downloads](https://img.shields.io/npm/dt/@nadavshaar/react-grid-table)](https://www.npmjs.com/package/@nadavshaar/react-grid-table)
66

@@ -150,7 +150,7 @@ export default MyAwesomeTable;
150150

151151
#### Support this package
152152

153-
[![paypal](https://image.flaticon.com/icons/png/128/2871/2871557.png)](https://www.paypal.com/donate?hosted_button_id=VAEHCLA692FMW)
153+
[![paypal](https://cdn-icons-png.flaticon.com/128/2871/2871557.png)](https://www.paypal.com/donate?hosted_button_id=VAEHCLA692FMW)
154154

155155
## Main components
156156
**HEADER (optional | customizable):** search & column visibility management.
@@ -555,6 +555,7 @@ API Structure:
555555
| name | type | description | usage |
556556
|---|---|---|---|
557557
| searchText | string | text for search | --- |
558+
| validSearchText | string | is an empty string if the searched text did not pass the `minSearchChars`, if it does pass, it will be equal to `searchText` | --- |
558559
| setSearchText | function | updates the search text | `setSearchText('hello')` |
559560
| searchRows | function | filters rows based on the search text, using the search method defined on the columns | `searchRows(rows)` |
560561
| valuePassesSearch | function | returns true if a value passes the search for a certain column | `valuePassesSearch('hello', column)` |
@@ -572,7 +573,8 @@ API Structure:
572573

573574
| name | type | description | usage |
574575
|---|---|---|---|
575-
| rows | array | the rows | --- |
576+
| rows | array | the rows data (in sync mode - the rows data after the search filter and the sort) | --- |
577+
| originalRows | array | the rows data untouched (in sync mode - the rows data before the search filter) | --- |
576578
| setRows | function | updates the rows | `setRows(rows)` |
577579
| totalRows | number | the total number of rows | --- |
578580
| setTotalRows | function | updates the total number of rows | `setTotalRows(1000)` |
@@ -625,7 +627,7 @@ API Structure:
625627
# How to...
626628

627629
### Sync/Async
628-
`react-grid-table` supports 4 different data managing flows:
630+
`react-grid-table` supports 4 different data models:
629631

630632
#### Sync:
631633

‎demo/src/components/cells/ButtonsEditorCell.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const ButtonsEditorCell = ({ tableManager, data, setRowsData }) => (
7878
style={styles.saveButton}
7979
onClick={(e) => {
8080
e.stopPropagation();
81-
let rowsClone = [...tableManager.rowsApi.rows];
81+
let rowsClone = [...tableManager.rowsApi.originalRows];
8282
let updatedRowIndex = rowsClone.findIndex(
8383
(r) => r.id === data.id
8484
);

‎demo/src/views/async.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const MyAwesomeTable = () => {
3030
let [columns, setColumns] = useState(
3131
getColumns({
3232
setRowsData: (newRows) =>
33-
tableManager.current.asyncApi.setRows(newRows),
33+
tableManager.current.rowsApi.setRows(newRows),
3434
})
3535
);
3636
let [isSettingsOpen, setIsSettingsOpen] = useState(false);

‎demo/src/views/asyncControlled.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const MyAwesomeTable = () => {
3232
let [columns, setColumns] = useState(
3333
getColumns({
3434
setRowsData: (newRows) =>
35-
tableManager.current.asyncApi.setRows(newRows),
35+
tableManager.current.rowsApi.setRows(newRows),
3636
})
3737
);
3838
let [isSettingsOpen, setIsSettingsOpen] = useState(false);

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nadavshaar/react-grid-table",
3-
"version": "1.0.2",
3+
"version": "1.1.0",
44
"description": "A modular table, based on a CSS grid layout, optimized for customization.",
55
"author": "Nadav Shaar",
66
"license": "MIT",

‎src/defaults/icons.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const LOADER = (
3131
</svg>
3232
);
3333

34-
const TRASH_ICON = (
34+
const CLEAR_ICON = (
3535
<svg
3636
height="16"
3737
viewBox="0 0 21 21"
@@ -41,15 +41,16 @@ const TRASH_ICON = (
4141
<g
4242
fill="none"
4343
fillRule="evenodd"
44-
stroke="#2a2e3b"
44+
stroke="#125082"
4545
strokeLinecap="round"
4646
strokeLinejoin="round"
47-
transform="translate(3 2)"
47+
transform="translate(2 2)"
4848
>
49-
<path d="m2.5 2.5h10v12c0 1.1045695-.8954305 2-2 2h-6c-1.1045695 0-2-.8954305-2-2zm5-2c1.1045695 0 2 .8954305 2 2h-4c0-1.1045695.8954305-2 2-2z" />
50-
<path d="m.5 2.5h14" />
51-
<path d="m5.5 5.5v8" />
52-
<path d="m9.5 5.5v8" />
49+
<circle cx="8.5" cy="8.5" r="8" />
50+
<g transform="matrix(0 1 -1 0 17 0)">
51+
<path d="m5.5 11.5 6-6" />
52+
<path d="m5.5 5.5 6 6" />
53+
</g>
5354
</g>
5455
</svg>
5556
);
@@ -73,7 +74,7 @@ const SEARCH_ICON = <React.Fragment>&#9906;</React.Fragment>;
7374

7475
export default {
7576
loader: LOADER,
76-
clearSelection: TRASH_ICON,
77+
clearSelection: CLEAR_ICON,
7778
columnVisibility: MENU_ICON,
7879
sortAscending: SORT_ASCENDING_ICON,
7980
sortDescending: SORT_DESCENDING_ICON,

‎src/hooks/useAsync.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ const useAsync = (props, tableManager) => {
7171
config: { requestDebounceTimeout },
7272
rowsApi: { rows, totalRows },
7373
paginationApi: { pageSize },
74+
searchApi: { validSearchText },
7475
} = tableManager;
7576

7677
const asyncApi = useRef({}).current;
@@ -122,8 +123,13 @@ const useAsync = (props, tableManager) => {
122123

123124
const {
124125
rowsApi: { setRows, setTotalRows },
126+
rowSelectionApi: { setSelectedRowsIds },
127+
rowEditApi: { editRow, setEditRowId },
125128
} = tableManager;
126129

130+
setSelectedRowsIds([]);
131+
if (editRow) setEditRowId(null);
132+
127133
rowsRequests.current = [];
128134
if (props.onRowsReset) props.onRowsReset(tableManager);
129135
else {
@@ -142,6 +148,21 @@ const useAsync = (props, tableManager) => {
142148
return rows;
143149
};
144150

151+
// reset rows
152+
useEffect(() => {
153+
if (!tableManager.isInitialized) return;
154+
if (mode === "sync") return;
155+
156+
asyncApi.resetRows();
157+
}, [
158+
validSearchText,
159+
asyncApi,
160+
mode,
161+
tableManager.isInitialized,
162+
tableManager.sortApi.sort.colId,
163+
tableManager.sortApi.sort.isAsc,
164+
]);
165+
145166
useEffect(() => {
146167
if (mode === "sync") return;
147168

‎src/hooks/usePagination.jsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useRef, useMemo } from "react";
1+
import { useState, useRef, useMemo, useEffect } from "react";
22

33
const usePagination = (props, tableManager) => {
44
const {
@@ -13,9 +13,12 @@ const usePagination = (props, tableManager) => {
1313
props.pageSize || pageSizes[0] || 20
1414
);
1515

16-
paginationApi.page = props.page ?? page;
1716
paginationApi.pageSize = props.pageSize ?? pageSize;
1817
paginationApi.totalPages = Math.ceil(totalRows / paginationApi.pageSize);
18+
paginationApi.page = Math.max(
19+
1,
20+
Math.min(paginationApi.totalPages, props.page ?? page)
21+
);
1922
paginationApi.pageRows = useMemo(() => {
2023
if (!isPaginated) return rows;
2124

@@ -49,7 +52,8 @@ const usePagination = (props, tableManager) => {
4952

5053
paginationApi.setPage = (page) => {
5154
page = ~~page;
52-
if (page < 1 || paginationApi.totalPages < page) return;
55+
page = Math.max(1, Math.min(paginationApi.totalPages, page));
56+
if (paginationApi.page === page) return;
5357

5458
if (props.page === undefined || props.onPageChange === undefined)
5559
setPage(page);
@@ -69,6 +73,20 @@ const usePagination = (props, tableManager) => {
6973
props.onPageSizeChange?.(pageSize, tableManager);
7074
};
7175

76+
// reset page number
77+
useEffect(() => {
78+
if (!tableManager.isInitialized) return;
79+
if (tableManager.paginationApi.page === 1) return;
80+
81+
tableManager.paginationApi.setPage(1);
82+
}, [
83+
tableManager.searchApi.validSearchText,
84+
tableManager.isInitialized,
85+
paginationApi,
86+
paginationApi.pageSize,
87+
tableManager.paginationApi,
88+
]);
89+
7290
return paginationApi;
7391
};
7492

‎src/hooks/useRowEdit.jsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,32 @@ const useRowEdit = (props, tableManager) => {
2525
};
2626

2727
useEffect(() => {
28+
if (rowEditApi.editRow?.[rowIdField] === rowEditApi.editRowId) return;
29+
2830
rowEditApi.setEditRow(
29-
(rowEditApi.editRowId &&
30-
pageRows.find(
31-
(item) => item && item[rowIdField] === rowEditApi.editRowId
32-
)) ||
33-
null
31+
pageRows.find(
32+
(item) => item?.[rowIdField] === rowEditApi.editRowId
33+
) || null
3434
);
3535
}, [pageRows, rowEditApi, rowEditApi.editRowId, rowIdField]);
3636

37+
// reset edit row
38+
useEffect(() => {
39+
if (
40+
!tableManager.paginationApi.pageRows.find(
41+
(row, i) =>
42+
(row?.[tableManager.config.rowIdField] || i) ===
43+
rowEditApi.editRowId
44+
)
45+
)
46+
tableManager.rowEditApi.setEditRowId(null);
47+
}, [
48+
rowEditApi.editRowId,
49+
tableManager.config.rowIdField,
50+
tableManager.paginationApi.pageRows,
51+
tableManager.rowEditApi,
52+
]);
53+
3754
return rowEditApi;
3855
};
3956

0 commit comments

Comments
 (0)