SearchBar + Formatter w/ Objects = empty results

[lovato]

I took a look at this issue: https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/532

But the solution was not clear to me. And I am facing the same problem.

I did:

    const searchProps = {
      searchFormatted: true
    };

Column:

      {
        dataField: "name",
        formatter: titleFormatter,
        text: "Nome do Produto",
        sort: true,
        style: () => {
          return { width: "100%" };
        }
      },

titleFormatter which WORKS:

  function titleFormatter(cell, row) {
    const searchable_data = cell + " " + row.ecommerce;
    return (searchable_data);
  }

titleFormatter which DOESNT WORK:

  function titleFormatter(cell, row) {
    const searchable_data = cell + " " + row.ecommerce;
    return (<div>{searchable_data}</div>);
  }

It simply finds nothing after typing something at search bar. My return object is far complex than this sole DIV. And oddly, it was finding stuff eventually, at a constant pattern. Some strings were found, some not, and some besides finding were not present on the final HTML. That's why I removed my object and replaced with this plain string (and div+string).

Any ideas?

My full titleFormatter, for reference, is (cell contains product name):

function titleFormatter(cell, row) {
  // const searchable_data = cell + " " + row.ecommerce;
  var productpath = "product/" + row.id;
  if (constants.env === "prod") {
    return (
      <div>
        <Link to={productpath}>
          {cell} {row.variant}
        </Link>
        <h6>
          <small className="text-secondary">{row.ecommerce}</small>
        </h6>
      </div>
    );
  } else {
    return (
      <div>
        <Link to={productpath}>
          {cell} {row.variant}
        </Link>
        <h6>
          <small className="text-secondary">
            {row.ecommerce} <br /> {dateFormatter(row.updated_on)} - LP{" "}
            {row.last_price.toFixed(2)} / AP {row.average_price.toFixed(2)}
          </small>
        </h6>
      </div>
    );
  }
}

And a section of my table declaration:

            <ToolkitProvider
              keyField="id"
              data={tableData}
              columns={columns}
              bootstrap4={true}
              search={searchProps}
            >
              {props => (
                <div>
                  <SearchBar {...props.searchProps} {...searchBarProps} />
                  <BootstrapTable

[AllenFang]

@lovato searchFormatted is only good for the simple value, I don't suggest to use it if your return is a complex react element. In your case, you can use column.filterValue

If column.filterValue is still not fit to your requirement, please tag me, I will do some enhancement. thanks!

[carchan1]

If you are like me and really needed a search bar and filterValue wasn't the solution, and hidden column with all the row's data do the trick.