public function step4_cols() {
  $b = $this->base_url();

  // CSS
  wp_register_style(self::SLUG.'-jqx-base',  $b.'styles/jqx.base.css',  [], null);
  wp_register_style(self::SLUG.'-jqx-light', $b.'styles/jqx.light.css', [], null);
  wp_enqueue_style(self::SLUG.'-jqx-base');
  wp_enqueue_style(self::SLUG.'-jqx-light');

  // Core + deps
  wp_register_script(self::SLUG.'-jqxcore',   $b.'jqxcore.js',      ['jquery'], null, true);
  wp_register_script(self::SLUG.'-jqxdata',   $b.'jqxdata.js',      [self::SLUG.'-jqxcore'], null, true);
  wp_register_script(self::SLUG.'-jqxbtn',    $b.'jqxbuttons.js',   [self::SLUG.'-jqxcore'], null, true);
  wp_register_script(self::SLUG.'-jqxscroll', $b.'jqxscrollbar.js', [self::SLUG.'-jqxcore'], null, true);
  wp_register_script(self::SLUG.'-jqxmenu',   $b.'jqxmenu.js',      [self::SLUG.'-jqxcore'], null, true);

  // Extra UI pieces required by filter/pager menus
  wp_register_script(self::SLUG.'-jqxlistbox',     $b.'jqxlistbox.js',     [self::SLUG.'-jqxcore'], null, true);
  wp_register_script(self::SLUG.'-jqxdropdownlist',$b.'jqxdropdownlist.js',[self::SLUG.'-jqxcore', self::SLUG.'-jqxlistbox'], null, true);
  wp_register_script(self::SLUG.'-jqxcheckbox',    $b.'jqxcheckbox.js',    [self::SLUG.'-jqxcore'], null, true);

  wp_register_script(self::SLUG.'-jqxgrid', $b.'jqxgrid.js',
    [self::SLUG.'-jqxcore', self::SLUG.'-jqxdata', self::SLUG.'-jqxbtn', self::SLUG.'-jqxscroll', self::SLUG.'-jqxmenu'],
    null, true
  );

  // Grid helpers used by our features
  wp_register_script(self::SLUG.'-jqxgrid-selection',     $b.'jqxgrid.selection.js',     [self::SLUG.'-jqxgrid'], null, true);
  wp_register_script(self::SLUG.'-jqxgrid-sort',          $b.'jqxgrid.sort.js',          [self::SLUG.'-jqxgrid'], null, true);
  wp_register_script(self::SLUG.'-jqxgrid-filter',        $b.'jqxgrid.filter.js',        [self::SLUG.'-jqxgrid'], null, true);
  wp_register_script(self::SLUG.'-jqxgrid-pager',         $b.'jqxgrid.pager.js',         [self::SLUG.'-jqxgrid'], null, true);
  wp_register_script(self::SLUG.'-jqxgrid-columnsresize', $b.'jqxgrid.columnsresize.js', [self::SLUG.'-jqxgrid'], null, true);

  // Boot runs AFTER all needed modules (prevents "Missing references..." errors)
  wp_register_script(self::SLUG.'-boot4', '', [
    self::SLUG.'-jqxlistbox',
    self::SLUG.'-jqxdropdownlist',
    self::SLUG.'-jqxcheckbox',
    self::SLUG.'-jqxgrid',
    self::SLUG.'-jqxgrid-selection',
    self::SLUG.'-jqxgrid-sort',
    self::SLUG.'-jqxgrid-filter',
    self::SLUG.'-jqxgrid-pager',
    self::SLUG.'-jqxgrid-columnsresize'
  ], time(), true);

  $boot = <<<JS
(function(){
  function log(){ if(window.console&&console.log) console.log.apply(console, ['[wcjqx step4_cols]'].concat([].slice.call(arguments))); }
  var wrap = document.getElementById('wcjqx-step4-wrap');
  if (!wrap) return;

  if (!(window.jQuery && jQuery.fn && jQuery.fn.jqxGrid)) {
    log('jqxGrid not present');
    return;
  }

  wrap.innerHTML = '<div id="wcjqx-step4-grid"></div>';
  var $ = jQuery;

  var fields = [
    { name: 'order_date',   type: 'date'   },
    { name: 'order_number', type: 'string' },
    { name: 'product_sku',  type: 'string' },
    { name: 'product_name', type: 'string' },
    { name: 'quantity',     type: 'number' },
    { name: 'unit_price',   type: 'number' },
    { name: 'line_total',   type: 'number' }
  ];
  var rows = [
    { order_date: '2025-01-09', order_number: 'D1001', product_sku: 'SKU-ABC', product_name: 'Sample A', quantity: 1, unit_price: 9.95,  line_total: 9.95 },
    { order_date: '2025-02-14', order_number: 'D1002', product_sku: 'SKU-XYZ', product_name: 'Sample B', quantity: 3, unit_price: 4.50,  line_total: 13.50 },
    { order_date: '2025-03-01', order_number: 'D1003', product_sku: 'SKU-123', product_name: 'Sample C', quantity: 2, unit_price: 12.00, line_total: 24.00 }
  ];
  var adapter = new $.jqx.dataAdapter({ datatype:'array', localdata:rows, datafields:fields });

  try {
    $('#wcjqx-step4-grid').jqxGrid({
      width: '100%',
      height: 420,
      theme: 'light',
      source: adapter,
      pageable: true,
      pagesize: 25,
      pagesizeoptions: [25,50,100],
      sortable: true,
      filterable: true,
      columnsresize: true,
      columnsheight: 36,
      rowsheight: 32,
      columns: [
        { text:'Date',       datafield:'order_date',   cellsformat:'yyyy-MM-dd', width:120 },
        { text:'Order #',    datafield:'order_number', width:110 },
        { text:'SKU',        datafield:'product_sku',  width:140 },
        { text:'Product',    datafield:'product_name' },
        { text:'Qty',        datafield:'quantity',     width:80,  cellsalign:'right' },
        { text:'Unit Price', datafield:'unit_price',   width:110, cellsalign:'right', cellsformat:'c2' },
        { text:'Line Total', datafield:'line_total',   width:120, cellsalign:'right', cellsformat:'c2' }
      ]
    });
    log('grid initialized with 7 columns (demo data)');
  } catch(e) {
    log('init error:', e && e.message ? e.message : e);
    wrap.innerHTML = '<div style="color:#a00;padding:8px">jqxGrid init error: '+(e && e.message ? e.message : e)+'</div>';
  }
})();
JS;
  wp_add_inline_script(self::SLUG.'-boot4', $boot, 'after');
  wp_enqueue_script(self::SLUG.'-boot4');

  // Fallback table so something is always visible
  $fallback = '
    <table style="width:100%;border-collapse:collapse;border:1px solid #ddd">
      <thead><tr style="background:#f7f7f7">
        <th style="border:1px solid #eee;padding:8px">Date</th>
        <th style="border:1px solid #eee;padding:8px">Order #</th>
        <th style="border:1px solid #eee;padding:8px">SKU</th>
        <th style="border:1px solid #eee;padding:8px">Product</th>
        <th style="border:1px solid #eee;padding:8px">Qty</th>
        <th style="border:1px solid #eee;padding:8px">Unit Price</th>
        <th style="border:1px solid #eee;padding:8px">Line Total</th>
      </tr></thead>
      <tbody>
        <tr><td style="border:1px solid #eee;padding:8px" colspan="7">Loading grid…</td></tr>
      </tbody>
    </table>';

  return '<div id="wcjqx-step4-wrap" style="border:2px solid #4e73df;background:#fff;padding:8px;margin:8px 0">'.$fallback.'</div>';
}