In this JavaScript tutorial, we will see how to use tabulator js. In this tabulator js example or tabulator js tutorial, we will see how to use tabulator js to create interactive tables in no time.
What is tabulator js?
tabulator js is a javascript library that we can use to create interactive tables in seconds without much coding. It is very easy to use and fullyfeatured and an interactive table javascript library.
We can create visually attractive tables from any HTML Table, JavaScript Array, AJAX data source, or JSON formatted data.
tabulator js example
Now, we will see a tabulator js example, here we will create a table from a JavaScript array.
Here the first thing, we will do is create an HTML file. You can use visual studio code to create an HTML file. If you are new to HTML and JavaScript and no programming knowledge, then you can check out the below video tutorial.
Once you have the HTML file ready, the first thing we have to do is to refer the tabulator.min.css and tabulator.min.js file.
Here, I have used the CDN file path to refer the js and css file like below:
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>Next, we can create the JavaScript array like below:
var tabledata = [{
playerid: 1,
playername: "Virat Kohli",
price: "17",
team: "RCB",
joiningdate: "01/01/2020"
}, {
playerid: 2,
playername: "Rohit Sharma",
price: "15",
team: "MI",
joiningdate: "02/01/2020"
}, {
playerid: 3,
playername: "MS Dhoni",
price: "15",
team: "CSK",
joiningdate: "03/01/2020"
}, {
playerid: 4,
playername: "Shreyas Iyer",
price: "7",
team: "RCB",
joiningdate: "04/01/2020"
}, {
playerid: 5,
playername: "KL Rahul",
price: "11",
team: "KXIP",
joiningdate: "05/01/2020"
}, {
playerid: 6,
playername: "Dinesh Karthik",
price: "7",
team: "KKR",
joiningdate: "06/01/2020"
}, {
playerid: 7,
playername: "Steve Smith",
price: "12",
team: "RR",
joiningdate: "07/01/2020"
}, {
playerid: 8,
playername: "David Warner",
price: "12",
team: "SRH",
joiningdate: "08/01/2020"
}, {
playerid: 9,
playername: "Kane Williamson",
price: "3",
team: "SRH",
joiningdate: "09/01/2020"
}, {
playerid: 10,
playername: "Jofra Archer",
price: "7",
team: "RR",
joiningdate: "10/01/2020"
}, {
playerid: 11,
playername: "Andre Russell",
price: "9",
team: "KKR",
joiningdate: "11/01/2020"
}, {
playerid: 12,
playername: "Chris Gayle",
price: "2",
team: "KXIP",
joiningdate: "12/01/2020"
},
];Once the data source is ready, now we can use the tabulator js code to band the data to an html div tag. So here I have created a div with an id like below:
<div id="players"></div>Below is the code how you can create the interactive table with the above array data.
var table = new Tabulator("#players", {
height: 220,
data: tabledata,
layout: "fitColumns",
pagination: "local",
paginationSize: 5,
tooltips: true,
columns: [{
title: "Player Name",
field: "playername",
sorter: "string",
width: 150,
headerFilter: "input"
}, {
title: "Player Price",
field: "price",
sorter: "number",
hozAlign: "left",
formatter: "progress",
},
{
title: "Team",
field: "team",
sorter: "string",
hozAlign: "center",
editor: "select",
headerFilter: true,
headerFilterParams: {
"RCB": "RCB",
"MI": "MI",
"KKR": "KKR",
}
}, {
title: "Joining Date",
field: "joiningdate",
sorter: "date",
hozAlign: "center"
},
],
rowClick: function(e, row) {
alert("Row " + row.getData().playerid + " Clicked!!!!");
},
});Let us understand the below things:
- new Tabulator(“#players”,{ : Here #players is the HTML div id where the table will render.
- height: 220: Here you can define the height of the table, if more records will load, then a scrollbar will appear.
- data: tabledata: Here we need to pass the data, in this case, this is the JavaScript data array name.
- layout: “fitColumns”: The table layout will fit the page.
- pagination: “local” and paginationSize: 5: These parameters we required to implement paging. To enable pagination we need to set it to local and paginationSize.
- tooltips: true: Once you set it to true when you hover any column in the table the data will be displayed.
columns: [{
title: "Player Name",
field: "playername",
sorter: "string",
width: 150,
headerFilter: "input"
}The columns parameter is very important. You can add what are the columns you want to display in the table from the data source. Here below are the parameters it will take:
- title: This will be table column display name
- field: Data source field from the data source
- sorter: If you are trying to sort text field, then we have to mention string. Similarly, for the integer type field write “number“, and for DateTime type, we have to write “date“.
- headerFilter: “input”: If you want to have a filter option below to the header, you can write input for string type.
Similarly, if you want to use filter for dropdownlist, we have to write like below:
headerFilter: true,
headerFilterParams: {
"RCB": "RCB",
"MI": "MI",
"KKR": "KKR",
}If you want to get the selected row value from the table you can use like below:
row.getData().playerid: Here playerid is the column name.
rowClick: function(e, row) {
alert("Row " + row.getData().playerid + " Clicked!!!!");
},
The complete HTML and JavaScript code will look like below. The entire .html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulator Example</title>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="players"></div>
<script type="text/javascript">
var tabledata = [{
playerid: 1,
playername: "Virat Kohli",
price: "17",
team: "RCB",
joiningdate: "01/01/2020"
}, {
playerid: 2,
playername: "Rohit Sharma",
price: "15",
team: "MI",
joiningdate: "02/01/2020"
}, {
playerid: 3,
playername: "MS Dhoni",
price: "15",
team: "CSK",
joiningdate: "03/01/2020"
}, {
playerid: 4,
playername: "Shreyas Iyer",
price: "7",
team: "RCB",
joiningdate: "04/01/2020"
}, {
playerid: 5,
playername: "KL Rahul",
price: "11",
team: "KXIP",
joiningdate: "05/01/2020"
}, {
playerid: 6,
playername: "Dinesh Karthik",
price: "7",
team: "KKR",
joiningdate: "06/01/2020"
}, {
playerid: 7,
playername: "Steve Smith",
price: "12",
team: "RR",
joiningdate: "07/01/2020"
}, {
playerid: 8,
playername: "David Warner",
price: "12",
team: "SRH",
joiningdate: "08/01/2020"
}, {
playerid: 9,
playername: "Kane Williamson",
price: "3",
team: "SRH",
joiningdate: "09/01/2020"
}, {
playerid: 10,
playername: "Jofra Archer",
price: "7",
team: "RR",
joiningdate: "10/01/2020"
}, {
playerid: 11,
playername: "Andre Russell",
price: "9",
team: "KKR",
joiningdate: "11/01/2020"
}, {
playerid: 12,
playername: "Chris Gayle",
price: "2",
team: "KXIP",
joiningdate: "12/01/2020"
},
];
var table = new Tabulator("#players", {
height: 220,
data: tabledata,
layout: "fitColumns",
pagination: "local",
paginationSize: 5,
tooltips: true,
columns: [{
title: "Player Name",
field: "playername",
sorter: "string",
width: 150,
headerFilter: "input"
}, {
title: "Player Price",
field: "price",
sorter: "number",
hozAlign: "left",
formatter: "progress",
},
{
title: "Team",
field: "team",
sorter: "string",
hozAlign: "center",
editor: "select",
headerFilter: true,
headerFilterParams: {
"RCB": "RCB",
"MI": "MI",
"KKR": "KKR",
}
}, {
title: "Joining Date",
field: "joiningdate",
sorter: "date",
hozAlign: "center"
},
],
rowClick: function(e, row) {
alert("Row " + row.getData().playerid + " Clicked!!!!");
},
});
</script>
</body>
</html>Once you run the HTML file, you can see the output will appear like below:
You may like the following JavaScript tutorials:
- How to call a javascript function when a checkbox is checked unchecked
- How to handle radio button checked and unchecked events using JavaScript and jQuery
- Run JavaScript after page loaded completely using jQuery
- Display SharePoint list data in HTML table using JavaScript
- Bind SharePoint list templates to dropdown list using JavaScript
I hope this tabulator js tutorial will be very much helpful to you to start with tabulator js. We saw an example on how to create a very interactive table from a JavaScript array using tabulator js.
After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Out audiences are from the United States, Canada, United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a SharePoint MVP(8 times), check out My MVP Profile. I have also worked in companies like HP, TCS, KPIT, etc.
Nice tutorial.Thanks!