Class: BetterUi::Table::TableComponent

Inherits:
ApplicationComponent show all
Includes:
Concerns::SortIcons
Defined in:
app/components/better_ui/table/table_component.rb

Overview

A flexible table component supporting two data modes.

**Slot-based mode**: Manually define header, rows, and cells using slots. **Collection-based mode**: Pass a collection and column definitions for automatic rendering.

Mode is implicitly detected: if collection: is provided, collection mode activates.

Examples:

Slot-based usage

<%= render BetterUi::Table::TableComponent.new(variant: :primary, striped: true) do |t| %>
  <% t.with_header do |h| %>
    <% h.with_cell(label: "Name") %>
    <% h.with_cell(label: "Email") %>
  <% end %>
  <% @users.each do |user| %>
    <% t.with_row do |r| %>
      <% r.with_cell { user.name } %>
      <% r.with_cell { user.email } %>
    <% end %>
  <% end %>
<% end %>

Collection-based usage

<%= render BetterUi::Table::TableComponent.new(collection: @users, variant: :primary) do |t| %>
  <% t.with_column(key: :name, label: "Name") %>
  <% t.with_column(key: :email, label: "Email") %>
  <% t.with_column(key: :role, label: "Role") { |user| user.role.humanize } %>
<% end %>

Constant Summary collapse

SIZES = 
{
  xs: { th_padding: "px-2 py-1.5", td_padding: "px-2 py-2", text: "text-xs" },
  sm: { th_padding: "px-3 py-2", td_padding: "px-3 py-2.5", text: "text-sm" },
  md: { th_padding: "px-3 py-3.5", td_padding: "px-3 py-4", text: "text-sm" },
  lg: { th_padding: "px-4 py-4", td_padding: "px-4 py-5", text: "text-base" },
  xl: { th_padding: "px-6 py-5", td_padding: "px-6 py-6", text: "text-lg" }
}.freeze
ROUNDED = 
{
  none: nil,
  sm: "sm:rounded-sm",
  md: "sm:rounded-lg",
  lg: "sm:rounded-xl",
  xl: "sm:rounded-2xl",
  full: "sm:rounded-full"
}.freeze
STYLES = 
%i[default bordered].freeze

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Method Summary collapse

Constructor Details

#initialize(variant: :primary, style: :default, size: :md, rounded: :md, striped: false, hoverable: false, responsive: true, shadow: :sm, caption: nil, collection: nil, row_highlighted: nil, row_html: nil, body_row_partial: nil, header_partial: nil, footer_partial: nil, sort_column: nil, sort_direction: nil, sort_url: nil, sort_html: {}, container_classes: nil, table_classes: nil, header_classes: nil, body_classes: nil, footer_classes: nil, **options) ⇒ TableComponent

Returns a new instance of TableComponent.



81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
# File 'app/components/better_ui/table/table_component.rb', line 81

def initialize(
  variant: :primary,
  style: :default,
  size: :md,
  rounded: :md,
  striped: false,
  hoverable: false,
  responsive: true,
  shadow: :sm,
  caption: nil,
  collection: nil,
  row_highlighted: nil,
  row_html: nil,
  body_row_partial: nil,
  header_partial: nil,
  footer_partial: nil,
  sort_column: nil,
  sort_direction: nil,
  sort_url: nil,
  sort_html: {},
  container_classes: nil,
  table_classes: nil,
  header_classes: nil,
  body_classes: nil,
  footer_classes: nil,
  **options
)
  @variant = validate_variant(variant)
  @style = validate_style(style)
  @size = validate_size(size)
  @rounded = validate_rounded(rounded)
  @striped = striped
  @hoverable = hoverable
  @responsive = responsive
  @shadow = normalize_shadow(shadow)
  @caption = caption
  @collection = collection
  @row_highlighted = row_highlighted
  @row_html = row_html
  @body_row_partial = body_row_partial
  @header_partial = header_partial
  @footer_partial = footer_partial
  @sort_column = sort_column&.to_sym
  @table_sort_direction = sort_direction&.to_sym
  @sort_url = sort_url
  @sort_html = sort_html || {}
  @container_classes = container_classes
  @table_classes = table_classes
  @header_classes = header_classes
  @body_classes = body_classes
  @footer_classes = footer_classes
  @options = options
end

Instance Method Details

#collection_mode? ⇒ Boolean

Returns:

  • (Boolean) 


135
136
137
 
# File 'app/components/better_ui/table/table_component.rb', line 135

def collection_mode?
  !@collection.nil?
end