More guidance on bulk selecting in Tables / Data Grid, and how that interacts with filters and pagination.

[brannytempy]

What would be helpful to the Segment team, is more guidance on bulk selecting and filter patterns and how that interacts with Tables and Data Grids. The filter group pattern is great, if we were surfacing all filter controls in the layout, versus hiding it in a Popover. However, many of our existing filtering patterns are in a Popover-like pattern.

Use Case: Ensure all users are aware of what is being filtered on, and being clear on what is being selected when bulk selecting.

The team would love more guidance on these areas:

• How to show what is being filtered on within the layout, if filters are in a Popover.
• When I bulk select all items, does it select all items not on the current page within Pagination?
• Any recommendations, things to think about, or best practices here.

Thank you!

[TheSisb]

Hey @brannytempy,

Could you share some examples of how Segment currently handles filters please?
We had started a complex filters pattern but it was momentarily de-prioritized. One of the explorations includes a “more filters” button that opens a side modal. Also, for the custom date range example in the filter group pattern we suggest using a Popover, but it isn't a super fleshed out idea.

I think there's an opportunity to improve our filter pattern here based on your findings. I'd recommend coming to an office hours to jam on some ideas.

[shleewhite]

@brannytempy Thanks for coming to office hours today! Just to recap what we talked about, you are going to explore what it looks like to update Segment to use the complex filter pattern and then let us know any gaps.

The only gap you have so far is what happens when you select all when there is pagination - but it seems like the best move is to only select what is currently on the page and have some sort of toast or notification that lets the user know how many are currently selected.

[brannytempy]

Hey @TheSisb ! Here's some examples of how we filter.

Variant 1: Tab Filter

Our most common pattern for when there is only 1 filter criteria

CleanShot.2022-10-21.at.10.45.56.mp4

Variant 2: Filter controls hidden in table header

Filter controls are hidden in the table header. Once filtered, it is unclear what is being filtered.

CleanShot.2022-10-21.at.10.44.00.mp4

Variant 3: Filter controls accessed by dedicated filter/advanced button

---

I REALLY love the advanced filtering pattern, and I think that would be what we'd look for. I'll sign up for office hours to chat through this