DataTables scrollX Option - GeeksforGeeks

31 May, 2021
DataTables is 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 scrollX option is used to specify whether horizontal scrolling should be enabled in a DataTable. This option will enable the user to horizontally scroll any overflowing content in the table itself. This can be used when there are a lot of columns or the columns do not fit in the layout. A true value enables this scrolling and a false value disables it.
Syntax:
{ scrollX: value }
Option Value: This option has a single value as mentioned above and described below:
value: This is a boolean value that enables or disables the horizontal scrolling of the DataTable. The default value is false.
The below example illustrates the use of this option.
Example 1: This example enables the horizontal scrolling of the DataTable.
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 scrollX Option</h3>    <!-- HTML table with random data -->  <table id="tableID" class="display nowrap"         style="width: 100%">    <thead>      <tr>        <th>Registration ID</th>        <th>Full Name</th>        <th>Age at Registration</th>        <th>Full Address</th>        <th>Phone Number</th>      </tr>    </thead>    <tbody>      <tr>        <td>1</td>        <td>Sam Fisher</td>        <td>35</td>        <td>Earth, Galaxy</td>        <td>01234344043</td>      </tr>      <tr>        <td>2</td>        <td>Jack the Ripper</td>        <td>30</td>        <td>Earth, Galaxy</td>        <td>0124334043</td>      </tr>      <tr>        <td>3</td>        <td>Reaper the Leviathan</td>        <td>45</td>        <td>4546B</td>        <td>0189994043</td>      </tr>      <tr>        <td>4</td>        <td>Ghost the Leviathan</td>        <td>105</td>        <td>4546B</td>        <td>0123489043</td>      </tr>      <tr>        <td>5</td>        <td>Robby the Robber</td>        <td>19</td>        <td>Mars</td>        <td>68898988</td>      </tr>    </tbody>  </table>  <script>      // Initialize the DataTable    $(document).ready(function () {      $('#tableID').DataTable({          // Enable the horizontal scrolling        // of data in DataTable        scrollX: true      });    });   </script></body></html>
Output:
Example 2: This example disables the horizontal scrolling of the DataTable.
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;">    GeeksForGeek    s</h1>  <h3>DataTables scrollX Option</h3>    <!-- HTML table with random data -->  <table id="tableID" class="display nowrap"         style="width: 100%">    <thead>      <tr>        <th>Registration ID</th>        <th>Full Name</th>        <th>Age at Registration</th>        <th>Full Address</th>        <th>Phone Number</th>      </tr>    </thead>    <tbody>      <tr>        <td>1</td>        <td>Sam Fisher</td>        <td>35</td>        <td>Earth, Galaxy</td>        <td>01234344043</td>      </tr>      <tr>        <td>2</td>        <td>Jack the Ripper</td>        <td>30</td>        <td>Earth, Galaxy</td>        <td>0124334043</td>      </tr>      <tr>        <td>3</td>        <td>Reaper the Leviathan</td>        <td>45</td>        <td>4546B</td>        <td>0189994043</td>      </tr>      <tr>        <td>4</td>        <td>Ghost the Leviathan</td>        <td>105</td>        <td>4546B</td>        <td>0123489043</td>      </tr>      <tr>        <td>5</td>        <td>Robby the Robber</td>        <td>19</td>        <td>Mars</td>        <td>68898988</td>      </tr>    </tbody>  </table>  <script>      // Initialize the DataTable    $(document).ready(function () {      $('#tableID').DataTable({          // Disable the horizontal scrolling        // of data in DataTable        scrollX: false      });    });   </script></body></html>
Output:
jQuery-DataTables
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
jQuery | ajax() Method
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to get the value in an input text box using jQuery ?
QR Code Generator using HTML, CSS and jQuery
jQuery UI | Date Picker
Installation of Node.js on Linux
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?