# Data Display Components

## Tables
```html
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td><span class="tag success">Active</span></td>
      <td>
        <button class="btn btn-sm btn-ghost">Edit</button>
      </td>
    </tr>
  </tbody>
</table>
```

### Table Variants
```html
<table class="table table-bordered">...</table>
<table class="table table-borderless">...</table>
<table class="table table-striped">...</table>
<table class="table table-sm">...</table>
<table class="table-standard">...</table>   <!-- Key-value pairs -->
```

## Description List
```html
<dl class="description-list">
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

<dl class="list-inline">
  <dt>Property</dt>
  <dd>Value</dd>
</dl>
```

---

## List Items
```html
<div class="list-listitems">
  <div class="listitem">
    <div class="listitem-title">List item title</div>
  </div>

  <!-- With badge and metrics -->
  <div class="listitem">
    <div class="listitem-badge">
      <span class="icon icon-feature"></span>
    </div>
    <div class="listitem-title">
      Title
      <span class="listitem-label">Label</span>
    </div>
    <div class="listitem-metrics">
      <div class="listitem-metric">
        <span class="icon icon-critical"></span>
        99
      </div>
    </div>
  </div>

  <!-- With actions -->
  <div class="listitem">
    <div class="listitem-title">List item</div>
    <div class="listitem-actions">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>
```

### List Item Variants
```html
<!-- With footer -->
<div class="listitem with-footer">
  <div class="listitem-title">Title</div>
  <div class="listitem-footer">Footer content</div>
</div>

<!-- Collapsable -->
<details class="listitem collapsable">
  <summary class="listitem-header">
    <div class="listitem-title">Collapsable</div>
    <button class="btn collapse-btn"></button>
  </summary>
  <div class="listitem-content">Hidden content</div>
</details>

<!-- Selectable -->
<div class="listitem selectable">
  <input type="checkbox" id="select1">
  <label for="select1">
    <div class="listitem-title">Selectable Item</div>
  </label>
</div>
```

## Splitview
```html
<div class="splitview">
  <div class="splitview-list">
    <div class="splitview-item selected">
      <div class="splitview-item-title">Item 1</div>
    </div>
    <div class="splitview-item">
      <div class="splitview-item-title">Item 2</div>
    </div>
  </div>
  <div class="splitview-detail">
    <h2>Detail View</h2>
    <p>Selected item details</p>
  </div>
</div>
```