SuperTable

Enterprise-grade data tables with zero JavaScript configuration. Sorting, filtering, pagination, bulk actions, and server-side integration—all via data-* attributes.

HTMX Ready Server-Side Rendering Bulk Actions Export

View Full Documentation

What Makes It Super

Declarative Sorting

Multi-column sorting with visual indicators. Define sortable columns and default sort order directly in markup.

<th data-az-sortable="true"
    data-az-sort-key="created_at"
    data-az-sort-default="desc">
  Created
</th>

Built-in Filtering

Column filters, global search, and custom filter presets. Server-side filtering with HTMX or client-side for small datasets.

<table data-az-component="super-table"
       data-az-filterable="true"
       data-az-filter-mode="server"
       data-az-filter-url="/api/users">

Bulk Actions

Select rows and apply batch operations. Delete, export, status change—define actions via data attributes.

<table data-az-bulk-actions="true"
       data-az-bulk-delete="/api/users/bulk-delete"
       data-az-bulk-export="csv,xlsx">

HTMX Integration

Server-rendered table bodies with automatic HTMX triggers for sorting, filtering, and pagination. No client-side state management.

<tbody data-az-htmx-target="true"
       hx-get="/partials/users-table"
       hx-trigger="sort, filter">

Row-Level Configuration

Configure individual rows with status colors, expandable details, inline editing, and context menus.

<tr data-az-row-status="warning"
    data-az-expandable="true"
    data-az-expand-url="/users/1/details">

Export Options

One-click export to CSV, Excel, PDF. Export visible data or full dataset. Custom export templates supported.

<table data-az-export="csv,xlsx,pdf"
       data-az-export-filename="users-report"
       data-az-export-scope="all">

Complete Example

A fully-featured data table with sorting, filtering, pagination, and bulk actions—entirely configured via data attributes.

<!-- SuperTable: Zero JavaScript Required -->
<table 
  data-az-component="super-table"
  data-az-theme="dark"
  data-az-sortable="true"
  data-az-filterable="true"
  data-az-paginated="true"
  data-az-page-size="25"
  data-az-page-sizes="10,25,50,100"
  data-az-bulk-actions="true"
  data-az-export="csv,xlsx"
  data-az-responsive="stack"
  data-az-empty-message="No records found"
  class="w-full">
  
  <thead>
    <tr>
      <th data-az-bulk-select="true"></th>
      <th data-az-sortable="true" data-az-sort-key="name">Name</th>
      <th data-az-sortable="true" data-az-sort-key="email">Email</th>
      <th data-az-sortable="true" data-az-sort-key="status" data-az-filter="select">Status</th>
      <th data-az-sortable="true" data-az-sort-key="created_at" data-az-sort-default="desc">Created</th>
      <th data-az-actions="true"></th>
    </tr>
  </thead>
  
  <tbody data-az-htmx-target="true">
    <!-- Server-rendered rows via HTMX -->
  </tbody>
  
</table>

Ready to Build Better Tables?

SuperTable is part of AZ UI Kit. Request a briefing to learn more about our enterprise licensing.

RICHIEDI BRIEFING Back to AZ UI Kit