Table

Data table component with DaisyUI styling

Basic

Basic Table

Preview Code Auto

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

Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue')),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple')),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table'
    ),
    cls='overflow-x-auto'
)

Row Styles

Active Row

Preview Code Auto

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

Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue'), cls='bg-base-200'),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple')),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table'
    ),
    cls='overflow-x-auto'
)

Rows highlight on hover

Preview Code Auto

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

Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue')),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple'),
               cls='hover:bg-base-300'),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table'
    ),
    cls='overflow-x-auto'
)

Alternate Zebra Rows

Preview Code Auto

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

Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue')),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple')),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table table-zebra'
    ),
    cls='overflow-x-auto'
)

Layouts

Complex Layout

Table with multiple columns and extensive data

Preview Code Auto

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

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

header_row = Tr(Th(), Th('Name'), Th('Job'), Th('company'), Th('location'), Th('Last Login'), Th('Favorite Color'))

Div(
    Table(
        Thead(header_row),
        Tbody(*[Tr(
            Th(row["id"]),
            Td(row["name"]),
            Td(row["job"]),
            Td(row["company"]),
            Td(row["location"]),
            Td(row["login"]),
            Td(row["color"])
        ) for row in table_data]),
        Tfoot(header_row),
        cls='table table-xs'
    ),
    cls='overflow-x-auto'
)

Pinned Rows

Sticky header rows with scrollable content

Preview Code Auto

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

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

table_content = []
for letter, heroes in heroes_by_letter.items():
    table_content.extend([
        Thead(Tr(Th(letter))),
        Tbody(*[Tr(Td(hero)) for hero in heroes])
    ])

Div(
    Table(
        *table_content,
        cls='table table-pin-rows'
    ),
    cls='h-96 overflow-x-auto'
)

Pinned Rows & Columns

Sticky headers and first/last columns

Preview Code Auto

	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

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

header_row = Tr(
    Th(),
    *[Td(label) for label in ['Name', 'Job', 'company', 'location', 'Last Login', 'Favorite Color']],
    Th()
)

Div(
    Table(
        Thead(header_row),
        Tbody(*[
            Tr(
                Th(row["id"]),
                Td(row["name"]),
                Td(row["job"]),
                Td(row["company"]),
                Td(row["location"]),
                Td(row["login"]),
                Td(row["color"]),
                Th(row["id"])
            ) for row in table_data
        ]),
        Tfoot(header_row),
        cls='table table-xs table-pin-rows table-pin-cols'
    ),
    cls='h-96 w-96 overflow-x-auto'
    )

Visual

Visual Elements

Table with avatars and badges

Preview Code Auto

Name	Job	Favorite Color
Hart Hagerty United States	Zemlak, Daniel and Leannon Desktop Support Technician	Purple
Brice Swyre China	Carroll Group Tax Accountant	Red
Marjy Ferencz Russia	Rowe-Schoen Office Assistant I	Crimson
Yancy Tear Brazil	Wyman-Ledner Community Outreach Specialist	Indigo
Name	Job	Favorite Color

table_data = [
    {"img": "[email protected]", "name": "Hart Hagerty", "location": "United States", "company": "Zemlak, Daniel and Leannon", "job": "Desktop Support Technician", "color": "Purple"},
    {"img": "[email protected]", "name": "Brice Swyre", "location": "China", "company": "Carroll Group", "job": "Tax Accountant", "color": "Red"},
    {"img": "[email protected]", "name": "Marjy Ferencz", "location": "Russia", "company": "Rowe-Schoen", "job": "Office Assistant I", "color": "Crimson"},
    {"img": "[email protected]", "name": "Yancy Tear", "location": "Brazil", "company": "Wyman-Ledner", "job": "Community Outreach Specialist", "color": "Indigo"}
]
Div(
    Table(
        Thead(Tr(
            Th(Label(Input(type='checkbox', cls='checkbox'))),
            Th('Name'), Th('Job'), Th('Favorite Color'), Th()
        )),
        Tbody(*[Tr(
            Th(Label(Input(type='checkbox', cls='checkbox'))),
            Td(Div(
                Div(
                    Div(
                        Img(
                            src=f'https://img.daisyui.com/images/profile/demo/{row["img"]}',
                            alt='Avatar'
                        ),
                        cls='mask mask-squircle h-12 w-12'
                    ),
                    cls='avatar'
                ),
                Div(
                    Div(row["name"], cls='font-bold'),
                    Div(row["location"], cls='text-sm opacity-50')
                ),
                cls='flex items-center gap-3'
            )),
            Td(
                row["company"],
                Br(),
                Span(row["job"], cls='badge badge-ghost badge-sm')
            ),
            Td(row["color"]),
            Th(Button('details', cls='btn btn-ghost btn-xs'))
        ) for row in table_data]),
        Tfoot(Tr(
            Th(), Th('Name'), Th('Job'), Th('Favorite Color'), Th()
        )),
        cls='table'
    ),
    cls='overflow-x-auto'
)

Class Reference

Class	Type	Description
table	Component	Base table container
table-zebra	Modifier	Zebra striping
table-pin-rows	Modifier	Pinned rows
table-pin-cols	Modifier	Pinned columns
table-xs	Size	Extra small table
table-sm	Size	Small table
table-md	Size	Medium table (default)
table-lg	Size	Large table
table-xl	Size	Extra large table

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo