DataTables ColumnDefs Option

Last Updated : 24 May, 2022

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.

ColumnDefs option allows you to assign specific options to columns in the table. It can be more than one column.

Syntax:

columnDefs: [
{ columnOptions },
{ columnOptions }

Option Value: This option has a single value as mentioned above and described below:

array: this takes an array containing values from columns

Example 1:

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 columnDefs Option</h3> 
    <!-- HTML table with student data -->
    <table id="gfg" class="display"> 
        <thead> 
            <tr> 
                <th>Sno.</th> 
                <th>gfg</th> 
                <th>language</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>1</td> 
                <td>gfg1</td> 
                <td>HTML</td> 
            </tr> 
            <tr> 
                <td>2</td> 
                <td>gfg2</td> 
                <td>jQuery</td> 
            </tr> 
            <tr> 
                <td>3</td> 
                <td>gfg3</td> 
                <td>JavaScript</td> 
            </tr> 
            <tr> 
                <td>4</td> 
                <td>gfg4</td> 
                <td>ReactJS</td> 
            </tr> 
        </tbody> 
    </table> 
    <script> 
        $(document).ready(function () { 
            $('#gfg').DataTable({ 
  
                columnDefs: [ 
                    { targets: [0, 1, 2], visible: true }, 
                    { targets: '_all', visible: false } 
                ] 
            }); 
        }); 
    </script> 
</body> 
</html>

Output:

Example 2:

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 columnDefs Option</h3> 
    <!-- HTML table with student data -->
    <table id="gfg" class="display"> 
        <thead> 
            <tr> 
                <th>Sno.</th> 
                <th>gfg</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>1</td> 
                <td>gfg1</td> 
            </tr> 
            <tr> 
                <td>2</td> 
                <td>gfg2</td> 
            </tr> 
            <tr> 
                <td>3</td> 
                <td>gfg3</td> 
            </tr> 
            <tr> 
                <td>4</td> 
                <td>gfg4</td> 
            </tr> 
            <tr> 
                <td>5</td> 
                <td>gfg5</td> 
            </tr> 
            <tr> 
                <td>6</td> 
                <td>gfg6</td> 
            </tr> 
            <tr> 
                <td>7</td> 
                <td>gfg7</td> 
            </tr> 
            <tr> 
                <td>8</td> 
                <td>gfg8</td> 
            </tr> 
            <tr> 
                <td>9</td> 
                <td>gfg9</td> 
            </tr> 
            <tr> 
                <td>10</td> 
                <td>gfg10</td> 
            </tr> 
            <tr> 
                <td>11</td> 
                <td>gfg11</td> 
            </tr> 
            <tr> 
                <td>12</td> 
                <td>gfg12</td> 
            </tr> 
        </tbody> 
    </table> 
    <script> 
        $(document).ready(function () { 
            $('#gfg').DataTable({ 
                columnDefs: [ 
                    { targets: [0, 1], visible: true }, 
                    { targets: '_all', visible: false } 
                ] 
            }); 
        }); 
    </script> 
</body> 
</html>