Tabulator: JavaScript Library

Tabulator JavaScript is a powerful JavaScript library that allows us to effortlessly create interactive tables in just a few seconds, without the need for extensive coding. With its user-friendly interface and comprehensive set of features, Tabulator JS simplifies the process of creating visually appealing and dynamic tables. Whether you have an existing HTML table, JavaScript array, AJAX data source, or JSON formatted data, Tabulator JS can transform it into an interactive and visually striking table. With its ease of use and versatility, Tabulator JS is the go-to solution for anyone seeking to add interactive tables to their web applications.

Benefits of using Tabulator:

1. Easy and Efficient Data Display: Tabulator provides a simple and efficient way to display and manipulate large datasets in a tabular format. It offers various features and functionalities to enhance the data presentation and make it more user-friendly.

2. Interactive and Responsive: Tabulator allows users to interact with the table data by sorting, filtering, grouping, and formatting the columns. It provides a responsive layout that adjusts automatically to different screen sizes, making it suitable for both desktop and mobile devices.

3. Customization Options: Tabulator offers extensive customization options to tailor the table appearance and behavior according to specific requirements. You can customize cell formatting, column headers, row styles, and more to create a visually appealing and intuitive user interface.

4. Data Manipulation: With Tabulator, you can easily perform various data manipulation operations such as adding, updating, and deleting rows dynamically. It provides built-in functions to handle data editing, validation, and calculations within the table.

5. Extensible and Modular Architecture: Tabulator follows a modular architecture that allows developers to add and customize features as needed. It provides a rich set of plugins and extensions that can be integrated seamlessly to enhance the functionality of the table.

Features of Tabulator:

1. Sorting: Tabulator supports sorting columns in ascending or descending order based on their values.

2. Filtering: It enables filtering of table data based on specific criteria, allowing users to view a subset of data.

3. Pagination: Tabulator provides pagination functionality to split large datasets into manageable pages.

4. Grouping: It allows the grouping of rows based on common values in a particular column, providing a hierarchical view of the data.

5. Formatting: Tabulator offers various formatting options for cells, such as date/time formatting, number formatting, and custom formatting.

6. Editing: It provides inline editing capabilities to modify cell values directly within the table.

7. Exporting: Tabulator supports exporting table data to different file formats, including CSV, Excel, and PDF.

8. Accessibility: It ensures accessibility compliance by providing features like keyboard navigation, screen reader compatibility, and ARIA attributes.

Requirements before using Tabulator:

1. JavaScript: Tabulator is a JavaScript library, so a basic understanding of JavaScript is required for implementation and customization.

2. HTML and CSS: Familiarity with HTML and CSS is necessary for integrating Tabulator into web pages and applying custom styles.

3. Compatible Browsers: Tabulator is compatible with modern web browsers, including Chrome, Firefox, Safari, and Edge. Ensure that the target browsers support the required JavaScript features.

Getting Started

Install and Import Tabulator in a Web Project:

STEP 1: Visit the Tabulator website or use a package manager like npm or yarn to download and install Tabulator.

STEP 2: Once you have the Tabulator files, include the Tabulator CSS and JavaScript files in your HTML page. You can use the <link> tag to include the CSS file and the <script> tag to include the JavaScript file.

Creating a Basic Table with Data and Options:

STEP 1: In your HTML file, create a container element where you want the table to appear. For example, you can use a <div> element with a specific ID or class, like <div id="myTable"></div>.

STEP 2: In your JavaScript code, select the container element using its ID or class. For instance, you can use

const container = document.querySelector('#myTable');.

STEP 3: Initialize a new Tabulator instance by creating a new object with the necessary options. For example:

const table = new Tabulator(container, {     
    // Specify options here }); 

STEP 4: Prepare your data in an array of objects, where each object represents a row in the table. Each property in the object corresponds to a column in the table.

STEP 5: Set the data by calling the setData() method on the Tabulator instance and passing the data array as the argument. For example:

const data = [     
{ name: 'John', age: 25, gender: 'Male' },     
{ name: 'Jane', age: 32, gender: 'Female' },     
// More rows... ];  
table.setData(data); 

Customizing the Table Appearance and Behavior:

STEP 1: To customize the table's appearance, you can apply a theme. Tabulator offers various predefined themes to choose from. You can include the theme CSS file in your HTML to apply the desired style. For example:

<link rel="stylesheet" href="path/to/tabulator.min.css">

STEP 2: Additionally, you can use layouts to control the table's structure and responsiveness. Tabulator supports different layout options, including responsive layouts that adjust the table's appearance based on the available screen space. Refer to the Tabulator documentation for more information on layout options and how to apply them.

STEP 3: If you want to modify the table's behavior, you can use callback functions. Callbacks allow you to customize various aspects of the table, such as formatting specific columns, adding custom filters or sorters, or handling events like cell clicks or row selections. You can define callback functions and pass them as options when initializing the Tabulator instance. Refer to the Tabulator documentation for a list of available callbacks and their usage.

How to load data from different sources, such as JSON, CSV, or AJAX

Tabulator provides convenient methods to load data from different sources.

If you have JSON data, you can pass a URL or a JSON object to the setData() method, and Tabulator will fetch and display the data automatically. For example:

table.setData('path/to/data.json'); 

If you have data in CSV format, you can use the setDataFromCsv() method. Pass a URL or the CSV content directly to this method. For example:

table.setDataFromCsv('path/to/data.csv'); 

If you need to load data dynamically using AJAX, you can use the setDataFromAjax() method. Specify the URL to fetch the data from, and Tabulator will update the table accordingly. For example:

table.setDataFromAjax('path/to/api');

Example: Create Table from JavaScript Array using Tabulator

Below are the proper step-by-step guide to creating a table from a JavaScript Array.

STEP 1: Create an HTML file:

Use a text editor or an Integrated Development Environment (IDE) like Visual Studio Code to create a new HTML file.

STEP 2: Include Tabulator files:

Add the following code in the <head> section of your HTML file to include the Tabulator CSS and JavaScript files via Content Delivery Network (CDN):

<link href="https://unpkg.com/tabulator-tables@4.8.1/dist/css/tabulator.min.css" rel="stylesheet">

<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.1/dist/js/tabulator.min.js"></script>

STEP 3: Create a JavaScript array:

Declare a JavaScript array named tabledata that contains objects representing the data for the table. Each object represents a row with properties such as playerid, playername, price, team, and joiningdate. Here's an example:

 var tabledata = [{
                playerid: 1,
                playername: "Virat Kohli",
                price: "17",
                team: "Royal Challengers Bangalore",
                joiningdate: "09/06/2023"
            }, {
                playerid: 2,
                playername: "Rohit Sharma",
                price: "15",
                team: "Mumbai Indians",
                joiningdate: "01/02/2023"
            }, {
                playerid: 3,
                playername: "MS Dhoni",
                price: "20",
                team: "Chennai Super Kings",
                joiningdate: "07/09/2023"
            }, {
                playerid: 4,
                playername: "Shreyas Iyer",
                price: "8",
                team: "Royal Challengers Bangalore",
                joiningdate: "10/03/2023"
            }, {
                playerid: 5,
                playername: "KL Rahul",
                price: "12",
                team: "Kings XI Punjab",
                joiningdate: "05/08/2023"
            }, {
                playerid: 6,
                playername: "Dinesh Karthik",
                price: "9",
                team: "Kolkata Knight Riders",
                joiningdate: "25/12/2023"
            }, {
                playerid: 7,
                playername: "Steve Smith",
                price: "17",
                team: "Sunrisers Hyderabad",
                joiningdate: "19/05/2023"
            }, {
                playerid: 8,
                playername: "David Warner",
                price: "20",
                team: "Rajasthan Royals",
                joiningdate: "08/10/2023"
            }, {
                playerid: 9,
                playername: "Kane Williamson",
                price: "5",
                team: "Sunrisers Hyderabad",
                joiningdate: "15/05/2023"
            }, {
                playerid: 10,
                playername: "Jofra Archer",
                price: "10",
                team: "Kolkata Knight Riders",
                joiningdate: "10/09/2023"
            }, {
                playerid: 11,
                playername: "Andre Russell",
                price: "12",
                team: "Rajasthan Royals",
                joiningdate: "28/07/2023"
            }, {
                playerid: 12,
                playername: "Chris Gayle",
                price: "18",
                team: "Kings XI Punjab",
                joiningdate: "13/11/2023"
            },

        ];

STEP 4: Create an HTML container:

In your HTML file, create a <div> element with an id attribute to serve as the container for the Tabulator table. For example:

<div id="players"></div>

STEP 5: Use Tabulator JavaScript code:

Initialize the Tabulator table using JavaScript code. Create a new instance of Tabulator and pass the container element's id, data (tabledata), and desired options. Here's an example code:

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: {
                        "Royal Challengers Bangalore": "Royal Challengers Bangalore",
                        "Mumbai Indians": "Mumbai Indians",
                        "Kolkata Knight Riders": "Kolkata Knight Riders",
                    }
                }, {
                    title: "Joining Date",
                    field: "joiningdate",
                    sorter: "date",
                    hozAlign: "center"
                },
            ],
            rowClick: function(e, row) {
                alert("Row " + row.getData().playerid + " Clicked!!!!");
            },
        });

To understand the code, consider the following points:

• new Tabulator("#players", { initializes a Tabulator table in the HTML div with the id "players".

• height: 220 sets the height of the table to 220 pixels. If more records are added, a scrollbar will appear.

• data: tabledata specifies the JavaScript array (tabledata) as the source of data for the table.

• layout: "fitColumns" adjusts the table layout to fit the page.

• pagination: "local" enables pagination, and paginationSize: 5 sets the number of rows per page to 5.

• tooltips: true displays tooltips when hovering over the table columns, showing the data.

columns: [{
                    title: "Player Name",
                    field: "playername",
                    sorter: "string",
                    width: 150,
                    headerFilter: "input"
                }

The "columns" parameter is important for defining the columns to be displayed in the table. It requires specific parameters:

• "title" represents the display name of the table column.

• "field" specifies the corresponding data source field.

• "sorter" determines the sorting behavior for the column. Use "string" for text fields, "number" for integer fields, and "date" for DateTime fields.

• "headerFilter" allows filtering options for the column. For a text-based filter, use "input".

STEP 6: If you want to use a filter with a dropdown list, you can define it as follows.

headerFilter: true,
                    headerFilterParams: {
                        "Royal Challengers Bangalore": "Royal Challengers Bangalore",
                        "Mumbai Indians": "Mumbai Indians",
                        "Kolkata Knight Riders": "Kolkata Knight Riders",
                    }

STEP 7: To retrieve the selected row value from the table, you can use the following code:

row.getData().playerid

In this example, "playerid" refers to the column name from which you want to retrieve the data.

STEP 8: To perform an action when a row is clicked, you can use the "rowClick" function. Here's an example:

rowClick: function(e, row) {
    alert("Row " + row.getData().playerid + " Clicked!!!!");
},

In this case, an alert message will be displayed when a row is clicked, indicating which row (identified by playerid) was clicked.

Complete Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabulator: JavaScript Library Example</title>
    <link href="https://unpkg.com/tabulator-tables@4.8.1/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.1/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: "Royal Challengers Bangalore",
                joiningdate: "09/06/2023"
            }, {
                playerid: 2,
                playername: "Rohit Sharma",
                price: "15",
                team: "Mumbai Indians",
                joiningdate: "01/02/2023"
            }, {
                playerid: 3,
                playername: "MS Dhoni",
                price: "20",
                team: "Chennai Super Kings",
                joiningdate: "07/09/2023"
            }, {
                playerid: 4,
                playername: "Shreyas Iyer",
                price: "8",
                team: "Royal Challengers Bangalore",
                joiningdate: "10/03/2023"
            }, {
                playerid: 5,
                playername: "KL Rahul",
                price: "12",
                team: "Kings XI Punjab",
                joiningdate: "05/08/2023"
            }, {
                playerid: 6,
                playername: "Dinesh Karthik",
                price: "9",
                team: "Kolkata Knight Riders",
                joiningdate: "25/12/2023"
            }, {
                playerid: 7,
                playername: "Steve Smith",
                price: "17",
                team: "Sunrisers Hyderabad",
                joiningdate: "19/05/2023"
            }, {
                playerid: 8,
                playername: "David Warner",
                price: "20",
                team: "Rajasthan Royals",
                joiningdate: "08/10/2023"
            }, {
                playerid: 9,
                playername: "Kane Williamson",
                price: "5",
                team: "Sunrisers Hyderabad",
                joiningdate: "15/05/2023"
            }, {
                playerid: 10,
                playername: "Jofra Archer",
                price: "10",
                team: "Kolkata Knight Riders",
                joiningdate: "10/09/2023"
            }, {
                playerid: 11,
                playername: "Andre Russell",
                price: "12",
                team: "Rajasthan Royals",
                joiningdate: "28/07/2023"
            }, {
                playerid: 12,
                playername: "Chris Gayle",
                price: "18",
                team: "Kings XI Punjab",
                joiningdate: "13/11/2023"
            },

        ];

        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: {
                        "Royal Challengers Bangalore": "Royal Challengers Bangalore",
                        "Mumbai Indians": "Mumbai Indians",
                        "Kolkata Knight Riders": "Kolkata Knight Riders",
                    }
                }, {
                    title: "Joining Date",
                    field: "joiningdate",
                    sorter: "date",
                    hozAlign: "center"
                },
            ],
            rowClick: function(e, row) {
                alert("Row " + row.getData().playerid + " Clicked!!!!");
            },
        });
    </script>
</body>

</html>

Output:

Conclusion

Tabulator is a powerful JavaScript library that enables you to create interactive and customizable tables in web projects. It offers a straightforward way to display and manipulate tabular data with various features and options. With Tabulator, you can easily install and import the library into your project, allowing you to get started quickly. It provides flexibility in terms of data sources, allowing you to load data from JSON, CSV, or through AJAX requests. Furthermore, Tabulator simplifies the process of loading data from various sources. Whether it's JSON, CSV, or dynamic data retrieved through AJAX, Tabulator provides dedicated methods to handle each case, making data integration seamless.