I received several requests to add features to my ACSS variable and class listing, and while coding these is sort of fun, I decided to opt for a more robust solution with wpDataTable. Overall performance is faster than for the large JSON query (960+ for ACSS 4 and 3200+ for ACSS 3), and several new options are available (sorting, filtering, and downloading). One gotcha I ran into was that wpDatatable kept rendering variable names with an en dash instead of the –. Initially, I thought it was the native WP texturizer, but it turned out to be wpDataTables’ table rendering. The support team couldn’t help, so I turned to ChatGPT. After several tests to identify the root cause, I resolved the issue using JavaScript. It takes an array of table IDs (see code below). The other problem I encountered was the download. The CSV version doesn’t work in Excel because the – and * are treated as math operators, and Excel tries to create functions. Switching to the Excel download resolved the issue.

document.addEventListener('DOMContentLoaded', () => {
  // 🔒 Whitelist of wpDataTable IDs to normalize
  const TABLE_IDS = [2,3]; // ← add/remove as needed

  if (!TABLE_IDS.length) return;

  // en dash (–), em dash (—), minus sign (−)
  const DASHES = /[\u2013\u2014\u2212]/g;

  const tables = document.querySelectorAll(
    'table.wpDataTable, table[data-wpdatatable_id]'
  );

  const isTargetTable = (table) => {
    // Check data attribute
    const attrId = table.getAttribute('data-wpdatatable_id');
    if (attrId && TABLE_IDS.includes(Number(attrId))) {
      return true;
    }

    // Check class-based ID (wpDataTableID-2)
    return TABLE_IDS.some(id =>
      table.classList.contains(`wpDataTableID-${id}`)
    );
  };

  const fixTable = (table) => {
    table.querySelectorAll('td, th').forEach(cell => {
      const text = cell.textContent;
      if (DASHES.test(text)) {
        cell.textContent = text.replace(DASHES, '--');
      }
      DASHES.lastIndex = 0;
    });
  };

  tables.forEach(table => {
    if (!isTargetTable(table)) return;

    // Initial render
    fixTable(table);

    // Re-run after DataTables redraws
    if (window.jQuery) {
      jQuery(table).on('draw.dt', () => fixTable(table));
    }
  });
});
JavaScript