Class: BulmaPhlex::Table

Inherits:
Base
  • Object
show all
Defined in:
lib/bulma_phlex/table.rb

Overview

Renders the Bulma table component.

Displays a collection of records in rows and columns. Columns are defined via the column, date_column, and conditional_icon builder methods. Supports Bulma style options (bordered, striped, hoverable) and layout options (narrow, fullwidth). An optional pagination control can be added to the table footer via the paginate method.

The tr elements can be customized with the row method, which accepts static HTML attributes and/or a block that generates dynamic attributes based on the row data.

To make the table responsive, use the hidden argument to hide certain columns on smaller screens. See the Bulma documentation for the full list, but the most common options are hidden: "mobile" and hidden: "touch".

The table supports any additional HTML attributes on the <table> element, such as id or data-* attributes, via the **html_attributes argument in the constructor.

Example

users = User.all

render BulmaPhlex::Table.new(users) do |table|
  table.row(class: "has-background-light") { |user| { id: "user-row-#{user.id}" } }
  table.column("Name", &:full_name)
  table.column("Email", hidden: "touch", &:email)
  table.date_column("Joined", hidden: "mobile", &:created_at, format: "%B %d, %Y")
  table.conditional_icon("Admin?", &:admin?)
  table.column "Actions" do |user|
    link_to "Edit", edit_user_path(user), class: "button is-small"
  end
end

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(rows, bordered: false, striped: false, narrow: false, hoverable: false, fullwidth: false, **html_attributes) ⇒ Table

Returns a new instance of Table.



66
67
68
69
70
71
72
73
74
75
76
77
 
# File 'lib/bulma_phlex/table.rb', line 66

def initialize(rows,
               bordered: false,
               striped: false,
               narrow: false,
               hoverable: false,
               fullwidth: false,
               **html_attributes)
  @rows = rows
  @table_classes = self.class.classes_for(bordered:, striped:, narrow:, hoverable:, fullwidth:)
  @html_attributes = html_attributes
  @columns = []
end

Class Method Details

.classes_for(bordered: false, striped: false, narrow: false, hoverable: false, fullwidth: false) ⇒ Object

Returns an array of CSS classes for the table based on the provided options.



37
38
39
40
41
42
43
44
45
 
# File 'lib/bulma_phlex/table.rb', line 37

def self.classes_for(bordered: false, striped: false, narrow: false, hoverable: false, fullwidth: false)
  classes = ["table"]
  classes << "is-bordered" if bordered
  classes << "is-striped" if striped
  classes << "is-narrow" if narrow
  classes << "is-hoverable" if hoverable
  classes << "is-fullwidth" if fullwidth
  classes
end

.new(rows, bordered: false, striped: false, narrow: false, hoverable: false, fullwidth: false, **html_attributes) ⇒ Object

Parameters

  • rows — The collection of records to display in the table
  • bordered — If true, adds borders to the table
  • striped — If true, adds zebra-striping to the table rows
  • narrow — If true, makes the table more compact
  • hoverable — If true, adds a hover effect to the table rows
  • fullwidth — If true, makes the table take up the full width of its container
  • **html_attributes — Additional HTML attributes for the <table> element


56
57
58
59
60
61
62
63
64
 
# File 'lib/bulma_phlex/table.rb', line 56

def self.new(rows,
             bordered: false,
             striped: false,
             narrow: false,
             hoverable: false,
             fullwidth: false,
             **html_attributes)
  super
end

Instance Method Details

#column(header, hidden: false, **html_attributes, &content) ⇒ Object

Adds a column to the table. Can be called multiple times to define all columns.

  • header — The column header text
  • **html_attributes — Additional HTML attributes for each <td> cell in this column

Expects a block that receives each row object and returns the cell content.



110
111
112
 
# File 'lib/bulma_phlex/table.rb', line 110

def column(header, hidden: false, **html_attributes, &content)
  @columns << { header:, hidden:, html_attributes:, content: }
end

#conditional_icon(header, hidden: false, icon_class: "fas fa-check", **html_attributes, &content) ⇒ Object

Adds a column that displays an icon when the block returns a truthy value. Can be called multiple times.

  • header — The column header text
  • icon_class — The CSS class(es) for the icon element (default: "fas fa-check")
  • **html_attributes — Additional HTML attributes for each <td> cell in this column

Expects a block that receives each row object and returns a truthy or falsy value.



134
135
136
137
138
139
140
 
# File 'lib/bulma_phlex/table.rb', line 134

def conditional_icon(header, hidden: false, icon_class: "fas fa-check", **html_attributes, &content)
  html_attributes[:class] = [html_attributes[:class], "has-text-centered"].compact.join(" ")

  column(header, hidden:, **html_attributes) do |row|
    Icon(icon_class) if content.call(row)
  end
end

#date_column(header, hidden: false, format: "%Y-%m-%d", **html_attributes, &content) ⇒ Object

Adds a date-formatted column to the table. Can be called multiple times.

  • header — The column header text
  • format — A strftime format string for the date value (default: "%Y-%m-%d")
  • **html_attributes — Additional HTML attributes for each <td> cell in this column

Expects a block that receives each row object and returns a Date or Time value.



121
122
123
124
125
 
# File 'lib/bulma_phlex/table.rb', line 121

def date_column(header, hidden: false, format: "%Y-%m-%d", **html_attributes, &content)
  column(header, hidden:, **html_attributes) do |row|
    content.call(row)&.strftime(format)
  end
end

#paginate(&path_builder) ⇒ Object

Adds a pagination control to the table footer.

Expects a block used as the path builder for pagination links. The block receives a page number and should return the URL for that page.



146
147
148
 
# File 'lib/bulma_phlex/table.rb', line 146

def paginate(&path_builder)
  @path_builder = path_builder
end

#row(**html_attributes, &attribute_builder) ⇒ Object 



99
100
101
102
 
# File 'lib/bulma_phlex/table.rb', line 99

def row(**html_attributes, &attribute_builder)
  @row_attributes = html_attributes
  @row_attribute_builder = attribute_builder
end

#view_template ⇒ Object 



79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
# File 'lib/bulma_phlex/table.rb', line 79

def view_template(&)
  vanish(&)

  table(**mix({ class: @table_classes }, @html_attributes)) do
    thead do
      @columns.each { |column| table_header(column) }
    end

    tbody do
      @rows.each do |row|
        tr(**table_row_html_attributes(row)) do
          @columns.each { |column| table_data_cell(column, row) }
        end
      end
    end

    pagination
  end
end