question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

A filter text input below the ColumnTitle in Table

See original GitHub issue

What 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:closed
  • Created 6 years ago
  • Reactions:17
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

23reactions
freewindcommented, Apr 6, 2020

I think this issue should be re-opened, since it still has no proper solution or workaround

7reactions
balabukhacommented, May 8, 2018

so is it possible to use filter functionality in several columns?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Filter data in a range or table - Microsoft Support
Select any cell within the range. · Select Data > Filter. Filter button · Select the column header arrow Filter arrow . ·...
Read more >
How to filter on ANTD table when the column is a JSON array ...
I have an antd table with 2 columns which I need to filter on the first, and search text on the second column....
Read more >
Using custom filters in a table - IBM
Use custom filters in a table to set multiple and complex filters. ... In the field below the column title, click Click the...
Read more >
Retool Table Filter Tutorial for SQL Beginners - Bold Tech
This will use the string input you have entered into your text input component to filter the data for results similar to the...
Read more >
Filtering Data - Tabulator
Tabulator allows you to filter the table data by any field in the data set. ... the header below the column title, and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found