Playground — Tables

Tables

Responsive tables with striped rows, hover states, badges, and avatars.

Basic table

dd-table

Table playground

Name	Role	Status	Plan
Alice Johnson alice@co.com	Designer	Active	Pro
Bob Martinez bob@co.com	Developer	Active	Starter
Carol White carol@co.com	Manager	Inactive	Starter

Striped:

Hover:

<div class="dd-table-wrap">
  <table class="dd-table dd-table-striped dd-table-hover">
    <thead><tr><th>Name</th><th>Status</th></tr></thead>
    <tbody>
      <tr><td>Alice</td><td><span class="dd-badge dd-badge-success">Active</span></td></tr>
    </tbody>
  </table>
</div>

Tables

Reactive data table

data-dd-repeat

3 rows

Name	Role	Status

<!-- JS — after divdrop.js -->
const store = DD.globalStore({
  tableRows: [
    { name: 'Jane', role: 'Designer', status: 'Active' },
  ]
});
// Add row:
store.update('tableRows', rows =>
  [...rows, { name: 'New', role: 'Guest', status: 'Active' }]
);

<!-- HTML -->
<tbody data-dd-repeat="tableRows">
  <template>
    <tr>
      <td data-dd-key="name"></td>
      <td data-dd-key="role"></td>
      <td data-dd-key="status"></td>
    </tr>
  </template>
</tbody>

Reactive table