DataTables tabIndex Option

Last Updated : 27 Jul, 2021

DataTables is a jQuery plugin that can be used for adding interactive and advanced controls to HTML tables for the webpage. This also allows the data in the table to be searched, sorted, and filtered according to the needs of the user. The DataTable also exposes a powerful API that can be further used to modify how the data is displayed.

The tabIndex option is used to specify the flow order by which the controls of the table are selectable on the page. This option can be used to overrule this flow and change the way by which the keyboard is used to interact with the page. By default, a DataTable will have a tabIndex already assigned to it so that the controls are accessible without the use of the mouse.

The value of -1 will mean that the table’s built-in navigation will be disabled and prevent the use of the keyboard to navigate the page.

{ tabIndex: value }

Parameters: This option has a single value as mentioned above and described below.

value: This is an integer value that specifies the flow of the table when the tab key is used. The default value is 0.

The example below illustrate the use of this option.

Example 1: In this example, the first table has the tabIndex set to 2 and the second table has to be tabIndex set to 1, therefore the second table’s controls are selected before the first table.

HTML

<html>
<head>
  <!-- jQuery -->
  <script type="text/javascript"
          src="https://code.jquery.com/jquery-3.5.1.js">
  </script>
 
  <!-- DataTables CSS -->
  <link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
 
  <!-- DataTables JS -->
  <script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
  </script>
</head>
<body>
  <h1 style="color: green;">
    GeeksForGeeks
  </h1>
  <h3>DataTables tabIndex Option</h3>
 
  <!-- HTML table with random data -->
  <table id="tableID" class="display nowrap">
    <thead>
      <tr>
        <th>Day</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2</td>
        <td>Patricia</td>
        <td>22</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Caleb</td>
        <td>47</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Abigail</td>
        <td>48</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Rahim</td>
        <td>44</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Sheila</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
  <br>
   
  <!-- HTML table with random data -->
  <table id="tableID2" class="display nowrap">
    <thead>
      <tr>
        <th>Day</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2</td>
        <td>Patricia</td>
        <td>22</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Caleb</td>
        <td>47</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Abigail</td>
        <td>48</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Rahim</td>
        <td>44</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Sheila</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
  <script>
 
    // Initialize the DataTable
    $(document).ready(function () {
      $('#tableID').DataTable({
 
        info: false,
        paging: false,
        searching: false,
 
        // Specify the tabindex value for
        // selecting the controls of the table
        tabIndex: 2,
      });
 
      $('#tableID2').DataTable({
 
        info: false,
        paging: false,
        searching: false,
 
        // Specify the tabindex value for
        // selecting the controls of the table
        tabIndex: 1,
      });
    });
  </script>
</body>
</html>

Output:

Example 2: In this example, the first table has the tabIndex set to -1, therefore the first table is not selectable in the flow of the document.

HTML

<html>
<head>
  <!-- jQuery -->
  <script type="text/javascript"
          src="https://code.jquery.com/jquery-3.5.1.js">
  </script>
 
  <!-- DataTables CSS -->
  <link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
 
  <!-- DataTables JS -->
  <script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
  </script>
</head>
<body>
  <h1 style="color: green;">
    GeeksForGeeks
  </h1>
  <h3>DataTables tabIndex Option</h3>
 
  <!-- HTML table with random data -->
  <table id="tableID" class="display nowrap">
    <thead>
      <tr>
        <th>Day</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2</td>
        <td>Patricia</td>
        <td>22</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Caleb</td>
        <td>47</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Abigail</td>
        <td>48</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Rahim</td>
        <td>44</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Sheila</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
  <br>
   
  <!-- HTML table with random data -->
  <table id="tableID2" class="display nowrap">
    <thead>
      <tr>
        <th>Day</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2</td>
        <td>Patricia</td>
        <td>22</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Caleb</td>
        <td>47</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Abigail</td>
        <td>48</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Rahim</td>
        <td>44</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Sheila</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
  <script>
 
    // Initialize the DataTable
    $(document).ready(function () {
      $('#tableID').DataTable({
 
        info: false,
        paging: false,
        searching: false,
 
        // Disable the selecting of the
        // controls of the table
        tabIndex: -1,
      });
 
      $('#tableID2').DataTable({
 
        info: false,
        paging: false,
        searching: false,
 
        // Specify the tabindex value for
        // selecting the controls of the table
        tabIndex: 0,
      });
    });
  </script>
</body>
</html>