Table
Tables display structured data in rows and columns for easy scanning.
Basic
| # | Name | Role | Status |
|---|---|---|---|
| 1 | Alice Johnson | Engineer | Active |
| 2 | Bob Smith | Designer | Active |
| 3 | Carol White | Manager | Away |
Zebra Rows
| # | Project | Priority | Due Date |
|---|---|---|---|
| 1 | Website Redesign | High | 2026-04-01 |
| 2 | API Migration | Medium | 2026-05-15 |
| 3 | Mobile App | High | 2026-06-30 |
| 4 | Documentation | Low | 2026-07-01 |
Pinned Rows / Columns
| # | Name | Department | Location |
|---|---|---|---|
| 1 | Alice | Engineering | New York |
| 2 | Bob | Design | San Francisco |
| 3 | Carol | Marketing | Chicago |
Sizes
Extra Small
| Name | Value |
|---|---|
| Alpha | 100 |
| Beta | 200 |
Large
| Name | Value |
|---|---|
| Alpha | 100 |
| Beta | 200 |
Usage
<table class="bos:dui-table bos:dui-table-zebra">
<thead>
<tr><th>Name</th><th>Role</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>Engineer</td></tr>
</tbody>
</table>