NWCA Table Builder

CSV → Sidearm DataTable HTML
CSV data

Attach a .csv or .xlsx file, or paste data directly. Copying from Excel (Ctrl+A → Ctrl+C) also works.

Default page length
Table width
Table ID
Columns Drag the handle to reorder · click a name to rename · toggle to show/hide |
Preview
Generated HTML

Already includes the DataTables init block. Copy this and paste the whole thing into Sidearm — nothing else needed.

This block must appear once per Sidearm page, above any table HTML you paste. If a page has multiple tables, paste this once and add an extra $('#id').dataTable(...) call for each additional table ID.

DataTables init block

New workflow — 3 steps instead of 8

  1. Attach your .csv or .xlsx file directly using the attach button — the table generates automatically. Or paste data manually from Excel or Notepad.
  2. Click Generate HTML. Reorder columns by dragging the handle, rename columns by clicking on the name, and toggle visibility for any you don't need.
  3. Click Copy → paste into Sidearm and paste directly into the page editor — the DataTables init block is already included.

Reordering columns

  • Grab the ⋮⋮ handle on the left of any column tag and drag it onto another column to swap positions
  • The target column shows a dashed red outline as you drag over it
  • The preview and generated HTML update to match the new order instantly
  • Click Reset order to restore the original column order from your source data

Renaming columns

  • After loading data, click any column name to rename it inline
  • Press Enter or click outside to save the new name
  • Press Escape to cancel and revert that one name
  • Renamed columns are outlined in red so you can spot them at a glance
  • Click Reset names to restore every column to its original heading from the source data
  • Renames carry through to the preview and the generated Sidearm HTML automatically

Live search / filter

  • The search box filters the preview as you type — it does not change the generated HTML
  • Matching text is highlighted in yellow
  • Row count updates live so you can confirm how many results match
  • Use it to spot-check a name or school before copying the final HTML

CSV formatting rules

  • First row must be your column headers
  • Values containing commas must be wrapped in quotes: "Smith, John"
  • Values containing quotes must double them: ""All-American""
  • Copying directly from Excel works — no need to save as .csv first
  • Extra blank rows at the end are ignored automatically

Multiple tables on one page

Give each table a unique ID in the Table ID field (e.g. awards-d1, awards-d2). The base template goes on the page once. For each extra table, add:

$('#awards-d2').dataTable( { "lengthMenu": [ [-1,10,25,50], ["All",10,25,50] ] } );