From ff6e8a7ac1bdff2132e271f0a7fe9198aff573b2 Mon Sep 17 00:00:00 2001 From: Nadav Shaar Date: Sat, 26 Nov 2022 19:15:40 +0200 Subject: [PATCH 1/7] search bug - multi columns with the same fields --- src/components/Cell.jsx | 4 ++-- src/components/CellContainer.jsx | 36 ++++++++++++++++++---------- src/hooks/useSearch.jsx | 40 ++++++++++++++++++++------------ 3 files changed, 51 insertions(+), 29 deletions(-) diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx index 344be7f..f7b6f7a 100644 --- a/src/components/Cell.jsx +++ b/src/components/Cell.jsx @@ -1,6 +1,6 @@ import React from "react"; -const Cell = ({ value, tableManager }) => { +const Cell = ({ value, textValue, tableManager }) => { const { config: { additionalProps: { cell: additionalProps = {} }, @@ -12,7 +12,7 @@ const Cell = ({ value, tableManager }) => { ).trim(); return ( -
+
{value}
); diff --git a/src/components/CellContainer.jsx b/src/components/CellContainer.jsx index 9da6f85..bb2986b 100644 --- a/src/components/CellContainer.jsx +++ b/src/components/CellContainer.jsx @@ -65,6 +65,20 @@ const CellContainer = ({ return classNames; }; + const textValue = useMemo( + () => + data && + column + .getValue?.({ + tableManager, + value: isEdit ? editRow[column.field] : data[column.field], + column, + rowData: data, + }) + ?.toString?.(), + [column, data, editRow, isEdit, tableManager] + ); + const getValue = () => { let value; @@ -73,17 +87,7 @@ const CellContainer = ({ value = isSelected; break; default: - value = - data && - column - .getValue?.({ - tableManager, - value: isEdit - ? editRow[column.field] - : data[column.field], - column, - }) - ?.toString?.(); + value = textValue; if ( !isEdit && highlightSearch && @@ -129,7 +133,15 @@ const CellContainer = ({ let classNames = getClassNames(); let value = getValue(); - let cellProps = { tableManager, value, data, column, colIndex, rowIndex }; + let cellProps = { + tableManager, + value: value, + textValue, + data, + column, + colIndex, + rowIndex, + }; const isFirstEditableCell = useMemo( () => visibleColumns.findIndex( diff --git a/src/hooks/useSearch.jsx b/src/hooks/useSearch.jsx index ee9580e..32bbf45 100644 --- a/src/hooks/useSearch.jsx +++ b/src/hooks/useSearch.jsx @@ -37,25 +37,35 @@ const useSearch = (props, tableManager) => { searchApi.searchRows = useCallback( (rows) => { - var cols = columns.reduce((cols, coldef) => { - cols[coldef.field] = coldef; - return cols; - }, {}); - if (searchApi.validSearchText) { rows = rows.filter((item) => Object.keys(item).some((key) => { - if (cols[key] && cols[key].searchable) { - const value = cols[key].getValue({ - value: item[key], - column: cols[key], - }); - return cols[key].search({ - value: value?.toString() || "", - searchText: searchApi.validSearchText, - }); + var cols = columns.filter( + (column) => + column.searchable && + (!column.field || column.field === key) + ); + let isValid = false; + + if (cols.length) { + for (let index = 0; index < cols.length; index++) { + const currentColumn = cols[index]; + const value = currentColumn.getValue({ + value: item[key], + column: currentColumn, + rowData: item, + }); + isValid = currentColumn.search({ + value: value?.toString() || "", + searchText: searchApi.validSearchText, + rowData: item, + }); + + if (isValid) break; + } } - return false; + + return isValid; }) ); } From 784ecc7948ada9f2ab3601c10012c2dbf9ece101 Mon Sep 17 00:00:00 2001 From: Nadav Shaar Date: Sat, 26 Nov 2022 19:28:22 +0200 Subject: [PATCH 2/7] update --- src/hooks/useSearch.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/useSearch.jsx b/src/hooks/useSearch.jsx index 32bbf45..8f93215 100644 --- a/src/hooks/useSearch.jsx +++ b/src/hooks/useSearch.jsx @@ -58,7 +58,6 @@ const useSearch = (props, tableManager) => { isValid = currentColumn.search({ value: value?.toString() || "", searchText: searchApi.validSearchText, - rowData: item, }); if (isValid) break; From b429b25fb9f0bd22ca63ee4957eb4bffd835ed99 Mon Sep 17 00:00:00 2001 From: Nadav Shaar Date: Sat, 26 Nov 2022 19:29:06 +0200 Subject: [PATCH 3/7] update --- src/hooks/useSearch.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/useSearch.jsx b/src/hooks/useSearch.jsx index 8f93215..32bbf45 100644 --- a/src/hooks/useSearch.jsx +++ b/src/hooks/useSearch.jsx @@ -58,6 +58,7 @@ const useSearch = (props, tableManager) => { isValid = currentColumn.search({ value: value?.toString() || "", searchText: searchApi.validSearchText, + rowData: item, }); if (isValid) break; From c060a8b81d1cd12fe464f5771947602439497449 Mon Sep 17 00:00:00 2001 From: Nadav Shaar Date: Sat, 26 Nov 2022 23:54:26 +0200 Subject: [PATCH 4/7] update --- src/components/CellContainer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CellContainer.jsx b/src/components/CellContainer.jsx index bb2986b..8fde150 100644 --- a/src/components/CellContainer.jsx +++ b/src/components/CellContainer.jsx @@ -135,7 +135,7 @@ const CellContainer = ({ let cellProps = { tableManager, - value: value, + value, textValue, data, column, From 4aacbd0a1e0e2b7c5a14b54c3f8551faba35142a Mon Sep 17 00:00:00 2001 From: Nadav Shaar Date: Sun, 27 Nov 2022 00:10:57 +0200 Subject: [PATCH 5/7] update --- src/hooks/useSearch.jsx | 4 ++-- src/hooks/useSort.jsx | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/hooks/useSearch.jsx b/src/hooks/useSearch.jsx index 32bbf45..1703aee 100644 --- a/src/hooks/useSearch.jsx +++ b/src/hooks/useSearch.jsx @@ -51,6 +51,7 @@ const useSearch = (props, tableManager) => { for (let index = 0; index < cols.length; index++) { const currentColumn = cols[index]; const value = currentColumn.getValue({ + tableManager, value: item[key], column: currentColumn, rowData: item, @@ -58,7 +59,6 @@ const useSearch = (props, tableManager) => { isValid = currentColumn.search({ value: value?.toString() || "", searchText: searchApi.validSearchText, - rowData: item, }); if (isValid) break; @@ -72,7 +72,7 @@ const useSearch = (props, tableManager) => { return rows; }, - [columns, searchApi.validSearchText] + [columns, searchApi.validSearchText, tableManager] ); return searchApi; diff --git a/src/hooks/useSort.jsx b/src/hooks/useSort.jsx index 63bf4aa..a44b08a 100644 --- a/src/hooks/useSort.jsx +++ b/src/hooks/useSort.jsx @@ -41,12 +41,16 @@ const useSort = (props, tableManager) => { rows = [...rows]; rows.sort((a, b) => { const aVal = cols[sortApi.sort.colId].getValue({ + tableManager, value: a[cols[sortApi.sort.colId].field], column: cols[sortApi.sort.colId], + rowData: a, }); const bVal = cols[sortApi.sort.colId].getValue({ + tableManager, value: b[cols[sortApi.sort.colId].field], column: cols[sortApi.sort.colId], + rowData: b, }); if (cols[sortApi.sort.colId].sortable === false) return 0; @@ -60,7 +64,7 @@ const useSort = (props, tableManager) => { return rows; }, - [sortApi.sort, columns] + [sortApi.sort, columns, tableManager] ); sortApi.toggleSort = (colId) => { From 13401f4d3641174c58d5182e9fd0788c1d7c4f30 Mon Sep 17 00:00:00 2001 From: Nadav Shaar Date: Sun, 27 Nov 2022 01:02:11 +0200 Subject: [PATCH 6/7] update --- README.md | 12 +++++++----- package.json | 2 +- src/hooks/useSearch.jsx | 32 +++++++++++++++----------------- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 9994fec..35bf360 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ const columns = [ id: 3, field: 'last_visited', label: 'Last Visited', - sort: ({a, b, isAscending}) => { + sort: ({ a, b, isAscending }) => { let aa = a.split('/').reverse().join(), bb = b.split('/').reverse().join(); return aa < bb ? isAscending ? -1 : 1 : (aa > bb ? isAscending ? 1 : -1 : 0); @@ -122,7 +122,7 @@ const columns = [ id: 4, field: 'test', label: 'Score', - getValue: ({value, column}) => value.x + value.y + getValue: ({ value }) => value.x + value.y } ]; @@ -275,7 +275,7 @@ Each column (except for '[checkbox](#checkbox-column)' column) has support for t className: '', pinned: false, width: '200px', - getValue: ({value, column}) => value, + getValue: ({ tableManager, value, column, rowData }) => value, setValue: ({ value, data, setRow, column }) => { setRow({ ...data, [column.field]: value}) }, minResizeWidth: 70, maxResizeWidth: null, @@ -353,7 +353,9 @@ Each row should have a unique identifier field, which by default is `id`, but it } ``` -**Note:** If a property value is not of type string, you'll have to use the `getValue` function on the column in order to extract the desired value. +**Note:** If a property value is not of type string, or in cases you don't specify a field for the column, you'll have to use the `getValue` function on the column in order to extract the desired value. + +**Signature**: getValue: ({ tableManager, value, column, rowData }) => string **Example:** @@ -363,7 +365,7 @@ Let's say the field's value for a cell is an object: Its `getValue` function for displaying the first and last name as a full name, would be: -`getValue: ({value, column}) => value.firstName + ' ' + value.lastName` +`getValue: ({ value }) => value.firstName + ' ' + value.lastName` The returned value will be used for searching, sorting etc... diff --git a/package.json b/package.json index 90eb3c1..1a8b8c5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nadavshaar/react-grid-table", - "version": "1.1.0", + "version": "1.1.1", "description": "A modular table, based on a CSS grid layout, optimized for customization.", "author": "Nadav Shaar", "license": "MIT", diff --git a/src/hooks/useSearch.jsx b/src/hooks/useSearch.jsx index 1703aee..a8b14a6 100644 --- a/src/hooks/useSearch.jsx +++ b/src/hooks/useSearch.jsx @@ -42,27 +42,25 @@ const useSearch = (props, tableManager) => { Object.keys(item).some((key) => { var cols = columns.filter( (column) => - column.searchable && - (!column.field || column.field === key) + column.searchable && column.field === key ); + let isValid = false; - if (cols.length) { - for (let index = 0; index < cols.length; index++) { - const currentColumn = cols[index]; - const value = currentColumn.getValue({ - tableManager, - value: item[key], - column: currentColumn, - rowData: item, - }); - isValid = currentColumn.search({ - value: value?.toString() || "", - searchText: searchApi.validSearchText, - }); + for (let index = 0; index < cols.length; index++) { + const currentColumn = cols[index]; + const value = currentColumn.getValue({ + tableManager, + value: item[key], + column: currentColumn, + rowData: item, + }); + isValid = currentColumn.search({ + value: value?.toString() || "", + searchText: searchApi.validSearchText, + }); - if (isValid) break; - } + if (isValid) break; } return isValid; From be1d680c5d2fa19b1cb662f03b614e4153c2363d Mon Sep 17 00:00:00 2001 From: Nadav Shaar Date: Sun, 27 Nov 2022 01:15:44 +0200 Subject: [PATCH 7/7] update --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1a8b8c5..35d057a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nadavshaar/react-grid-table", - "version": "1.1.1", + "version": "1.1.2", "description": "A modular table, based on a CSS grid layout, optimized for customization.", "author": "Nadav Shaar", "license": "MIT",