AntD Table - Search textbox to filter/search in all columns

[mbv401920150]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

I previously used Material Table, and the only thing that I miss is the option to search/filter this table because the filter performs in all columns.
https://material-table.com/#/docs/features/search

What does the proposed API look like?

Have the option to enable or disable the search option based on the API (Like the Material UI Table)

[afc163]

You can create your table by composing Table and Input component, or you can try https://github.com/ant-design/pro-table/

[mbv401920150]

Well, the Pro-table doesn't work... but, I created a quick and easy example of how it should work...

If somebody else required inspiration... check out this code:
CodeSandBox

I will need to include more code to validate when the column is a picklist/Combobox/select option instead of plain text... but I will work on that!

[Vishnu-Das]

@mbv401920150 codeSandBox link is not active any more can you send it once more. Thanks

[mbv401920150]

@mbv401920150 codeSandBox link is not active any more can you send it once more. Thanks

Seems that still working, please check again... FYI, this is the link:
https://codesandbox.io/s/basic-usage-ant-design-demo-2swep?file=/index.js

[deep-link]

This would be help you,

<Table loading={loading || dataTableLoading} pagination={{ onChange: (page, recordsPerPage) => this.paginate(page, recordsPerPage), total, defaultPageSize: 10 }} onChange={(pagination,unknown,sortedColumn,action)=>{ /*Do your remort search*/ }} filterMultiple={true} rowSelection={rowSelection} dataSource={data}>

[GokulVertex]

how to ant design table search in function components

[duanduan321]

@mbv401920150 codeSandBox link is not active any more can you send it once more. Thanks

Seems that still working, please check again... FYI, this is the link:
https://codesandbox.io/s/basic-usage-ant-design-demo-2swep?file=/index.js

this works partially, because if you have other values in the object and one of them is not in any column of your table, that is, it is not being used for some reason, and if you search for it, the filter will return true exemple. How to solve this?

[shihababrar]

Those for are looking the solution using react-hook in Functional Component. Here's the codesandbox link:

https://codesandbox.io/s/antdesign-table-search-option-forked-3i1bwb?file=/index.js

[MrUsmanDev]

you can add TextBoxes in each columns like this

const columns = [
{

  title:<span className="dragHandler">Name</span>,
  dataIndex: 'name',
  key: '1',
  sorter: (a, b) => a.name.length - b.name.length,
  sortDirections: ['ascend', 'descend'],
  sortIcon: (sortDir) => {
    if (sortDir.sortOrder === 'ascend') return <CaretUpOutlined />;
    if (sortDir.sortOrder === 'descend') return <CaretDownOutlined />;
    return  <CaretUpOutlined />; // Return null if no sorting direction is set
  },
  children:[
    {
      title: <Input />,
      dataIndex: 'name',
      key: 'name',
    }
  ],
  ...getColumnSearchProps('name'),
  
  
}],