Advanced Filters and Column Selector for Data tables

This was an Advanced Filter Pane and Column Selector component I designed for data tables (typically used in the B2B SaaS world). It’s a double-whammy. It allows for a way to select advanced filters beyond simple filters on the data table in a compact way by utilizing a “drawer” type expanding panel on which one can make selections and then close it. It works the same way for the column selector (opening and closing a panel) which allows for customizing which table columns are displayed.

Fully customizable in Omnigraffle.

FUNCTIONAL DESIGN CRITERIA

• Serve as a universal Common Component Library component for data-heavy tables
• Provide constant “Visibility of system status” a UX best practice, i.e., show applied filters
• Applied filters should be easy to remove. A “reset all” is provided to go back to prior “default” display
• Applied columns should be easily selected and provide a reset to a “default view”

INSTRUCTIONS

• On the 3rd Canvas (open view of advanced filters) some layers are turned off which demo the dropdown menu filters. These are just for demo purposes only and you can use your own dropdown with custom content, as you see fit.

• On the 4th Canvas (open column selector view) there is also an optional message to alert users when the limit has been reached for selecting columns.