Preview

Documentation v1.1.4

Column Rendering

This example show badges rendered next to the position content dynamically. This technique can be useful for adding links, assigning colours based on content rules and any other form of text manipulation you require.
<table id="kt_datatable_column_rendering" class="table table-striped table-row-bordered gy-5 gs-7">
    <thead>
        <tr class="fw-semibold fs-6 text-gray-800">
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>
var status = {
				1: {"title": "Pending", "state": "primary"},
				2: {"title": "Delivered", "state": "danger"},
				3: {"title": "Canceled", "state": "primary"},
				4: {"title": "Success", "state": "success"},
				5: {"title": "Info", "state": "info"},
				6: {"title": "Danger", "state": "danger"},
				7: {"title": "Warning", "state": "warning"},
			};

			$("#kt_datatable_fixed_header").DataTable({
				"fixedHeader": {
					"header":true
				},
				"columnDefs": [
					{
						// The `data` parameter refers to the data for the cell (defined by the
						// `data` option, which defaults to the column being worked with, in
						// this case `data: 0`.
						"render": function ( data, type, row ) {
							var index = KTUtil.getRandomInt(1, 7);

							return data + '<span class="ms-2 badge badge-light-' + status[index]['state'] + ' fw-semibold">' + status[index]['title'] + '</span>';
						},
						"targets": 1
					}
				]
			});

Fixed Header

FixedHeader provides the ability to perform this action with DataTables tables. It operates by detaching the header and footer elements from the host table and attaching them to the top or bottom of the screen as required by the scrolling position of the window
<table id="kt_datatable_fixed_header" class="table table-striped table-row-bordered gy-5 gs-7">
    <thead>
        <tr class="fw-semibold fs-6 text-gray-800">
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>
var status = {
				1: {"title": "Pending", "state": "primary"},
				2: {"title": "Delivered", "state": "danger"},
				3: {"title": "Canceled", "state": "primary"},
				4: {"title": "Success", "state": "success"},
				5: {"title": "Info", "state": "info"},
				6: {"title": "Danger", "state": "danger"},
				7: {"title": "Warning", "state": "warning"},
			};

			$("#kt_datatable_fixed_header").DataTable({
				"fixedHeader": {
					"header":true,
					"headerOffset": 5
				},
				"columnDefs": [
					{
						// The `data` parameter refers to the data for the cell (defined by the
						// `data` option, which defaults to the column being worked with, in
						// this case `data: 0`.
						"render": function ( data, type, row ) {
							var index = KTUtil.getRandomInt(1, 7);

							return data + '<span class="ms-2 badge badge-light-' + status[index]['state'] + ' fw-bold">' + status[index]['title'] + '</span>';
						},
						"targets": 1
					}
				]
			});

Complex Header

This example shows multiple layers of heading rows. This technique can be useful for large scale data types that requires a single title heading to be split into multiple columns for better data readability.
<table id="kt_datatable_complex_header" class="table table-striped table-row-bordered gy-5 gs-7 border rounded w-100">
    <thead>
        <tr class="fw-bold fs-6 text-gray-800 px-7">
            <th rowspan="2" class="align-middle border-bottom border-end w-200px">Name</th>
            <th colspan="2" class="border-bottom">HR Information</th>
            <th colspan="3" class="border-bottom">Contact</th>
        </tr>
        <tr class="fw-bold fs-6 text-gray-800 px-7">
            <th class="ps-2">Position</th>
            <th>Salary</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>
$("#kt_datatable_complex_header").DataTable({
    "columnDefs": [{
        "visible": false,
        "targets": -1
    }]
});

Row Grouping

In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden).
<table id="kt_datatable_row_grouping" class="table table-striped table-row-bordered gy-5 gs-7 border rounded w-100">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>
var groupColumn = 2;

var table = $("#kt_datatable_row_grouping").DataTable({
	"columnDefs": [{
		"visible": false,
		"targets": groupColumn
	}],
	"order": [
		[groupColumn, "asc"]
	],
	"displayLength": 25,
	"drawCallback": function(settings) {
		var api = this.api();
		var rows = api.rows({
			page: "current"
		}).nodes();
		var last = null;

		api.column(groupColumn, {
			page: "current"
		}).data().each(function(group, i) {
			if (last !== group) {
				$(rows).eq(i).before(
					"<tr class=\"group fs-5 fw-bolder\"><td colspan=\"5\">" + group + "</td></tr>"
				);

				last = group;
			}
		});
	}
});

// Order by the grouping
$("#kt_datatable_row_grouping tbody").on("click", "tr.group", function() {
	var currentOrder = table.order()[0];
	if (currentOrder[0] === groupColumn && currentOrder[1] === "asc") {
		table.order([groupColumn, "desc"]).draw();
	} else {
		table.order([groupColumn, "asc"]).draw();
	}
});

Footer Callback

This example shows the datatable footer dynamically calculating the sum of a specified column. This technique can be useful for summing up columns for balance sheets or financial data.
<table id="kt_datatable_footer_callback" class="table table-striped table-row-bordered gy-5 gs-7 border rounded">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett</td>
            <td>Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>$170,750</td>
        </tr>
    </tbody>
    <tfoot>
        <tr class="fw-bold fs-6">
            <th colspan="3" class="text-nowrap align-end">Total:</th>
            <th colspan="2" class="text-danger fs-3"></th>
        </tr>
    </tfoot>
</table>
$("#kt_datatable_footer_callback").DataTable({
    "footerCallback": function(row, data, start, end, display) {
        var api = this.api(),
            data;

        // Remove the formatting to get integer data for summation
        var intVal = function(i) {
            return typeof i === "string" ?
                i.replace(/[\$,]/g, "") * 1 :
                typeof i === "number" ?
                i : 0;
        };

        // Total over all pages
        var total = api
            .column(4)
            .data()
            .reduce(function(a, b) {
                return intVal(a) + intVal(b);
            }, 0);

        // Total over this page
        var pageTotal = api
            .column(4, {
                page: "current"
            })
            .data()
            .reduce(function(a, b) {
                return intVal(a) + intVal(b);
            }, 0);

        // Update footer
        $(api.column(4).footer()).html(
            "$" + pageTotal + " ( $" + total + " total)"
        );
    }
});

DOM Positioning

When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. For more info please check DOM positioning documentation.
<table id="kt_datatable_dom_positioning" class="table table-striped table-row-bordered gy-5 gs-7 border rounded">
    <thead>
        <tr class="fw-bold fs-6 text-gray-800 px-7">
            <th>Name</th>
            <th>Position</th>
            <th>Salary</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>
$("#kt_datatable_dom_positioning").DataTable({
	"language": {
		"lengthMenu": "Show _MENU_",
	},
	"dom":
		"<'row mb-2'" +
		"<'col-sm-6 d-flex align-items-center justify-conten-start dt-toolbar'l>" +
		"<'col-sm-6 d-flex align-items-center justify-content-end dt-toolbar'f>" +
		">" +

		"<'table-responsive'tr>" +

		"<'row'" +
		"<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
		"<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
		">"
});

Responsive

This example shows an ability to enable and configure Responsive extension for DataTables.
<table id="kt_datatable_responsive" class="table table-striped border rounded gy-5 gs-7">
    <thead>
		<tr class="fw-semibold fs-6 text-gray-800">
			<th class="min-w-150px" data-priority="1">Name</th>
			<th class="min-w-300px">Position</th>
			<th class="min-w-300px">Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th class="min-w-100px" data-priority="2">Salary</th>
		</tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>
$("#kt_datatable_responsive").DataTable({
	responsive: true
});
This examples show to configure the responsive toggle button on the right:
<table id="kt_datatable_responsive_2" class="table table-striped border rounded gy-5 gs-7">
    <thead>
		<tr class="fw-semibold fs-6 text-gray-800">
			<th class="min-w-150px" data-priority="2">Name</th>
			<th class="min-w-250px">Position</th>
			<th class="min-w-250px">Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
			<th class="mw-25px" data-priority="1"></th>
		</tr>
    </thead>
    <tbody>
		<tr>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>61</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
			<td></td>
		</tr>
		<tr>
			<td>Garrett Winters</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>63</td>
			<td>2011/07/25</td>
			<td>$170,750</td>
			<td></td>
		</tr>
    </tbody>
</table>
$("#kt_datatable_responsive_2").DataTable({
	responsive: {
		details: {
			type: "column",
			target: -1
		}
	},
	columnDefs: [
		{
			className: "dtr-control dtr-control-last",
			orderable: false,
			targets:   -1
		},
		{
			// The `data` parameter refers to the data for the cell (defined by the
			// `data` option, which defaults to the column being worked with, in
			// this case `data: 0`.
			"render": function ( data, type, row ) {
				var index = KTUtil.getRandomInt(1, 7);

				return data + "<span class=\"ms-2 badge badge-light-" + status[index]["state"] + " fw-bold\">" + status[index]["title"] + "</span>";
			},
			"targets": 1
		}
	]
});

Select

This example shows an ability to enable and configure rows Select API for DataTables.
<table id="kt_datatable_select" class="table table-row-bordered border rounded gy-5 gs-7">
    <thead>
        <tr class="fw-bold fs-6 text-gray-800 px-7">
            <th class="min-w-300px" data-priority="1">Name</th>
            <th class="min-w-300px">Position</th>
            <th class="min-w-300px">Salary</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td><a href="#" class="btn btn-sm btn-success">Edinburgh</a></td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td><a href="#">Tokyo</a></td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>
$("#kt_datatable_select").DataTable({
	select: true
});
Preview Get Help Buy Now