Data Table Hybrid

About

Overview

Data Table is the answer to "I have a list and the user is going to scan, sort, filter, and act on rows." It is built on real semantic <table> — never a grid of divs — so every screen reader, every keyboard, and every assistive technology already knows what to do.

Without JavaScript you get a clean styled table. The <ren-table> custom element layers on sorting, selection (including shift-click ranges), pagination, search filtering, column resize, sticky/pinned columns, and density variants. You opt in to each feature by adding the matching attribute or markup — there is no monolithic config.

When to use

• Tabular data the user will sort, filter, or scan (invoices, users, orders, logs).
• Datasets where selecting one-or-many rows triggers actions (delete, export, bulk-edit).
• Lists big enough to need pagination but small enough to fit in memory client-side.

When not to use

• Cards / tiles instead of rows. If each item has a thumbnail and 2-3 lines of body, use a Card grid.
• Tree / hierarchical view. Reach for a tree component (out of scope for v0.9).
• 2-3 key/value pairs per item. Use a <dl> description list.
• A single metric. Use a stat / KPI card.
• Server-paged datasets bigger than memory. The built-in pager is client-side; use an external pager that fetches and replaces the table rows instead of relying on data-page-size.

Structure

Anatomy

A full-featured Data Table has five regions. All but the <table> itself are optional — drop them and the table still works.

1. Toolbar (.ren-table-toolbar) — top bar with search input ([data-table-search]) and bulk actions.
2. Wrapper (.ren-table-wrapper) — horizontal scroll container. Required for sticky / pinned to anchor against.
3. Header (.ren-table-header on <thead>) — sticky by default. Sortable columns add .ren-th-sortable + data-column.
4. Body (.ren-table-body on <tbody>) — rows. Selection column uses .ren-table-select; pinned column uses .ren-th-pinned / .ren-td-pinned.
5. Pagination (.ren-table-pagination) — info text + prev/next/page-size controls. The JS keeps it in sync with data-page-size.

Live

Demo

Click the Project or Status header to sort. Use the checkboxes to select rows. The toolbar search filters by any visible cell.

<ren-table data-page-size="5">
  <div class="ren-table-toolbar">
    <input class="ren-input ren-input-sm" type="search"
           placeholder="Search…" data-table-search>
  </div>
  <div class="ren-table-wrapper">
    <table class="ren-table">
      <thead class="ren-table-header">
        <tr>
          <th class="ren-th ren-table-select">
            <input type="checkbox" aria-label="Select all">
          </th>
          <th class="ren-th ren-th-sortable" data-column="project">Project</th>
          <th class="ren-th">Owner</th>
          <th class="ren-th ren-th-sortable" data-column="status">Status</th>
        </tr>
      </thead>
      <tbody class="ren-table-body">
        <tr class="ren-tr" data-row-id="1">…</tr>
      </tbody>
    </table>
  </div>
  <div class="ren-table-pagination">
    <span class="ren-table-pagination-info"></span>
    <div class="ren-table-pagination-controls">
      <button data-page-prev>‹</button>
      <button data-page-next>›</button>
    </div>
  </div>
</ren-table>

Visual

Variants

<div class="ren-table-wrapper" style="max-height: 400px">
  <table class="ren-table">…</table>
</div>

<th class="ren-th ren-th-pinned">Name</th>
<td class="ren-td ren-td-pinned">Atlas</td>

<div class="ren-table-empty">
  <div class="ren-table-empty-icon" aria-hidden="true">🔍</div>
  <h3 class="ren-table-empty-title">No matching projects</h3>
  <p class="ren-table-empty-description">Try a different search term or clear filters.</p>
</div>

<ren-table data-loading>…</ren-table>

Reference

API

Custom element attributes

CSS classes

Data attributes (consumer-controlled)

States (read-only, set by the JS)

Events

Theming

Public token API

Override these custom properties on <ren-table> or on a class to retheme the table without writing selectors against the internals.

Inclusive by default

Accessibility

Keyboard

Required ARIA

• Sortable <th> sets aria-sort="ascending" | "descending" | "none" mirroring data-sort. The JS owns this — you don't touch aria-sort manually.
• Selection checkboxes are real <input type="checkbox"> with aria-label ("Select all" / "Select row N"). Rows reflect state via aria-selected="true".
• Pagination buttons are real <button> with 44 px touch targets. Disabled uses the disabled attribute, not opacity alone.
• Loading state pairs data-loading with an aria-live="polite" announcement: "Loading…" → "Loaded 47 rows".
• Empty state must include a visible .ren-table-empty-title — don't rely on the icon alone.
• Always provide a <caption class="ren-sr-only"> describing the table for screen readers.

Patterns

Examples

Sorting (client-side)

Add .ren-th-sortable + data-column on the header. The component owns asc → desc → none cycling and writes data-sort + aria-sort.

<th class="ren-th ren-th-sortable" data-column="name">Name</th>

// Listen for state changes if you need to mirror to URL or analytics:
table.addEventListener('ren-sort', (e) => {
  history.replaceState(null, '', `?sort=${e.detail.column}.${e.detail.direction}`);
});

Server-side sorting

Don't pre-sort the rows. Listen for ren-sort and fetch.

table.addEventListener('ren-sort', async (e) => {
  table.dataset.loading = '';
  const rows = await fetch(`/api/users?sort=${e.detail.column}&dir=${e.detail.direction}`)
    .then(r => r.json());
  renderBody(rows);          // your function — replace tbody innerHTML
  delete table.dataset.loading;
});

Row selection

Real checkboxes with aria-label. Listen for ren-select to enable bulk actions when at least one row is selected.

<tr class="ren-tr" data-row-id="1">
  <td class="ren-td ren-table-select">
    <input type="checkbox" aria-label="Select row Atlas">
  </td>
  …
</tr>

table.addEventListener('ren-select', (e) => {
  bulkBar.hidden = e.detail.selected.length === 0;
});

Pagination

Set data-page-size on the host. The JS owns visible-row slicing and writes the "Showing 1-10 of 47" info.

<ren-table data-page-size="25">
  …
  <div class="ren-table-pagination">
    <span class="ren-table-pagination-info"></span>
    <div class="ren-table-pagination-controls">
      <button data-page-prev>Previous</button>
      <button data-page-next>Next</button>
      <select data-page-size-select>
        <option value="10">10</option>
        <option value="25" selected>25</option>
        <option value="50">50</option>
      </select>
    </div>
  </div>
</ren-table>

Density

Add the class on the table (or on a wrapper to apply to many at once).

<table class="ren-table ren-table-compact">…</table>

Sticky header + pinned first column (admin combo)

<div class="ren-table-wrapper" style="max-height: 480px">
  <table class="ren-table">
    <thead class="ren-table-header">
      <tr>
        <th class="ren-th ren-th-pinned">Name</th>
        <th class="ren-th">Email</th>
        <th class="ren-th">Role</th>
        …
      </tr>
    </thead>
    <tbody class="ren-table-body">
      <tr class="ren-tr">
        <td class="ren-td ren-td-pinned">Ren</td>
        <td class="ren-td">ren@example.com</td>
        …
      </tr>
    </tbody>
  </table>
</div>

Empty state on filter miss

Drop the empty state inside the wrapper — the JS swaps it in when the filter pipeline yields zero rows.

<div class="ren-table-empty" hidden>
  <div class="ren-table-empty-icon" aria-hidden="true">🔍</div>
  <h3 class="ren-table-empty-title">No matching projects</h3>
  <p class="ren-table-empty-description">Try a different search or clear filters.</p>
</div>