I am using ReactTable and show data from array (array of site url's) as HTML with real links.

Unfortunately search filtering in this column does not work when I use HTML in cell. This is my code for this column:

{
Header: 'URL',
accessor: 'url',
Cell: row => <div>{this.displayCellData(row.value, 'url')}</div>
}

displayCellData is my function that transform Array of urls to HTML string with formatted tags. row.value contain array of urls, like ['', '/', ...]

How I can change this code to make filtering for this column works fine? I tried code like this to transform array to string in accessor to make it searchable, but it does not work:

{
id: 'url',
Header: 'URL',
accessor: row => row.url.toString(),
Cell: row => <div>{this.displayCellData(row.value, 'url')}</div>
}

ADDED SANDBOX for test:

(try to search in column)

I am using ReactTable and show data from array (array of site url's) as HTML with real links.

Unfortunately search filtering in this column does not work when I use HTML in cell. This is my code for this column:

{
Header: 'URL',
accessor: 'url',
Cell: row => <div>{this.displayCellData(row.value, 'url')}</div>
}

displayCellData is my function that transform Array of urls to HTML string with formatted tags. row.value contain array of urls, like ['http://google.', 'http://yahoo./', ...]

How I can change this code to make filtering for this column works fine? I tried code like this to transform array to string in accessor to make it searchable, but it does not work:

{
id: 'url',
Header: 'URL',
accessor: row => row.url.toString(),
Cell: row => <div>{this.displayCellData(row.value, 'url')}</div>
}

ADDED SANDBOX for test:

https://codesandbox.io/s/flamboyant-mountain-ezxmy (try to search in column)

• javascript
• reactjs

• Can you show the table code / filter logic? – stever Commented Jul 8, 2019 at 18:40
• In short - just regular table (you can use any sample table for test, with some HTML formatted data in column), init code: – Dmitry Commented Jul 8, 2019 at 18:43
• <ReactTable data={this.props.data} columns={columns} filterable /> – Dmitry Commented Jul 8, 2019 at 18:43
• Check sandbox here and try to search: codesandbox.io/s/flamboyant-mountain-ezxmy – Dmitry Commented Jul 8, 2019 at 18:51

4 Answers 4

You can change defaultFilterMethod as @arnonuem mentioned. But I would suggest implementing it using the filterMethod at the column level

  const columns = [
    {
      Header: "URL",
      accessor: "url",
      Cell: row => <div>{displayCellData(row.value)}</div>,
      filterMethod: (filter, row) => {
        return row.url.indexOf(filter.value) >=0;
      }
    }
  ];

If you want to search with containing in the array you can use something like below

  const columns = [
    {
      Header: "URL",
      accessor: "url",
      Cell: row => <div>{displayCellData(row.value)}</div>,
      filterMethod: (filter, row) => {
        return row.url.findIndex(item => item.indexOf(filter.value) >= 0) >= 0;
      }
    }
  ];

Updated sandbox is below

https://codesandbox.io/s/interesting-rubin-thdwn

https://codesandbox.io/s/reverent-banach-9l31m

You can overwrite the defaultFilterMethod to customize the filter behaviour.

<div className="App">
  <ReactTable
    data={data}
    columns={columns}
    filterable
    defaultFilterMethod={(filter, row) => { return row[filter.id].indexOf( filter.value ) > -1; }}
  />
</div>

When you now type http://google. it will filter all but the first row based on an exact match. If you need different filter logic then feel free to edit the defaultFilterMethod. Currently it's working with exact matches. Just make sure to return a boolean value.

Add a custom filter method on your respective column like this:

filterMethod: (filter, row) => {
   if (row.url.findIndex(element => element.includes(filter.value)) > -1) {
      return true;
   }
   return false;
}

you can use find method in your defaultFilterMethod props with the includes function:

import React from "react";
import ReactDOM from "react-dom";
import "react-table/react-table.css";
import ReactTable from "react-table";

import "./styles.css";

function App() {
  const data = [
    {
      url: ["http://google.", "http://yahoo./", "http://ggg."]
    },
    {
      url: ["http://xgoogle.", "http://zyahoo./", "http://xggg."]
    }
  ];
  const columns = [
    {
      Header: "URL",
      accessor: "url",
      Cell: row =>
        row.row.url.map((url, key) => (
          <div>
            <a href={url} key={key} target="_blank" rel="noopener noreferrer">
              {url}
            </a>
          </div>
        ))
    }
  ];
  return (
    <div className="App">
      <ReactTable
        data={data}
        columns={columns}
        filterable
        defaultFilterMethod={(filter, row) => {

            return row[filter.id].find(el => el.includes(filter.value));
          }
        }
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);