CODEWITHSUNDEEP
javascriptreactjs
Dmitry
Dmitry

Reputation: 505

ReactTable (ReactJS) - search filtering in row with HTML content does not work

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.com', 'http://yahoo.com/', ...]

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)

Upvotes: 6

Views: 2547

Answers (4)

adel
adel

Reputation: 3507

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

Upvotes: 0

Manish Jangir
Manish Jangir

Reputation: 5437

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

Upvotes: 0

arnonuem
arnonuem

Reputation: 1347

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.

Upvotes: 0

Tarun Lalwani
Tarun Lalwani

Reputation: 146510

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

Upvotes: 4

Related Questions