Data lists for UI in Rails

Data lists

The data list component provides a structured way to display a list of data, where each item has a label and a value.

Demos

Preview

Code

Label A

Value A

Label B

Value B

Label C

Value C

Copy

<%= render "shared/components/data_list/data_list",
            border_top_and_bottom: true do %>
  <%= render "shared/components/data_list/data_list_item",
              label: "Label A",
              value: "Value A" %>
  <%= render "shared/components/data_list/data_list_item",
              label: "Label B",
              value: "Value B" %>
  <%= render "shared/components/data_list/data_list_item",
              label: "Label C",
              value: "Value C" %>
<% end %>

Simple data list

Preview

Code

Label A

Description for Label A

Value A

Description for Value A

Label B

Description for Label B

Value B

Description for Value B

Label C

Description for Label C

Value C

Description for Value C

Copy

<%= render "shared/components/data_list/data_list",
            border_top_and_bottom: true do %>
  <%= render "shared/components/data_list/data_list_item",
              label: "Label A",
              label_description: "Description for Label A",
              value: "Value A",
              value_description: "Description for Value A" %>
  <%= render "shared/components/data_list/data_list_item",
              label: "Label B",
              label_description: "Description for Label B",
              value: "Value B" %>
  <%= render "shared/components/data_list/data_list_item",
              label: "Label C",
              label_description: "Description for Label C",
              value: "Value C" %>
<% end %>

Data list with descriptions

Installation

Copy

rails g instrumental:data_list

To insert a component into a view:

Copy

rails g instrumental:data_list:insert

Customization

Find all of your customization options (via local variables) in these files:

app/views/shared/components/_data_list.html.erb
app/views/shared/components/data_list/_data_list_item.html.erb

I created Instrumental Components to make designing and building professional apps with Ruby on Rails easy, fast, and fun. I use it on all of my projects and I hope it helps you build something great.

Brian Casel

Creator of Instrumental Components

Learn more Send me a question or request