Tables
Table
Tables are designed to present data in a structured tabular format, making it easy to read and analyze information efficiently.
Basic tables
Default
Use the component class `table` to create a basic table.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
With border
Add utility classes `border` & `border-base-content/25` for table with border.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Without border
Add the modifier class `table-borderless` for table without borders.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Accented tables
With hover
Add the utility class `hover` to each row `<tr>` for table with hover.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Highlighted table
Add the utility class `bg-{color}/{opacity}` to highlight `tr`, `td`, or `th` elements with customizable colors and opacity levels.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Striped tables — Striped rows
Striped tables provide distinct visual separation within the table.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Striped tables — Striped columns
Use the component class `table-striped-columns` for table with striped columns.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Table shapes
Rounded table
Add utility class `rounded-lg` to the wrapper `div` of table to create rounded table.The shape of the table but can be altered by using TailwindCSS <a href="https://tailwindcss.com/docs/border-radius" target="_blank" class="link link-primary">Border Radius</a> utility classes.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Table sizes
Table xs
Add responsive class `table-{size}`, where size = `xs|sm|lg` for table of different sizes.
| # | Name | Occupation | Company | Location | Last Active |
|---|---|---|---|---|---|
| 1 | John Doe | Software Engineer | ABC Technologies | United States | 2022-03-10 |
| 2 | Jane Smith | Data Analyst | XYZ Corporation | Canada | 2022-03-09 |
| 3 | Michael Johnson | Marketing Manager | Global Marketing Inc. | United Kingdom | 2022-03-08 |
| 4 | Emily Brown | Graphic Designer | Creative Solutions Ltd. | Australia | 2022-03-07 |
| 5 | David Wilson | Financial Analyst | FinanceX | Germany | 2022-03-06 |
| 6 | Alice Johnson | Project Manager | Project Solutions LLC | France | 2022-03-05 |
| 7 | Robert Lee | Software Developer | Tech Innovations | China | 2022-03-04 |
| 8 | Sarah Adams | Human Resources Manager | HR Solutions Ltd. | Spain | 2022-03-03 |
| 9 | James Wilson | Business Analyst | Global Enterprises | United States | 2022-03-02 |
| 10 | Mary Brown | Marketing Coordinator | Marketing Solutions Inc. | Canada | 2022-03-01 |
Pinned tables
Pinned rows
Pinned tables `stick` certain columns or rows while enabling horizontal or vertical scrolling, enhancing readability, and usability, particularly for large datasets.
| A |
|---|
| Aegis |
| Agent Liberty |
| Aqualad |
| Astro Boy |
| Azrael |
| B |
| Banshee |
| Black Bolt |
| Black Lightning |
| Blue Beetle |
| Booster Gold |
| C |
| Captain Britain |
| Captain Universe |
| Cyborg |
| Cyclops |
| D |
| Dagger |
| Daredevil |
| Darkhawk |
| Deadpool |
| E |
| Elektra |
| Elongated Man |
| F |
| Falcon |
| Firestorm |
| G |
| Gambit |
| Ghost Rider |
| Goliath |
| Green Lantern |
| H |
| Harley Quinn |
| Havok |
| Hellboy |
| I |
| Iceman |
| Invisible Woman |
| J |
| Jean Grey |
| Jubilee |
| K |
| Kid Flash |
| Kraven the Hunter |
| L |
| Lex Luthor |
| Loki |
| M |
| Mad Hatter |
| Magik |
| N |
| Namor |
| Nightcrawler |
| O |
| Oracle |
| P |
| Psylocke |
| Punisher |
| Q |
| Quasar |
| R |
| Raven |
| Red Hood |
| S |
| Sandman |
| Scarlet Witch |
| She-Hulk |
| Silver Surfer |
| Spawn |
| T |
| Taskmaster |
| Thor |
| U |
| Ultraman |
| V |
| Venom |
| W |
| Wasp |
| Wolverine |
| X |
| X-23 |
| Y |
| Yellowjacket |
| Z |
| Zorro |
| Zathura |
Pinned rows & columns
Add component class `table-pin-columns` for tables with pinned columns, ensuring that specified columns with `th` remain fixed while the rest of the table scrolls horizontally.
| Name | Occupation | Employer | Location | Last Access | Favorite Color | |||
| 1 | Alice Johnson | Software Engineer | Alpha Tech | alice@example.com | United States | 12/16/2021 | Blue | 1 |
| 2 | Bob Smith | Marketing Manager | Beta Corp | bob@example.com | Canada | 11/5/2021 | Green | 2 |
| 3 | Charlie Brown | Graphic Designer | Gamma Designs | charlie@example.com | United Kingdom | 10/20/2021 | Red | 3 |
| 4 | Dora Johnson | HR Manager | Delta Corp | dora@example.com | Australia | 9/15/2021 | Purple | 4 |
| 5 | Ethan Hunt | Secret Agent | Eagle Eye | ethan@example.com | France | 8/10/2021 | Black | 5 |
| 6 | Fiona Brown | Financial Analyst | Fox Finance | fiona@example.com | Germany | 7/5/2021 | Yellow | 6 |
| 7 | George Wilson | Project Manager | Gazelle Projects | george@example.com | Brazil | 6/1/2021 | Orange | 7 |
| 8 | Hannah Green | Environmentalist | Hunter Foundation | hannah@example.com | India | 5/25/2021 | Green | 8 |
| 9 | Ian Black | Journalist | Insight News | ian@example.com | Japan | 4/20/2021 | Blue | 9 |
| 10 | Jennifer White | Doctor | Jupiter Hospital | jennifer@example.com | South Africa | 3/15/2021 | White | 10 |
| Name | Occupation | Employer | Location | Last Access | Favorite Color |
Anatomy
Headless table
Exclude `<thead>` for headless tables to maintain structured data presentation with a minimalist appearance.
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Table with caption
Use the `<caption>` tag in tables to provide a brief description or summary of the table content.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Table with footer
Utilize the `<tfoot>` tag in tables to define footer content.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 | |
| Name | Status | Date | Actions |
Illustrations
Responsive table
Add utility class `overflow-x-auto` to make the table horizontally scrollable on small screens.
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
Table with shadow
Add utility class `shadow` to the wrapper `div` of table to create table with shadow.The shadow can be adjusted using the TailwindCSS <a href="https://tailwindcss.com/docs/filter-blur" target="_blank" class="link link-primary">Box shadow</a> utility classes.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Table with styled header
Styled table headers improve the visual appeal of a table.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Product table
The product table exemplifies a table UI featuring search filters, pagination, and search functionality.
| Product | Color | Category | Price | Action | |
|---|---|---|---|---|---|
Apple
iPhone 14 Pro
|
Stealth black |
Phone
|
$599 | ||
Apple
Watch series 7
|
Peach |
Watch
|
$999 | ||
Meta
Quest
|
Elegant white |
VR headset
|
$499 | ||
Apple
Macbook Pro 16
|
Space gray |
Laptop
|
$1999 |
Table with card
Add component class `card` to the wrapper `div` of table to create table with card.
| Name | Status | Date | Actions | |
|---|---|---|---|---|
| John Doe | johndoe@example.com | Professional | March 1, 2024 | |
| Jane Smith | janesmith@example.com | Rejected | March 2, 2024 | |
| Alice Johnson | alicejohnson@example.com | Applied | March 3, 2024 | |
| Bob Brown | bobrown@example.com | Current | March 4, 2024 |
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
table | component | Base class for the table component. |
table-borderless | style | Removes border from table. |
table-striped | style | For table to show striped rows. |
table-striped-columns | style | For table to show striped columns. |
row-hover | state | For table rows hover effect. |
row-active | state | For table rows active effect. |
table-xs | size | Table with extra small size. |
table-sm | size | Table with small size. |
table-md | size | Table with medium(default) size. |
table-lg | size | Table with large size. |
table-xl | size | Table with Extra large size. |
table-pin-rows | modifier | For table to make all the rows inside **thead** and **tfoot** pinned. |
table-pin-cols | modifier | For table to make all the **th** columns pinned. |