Backpack
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="DataTable">
  <table>
    <thead class="DataTable-head">
      <tr class="DataTable-row">
        <th class="DataTable-head-cell">Title<span class="DataTable-head-count">3</span></th>
        <th class="DataTable-head-cell">Description</th>
      </tr>
    </thead>
    <tbody class="DataTable-body">
      <tr class="DataTable-row">
        <td class="DataTable-body-cell">HELLO WORLD</td>
        <td class="DataTable-body-cell">This is a data table</td>
      </tr>
      <tr class="DataTable-row">
        <td class="DataTable-body-cell">HELLO MOON</td>
        <td class="DataTable-body-cell">This is still a data table</td>
      </tr>
      <tr class="DataTable-row">
        <td class="DataTable-body-cell">HELLO MARS</td>
        <td class="DataTable-body-cell"></td>
      </tr>
    </tbody>
  </table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<%
rows = [
  Record.new("Hello world", "This is a data table"),
  Record.new("Hello moon", "This is still a data table"),
  Record.new("Hello mars", nil),
]
%>
<%= render Components::DataTable.new(rows:) do |table|
  table.column(label: "Title", count: rows.size) do |record|
    record.title.upcase
  end
  table.column(label: "Description", &:text)
end %>

No notes provided.

No params configured.