Provide callbacks for filter/search capabilities on table column

[jackcmeyer]

🚀 Feature Proposal

There should be the ability to filter/search for data by column. The Table component will not actually be responsible for doing the filtering, but rather expose callback such as onFilterChange that will include all filter criteria being currently applied to the table.

When a filter is chosen, there should be a badge or label that gets added above the table that indicates that a filter is being applied. The badge should have a close button in it, that when clicked, removes the filter criteria.

For columns that have a defined list of values (such as an enum like diagnosis status), the filter list should be static and not allow for any value to be typed in.

For columns that don't have as nice of structured data (such as patient name), the filter box should be a text field that allows any value to be entered.

Technical Notes

• table should have some sort of callback that reports back what filter criteria is being applied
• there should be an icon next to the header that looks like https://fontawesome.com/icons/filter. When the icon is clicked it should render small popup that allows for the user to enter criteria

[jnolan97]

Hey everyone. Just wondering if this still needs help? If so I would love to contribute. Thanks.

[matteovivona]

Sure @jnolan97! Shall I give it to you?

[jnolan97]

Sure that would be great!

[gcrt0701]

Hi @blestab @fox1t @tehkapa @jackcmeyer @morrme, could I please take this on?

[matteovivona]

@jnolan97 have you done anything yet? @gcrt0701, I'll wait for @jnolan97 feedback. Eventually, it can assign to you

[jnolan97]

@tehkapa yeah I almost have it done. Sorry I didnt respond sooner. Thanks.

[morrme]

@jnolan97 Just checking in: How is this one going?

[henryliang2]

@tehkapa @jackcmeyer Hi, I saw this issue has been here for over a year without much progress. I'm very green with TS and new to open source dev in general, but could I take this on?

I played around with it. Is this kind of what we're after? (the styling and positioning needs adjustment obviously. I'll probably move it above the table. Oh and this is a button, I'll use a badge.)

Screen.Recording.2021-11-14.at.6.03.26.PM.mov

[matteovivona]

@henryliang2 Sure!

[henryliang2]

Hi @tehkapa , is there a consideration to upgrade the version of react-bootstrap ? The one listed in package.json is ~1.0.0-beta.16 while the current release version is 2.0.0. I believe this may be affecting the rendering of some components as, if you look in Storybook, the Badge component (and the Pill component which relies on Badge) is not rendering correctly. The requirements written by @jackcmeyer request a Badge to be used, so I'm currently being impeded at this step. In addition, the documentation for react-bootstrap doesn't really apply to our version since a lot of features do not exist/operate different. Alternatively, I could find another component that is similar.

Thanks!

[matteovivona]

@henryliang2 unfortunately there are some tasks to do. as you can see the update creates problems #896

[henryliang2]

Hi @tehkapa , I see, thanks. I'll make do with a button for now.

Do I need to be added as a contributor? Can't seem to push a commit on a new branch.

[matteovivona]

Hi @tehkapa , I see, thanks. I'll make do with a button for now.

Do I need to be added as a contributor? Can't seem to push a commit on a new branch.

no, you simply have to create a new PR/branch with the updated dependency

[sidddev7]

Hi @tehkapa , is this issue still open.

[matteovivona]

Hi @tehkapa , is this issue still open.

I think so. Unfortunately, I don't have much visibility on the project anymore

[sidddev7]

Ok @tehkapa, thankyou for information,
Can anyone confirm the status of this issue,
@jackcmeyer @fox1t