CODEWITHSUNDEEP
reactjsmui-datatable
Ricky Orlando Napitupulu
Ricky Orlando Napitupulu

Reputation: 516

MUI DataTables Search on hidden column

hello im using mui datatables (https://github.com/gregnb/mui-datatables) on my react app, i have trouble when i am trying to search on hidden column, my code below work just fine but when im trying to search city value (column default hidde) it return nothing meanwhile the text is shown on the column (address), theres two case here i am combining the column wrongly or i can use my recent code but with some search function tweak, please let me know how to make this work, thanks.

enter image description here

Upvotes: -1

Views: 3643

Answers (2)

Patrick Baker
Patrick Baker

Reputation: 21

FWIW 6 months+ later, I just ran into something similar...

There's an example on how to do this in the examples folder that should work in unison with "display:false, viewColumns:false".

https://github.com/gregnb/mui-datatables/blob/master/examples/customize-search/index.js

MUIDataTable columns:

...
{
   "name":"hiddenCity",
   "options":{
      "filter":false,
      "sort":false,
      "display":false,
      "viewColumns":false
   }
},
{
   "name":"hiddenState",
   "options":{
      "filter":false,
      "sort":false,
      "display":false,
      "viewColumns":false
   }
},
...etc...

MUIDataTable options:

let options = {
...lots of options...,
            // Search ALL columns, including hidden fields that use display:false, viewColumns:false...
            customSearch: (searchQuery, currentRow, columns) => {
                let isFound = false;
                currentRow.forEach(col => {
                  if (col && col.toString().indexOf(searchQuery) >= 0) {
                    isFound = true;
                  }
                });
                return isFound;
            },
...more options...
}

Upvotes: 2

Matías Bustos
Matías Bustos

Reputation: 388

couple of days ago I found myself solving the same issue. As per 3.7.1 release, the search code relies in this conditional, that means, no matching for hidden or excluded columns. But hey, I came out with a simple solution:

If you provide a custom search function in the options object, you will be able to access hidden and excluded column for the matching. Of course, you need to provide a search function capable of matching text and objects. In this case I rely on the super-search library.

const options = {
  customSearch: (searchText, row) =>
    superSearch(searchText.toLowerCase(), { ...row }).numberOfMatches > 0
};

See an example in this sandbox I have just created:

https://codesandbox.io/s/muidatatables-example-custom-search-function-0pm9o?file=/index.js

That will override the embedded search function in MUI-datatables.

Upvotes: 1

Related Questions