Table
A styled <table> wrapper using DaisyUI's table class. Use standard HTML table elements inside —
DaisyUI handles the theming. Pass zebra, pinRows, pinCols, or a size prop
to adjust behaviour.
Basic
Default styling — no size or modifier props.
table Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China 4 Marjy Ferencz Office Assistant I Russia 5 Yancy Tear Community Outreach Specialist Brazil
With avatar
Embed avatars and badges directly inside table cells.
table with avatar Name Job Status Action Quality Control Specialist Littel, Schaden and Vandervort Active details Hart Hagerty
United States
Desktop Support Technician Zemlak, Daniel and Leannon Pending details Tax Accountant Carroll Group Inactive details Office Assistant I Rowe-Schoen Active details Community Outreach Specialist Wyman-Ledner Active details
Zebra stripes zebra adds alternating row backgrounds for easier scanning.
table zebra # Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China 4 Marjy Ferencz Office Assistant I Russia 5 Yancy Tear Community Outreach Specialist Brazil
Sizes
Five sizes: xs, sm, md,
lg, xl.
table size="xs" # Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China
table size="sm" # Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China
table size="md" # Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China
table size="lg" # Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China
table size="xl" # Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China
Pinned rows pinRows makes <thead> and <tfoot> sticky inside a scrollable container.
table pinRows # Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China 4 Marjy Ferencz Office Assistant I Russia 5 Yancy Tear Community Outreach Specialist Brazil 6 Cy Ganderton Quality Control Specialist Canada 7 Hart Hagerty Desktop Support Technician United States 8 Brice Swyre Tax Accountant China 9 Marjy Ferencz Office Assistant I Russia 10 Yancy Tear Community Outreach Specialist Brazil 11 Cy Ganderton Quality Control Specialist Canada 12 Hart Hagerty Desktop Support Technician United States 13 Brice Swyre Tax Accountant China 14 Marjy Ferencz Office Assistant I Russia 15 Yancy Tear Community Outreach Specialist Brazil # Name Job Location
Pinned columns pinCols makes the first and last column sticky when the
table overflows horizontally. The first and last <th>
in each row become sticky.
table pinCols Name Job Title Company Location Color Favourite animal Favourite song Favourite actor Eye color Action Cy Ganderton Quality Control Specialist Littel, Schaden and Vandervort Canada blue Cat I Will Survive Cate Blanchett Blue details Hart Hagerty Desktop Support Technician Zemlak, Daniel and Leannon United States purple Cat I Will Survive Cate Blanchett Blue details Brice Swyre Tax Accountant Carroll Group China red Cat I Will Survive Cate Blanchett Blue details Marjy Ferencz Office Assistant I Rowe-Schoen Russia crimson Cat I Will Survive Cate Blanchett Blue details Yancy Tear Community Outreach Specialist Wyman-Ledner Brazil indigo Cat I Will Survive Cate Blanchett Blue details
With footer
Add a <tfoot> to repeat headings or show totals.
table with tfoot # Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China 4 Marjy Ferencz Office Assistant I Russia 5 Yancy Tear Community Outreach Specialist Brazil # Name Job Location
Highlighted rows
Add row-hover to <tr> for a hover highlight
(DaisyUI v5). Use bg-base-200 to mark a selected/active row.
table row highlight # Name Job Location 1 Cy Ganderton Quality Control Specialist Canada 2 Hart Hagerty Desktop Support Technician United States 3 Brice Swyre Tax Accountant China 4 Marjy Ferencz Office Assistant I Russia 5 Yancy Tear Community Outreach Specialist Brazil