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..35d057a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nadavshaar/react-grid-table", - "version": "1.1.0", + "version": "1.1.2", "description": "A modular table, based on a CSS grid layout, optimized for customization.", "author": "Nadav Shaar", "license": "MIT", 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..8fde150 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, + textValue, + data, + column, + colIndex, + rowIndex, + }; const isFirstEditableCell = useMemo( () => visibleColumns.findIndex( diff --git a/src/hooks/useSearch.jsx b/src/hooks/useSearch.jsx index ee9580e..a8b14a6 100644 --- a/src/hooks/useSearch.jsx +++ b/src/hooks/useSearch.jsx @@ -37,32 +37,40 @@ 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({ + var cols = columns.filter( + (column) => + column.searchable && column.field === key + ); + + let isValid = false; + + for (let index = 0; index < cols.length; index++) { + const currentColumn = cols[index]; + const value = currentColumn.getValue({ + tableManager, value: item[key], - column: cols[key], + column: currentColumn, + rowData: item, }); - return cols[key].search({ + isValid = currentColumn.search({ value: value?.toString() || "", searchText: searchApi.validSearchText, }); + + if (isValid) break; } - return false; + + return isValid; }) ); } 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) => {