jQWidgets jqxDataTable columns Property

Last Updated : 31 Aug, 2022

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDataTable is used for reading and displaying the data from the HTML Table. This is also used to display data from various data sources like XML, JSON, and Array.

The columns property is used to set the columns of the displayed jqxDataTable. It is of array type and its default value is [].

Properties of the columns:

datafield: It is the specified data field of the column.
text: It is the specified column name.
displayfield: It displays the field of the specified column.
sortable: It states if the column is sortable or not.
filterable: It states if the column is filterable or not.
filter: It sets the column’s initialization filter.
columngroup: It determines the name of the column’s parent group.
enabletooltips: It determines whether tooltips are enabled.
exportable: It states if the column is exportable or not.
editable: It states if the column is editable or not.
groupable: It states if the column is groupable or not.
resizable: It states if the column is resizable or not.
draggable: It states if the column is draggable or not.
classname: It defines the class name.
cellclassname: It defines the class name of the cell.
width: It defines the width of the stated column.
menu: It defines if the column has a pop-up menu or not.

Syntax:

Set the columns property.

$('Selector').jqxDataTable({ columns: [] });

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>

Example 1: The below example illustrates the jqxDataTable columns property in jQWidgets.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"jqwidgets/styles/jqx.base.css" 
          type="text/css"/> 
    <script type="text/javascript" 
            src="scripts/jquery.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxdata.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxscrollbar.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxlistbox.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxdropdownlist.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxdatatable.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            jQWidgets jqxDataTable columns Property 
        </h3> 
        <div id="#Data_Table"></div> 
        <table id="Data_Table" border="1"> 
            <thead> 
                <tr> 
                    <th>Employee_Name</th> 
                    <th>Company</th> 
                    <th>Designation</th> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <td>Rohit</td> 
                    <td>GeeksforGeeks</td> 
                    <td>HR</td> 
                </tr> 
                <tr> 
                    <td>Rahul</td> 
                    <td>Capgemini</td> 
                    <td>Software Engineer</td> 
                </tr> 
                <tr> 
                    <td>Vivek</td> 
                    <td>CESC</td> 
                    <td>Electrical Engineer</td> 
                </tr> 
                <tr> 
                    <td>Amit</td> 
                    <td>Apple</td> 
                    <td>Manager</td> 
                </tr> 
                <tr> 
                    <td>Nidhi</td> 
                    <td>Google</td> 
                    <td>System developer</td> 
                </tr> 
                <tr> 
                    <td>Nisha</td> 
                    <td>Flipkart</td> 
                    <td>Software Engineer</td> 
                </tr> 
            </tbody> 
        </table> 
  
    </center> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#Data_Table").jqxDataTable({ 
                width: "300px", 
                height: "160px", 
                columns: [{ 
                    text: 'Employee_Name', 
                    dataField: 'Employee_Name', 
                    width: 100 
                }, { 
                    text: 'Company', 
                    dataField: 'Company', 
                    width: 100 
                }, { 
                    text: 'Designation', 
                    dataField: 'Designation', 
                    width: 100 
                }] 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Example 2: Below is another example that illustrates the jqxDataTable columns property in jQWidgets by setting its value as []. Here, no data is loaded as the column field is empty.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"jqwidgets/styles/jqx.base.css" 
          type="text/css"/> 
    <script type="text/javascript" 
            src="scripts/jquery.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxdata.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxbuttons.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxscrollbar.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxlistbox.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxdropdownlist.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxdatatable.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            jQWidgets jqxDataTable columns Property 
        </h3> 
        <div id="#Data_Table"></div> 
        <table id="Data_Table" border="1"> 
            <thead> 
                <tr> 
                    <th>Employee_Name</th> 
                    <th>Company</th> 
                    <th>Designation</th> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <td>Rohit</td> 
                    <td>GeeksforGeeks</td> 
                    <td>HR</td> 
                </tr> 
                <tr> 
                    <td>Rahul</td> 
                    <td>Capgemini</td> 
                    <td>Software Engineer</td> 
                </tr> 
                <tr> 
                    <td>Vivek</td> 
                    <td>CESC</td> 
                    <td>Electrical Engineer</td> 
                </tr> 
                <tr> 
                    <td>Amit</td> 
                    <td>Apple</td> 
                    <td>Manager</td> 
                </tr> 
                <tr> 
                    <td>Nidhi</td> 
                    <td>Google</td> 
                    <td>System developer</td> 
                </tr> 
                <tr> 
                    <td>Nisha</td> 
                    <td>Flipkart</td> 
                    <td>Software Engineer</td> 
                </tr> 
            </tbody> 
        </table> 
  
    </center> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#Data_Table").jqxDataTable({ 
                width: "300px", 
                height: "100px", 
                columns: [], 
            }); 
        }); 
    </script> 
</body> 
  
</html>