Data Tables Dynamic Content

Overview

The most powerful thing about a Data Table isn't its styling — it's that it can be driven entirely by a Looper, with the table's own controls (search box, sort headers, pagination, entries menu) feeding parameters back into that Looper's query. The glue that makes this work is a dedicated Data Table Dynamic Content group plus two per-cell controls. This doc explains all three.

How AJAX Mode Talks to a Looper

When Enable AJAX is on, the Data Table doesn't render every row up front. Instead it renders a single page of rows produced by a Looper, and whenever the visitor changes the page, searches, sorts, or changes the page size, the table re-requests the current URL with that state encoded in GET parameters:

On the server, the Data Table automatically reads those parameters and applies them to any WordPress Query or User Query Looper Provider on the page — setting the query's offset from the page and page size, its orderby / order from the sort column, and its search from the search term. In other words, the visitor's interaction with the table rewrites the Looper's query, and the freshly-queried page of rows is swapped back into the table.

Note: AJAX pagination currently applies to every WP/User Query Looper on the request, so design AJAX-mode pages around a single paginated Data Table.

The Data Table Dynamic Content Group

So that you can read and react to that request state yourself, the Data Table registers a Data Table Dynamic Content group. Each field returns the current value of its GET parameter (or nothing if it isn't set):

{{dc:datatable:paged}}

The current page number the table is requesting.

{{dc:datatable:search}}

The active search term the visitor typed.

{{dc:datatable:orderby}}

The column the table is currently ordered by (the value of the active header's Order Column).

{{dc:datatable:order}}

The current sort direction — ASC or DESC.

{{dc:datatable:length}}

The number of entries per page, as chosen in the "Show X entries" menu.

These are ordinary Dynamic Content tokens, so you can use them anywhere Dynamic Content is accepted — in a Text Element to echo the active search term ("Results for keyword"), inside a Looper Provider's query to influence the results, or in Twig for logic. They read directly from the request, which is why they stay in sync with whatever the visitor is doing to the table.

Total Rows

For AJAX pagination the table needs to know how many rows exist across all pages so it can build the correct number of page buttons. That comes from the Total Rows field in the AJAX control section, which defaults to:

{{dc:looper:found_posts}} resolves to the total number of items the Looper's query found (before pagination trims it to one page). In most cases you can leave this default in place; override it only if your row count comes from somewhere other than the driving Looper.

Per-Cell Data Controls

Two controls are added to the Table Cell Element specifically for Data Tables. You'll find them in a Data Table group within the cell's Setup section, and which one appears depends on the cell's tag.

Table Data (td cells)

Set on a data cell (td), the Table Data field writes a data-cs-table-data attribute onto the cell. When present, the Data Table sorts and searches by that value instead of the cell's visible text.

This is the answer to "how do I sort a formatted value by what it really is?" For example, a cell might display a nicely formatted date like "January 8, 2026" but sort correctly if you put a sortable value — such as a timestamp — in the Table Data field. Because the field accepts Dynamic Content, you can pull that underlying value straight from a meta field while the cell shows the formatted version:

Order Column (th cells)

Set on a header cell (th), the Order Column field names the query field this column should order by in AJAX mode — for example title, date, or a meta key. This writes a data-cs-order-column attribute the server reads when the table re-queries the Looper.

A couple of important rules:

• In AJAX mode, a header without an Order Column value is not sortable — this is how you mark which columns can be sorted server-side.
• Meta-key ordering that requires WordPress's meta_value / meta_value_num + meta_key pairing isn't handled automatically yet; standard WP_Query orderby values work directly.

Putting It Together: A Server-Paginated Table

A typical dynamic Data Table looks like this:

1. Add a Data Table and enable AJAX in the Setup section.
2. Put a Looper Provider (a WP Query or User Query) on the Table Section or Table Row so the rows are generated from the query. Enable the Looper Consumer so the row repeats per result.
3. Populate each Table Cell with the appropriate Dynamic Content for the current item (title, date, meta, etc.).
4. On each sortable header cell, set an Order Column (e.g. title, date).
5. Where a displayed value differs from its sortable value, set the data cell's Table Data field.
6. Leave Total Rows at {{dc:looper:found_posts}} so pagination is sized correctly.
7. Optionally drop in a Loading Area so visitors see a spinner while each page fetches.

The result is a fully sortable, searchable, server-paginated table where every visitor interaction quietly rewrites the underlying query and swaps in fresh rows.

Related

• Data Tables Overview — The Data Table Element, its features, and styling.
• Loopers — Generate table rows dynamically from a query.
• Twig — Use Data Table request values in logic and calculations.