Topic: DataTable search trough the component doesn't work
Anatoly Kholozyon asked 4 years ago
Hello MDBootstrap Team,
You already have created an issue like this one. Link: https://mdbootstrap.com/support/react/mdbdatatable-search-not-returning-results-if-rendered-by-another-component/
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: transfers.map(transfer => ({
date: transfer.date,
player: <PlayerTable searchValue={transfer.player.nickname} img={transfer.player.photo} country={transfer.player.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(transfer.id)
}))
};
PlayerTable Component:
return (
<React.Fragment>
<div className="table-player">
<div className="table-player__image">
<img src={this.props.img} alt="" />
</div>
<h2><a href="">{this.props.searchValue}</a></h2>
{isCountry ? <i className="flag" style={{ backgroundImage: `url(${this.props.country})` }} ></i> : ''}
</div>
</React.Fragment>
);
Datatable initialization:
<MDBDataTable
paginationLabel={[
<MDBIcon className="prev" />,
<MDBIcon className="next" />
]}
sortable={false}
responsive
data={data}
displayEntries={false}
entries={3}
noBottomColumns
searchLabel="Type nickname or team name"
sortRows={["player"]}
noRecordsFoundLabel="No results"
infoLabel={["Showing", "to", "of", "entries"]}
className="main-table transfers"
sortRows={['player']}
/>
Init view: https://share.getcloudapp.com/mXuyOqZL
Trying to search using info from the first row of Player column: https://share.getcloudapp.com/v1u28r6Z
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.25.0
- Device: MacBook Pro 2015
- Browser: Local
- OS: MacOS Mojave
- Provided sample code: No
- Provided link: Yes
Piotr Glejzer staff commented 4 years ago
Did you see this example?
https://mdbootstrap.com/docs/react/tables/datatables/#with-soriting-component
Anatoly Kholozyon commented 4 years 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 years ago
We will think more about adding this feature to the free version of datatable.