The Fluxbit::TableComponent is a customizable table component that extends Fluxbit::Component. It allows you to create responsive data tables with various styling options including striped rows, borders, hover effects, and shadows.

To start using the table you can use the default way to call the component:

<%= render Fluxbit::TableComponent.new do |table| %>
  <% table.with_header do |header| %>
    <% header.with_cell { "Column 1" } %>
    <% header.with_cell { "Column 2" } %>
  <% end %>
  
  <% table.with_row do |row| %>
    <% row.with_cell { "Data 1" } %>
    <% row.with_cell { "Data 2" } %>
  <% end %>
<% end %>

or you can use the alias (from the helpers):

<%= fx_table do |table| %>
  <% table.with_header do |header| %>
    <% header.with_cell { "Column 1" } %>
    <% header.with_cell { "Column 2" } %>
  <% end %>
  
  <% table.with_row do |row| %>
    <% row.with_cell { "Data 1" } %>
    <% row.with_cell { "Data 2" } %>
  <% end %>
<% end %>

The result is:

Options

Param	Default	Description
striped:	false	Determines if the table rows should be striped.
bordered:	false	Determines if the table should have borders.
hover:	false	Determines if the table rows should highlight on hover.
shadow:	false	Determines if the table should have a shadow effect.
only_rows:	false	If true, only renders rows without wrapper/table structure (useful for partials).
wrapper_html:	{}	Additional HTML attributes for the table wrapper.
thead_html:	{}	Additional HTML attributes for the table header.
tbody_html:	{}	Additional HTML attributes for the table body.
tfoot_html:	{}	Additional HTML attributes for the table footer.
tr_html:	{}	Additional HTML attributes for the table rows.
cells_html:	{}	Additional HTML attributes for the table cells.
remove_class:	””	Classes to be removed from the default class list.
**props		Additional HTML attributes.

Slots

The component supports the following slots:

• with_header: Add table header rows with columns.
• with_row: Add table body rows with cells. Supports color parameter for row styling.
• with_footer: Add table footer rows with columns.

Each slot provides access to cell methods:

• with_cell: Add individual cells to rows/headers/footers.

Examples

Basic table

Striped rows

Bordered table

Hover effects

Table with shadow

Colored rows

Table with footer

Selected cells

Only rows (for partials)

Adding/Removing classes

Adding other properties

Customization

You can customize the appearance and behavior of this component by passing different initialization parameters and adding custom styles. To do this you can create a initializer file like the:

# /config/initializers/change_table_component_defaults.rb

Fluxbit::Config::TableComponent.striped = true # the default is false
Fluxbit::Config::TableComponent.bordered = true # the default is false
Fluxbit::Config::TableComponent.hover = true # the default is false
Fluxbit::Config::TableComponent.shadow = true # the default is false
Fluxbit::Config::TableComponent.styles[:root][:base] = 'w-full text-sm text-gray-600' # Custom base styling

Dependencies

• Tailwind CSS: Used for styling the component.
• Flowbite: Used for styling.

Styles

<%= html_escape(JSON.pretty_generate(Fluxbit::Config::TableComponent.styles)) %>

References

Flowbite Tables