Multi-Select Across Different Filters
Demonstration of maintaining selection state when switching between filters
💡
Use Case: You need to delete/export multiple items from different filter states.
- Select items from "Active Users" filter
- Switch to "Archived Users" filter
- Select more items from archived list
- Your previous selections are preserved
- View all selected items in the selection panel
Key Features:
- Compact Summary Bar: Shows selection count and actions without pushing content down
- Expandable Details: Click "Show Details" to see full list of selected items
- Visual Indicators: Selected rows highlighted in current table view
- Filter Badges: Shows count of selections per filter tab
- Cross-Filter Selection: Selections preserved when switching between filters
Filter by Status
Active Users 3 items
| Actions | Name | Status | Last Login |
|---|
Implementation Notes
Visual Pattern Components
-
Selection Summary Bar
- Appears between filters and data table when items are selected
- Shows selection count and bulk action buttons (Delete, Export, Clear)
- "Show Details" button to expand full list (collapsed by default)
- Prevents unwanted content shifting when checking items
- Uses
pa-alert pa-alert--primaryfor visual consistency
-
Selection Details Table (Expandable)
- Hidden by default, user can expand via "Show Details" button
- Shows full table of all selected items from all filters
- Includes "Source Filter" column showing where each item was selected
- Individual remove buttons per row for granular control
- Toggle button changes to "Hide Details" when expanded
-
Filter Tab Badges
- Each filter tab shows count of selected items from that filter
- Example: "Active Users (2)" means 2 items selected from Active filter
- Helps users track selections across different views
- Updates in real-time as selections change
-
Row Highlighting
- Selected rows in current table view have distinct background color
- Uses subtle blue accent to indicate selection state
- Checkboxes remain checked when switching filters
- Provides immediate visual feedback
-
Bulk Selection Controls
- "Select All Visible" - checks all rows in current filter view
- "Deselect All Visible" - unchecks visible rows (preserves hidden selections)
- Header checkbox with indeterminate state support
Data Management
For framework implementations (React/Vue/Svelte):
- Maintain a global selection Set/Map keyed by item ID
- Store full item data in selection (for display in panel)
- Store source filter label with each selection
- When rendering table, check if row ID exists in selection Set
- Update counts in real-time as selections change
⚠️
Important: This demo uses simple JavaScript for visualization only.
In production, use proper state management (Svelte stores, Vue composables, React context/hooks)
to maintain selection state across component re-renders.