Tabulator is a powerful JavaScript library for creating interactive and customizable tables. It provides a wide range of features including sorting, filtering, pagination, and more. Integrating Tabulator into an Angular application can bring robust data table capabilities to your project. In this blog post, we’ll walk through how to create and style Tabulator tables in an Angular application.
Prerequisites:
Nodejs setup: Install nodejs before creating an angular project
Angular CLI: Ensure you have Angular CLI installed. If not, you can install it globally via npm using the below command:
npm i -g @angular/cli
Step 1. Inititialize and setup the angular project named table-app and move to the directory using the below commands.
ng new table-app
cd table-app
Step 2. Install the dependencies and setup the tabulator table
Add the below mentioned lines in the file angular.json to include tabulator scripts and styles.
"styles": [
"src/styles.css",
"node_modules/tabulator-tables/dist/css/tabulator.min.css" // add this line
],
"scripts": [
"node_modules/tabulator-tables/dist/js/tabulator.min.js" // add this line
]
Step 3. Create a component for tables.
ng generate component user-table
It will generate a folder name user-table which contains the below files;
user-table.component.css or user-table.component.scss
user-table.component.html
user-table.component.ts
Step 4. Open the user-table.component.html file and paste the below code
<div id="user-table" class="user-table"></div>
This will create a html element for the tabulator table to be rendered.
Open user-table.component.ts file.
The file will look similar to the below code depending on the angular version.
These are the columns of the table which will be rendered from the data we have as usersData.
Initialize the table to render.
ngAfterViewInit(): void {
this.usersTabulator = new Tabulator('#user-table', {
data: this.usersData, //data to be rendered
columns: this.columnNames, //column definitions and configuration
layout: 'fitDataTable', // table layout type which determines table look with respect to number of tables or width of the table
pagination:true, // true if you want to show the pagination in table
paginationSize:3 // default pagination size
paginationSizeSelector:[3,5,10] // all the available pagination sizes for table
});
}
This is it, now, we have completed the setup for tabulator-table.
The final user.component.ts file will look like this.
Now that we have completed the setup for table, let's import it to the app component.
Open the app.component.ts file and update the below mentioned lines
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { UserTableComponent } from './user-table/user-table.component'; // add this line to import user table component
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, UserTableComponent], // include UserTableComponent in the imports
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'table-app';
}
Open the app.component.html file remove all the code from app.component.html file and add the below line to add the user table component.
<app-user-table></app-user-table>
Now, we have created our table.
Step 6. To view the table, start the app using the command.
ng serve
Open the url http://localhost:4200/ on the browser to see the app.
Styling the table (Optional):
Rendering a custom component for a cell.
Let's say we want to render a clickable link for emails in the table, for that we can create a formatter function as show below:
The data in the cells can be aligned by using the followiing properties in the column configuration file.
hozAlign: 'center, left, right' - aligns the data horizontally
headerHozAlign: 'center, left, right' - aligns the table header horizontally
vertAlign:'middle, top, bottom' - aligns the data vertically
Similary, there are tons of properties available in the tabulator-table to customize the table. You can explore more about table and styling on the documentation page of tabulator-tables https://tabulator.info/docs/.
