DataTables autoWidth Option - GeeksforGeeks

21 Jul, 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 autoWidth option is used to specify whether the automatic calculation of the column width in the DataTable is enabled or not. This calculation takes a little time and may be disabled when the column widths are explicitly passed using the columns.width option.
Syntax:
{ autoWidth: value }
Parameters: This option has a single value as mentioned above and described below:
value: This is a boolean value that denotes whether the automatic calculation of column width is enabled. The default value is true.
The examples below illustrate the use of this option.
Example 1: In this example, the autoWidth option is set to its default state, which means that the column widths will be calculated automatically.
HTML
<!DOCTYPE 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 autoWidth Option</h3>    <!-- HTML table with random data -->  <table id="tableID" class="display nowrap">    <thead>      <tr>        <th>ID</th>        <th>Full Name</th>        <th>Age</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 automatic calculation        // of column widths in the DataTable        autoWidth: true      });    });   </script></body>  </html>
Output:
Example 2: In this example, the autoWidth option is set to false and the column widths are passed as an array.
HTML
<!DOCTYPE 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 autoWidth Option</h3>      <!-- HTML table with random data -->    <table id="tableID" class="display nowrap">      <thead>        <tr>          <th>ID</th>          <th>Full Name</th>          <th>Age</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 automatic calculation                // of column widths in the DataTable                autoWidth: false,                  // The columns are explicitly                // specified as the column array                columns: [                    { "width": "5%" },                    { "width": "20%" },                    { "width": "5%" },                    { "width": "50%" },                    { "width": "25%" }                ]            });        });    </script></body>  </html>
Output:
Reference: https://datatables.net/reference/option/autoWidth
jQuery-DataTables
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
How to get the value in an input text box using jQuery ?
jQuery | parent() & parents() with Examples
Difference Between JavaScript and jQuery
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript