Table Component

The ds-table component provides a styled data table for displaying structured information.

Flexible Content

Table cells can contain any content - text, components, buttons, icons, or any combination. Use ds-button, ds-icon, ds-text, or any other component inside table cells.

Basic Usage

<ds-table>
  <ds-table-header>
    <ds-table-cell>Name</ds-table-cell>
    <ds-table-cell>Email</ds-table-cell>
    <ds-table-cell>Role</ds-table-cell>
  </ds-table-header>
  <ds-table-row>
    <ds-table-cell>John Doe</ds-table-cell>
    <ds-table-cell>[email protected]</ds-table-cell>
    <ds-table-cell>Admin</ds-table-cell>
  </ds-table-row>
</ds-table>

With Data Binding

<ds-table id="userTable"></ds-table>

<script>
  const table = document.getElementById('userTable');
  table.data = [
    { name: 'John', email: '[email protected]', role: 'Admin' },
    { name: 'Jane', email: '[email protected]', role: 'User' }
  ];
  table.columns = ['name', 'email', 'role'];
</script>

Attributes

Attribute	Type	Default	Description
striped	boolean	false	Alternating row colors
hoverable	boolean	false	Highlight rows on hover
compact	boolean	false	Reduced padding
bordered	boolean	false	Show cell borders

Styling Variants

Striped

<ds-table striped>
  <!-- rows -->
</ds-table>

Hoverable

<ds-table hoverable>
  <!-- rows -->
</ds-table>

Compact

<ds-table compact>
  <!-- rows -->
</ds-table>

Examples

User List

<ds-table striped hoverable>
  <ds-table-header>
    <ds-table-cell>User</ds-table-cell>
    <ds-table-cell>Status</ds-table-cell>
    <ds-table-cell>Actions</ds-table-cell>
  </ds-table-header>
  <ds-table-row>
    <ds-table-cell>John Doe</ds-table-cell>
    <ds-table-cell>Active</ds-table-cell>
    <ds-table-cell>
      <ds-button variant="text">Edit</ds-button>
    </ds-table-cell>
  </ds-table-row>
</ds-table>