Mastering Tabulator: How to Insert Tick and Cross Icons Using JavaScript

Mastering Tabulator: How to Insert Tick and Cross Icons Using JavaScript

Tabulator is an advanced table library for JavaScript that makes creating interactive tables a breeze. With features like filtering, sorting, and pagination, it simplifies data management tasks. However, customizing it for specific use cases—like displaying tick and cross icons—adds even more versatility to this powerful tool. In this article, we’ll walk you through how to dynamically insert tick and cross icons into a Tabulator table using JavaScript.

What is Tabulator?

Tabulator is a lightweight, feature-rich JavaScript library that allows developers to create professional and interactive data tables. Whether you’re working on a dashboard or an application requiring real-time data updates, Tabulator makes the process effortless with its simple API and extensive customization options.

Some of its key features include:

Advanced filtering and sorting.
Editable cells and rows.
Responsive design.
Export capabilities (CSV, Excel, and more).
Extensive theming options.

If you’re new to Tabulator, visit the official documentation for installation instructions and examples.

Why Use Tick and Cross Icons?

When working with Boolean data (true/false), it’s often more user-friendly to display icons (like ticks and crosses) instead of plain text (e.g., “Yes” or “No”). Icons make the table more visually appealing and easier to interpret at a glance.

Here’s how you can implement this in a Tabulator table.

Setting Up the Environment

Before diving into the code, ensure you have the following:

A basic HTML file with a container for the table.
Tabulator library installed (via CDN or npm).
Font Awesome (optional) for the tick and cross icons.

Example HTML Setup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabulator with Tick and Cross</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/css/tabulator.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/js/tabulator.min.js"></script>
</head>
<body>
  <div id="example-table"></div>
  <script src="app.js"></script>
</body>
</html>

Inserting Tick and Cross Icons in Tabulator

Step 1: Prepare the Data

The first step is to define your data. Let’s assume you’re working with a dataset that includes a Boolean field:

const tableData = [
  { id: 1, name: "Alice", status: true },
  { id: 2, name: "Bob", status: false },
  { id: 3, name: "Charlie", status: true },
];

In this dataset, the status field represents a true/false value that we want to display as tick or cross icons.

Step 2: Create a Custom Formatter

Tabulator allows you to customize how data is displayed using formatters. To insert tick and cross icons, we’ll create a custom formatter:

const statusFormatter = function (cell, formatterParams) {
  const value = cell.getValue();
  return value
    ? '<i class="fas fa-check-circle" style="color:green;"></i>'
    : '<i class="fas fa-times-circle" style="color:red;"></i>';
};

This formatter checks the status value and returns a green tick icon (fa-check-circle) for true and a red cross icon (fa-times-circle) for false.

Step 3: Initialize the Tabulator Table

Next, initialize the table and apply the custom formatter to the status column:

const table = new Tabulator("#example-table", {
  data: tableData, // Load data into the table
  layout: "fitColumns", // Fit columns to the width of the table
  columns: [
    { title: "ID", field: "id", width: 50 },
    { title: "Name", field: "name" },
    { title: "Status", field: "status", formatter: statusFormatter },
  ],
});

That’s it! When you run the code, the status column will display tick and cross icons based on the Boolean values.

Adding Interactivity

Making the Column Editable

If you want users to update the status directly in the table, you can make the status column editable and use a checkbox editor:

{ title: "Status", field: "status", formatter: statusFormatter, editor: "tickCross" },

Responding to Changes

Use the cellEdited callback to handle updates:

table.on("cellEdited", function (cell) {
  console.log("Cell updated:", cell.getData());
});

This ensures any changes to the status field are captured and can be processed further (e.g., saved to a database).

Styling the Icons

To enhance the appearance of the icons, you can customize their styles:

.fas {
  font-size: 1.2rem;
  margin: 0 auto;
  display: block;
  text-align: center;
}

Handling Large Datasets

If you’re working with large datasets, consider using remote data loading to optimize performance. Tabulator supports AJAX-based data fetching:

const table = new Tabulator("#example-table", {
  ajaxURL: "https://api.example.com/data", // Replace with your API endpoint
  columns: [
    { title: "ID", field: "id", width: 50 },
    { title: "Name", field: "name" },
    { title: "Status", field: "status", formatter: statusFormatter },
  ],
});

Debugging Tips

Check the Console: If icons don’t appear, verify that Font Awesome is loaded correctly.
Validate Data: Ensure the status field contains Boolean values.
Inspect CSS: Adjust icon size and colors to fit your design.

Conclusion

Using Tabulator, you can easily display tick and cross icons for Boolean fields, improving table usability and aesthetics. With its extensive customization options, Tabulator empowers developers to create rich, interactive tables tailored to any application.

Try implementing this feature in your next project and explore the endless possibilities Tabulator offers. For more advanced configurations, check out the Tabulator documentation.