MDBDataTable Search not returning results if rendered by ano

Topic: MDBDataTable Search not returning results if rendered by another Component

Clint Milner free asked 5 years ago

Expected behavior: Searching for text that is being rendered by a component should be displayed during a search.

Actual behavior: I've noticed that if a cell's data is returned from another component, it is not being returned by search. This is the case whether JSX is returned, or even just returning the string value directly back still results in the record not being returned.

Thanks in advance.

Initial table view

Searching for 'cats' should return 1 row, but nothing is returned

Code

const My_Component = ({value}) => {
            return <a href={`https://www.google.com/?query=${value}`}>{value}</a>;
        },
        data = {
            columns: [
                {
                    label: 'Name',
                    field: 'name'
                },
                {
                    label: 'Search',
                    field: 'search'
                }
            ],
            rows: [
                {
                    name: 'Ashton Cox',
                    search: <My_Component value={'dogs'} />
                },
                {
                    name: 'Cedric Kelly',
                    search: <My_Component value={'cats'} />
                },
                {
                    name: 'Airi Satou',
                    search: 'No Search'
                }
            ]
        };

Add comment

Clint Milner free answered 5 years ago

1 0 Best answer

Update

As of v4.15.0, this is working well using the <code>searchValue</code> prop on the component that renders the data inside the <code><td></code>, and initilizing the <code><MDBDataTable sortRows={[]} /></code> component with the <code>sortRows</code> prop.

Big shoutout to the team for a quick turnaround on this feature! Thanks!

Updated Code:

<pre class="prettyprint"><code>const My_Component = ({searchValue}) => {
 return <a href={`https://www.google.com/?query=${searchValue}`}>{searchValue}</a>;
 },
 data = {
 columns: [
 {
 label: 'Name',
 field: 'name'
 },
 {
 label: 'Search',
 field: 'search'
 }
 ],
 rows: [
 {
 name: 'Ashton Cox',
 search: <My_Component searchValue={'dogs'} />
 },
 {
 name: 'Cedric Kelly',
 search: <My_Component searchValue={'cats'} />
 },
 {
 name: 'Airi Satou',
 search: 'No Search'
 }
 ]
 };
</code></pre>

Please insert min. 20 characters.

Update

As of v4.15.0, this is working well using the searchValue prop on the component that renders the data inside the <td>, and initilizing the <MDBDataTable sortRows={[]} /> component with the sortRows prop.

Big shoutout to the team for a quick turnaround on this feature! Thanks!

Updated Code:

const My_Component = ({searchValue}) => {
        return <a href={`https://www.google.com/?query=${searchValue}`}>{searchValue}</a>;
    },
    data = {
        columns: [
            {
                label: 'Name',
                field: 'name'
            },
            {
                label: 'Search',
                field: 'search'
            }
        ],
        rows: [
            {
                name: 'Ashton Cox',
                search: <My_Component searchValue={'dogs'} />
            },
            {
                name: 'Cedric Kelly',
                search: <My_Component searchValue={'cats'} />
            },
            {
                name: 'Airi Satou',
                search: 'No Search'
            }
        ]
    };

Aliaksandr Andrasiuk staff commented 5 years ago

Glad to help.

Happy coding!

harmis free commented 5 years ago

i used above code and initilizing the component with the sortRows prop. but when i search the value then record not return. my version is 4.23.0 for MDB

<MDBDataTable className="cstm-data-tbl" responsive hover data={data} sortRows={[]} />

Add comment

Anatoly Kholozyon free answered 4 years ago

0 0 Best answer

Are there any updates about this issue? I use v4.25.0 as a part of Veltrix admin panel and not able to search through the component. https://share.getcloudapp.com/jkuZvDyR - row with icon is a custom component https://share.getcloudapp.com/YEuoryAO - after trying to search I have no results with the custom component.

Add comment

MANOJ77 free answered 5 years ago

0 0 Best answer

Can you give example for loading data from the API and sorting and searching the same. Data is loaded for me but sort and search happening.

Konrad Stępień staff commented 5 years ago

Hi @MANOJ77,

Can you explain to me again what things you expect or make a new support? Also please send me a snippet.

Best, Konrad

Add comment

harmis free answered 5 years ago

0 0 Best answer

i used above code and initilizing the component with the sortRows prop. but when i search the value then record not return. my version is 4.23.0 for MDB

Konrad Stępień staff commented 5 years ago

Hi @harmis,

Can you send me part of your code?

Best regards, Konrad.

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

Hi,

It's an interesting case. We will consider it.

Best regards.

Clint Milner free commented 5 years ago

My company and I would integrate mdbreact + pro subscription immediatly if this could be remedied. I'm converting a jQuery + DataTables --> React + something for large management application, so there are lots of data inside of tables, and these data items link to other pages inside the application. I've tried lots of React libraries, and we're currently using Griddle, but that doesn't filter correctly either.

Even if a custom data attribute with the value to be filtered was required, I'd still be very happy because your API and mark-up that is generated is the best I've found.

What is the best way to raise this as an FR, and/or track this issue to see if it makes it into the product?

Thanks for your reply

Please insert min. 15 characters.

Aliaksandr Andrasiuk staff commented 5 years ago

Hi,

Our team will consider it. The best way to check is that issue fixed is to check our new releases changelogs. We release the new version of MDB React every two weekends on Mondays. Next release will be on Monday 13. Here is the link to the changelog: https://mdbootstrap.com/docs/react/changelog/

Best regards.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.13.0
Device: MacBook Pro
Browser: Firefox
OS: OSX
Provided sample code: No
Provided link: No

Clint Milner

41Support score
2Questions 2Answers 1Snippets