DataTable search trough the component doesn't work

Topic: DataTable search trough the component doesn't work

Anatoly Kholozyon asked 4 months ago

Hello MDBootstrap Team,

You already have created an issue like this one. Link:

But I wasn't successful to use those recommendations to make it work.

I use mdbreact v4.25.0.

Expected behavior Search in Datable should work through the component

Actual behavior No results when I'm trying to search through the component but it works for fields with 'string' columns.

Resources (screenshots, code snippets etc.)

Data initialization

const data = {
  columns: [
      label: "Date",
      field: "date",
      width: 150
      label: "Player",
      field: "player",
      width: 100
      label: "Previous Status",
      field: "prev_status",
      width: 150
      label: "New Status",
      field: "new_status",
      width: 100
  rows: => ({
    player: <PlayerTable searchValue={transfer.player.nickname} img={} country={}/>,
    prev_status: <TeamTable teamLogo={transfer.current_status.teamLogo} team={transfer.current_status.teamName}/>,
    new_status: <TeamTable teamLogo={transfer.new_status.teamLogo} team={transfer.new_status.teamName}/>,
    clickEvent: () => this.rowClick(

PlayerTable Component:

return (
      <div className="table-player">
        <div className="table-player__image">
          <img src={this.props.img} alt="" />
        <h2><a href="">{this.props.searchValue}</a></h2>
        {isCountry ? <i className="flag" style={{ backgroundImage: `url(${})` }} ></i> : ''}

Datatable initialization:

          <MDBIcon className="prev" />,
          <MDBIcon className="next" />
        searchLabel="Type nickname or team name"
        noRecordsFoundLabel="No results"
        infoLabel={["Showing", "to", "of", "entries"]}
        className="main-table transfers"

Init view:

Trying to search using info from the first row of Player column:

Piotr Glejzer staff commented 4 months ago

Did you see this example?

Anatoly Kholozyon commented 4 months ago

I tried that solution. It doesn't work for me. Maybe, because I don't have Premium MDB, I'm not sure, as MDB was a part of my theme which I've bought.

Piotr Glejzer staff commented 4 months ago

We will think more about adding this feature to the free version of datatable.

Please insert min. 20 characters.