A filter text input below the ColumnTitle in Table
See original GitHub issueWhat problem does this feature solve?
Currently, there is a filterDropdown that allows developers to build a custom filter panel, so it takes the user one click per column to filter. It works fine if user only uses the filter functionality on one column, but it becomes annoying when the user wants to filter multiple columns. It would be very handy if there is a filterTextInput below the column title that allows users to type directly.
What does the proposed API look like?
Basically it’s like filterDropdown without the filterDropdownVisible and filterIcon. The text input width should be 100% of the column width, below the column title (so the sorting icon is still next to the column name). It might be a good idea to make filterTextInput and filterDropdown exclusive to each other. Otherwise user would be confused/annoyed.
const columns = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
filterTextInput: (
<Input
ref={ele => this.searchInput = ele}
placeholder="Search name"
value={this.state.searchText}
onChange={this.onInputChange}
onPressEnter={this.onSearch}
/>
),
}, ...}]
return <Table columns={columns} dataSource={this.state.data} />
Issue Analytics
- State:
- Created 6 years ago
- Reactions:17
- Comments:11 (4 by maintainers)
Top GitHub Comments
I think this issue should be re-opened, since it still has no proper solution or workaround
so is it possible to use filter functionality in several columns?