Selección múltiple en distintos filtros

Demonstration of maintaining selection state when switching between filters

Funciones principales:

  • 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

Filtrar por estado

Active Users

3 items
Acciones NombreCorreo electrónicoEstadoÚltimo inicio de sesión
John Doe john@example.com Active 2025-10-13
Jane Smith jane@example.com Active 2025-10-12
Mike Johnson mike@example.com Active 2025-10-11

Notas de implementación

Componentes de patrones visuales
  1. 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)
    • Uses pa-alert pa-alert--primary for visual consistency
  2. 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
  3. Filter Tab Badges
    • Each filter tab shows count of selected items from that filter
    • Updates in real-time as selections change
  4. Row Highlighting
    • Selected rows have distinct background via pa-table__row--selected
    • Checkboxes remain checked when switching filters
  5. 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
Implementación de LiveView

This demo uses server-side state management via LiveView assigns:

  • Selection stored as a Map keyed by item ID with item data and source filter
  • Filter switching preserves all selections across filter states
  • All UI updates happen via standard LiveView event handling

John Doe

Administrator

Configuración

Press Ctrl+K to preview the palette.
Sidebar
Display
Profile Panel
Body text size. All elements scale proportionally.
Comandos
🚀
Desplegar a entorno
Desplegar una rama a un entorno
g d
👤
Asignar a usuario
Asignar un elemento a un miembro del equipo
g a
🧭
Ir a la página
Navegar a una página
g g
🎨
Cambiar tema
Cambiar el tema visual
g t
Buscar
📦
Productos
Buscar productos
:products
📋
Pedidos
Buscar pedidos
:orders
👥
Usuarios
Buscar usuarios
:users
🧾
Facturas
Buscar facturas
:invoices