Tables

Clean, readable data tables with soft styling.

Default

# Name Email Role Status
1 Alice Martin alice@example.com Admin Active
2 Bob Wilson bob@example.com Editor Active
3 Carol Davis carol@example.com Viewer Pending
4 Dan Brown dan@example.com Editor Inactive 
<table class="sui-table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice Martin</td>
      <td>alice@example.com</td>
      <td>Admin</td>
      <td><span class="sui-badge sui-badge-success">Active</span></td>
    </tr>
  </tbody>
</table>

Striped

# Name Email Role Status
1 Alice Martin alice@example.com Admin Active
2 Bob Wilson bob@example.com Editor Active
3 Carol Davis carol@example.com Viewer Pending
4 Dan Brown dan@example.com Editor Inactive 
<table class="sui-table sui-table-striped">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Compact

# Name Email Role Status
1 Alice Martin alice@example.com Admin Active
2 Bob Wilson bob@example.com Editor Active
3 Carol Davis carol@example.com Viewer Pending
4 Dan Brown dan@example.com Editor Inactive 
<table class="sui-table sui-table-compact">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Borderless

# Name Email Role Status
1 Alice Martin alice@example.com Admin Active
2 Bob Wilson bob@example.com Editor Active
3 Carol Davis carol@example.com Viewer Pending
4 Dan Brown dan@example.com Editor Inactive 
<table class="sui-table sui-table-borderless">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Inset

# Name Email Role Status
1 Alice Martin alice@example.com Admin Active
2 Bob Wilson bob@example.com Editor Active
3 Carol Davis carol@example.com Viewer Pending
4 Dan Brown dan@example.com Editor Inactive 
<table class="sui-table sui-table-inset">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Bordered

# Name Email Role Status
1 Alice Martin alice@example.com Admin Active
2 Bob Wilson bob@example.com Editor Active
3 Carol Davis carol@example.com Viewer Pending
4 Dan Brown dan@example.com Editor Inactive 
<table class="sui-table sui-table-bordered">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Delete this item?

This action cannot be undone. This will permanently delete the item and remove all associated data.