Data tables

The shared table provides loading, errors, empty results, selection, sorting, and pagination around your data adapter.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

/**
 * Integrate data tables into an application-owned route.
 *
 * @author Laurent Declercq l.declercq@agon-innovation.ch
 * @version 20260921
 */
import { dataTable } from '@agon/atrium';

/**
 * Register the application table after its route loads.
 *
 * @param {object} context - Alpine and the consumer-owned resource adapter.
 * @returns {void} Registers the page provider.
 */
export function register(context) {
  context.Alpine.data('resourceList',
    /**
     * Create independent table state.
     *
     * @returns {object} Resource table provider.
     */
    () => dataTable({
      path: '/resources',
      columns: [
        {
          id: 'name',
          label: 'name',
          sortable: true,
        },
      ],
      /**
       * Load one record page through the backend adapter.
       *
       * @param {object} query - Normalized query and AbortSignal.
       * @returns {Promise<object>} An items array and total count.
       */
      load: (query) => context.services.list(query),
    }));
}

<section x-data="resourceList">
  <h1 tabindex="-1">Resources</h1>
  <include src="{{ uiRoot }}/data-table.html"></include>
</section>

Settings and behavior

• load receives page, pageSize, search, sort, direction, status, and signal. Return { items, total }.
• Columns use id, label, optional sortable, optional translate, and optional type.
• Supported special types are title, status, and progress.
• rowKey defaults to id. Each row needs a unique stable key.
• Omit path for embedded tables that must not change the route query.
• open(row, table) is an optional row-action callback.
• refresh, apply, sortBy, paginate, toggle, and toggleAll are available methods.

Integration notes

Read the query contract for exact fields. Respect the supplied AbortSignal in your adapter. The component cancels replaced requests and rejects stale results. Backend authorization and filtering validation remain mandatory.

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921