← Back to UI Kit

Legacy Spreadsheet Reference

Archived 2026-05-10 · Was: spreadsheet_datatable.js + DataTables 2.x with Buttons & ColumnControl plug-ins.
Replaced by: Tabulator 6.4 (spreadsheet_tabulator.js).

This page is a frozen reference snapshot. The DataTables implementation has been removed from the live app. Use this page to compare old vs. new toolbar patterns or to reference the old chip/badge markup.

Spreadsheet Toolbar (DataTables era)

The compact toolbar that lived above the DataTables-based spreadsheet table (spreadsheet_view.php before 2026-05-10). Built inline via DataTables Buttons extension callbacks. Contained: column chooser (DataTables ColumnControl), Fit Width, and zoom (−/100%/+).

DataTables table rendered here — rows came from a <table> with PHP-populated <tbody>
CSS source: inline <style> in spreadsheet_view.php (now removed)
JS source: webroot/js/spreadsheet_datatable.js (now removed)

Status & Priority Badges (DataTables era)

These were plain <span class="dt-badge dt-badge-*"> elements injected as DataTables column render callbacks. They had no dot indicator (unlike the current .ss-chip system).

Not Started In Progress Complete High Medium Low

Replaced by .ss-chip .ss-chip-* — see UI Kit → Tabulator Grid → Status & Priority Chips.

.dt-badge .dt-badge-{inprogress|todo|done|high|medium|low} — defined inline in spreadsheet_datatable.js render callbacks

Migration Notes

Key differences between the DataTables and Tabulator implementations:

Feature DataTables (old) Tabulator 6.4 (new)
Vendor sourceCDN + Buttons + ColumnControl plug-insSingle Tabulator CDN bundle
Table mount<table id="…"> with PHP <tbody><div id="…"> + window.TASK_DATA extracted from hidden <table>
Column visibilitycolumn.visible(bool)col.show() / col.hide()
Column moveDataTables ColReorder extensiontable.moveColumn(from, to, after)
Filter eventdrawCallbackdataFiltered event
Row numbersCustom drawCallback counterrownumFormatter + redraw(true) on filter/sort
Badge HTMLDataTables render callback on columnbadgeFormatter reads row.getData().statusHtml
Floating headerDOM clone + MutationObserverDOM clone + Tabulator column events
ThemeBootstrap5 DataTables themeTabulator standard theme + custom overrides