Theme:

Table

Tables display structured data in rows and columns. They support zebra striping, row hover, compact mode, and bordered variants.

Basic Table

NameEmailRole
Sarah Johnsonsarah@company.comDesigner
Michael Chenmichael@company.comDeveloper
Emily Davisemily@company.comManager
<table class="dui-table"> <thead><tr><th>Name</th><th>Email</th><th>Role</th></tr></thead> <tbody> <tr><td>Sarah Johnson</td><td>sarah@company.com</td><td>Designer</td></tr> </tbody> </table>

Zebra Striping

ProductPriceStock
Wireless Mouse$29.99142
Mechanical Keyboard$89.9968
USB-C Hub$39.99215
Monitor Stand$49.9993
<table class="dui-table dui-table-zebra">...</table>

Hover Rows

NameStatus
Deployment v2.1Active
Deployment v2.0Archived
Deployment v1.9Archived
<table class="dui-table dui-table-hover">...</table>

Compact

IDNameEmail
001Alice Nguyenalice@example.com
002Bob Martinezbob@example.com
003Carol Whitecarol@example.com
<table class="dui-table dui-table-compact">...</table>

Bordered

FeatureFreePro
Storage5 GB100 GB
Users1Unlimited
SupportEmailPriority
<table class="dui-table dui-table-bordered">...</table>