react-bootstrap-table2 search is not working on formatted cells

Question

I need help on including the formatted data into the search functionality. For some reason the formatted links are not included in the search

function docFormatter(cell, row, rowIndex) {
  return (
    <a href={${row.doc.doclink}}>
       {row.doc.docname}

    );
  }

const columns = [
  { dataField: "sno", text: "S.No" },
  {
    dataField: "doc",
    text: "Document Name",
    formatter: docFormatter,
    filterValue: docFormatter,
  },
];

I have a customer formatter and that returns a anchor tag with a text. the search is not working on this.

I looked document https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-search.html#search-on-formatted-data

..., {
  dataField: 'type',
  text: 'Job Type',
  formatter: (cell, row) => types[cell],
  filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
}

I did'nt understand how to implement this by referencing this. Please help me on this. Thanks

Answer 1

Here is the working model fixing this issue

function docFormatter(cell, row, rowIndex) {
  return (
    <a href={${row.doc.doclink}}>
       {row.doc.docname}

    );
  }

function docFormatterFilter(cell, row) {
  return cell.docname;
}

const columns = [
  { dataField: "sno", text: "S.No" },
  {
    dataField: "doc",
    text: "Document Name",
    formatter: docFormatter,
    filterValue: (cell, row) => docFormatterFilter(cell, row),
  },
];