Toggle View — Preserved State Demo

A full interactive example for switching between ScrollX and Responsive mode while keeping column filters, footer filters, global search, ordering, column visibility, and highlighting intact. Global hits, palette-based filter hits, and specific column overrides can all coexist.

Suggested flow: click Apply Demo State, switch to Responsive, switch back to ScrollX, and confirm the toolbar state and visible rows stay consistent.

Current Mode ScrollX
Visible Rows 0 / 0
Column Filters 0
Visible Columns 0 visible
Order None
Global Search None

Top Filters

Server Domain Site Is GC Is RO IPv4 Largest Delta Status Uptime

About this demo

This page shows a realistic table setup where users may change filters, hide columns, sort by a metric, and then switch layout modes without losing context.

Server uses a green named override, Status uses a red named override, and the other filtered columns cycle through the palette by column position while the global search stays blue.

Core setup

$('#tblTogglePreservedState').DataTable({
  dom: 'Bfrtip',
  stateSave: true,
  responsive: false,
  scrollX: '100%',
  buttons: ['copyHtml5', 'csvHtml5', 'excelHtml5', 'colvis', 'toggleView'],
  columnHighlighter: { rules: [/* status coloring */] },
  searchHighlighter: {
    includeColumnSearch: true,
    minLength: 2,
    globalHitStyle: { /* search box style */ },
    columnHitStyle: { /* shared column-filter style */ },
    columnHitStylePalette: [
      { /* 1st filter color */ },
      { /* 2nd filter color */ },
      { /* 3rd filter color */ }
    ],
    columnHitStyles: {
      Server: { /* column-specific filter style */ },
      Status: { /* another column-specific filter style */ }
    }
  }
});

What to try

1. Apply the demo state.
2. Use the global search and top or footer filters.
3. Hide one of the columns from the Columns menu.
4. Switch to Responsive mode.
5. Switch back to ScrollX and confirm the same state remains active.