score:3

Accepted answer

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

score:0

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

score:0

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;
}

score:0

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.com", "http://yahoo.com/", "http://ggg.com"]
    },
    {
      url: ["http://xgoogle.com", "http://zyahoo.com/", "http://xggg.com"]
    }
  ];
  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);

Related Query

More Query from same tag