Class: PhlexKit::DataTableColumnToggle

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/phlex_kit/data_table/data_table_column_toggle.rb

Overview

"Columns" dropdown of checkboxes toggling cells that carry a matching data-column attribute. columns: is an array of { key:, label: } hashes. See data_table.rb.

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(columns:, **attrs) ⇒ DataTableColumnToggle

Returns a new instance of DataTableColumnToggle.



6
7
8
9
 
# File 'app/components/phlex_kit/data_table/data_table_column_toggle.rb', line 6

def initialize(columns:, **attrs)
  @columns = columns
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
# File 'app/components/phlex_kit/data_table/data_table_column_toggle.rb', line 11

def view_template
  div(**mix({
    class: "pk-data-table-column-toggle",
    data: { controller: "phlex-kit--data-table-column-visibility" }
  }, @attrs)) do
    render DropdownMenu.new do
      render DropdownMenuTrigger.new do
        render Button.new(variant: :outline, size: :sm) do
          plain "Columns"
          chevron_icon
        end
      end
      render DropdownMenuContent.new do
        @columns.each do |col|
          # A real menu row (role="menuitemcheckbox" + aria-checked, arrow-
          # navigable) — plain <label>s directly inside role="menu" are
          # invalid ARIA. The change event bubbles from the hidden checkbox
          # to this row, where our toggle action picks it up.
          render DropdownMenuCheckboxItem.new(
            # visible: false starts the menu row unchecked for a column
            # the host server-renders hidden (pk-hidden on its cells) —
            # checked: true hardcoded meant the two could never agree.
            checked: col.fetch(:visible, true),
            data: {
              column_key: col[:key].to_s,
              action: "change->phlex-kit--data-table-column-visibility#toggle"
            }
          ) { plain col[:label] }
        end
      end
    end
  end
end