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">1. HELLO WORLD</td>
        <td class="DataTable-body-cell">This is a data table</td>
      </tr>
      <tr class="DataTable-row">
        <td class="DataTable-body-cell">2. 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">3. HELLO MARS</td>
        <td class="DataTable-body-cell">No description</td>
      </tr>
    </tbody>
  </table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%
rows = {
  1 => Record.new("Hello world", "This is a data table"),
  2 => Record.new("Hello moon", "This is still a data table"),
  3 => Record.new("Hello mars", nil),
}
%>
<%= render Components::DataTable.new(rows:) do |table|
  table.column(label: "Title", count: rows.keys.size) do |id, record|
    "#{id}. #{record.title.upcase}"
  end
  table.column(label: "Description") do |id, record|
    record.text.presence || "No description"
  end
end %>

No notes provided.

No params configured.