Logo

Documentation v4.0.0

  • Home
  • Components
  • DataTable
Light
Dark
System

Overview

DataTable is a wrapper around jQuery DataTables that provides a simplified API for common operations: AJAX data loading, row CRUD, filtering, column visibility, and more.

Import

import {components} from 'metronic-extension';
const {DataTable} = components;

Constructor

new DataTable(element, options)
Parameter Type Description
element string | HTMLTableElement CSS selector string or HTMLTableElement.
options DataTableOptions Custom options inherited from DataTables.Settings.

Properties

Property Type Description
api DataTables.Api The underlying DataTables API instance for advanced operations.

Methods

Method Return Description
reload(resetPaging?) Promise<any> Reloads data via AJAX. Pass true to reset paging (default: false).
adjustColumns() void Recalculates column widths.
filter(columnSelector, input, regex?) void Filters a column by the given search string.
getContainer() HTMLElement Returns the table wrapper element.
getFilterContainer() HTMLElement | null Returns the filter container element.
createRow(data, paging?) DataTable Adds a new row. Pass false to keep current page.
deleteRow(rowSelector) DataTable Deletes a row by selector.
updateRow(rowSelector, data, redraw?) DataTable Updates a row's data.
getRowData(rowSelector?) any[] | object Returns row data objects.
getRowCount(rowSelector?) number Returns the number of rows.
getRowNodes() HTMLTableRowElement[] Returns the DOM nodes of all rows.
getRowObject(rowSelector) DataTables.RowsMethods Returns a DataTables API instance for the selected rows.
column(columnSelector, modifier?) DataTables.ColumnMethods Returns a DataTables API instance for a column.
clear() DataTable Removes all rows from the table.

Basic Example

A table with inline HTML data, sortable columns, and built-in search.
Name Position Office Age
Airi Satou Accountant Tokyo 33
Angelica Ramos Chief Executive Officer London 47
Ashton Cox Junior Technical Author San Francisco 66
Bradley Greer Software Engineer London 41
Brenden Wagner Software Engineer San Francisco 28
Brielle Williamson Integration Specialist New York 61
Caesar Vance Pre-Sales Support New York 21
Cedric Kelly Senior Javascript Developer Edinburgh 22
Donna Snider Customer Support New York 27
Garrett Winters Accountant Tokyo 63
Gloria Little Systems Administrator New York 59
Herrod Chandler Sales Assistant San Francisco 59 
<table id="myTable" class="table table-row-bordered gy-5">
  <thead>
    <tr class="text-start text-gray-700 fw-bold fs-7 gs-0">
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>

import {components} from 'metronic-extension';
const {DataTable} = components;

const table = new DataTable('#myTable', {
  pageLength: 5,
  columnDefs: [
    {targets: 0, data: 'name'},
    {targets: 1, data: 'position'},
    {targets: 2, data: 'office'},
    {targets: 3, data: 'age'},
  ],
});

AJAX Example

Load table data from a remote JSON endpoint. Click "Reload" to re-fetch the data.
Name Position Office Age 
<table id="myTable" class="table table-row-bordered gy-5">
  <thead>
    <tr class="text-start text-gray-700 fw-bold fs-7 gs-0">
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<button id="reloadBtn" type="button" class="btn btn-sm btn-primary">Reload</button>

import {components} from 'metronic-extension';
const {DataTable} = components;

const table = new DataTable('#myTable', {
  pageLength: 5,
  ajax: '/api/employees',
  columnDefs: [
    {targets: 0, data: 'name'},
    {targets: 1, data: 'position'},
    {targets: 2, data: 'office'},
    {targets: 3, data: 'age'},
  ],
});

document.querySelector('#reloadBtn').addEventListener('click', async () => {
  await table.reload();
});

// Sample JSON — /api/employees
{
  "data": [
    {"id": 1, "name": "Airi Satou", "position": "Accountant", "office": "Tokyo", "age": 33},
    {"id": 2, "name": "Angelica Ramos", "position": "Chief Executive Officer", "office": "London", "age": 47},
    {"id": 3, "name": "Ashton Cox", "position": "Junior Technical Author", "office": "San Francisco", "age": 66}
  ],
  "recordsTotal": 15,
  "recordsFiltered": 15
}

CRUD Example

Add, update, and delete rows dynamically.
Name Position Office Actions
Airi Satou Accountant Tokyo
Angelica Ramos Chief Executive Officer London
Ashton Cox Junior Technical Author San Francisco
Bradley Greer Software Engineer London
Brenden Wagner Software Engineer San Francisco
Brielle Williamson Integration Specialist New York
Caesar Vance Pre-Sales Support New York
Cedric Kelly Senior Javascript Developer Edinburgh 
<button id="addRowBtn" type="button" class="btn btn-sm btn-primary">Add Row</button>
<button id="clearBtn" type="button" class="btn btn-sm btn-danger">Clear All</button>

<table id="myTable" class="table table-row-bordered gy-5">
  <thead>
    <tr class="text-start text-gray-700 fw-bold fs-7 gs-0">
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th class="text-end">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td class="text-end">
        <button data-on-delete type="button" class="btn btn-sm btn-light-danger">Delete</button>
      </td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>

import {components} from 'metronic-extension';
const {DataTable} = components;

const table = new DataTable('#myTable', {
  pageLength: 5,
  columnDefs: [
    {targets: 0, data: 'name'},
    {targets: 1, data: 'position'},
    {targets: 2, data: 'office'},
    {targets: 3, data: 'actions', orderable: false},
  ],
});

// Add a row
table.createRow({
  name: 'John Doe',
  position: 'Developer',
  office: 'Tokyo',
  actions: '<button data-on-delete class="btn btn-sm btn-light-danger">Delete</button>',
});

// Delete a row by clicking a button inside it
document.querySelector('#myTable tbody').addEventListener('click', event => {
  const button = event.target.closest('[data-on-delete]');
  if (!button) return;
  table.deleteRow(button.closest('tr'));
});

// Clear all rows
table.clear();
Previous BlockUI Next Dialog