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