CSS Classes Reference

A complete catalog of the tc- prefixed CSS classes that the TableCrafter renderer emits for tables, responsive cards, filter/pagination/export controls, inline editing, and accessibility states, so you can target them from your theme stylesheet without touching plugin code.

How TableCrafter emits markup

TableCrafter renders in two layers. The server-side shortcode handler in tablecrafter.php prints an outer container plus a JSON config blob; the browser bundle assets/js/tablecrafter.js then mounts inside that container and builds the table, cards, and all interactive controls dynamically. Every visible element gets a stable tc- class, so the safest place to add custom CSS is your theme rather than overriding the plugin's assets/css/tablecrafter.css.

A minimal shortcode produces the outer container:

// Placed by the [tablecrafter] shortcode in tablecrafter.php
<div id="my-table" class="tablecrafter-container">
  <script type="application/json" class="tc-initial-data">...</script>
</div>

After hydration, the JavaScript renderer injects a .tc-wrapper inside that container and fills it with either a table or a card grid.

Top-level structure classes

These classes form the skeleton the renderer always produces. On desktop it builds a table; in responsive mobile mode it builds cards instead, swapping the inner block while keeping the same .tc-wrapper parent.

Table and header classes

Within .tc-table, sortable column headers receive tc-sortable. The current sort direction is expressed through the standard aria-sort attribute, not a separate class, and the stylesheet draws the arrow indicator from that attribute.

Cell value helper classes

When a column has a recognized value type, the renderer wraps the value in a typed element so you can style booleans, links, images, and tags consistently. These are emitted by the cell formatter in tablecrafter.js.

Card (responsive) classes

In mobile / responsive mode the renderer swaps the table for a card grid. Cards can collapse secondary fields behind an expand toggle. The classes below are produced by the card builder.

Controls: filters, search, and pagination

Above and below the data, TableCrafter renders a filter bar, optional global search, and pagination. Each filter type adds its own sub-classes, so you can style date-range and number-range filters independently from plain select/text filters.

Export and bulk-action controls

When export is enabled, the renderer adds an export menu; the export handler (includes/class-tc-export-handler.php) backs CSV, XLSX, and PDF output, while these classes style the front-end trigger. Bulk operations add their own toolbar.

State, feedback, and editing classes

Transient UI states use dedicated classes you can hook into, for example to brand the error retry button or the toast notifications.

Theming with CSS variables and accessibility classes

TableCrafter does not expose a global palette of CSS custom properties for normal rendering; the default look is set with hard-coded values in assets/css/tablecrafter.css. The custom properties that do exist are defined inside the high-contrast accessibility mode, and the renderer toggles accessibility modifier classes on .tc-wrapper based on the user's OS preferences (prefers-contrast, prefers-reduced-motion).

Because the high-contrast variables are scoped to .tc-high-contrast, you can override them per table to recolor that mode:

/* Recolor TableCrafter's high-contrast mode in your theme */
.tc-wrapper.tc-high-contrast {
  --tc-border-color: #222;
  --tc-focus-color: #0a58ca;
}

/* Brand the default table header without editing the plugin */
.tablecrafter-container .tc-table th {
  background-color: #0f172a;
  color: #fff;
}

Putting it together

A typical styling workflow: drop a table on a page, find its container, then scope rules to it.

[tablecrafter id="orders" source="csv" file="orders.csv" sortable="true"]

That renders #orders.tablecrafter-container → .tc-wrapper → .tc-table-container → table.tc-table. Add your CSS to the theme's stylesheet or Appearance → Customize → Additional CSS, scoped to #orders or .tablecrafter-container so other tables stay untouched. Enqueue order matters: your theme stylesheet should load after tablecrafter.css (the default for theme styles) so your selectors win at equal specificity.

Next, see shortcode-attributes.html for the attributes that control which of these elements render, and javascript-events.html for the client-side hooks you can listen to after the renderer mounts.