Class: BulmaPhlex::Table

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

Overview

Renders the [Bulma table](bulma.io/documentation/elements/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](bulma.io/documentation/helpers/visibility-helpers/#hide) 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