John Mwaniki /   17 Jun 2023

How to Enable Reordering of Columns and Rows in DataTables

In this article, we will cover how to enable the reordering of your HTML table columns and rows using the DataTables plugin.

Reordering allows users to be able to click and drag the columns and rows in a table thus rearranging their position and order in which they occur. This offers greater flexibility and customization.

This enables users to personalize the table layout based on their specific needs such as prioritizing important information or grouping related data together.

It also provides a more intuitive and dynamic way to explore and manipulate data, enhancing the overall user experience.

Enabling Reordering in DataTables

Below are the steps involved in enabling column and row reordering in DataTables.

Step 1: Include Required Dependencies

If you have already installed DataTables in your page, all you will need is to include the following four additional files in your page.

<!-- CSS files -->
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.6.2/css/colReorder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.3.3/css/rowReorder.dataTables.min.css">

<!-- Javascript files -->
<script src="https://cdn.datatables.net/colreorder/1.6.2/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.3.3/js/dataTables.rowReorder.min.js"></script>

Alternatively, you can use the DataTables download builder, which allows you to build your own custom DataTables package by selecting your technologies or frameworks and only including two files instead.

In either of the two ways, you can either include them from the CDN or download them and host them locally in your project.

Step 2: Initialize DataTables with Reordering Options

Next, you need to initialize the DataTables plugin on your table which is simply done as below.

$(document).ready(function() {
  $('#tableID').DataTable();
});

But now that we want to enable column and row reordering, we will use the colReorder and rowReorder extensions provided by DataTables. Modify the initialization code as follows:

$(document).ready(function() {
  $('#tableID').DataTable({
    colReorder: true,
    rowReorder: true
  });
});

This will allow users to reorder columns and rows by clicking and dragging the headers or rows.

Customizing Reordering Options

If for some reason you want to restrict reordering to specific columns, you can do it as below:

$(document).ready(function() {
  $('#tableID').DataTable({
    colReorder: {
      fixedColumnsLeft: 1
    },
    rowReorder: true
  });
});

The above configuration disables the reordering of the left column in the table. The users can reorder the rest but not it.

You can increase the value of fixedColumnsLeft if you want to apply restrictions on several columns from the left.

If you want to apply the reordering restriction from the right, just change the property to fixedColumnsRight and everything else works the same.

Now you know how to enable columns and row reordering in your HTML tables using DataTables.