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

Clint Milner free asked 4 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 initial table view

Searching for 'cats' should return 1 row, but nothing is returned 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'
                }
            ]
        };

Clint Milner free answered 4 years ago


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 4 years ago

Glad to help.

Happy coding!


harmis free commented 4 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={[]} />


Anatoly Kholozyon free answered 3 years ago


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.


MANOJ77 free answered 4 years ago


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 4 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


harmis free answered 4 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


Konrad Stępień staff commented 4 years ago

Hi @harmis,

Can you send me part of your code?

Best regards, Konrad.


Aliaksandr Andrasiuk staff answered 4 years ago


Hi,

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

Best regards.


Clint Milner free commented 4 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


Aliaksandr Andrasiuk staff commented 4 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.



Please insert min. 20 characters.

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