Table

Modifier	DaisyUI class
:zebra	table-zebra
:pin_rows	table-pin-rows
:pin_cols	table-pin-cols
:xs	table-xs
:sm	table-sm
:md	table-md
:lg	table-lg

# 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

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

# Table with an active row

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

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

# Table with a row that highlights on hover

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

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

# Zebra

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

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red

# Table with visual elements

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

Name	Job	Favorite Color
Hart Hagerty United States	Desktop Support Technician	Purple
Brice Swyre China	Tax Accountant	Red
Marjy Ferencz Russia	Office Assistant I	Crimson
Yancy Tear Brazil	Community Outreach Specialist	Indigo
Name	Job	Favorite Color

# Table xs

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

	Name	Job	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Blue
2	Hart Hagerty	Desktop Support Technician	Purple
3	Brice Swyre	Tax Accountant	Red
4	Marjy Ferencz	Office Assistant I	Crimson
5	Yancy Tear	Community Outreach Specialist	Indigo
6	Irma Vasilik	Editor	Purple
7	Meghann Durtnal	Staff Accountant IV	Yellow
8	Sammy Seston	Accountant I	Crimson
9	Lesya Tinham	Safety Technician IV	Maroon
10	Zaneta Tewkesbury	VP Marketing	Green
11	Andy Tipple	Librarian	Indigo
12	Sophi Biles	Recruiting Manager	Maroon
13	Florida Garces	Web Developer IV	Purple
14	Maribeth Popping	Analyst Programmer	Aquamarine
15	Moritz Dryburgh	Dental Hygienist	Crimson
16	Reid Semiras	Teacher	Green
17	Alec Lethby	Teacher	Khaki
18	Aland Wilber	Quality Control Specialist	Purple
19	Teddie Duerden	Staff Accountant III	Aquamarine
20	Lorelei Blackstone	Data Coordiator	Red
	Name	Job	Favorite Color

# Table with pinned rows

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

A
Ant-Man
Aquaman
Asterix
T
The Atom
The Avengers
The Defenders
The Rocketeer
The Shadow
Teenage Mutant Ninja Turtles
Thor
The Wasp
B
Batgirl
Batman
Batwoman
Black Canary
Black Panther
C
Captain America
Captain Marvel
Catwoman
Conan the Barbarian
D
Daredevil
Doc Savage
Doctor Strange
E
Elektra
F
Fantastic Four
G
Ghost Rider
Green Arrow
Green Lantern
Guardians of the Galaxy
H
Hawkeye
Hellboy
I
Incredible Hulk
Iron Fist
Iron Man
M
Marvelman
R
Robin
S
Spider-Man
Sub-Mariner
Supergirl
Superman
W
Watchmen
Wolverine
Wonder Woman
X
X-Men
X-Men
Z
Zatanna
Zatara

# Table with pinned rows and pinned cols

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

	Name	Job	Company	Location	Last Login	Favorite Color
1	Cy Ganderton	Quality Control Specialist	Littel, Schaden and Vandervort	Canada	12/16/2020	Blue	1
2	Hart Hagerty	Desktop Support Technician	Zemlak, Daniel and Leannon	United States	12/5/2020	Purple	2
3	Brice Swyre	Tax Accountant	Carroll Group	China	8/15/2020	Red	3
4	Marjy Ferencz	Office Assistant I	Rowe-Schoen	Russia	3/25/2021	Crimson	4
5	Yancy Tear	Community Outreach Specialist	Wyman-Ledner	Brazil	5/22/2020	Indigo	5
6	Irma Vasilik	Editor	Wiza, Bins and Emard	Venezuela	12/8/2020	Purple	6
7	Meghann Durtnal	Staff Accountant IV	Schuster-Schimmel	Philippines	2/17/2021	Yellow	7
8	Sammy Seston	Accountant I	O'Hara, Welch and Keebler	Indonesia	5/23/2020	Crimson	8
9	Lesya Tinham	Safety Technician IV	Turner-Kuhlman	Philippines	2/21/2021	Maroon	9
10	Zaneta Tewkesbury	VP Marketing	Sauer LLC	Chad	6/23/2020	Green	10
11	Andy Tipple	Librarian	Hilpert Group	Poland	7/9/2020	Indigo	11
12	Sophi Biles	Recruiting Manager	Gutmann Inc	Indonesia	2/12/2021	Maroon	12
13	Florida Garces	Web Developer IV	Gaylord, Pacocha and Baumbach	Poland	5/31/2020	Purple	13
14	Maribeth Popping	Analyst Programmer	Deckow-Pouros	Portugal	4/27/2021	Aquamarine	14
15	Moritz Dryburgh	Dental Hygienist	Schiller, Cole and Hackett	Sri Lanka	8/8/2020	Crimson	15
16	Reid Semiras	Teacher	Sporer, Sipes and Rogahn	Poland	7/30/2020	Green	16
17	Alec Lethby	Teacher	Reichel, Glover and Hamill	China	2/28/2021	Khaki	17
18	Aland Wilber	Quality Control Specialist	Kshlerin, Rogahn and Swaniawski	Czech Republic	9/29/2020	Purple	18
19	Teddie Duerden	Staff Accountant III	Pouros, Ullrich and Windler	France	10/27/2020	Aquamarine	19
20	Lorelei Blackstone	Data Coordinator	Witting, Kutch and Greenfelder	Kazakhstan	6/3/2020	Red	20
	Name	Job	Company	Location	Last Login	Favorite Color

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 :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