MDBDataTable Search not returning results if rendered by ano

web
mobile

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

Milner asked 8 months 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 answered 7 months 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 7 months ago

Glad to help.

Happy coding!


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


Aliaksandr Andrasiuk staff answered 8 months ago

Hi,

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

Best regards.


Clint Milner commented 8 months 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 7 months 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.


harmis answered 2 weeks 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 2 weeks ago

Hi @harmis,

Can you send me part of your code?

Best regards, Konrad.


MANOJ77 answered a week 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 a week 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: React
  • MDB Version: 4.13.0
  • Device: MacBook Pro
  • Browser: Firefox
  • OS: OSX
  • Provided sample code: No
  • Provided link: No