DataTables Deep Dive

Notes

⚙️ DataTables Key Extensions (Quick Reference)

📋 KeyTable

• Navigate/select individual table cells (Excel-style).

  Great for keyboard-based data entry.

---

🔁 AutoFill

• Drag to duplicate or increment data like spreadsheets.

---

🧾 Buttons

Built-in buttons for export & copy:

• 🧠 copy → Copy to clipboard
• 📁 csv → Export to CSV
• 📊 excel → Export to XLSX (requires JSZip)
• 📄 pdf → Export to PDF (requires PDFMake)
• 🖨️ print → Print table

💡 HTML5 Variants:

copyHtml5, csvHtml5, excelHtml5, pdfHtml5

(Use generic ones; they auto-detect browser capabilities.)

Custom Buttons:

• text: label text
• action: function to execute on click

Example: Add your own “Reload” or “Sync” button.

---

👁️‍🗨️ Column Visibility (colvis)

• Toggle visibility of single or grouped columns.
• Makes tables user-customizable and tidy.

---

🧭 ColReorder

• Drag & drop to reorder columns freely.

---

🧰 ColumnControl

• Adds per-column search/sort/filter controls in headers/footers.
• Extendable with plugins for custom inputs.

---

⚡ Server-Side Processing (serverSide: true)

• For large datasets (100k+ rows) — loads only visible data via AJAX.
• Client sends filters/paging/sorting state to server → server returns relevant rows.

Essential for performance-heavy dashboards.

---

✏️ Editor (CRUD made easy)

Powerful inline data editing tool:

• 🧍‍♀️ Full Row Editing: Modal form for entire row
• 💬 Bubble Editing: Quick popup for specific cells

• ⚡ Inline Editing: Click → Type → Enter (super fast)

  👉 Use generator: editor.datatables.net/generator

---

📌 FixedColumns

• Keep left/right columns visible while horizontally scrolling (scrollX: true).

For non-scrollable tables, use FixedHeader.

---

📍 FixedHeader

• Sticky headers/footers for long tables.
• Keeps column labels visible during scroll.

---

📱 Responsive

• Adapts layout for smaller screens.
• Hides non-essential columns, adds expandable rows.

Crucial for mobile/tablet optimization.

---

👥 RowGroup

• Group rows by a specific column value (like categories).
• Customize group headers and footers.

⚠️ Limitations:

• No expand/collapse
• Only single-level grouping
• Not compatible with Scroller or Buttons exports yet

---

↕️ RowReorder

• Drag-and-drop rows to reorder.
• Works even with non-sequential data.
• Can sync changes with Editor for DB updates.

---

🚀 Scroller

• Virtual rendering for huge datasets.
• Renders only visible rows (smooth scrolling, fast performance).

For millions of records, this is a must.

---

🔍 SearchBuilder

• Build complex “AND / OR” search queries visually.
• Auto-detects column data types and filters accordingly.
• Extendable for custom logic.

---

🔎 SearchPanes

• Add filter panes for quick visual filtering.
• Multi-pane, multi-value searches.

Easier for users than typing queries manually.

---

✅ Select

• Enables selection of rows, columns, or cells.
• Selection modes:
  • os (Windows-like: Ctrl + click, Shift + click)
  • single, multi, multi+shift
• Full API: rows().select(), cells().select(), etc.
• Integrates with Buttons for “Select all / Deselect all”.

---

💾 StateRestore

• Save & reload multiple DataTable states (filters, layout, pages).
• Store locally or via AJAX for user sessions.

---

🗓️ DateTime

• Built-in date/time picker (used by Editor & SearchBuilder).
• Integrates with Moment.js, Luxon, or Day.js.

$('#myTable').DataTable( {
keys: true,
autoFill: true,
colReorder: true,
fixedColumns: true,
fixedHeader: true,
responsive: true,
rowReorder: true,
ajax: '/api/data',
scrollY: 200,
deferRender: true,
scroller: true,
select: true,
columnControl: ['order', ['orderAsc', 'orderDesc', 'search']],
buttons: [
{
extend: 'pdfHtml5',
title: '<?= $heading; ?>',
text: 'PDF',
titleAttr: 'Generate PDF',
className: 'btn-outline-danger btn-sm mr-1',
exportOptions: {
columns: ':visible'
} // to download only visible columsn using colvis
},
{
extend: 'excelHtml5',
title: '<?= $heading; ?>',
text: 'Excel',
titleAttr: 'Generate Excel',
className: 'btn-outline-success btn-sm mr-1'
},
{
extend: 'csvHtml5',
title: '<?= $heading; ?>',
text: 'CSV',
titleAttr: 'Generate CSV',
className: 'btn-outline-primary btn-sm mr-1'
},
{
extend: 'copyHtml5',
title: '<?= $heading; ?>',
text: 'Copy',
titleAttr: 'Copy to clipboard',
className: 'btn-outline-primary btn-sm mr-1'
},
{
extend: 'colvis',
title: '<?= $heading; ?>',
text: 'colvis',
titleAttr: 'select columns',
className: 'btn-outline-primary btn-sm mr-1'
},
{
extend: 'print',
text: 'Print',
titleAttr: 'Print Table',
title: '<?= $heading; ?>',
customize: function (win) {
$(win.document.body).find('h1').css('text-align', 'center');
$(win.document.body).css('font-size', '9px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
},
className: 'btn-outline-primary btn-sm'
},
//custom button
{
text: 'Reload',
action: function ( e, dt, node, config ) {
dt.ajax.reload();
}
],
rowGroup: {
dataSrc: 'group'
},
} );
``