Thursday, 11 July 2019

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)



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

No comments:

Post a Comment