Table

1
Table do |table|
2
  table.header do |header|
3
    header.row do |row|
4
      row.head {}
5
      row.head { "Name" }
6
      row.head { "Job" }
7
      row.head { "Favorite Color" }
8
    end
9
  end
10
11
  table.body do |body|
12
    people.each.with_index do |person, index|
13
      body.row do |row|
14
        row.head { index + 1 }
15
        row.column { person.name }
16
        row.column { person.job }
17
        row.column { person.favorite_color }
18
      end
19
    end
20
  end
21
end

1
Table do |table|
2
  table.header do |header|
3
    header.row do |row|
4
      row.head {}
5
      row.head { "Name" }
6
      row.head { "Job" }
7
      row.head { "Favorite Color" }
8
    end
9
  end
10
11
  table.body do |body|
12
    people.each.with_index do |person, index|
13
      body.row base_200: index == 2 do |row|
14
        row.head { index + 1 }
15
        row.column { person.name }
16
        row.column { person.job }
17
        row.column { person.favorite_color }
18
      end
19
    end
20
  end
21
end

1
Table do |table|
2
  table.header do |header|
3
    header.row do |row|
4
      row.head {}
5
      row.head { "Name" }
6
      row.head { "Job" }
7
      row.head { "Favorite Color" }
8
    end
9
  end
10
11
  table.body do |body|
12
    people.each.with_index do |person, index|
13
      body.row :hover do |row|
14
        row.head { index + 1 }
15
        row.column { person.name }
16
        row.column { person.job }
17
        row.column { person.favorite_color }
18
      end
19
    end
20
  end
21
end

1
Table :zebra do |table|
2
  table.header do |header|
3
    header.row do |row|
4
      row.head {}
5
      row.head { "Name" }
6
      row.head { "Job" }
7
      row.head { "Favorite Color" }
8
    end
9
  end
10
11
  table.body do |body|
12
    people.each.with_index do |person, index|
13
      body.row do |row|
14
        row.head { index + 1 }
15
        row.column { person.name }
16
        row.column { person.job }
17
        row.column { person.favorite_color }
18
      end
19
    end
20
  end
21
end

1
def header(table)
2
  table.header do |head|
3
    head.row do |row|
4
      row.head do
5
        label do
6
          render Checkbox
7
        end
8
      end
9
      row.head { "Name" }
10
      row.head { "Job" }
11
      row.head { "Favorite Color" }
12
      row.head
13
    end
14
  end
15
end
16
17
def body(table)
18
  table.body do |body|
19
    people.each do |person|
20
      body.row do |row|
21
        row.head do
22
          label do
23
            render Checkbox
24
          end
25
        end
26
27
        row.cell do
28
          div(class: "flex items-center gap-3") do
29
            Avatar do
30
              Mask :squircle, class: "h-12 w-12" do
31
                img(src: person.avatar, alt: person.name)
32
              end
33
            end
34
            div do
35
              div(class: "font-bold") do
36
                person.name
37
              end
38
              div(class: "text-sm opacity-50") do
39
                person.country
40
              end
41
            end
42
          end
43
        end
44
45
        row.cell do
46
          plain person.company
47
          Badge :ghost, :sm do
48
            person.job
49
          end
50
        end
51
52
        row.cell do
53
          person.color
54
        end
55
56
        row.head do
57
          Button :ghost, :xs do
58
            "details"
59
          end
60
        end
61
      end
62
    end
63
  end
64
end
65
66
def footer(table)
67
  table.footer do |footer|
68
    footer.row do |row|
69
      row.head
70
      row.head { "Name" }
71
      row.head { "Job" }
72
      row.head { "Favorite Color" }
73
      row.head
74
    end
75
  end
76
end
77
78
Table do |table|
79
  header(table)
80
  body(table)
81
  footer(table)
82
end

1
Table :xs do |table|
2
  table.header do |header|
3
    header.row do |row|
4
      row.head
5
      row.head { "Name" }
6
      row.head { "Job" }
7
      row.head { "Favorite Color" }
8
    end
9
  end
10
11
  table.body do |body|
12
    people.each.with_index do |person, index|
13
      body.row do |row|
14
        row.head { index + 1 }
15
        row.column { person.name }
16
        row.column { person.job }
17
        row.column { person.favorite_color }
18
      end
19
    end
20
  end
21
22
  table.footer do |footer|
23
    footer.row do |row|
24
      row.head
25
      row.head { "Name" }
26
      row.head { "Job" }
27
      row.head { "Favorite Color" }
28
    end
29
  end
30
end

1
section class: "h-96 overflow-x-auto" do
2
  Table :pin_rows do |table|
3
    superheroes_by_letter.each do |letter, superheroes|
4
      table.header do |header|
5
        header.row do |row|
6
          row.head { letter }
7
        end
8
      end
9
10
      table.body do |body|
11
        superheroes.each do |superhero|
12
          body.row do |row|
13
            row.column { superhero }
14
          end
15
        end
16
      end
17
    end
18
  end
19
end

1
section class: "h-96 w-8/12 overflow-x-auto" do
2
  Table :xs, :pin_rows, :pin_cols do |table|
3
    table.header do |header|
4
      header.row do |row|
5
        row.head
6
        row.column { "Name" }
7
        row.column { "Job" }
8
        row.column { "Company" }
9
        row.column { "Location" }
10
        row.column { "Last Login" }
11
        row.column { "Favorite Color" }
12
        row.head
13
      end
14
    end
15
16
    table.body do |body|
17
      people.each.with_index do |person, index|
18
        body.row do |row|
19
          row.head { index + 1 }
20
          row.column { person.name }
21
          row.column { person.job }
22
          row.column { person.company }
23
          row.column { person.location }
24
          row.column { person.last_login }
25
          row.column { person.favorite_color }
26
          row.head { index + 1 }
27
        end
28
      end
29
    end
30
31
    table.footer do |footer|
32
      footer.row do |row|
33
        row.head
34
        row.column { "Name" }
35
        row.column { "Job" }
36
        row.column { "Company" }
37
        row.column { "Location" }
38
        row.column { "Last Login" }
39
        row.column { "Favorite Color" }
40
        row.head
41
      end
42
    end
43
  end
44
end