How to Add Global Search in Ant Design Table using ReactJS | Antd Table Search in All Pages

#reactjs #antd #table #search
In this video tutorial I have explained how to add Global Search in Ant Design Table using ReactJS

This video focuses on
- How to add Global Search in Ant Design Table using ReactJS
- How to populate antd table with sample data
- How to filter antd table data using Global Search
- How to add search input to filter antd table data
- How to search antd table all pages using single global search field
- How to search antd table whole datasource from outside global search field searched text
- How to implement Antd Table Search in All Pages
- How to implement onFilter function of antd table columns
- How to use filteredValue to search the whole table record

For details on how to use Ant Design Table, please go through following video.

Happy Coding!

[whatisthisyogesh]

I am getting value in the onFilter as “” every time . I checked putting a debugger just below where I am setting the variable searchedText and it is getting updated fine as per the user input . But when I console logged the searchedText inside onFilter it is becoming “” again ..
so the filter is not working because of it

[CherryBomb-]

@CodeWithAamir thanks a lot, this was really helpful! although I have a question. Why the "onFilter" function is declared only in one of the columns with an "or" logical operator instead of beign declared in each of the corresponding columns? I saw you changed the "record.name" to "record.age" in order to search in the age column as well but that was done in the "name" column declaration instead of the "age" column itself. Thanks in advance!

[yogeshsarmalkar]

@CodeWithAamir can we create a common component and use it across web pages where tables are present ? Or do we need to use Input.Search in all pages where tables are present ?

[furqanzamir]

Hi, Good tutorial but one issue global search its working fine but when i added column search filter its not working just like age filter with check boxes with ag 30 or age 40 search, so its not working showing error "Warning: [antd: Table] Columns should all contain `filteredValue` or not contain `filteredValue`."

[floods]

For the search on age and address part I get record has no type age/address

[_shobhitagrawal]

On adding filteredValue while screen is going blank
Please help me with this

[hardwired]

How to create pagination per page slice sir, thank you for content

[ayesha]

getting error 'setSearchedText' is not defined
'searchedText' is not defined

[ameralkhodary]

i got this warning (Columns should all contain `filteredValue` or not contain `filteredValue` )=> this is when i use filteredValue in 1 column

[nguyentienuc]

how to add Global Sorter and filter in Ant Design Table using ReactJS