Search Api broken

[stychu]

Hey there,
I recently posted abut Search API not working properly. There was a fix to that ticket but the API seems still broken.
From the docs

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:
Let's say the field's value for a cell is an object:
{ ... , fullName: {firstName: 'some-first-name', lastName: 'some-last-name'} },
Its getValue function for displaying the first and last name as a full name, would be:
getValue: ({ value }) => value.firstName + ' ' + value.lastName
The returned value will be used for searching, sorting etc...

1. Whenever I define a column that has NO field, search on this column never ever executes no matter if I have defined getValue or not. To make it searchable Im forced to define a field key and it seems field key doesn't matter and as long as the key exists on the data it will work

	// THIS DOESNT WORK. UNABLE TO SEARCH FOR THE VALUE RETURNED FROM getValue (no field defined)
    id: 'info',
    label: 'Info',
    getValue: ({ rowData }) => {
      return `${rowData.date} ${rowData.createdBy} ${rowData.location}`
    }

	// THIS IS WORKING (field defined)
    id: 'info',
    label: 'Info',
	field: 'date',  
    getValue: ({ rowData }) => {
      return `${rowData.date} ${rowData.createdBy} ${rowData.location}`
    }

2. highlightSearch is broken if you have getValue and custom cellRenderer

    id: 'info',
    label: 'Info',
	field: 'date',  
    getValue: ({ rowData }) => {
      return `${rowData.date} ${rowData.createdBy} ${rowData.location}`
    },
    cellRenderer: ({ data }) => {
      return (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            margin: '10px',
            placeSelf: 'flex-start',
          }}
        >
          <span>{data.date}</span>
          <div>{data.createdBy}</div>
          <div>
             <strong>{location}</strong>
          </div>
        </div>
      )
    },

[NadavShaar]

Hi, can you please share a live example?

[stychu]

@NadavShaar
https://codesandbox.io/s/adoring-greider-picu11

1st table has no field defined on the full name column and its unable to search for waldemar oth word
2nd table has a field on username (it can by any as long as it exists on the data set) and its albe to find record for waldemar oth and highlight is also working
3rd table has custom cellRendered and searching for waldemar highlights only first column and searching for waldemar oth does not highlight the full name column

[NadavShaar]

To get the highlighted value in the 3rd scenario you need to use the value (which is what the getValue function is returning + highlight) from the props instead of concatenating the first and last name again from the data:
https://codesandbox.io/s/unruffled-goldstine-1lb2bv?file=/src/App.js

[stychu]

To get the highlighted value in the 3rd scenario you need to use the value (which is what the getValue function is returning + highlight) from the props instead of concatenating the first and last name again from the data: codesandbox.io/s/unruffled-goldstine-1lb2bv?file=/src/App.js

I see. This is a bit restricting the flexibility of cellrenderer being able to display call however you like. This is simple data structure example in this case. I have more complicated use case where I need to display array of values in a specific way (flexbox column rows with stylings) which wont be possible to do using the value thus I can't use highlight in this case which is sad.

---

I believe your highlight functionality is based on a hook. Maybe something to consider would be having a component that wraps around each column for highlight its value but dunno about how usable it would be and how about performance. Just a suggestion to consider. (something like this mantine highlight component https://mantine.dev/core/highlight/)