Merge pull request #108 from NadavShaar/issue-#107

Author: NadavShaar

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...
 

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",

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 (
-        <div {...additionalProps} className={classNames} title={value}>
+        <div {...additionalProps} className={classNames} title={textValue}>
             {value}
         </div>
     );

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(

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;

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) => {