NGX-DataTable angular

Tutorial to create a table using ngx-datatable

Introduction

There are many ways to create tables in angular,one of the ways is to use ngx-datatable package.

Step 1: Install ngx-datatable

npm install @swimlane/ngx-datatable

Check your package.json to see if it’s added.

"@swimlane/ngx-datatable": "^20.0.0",

Step 2: Update App Module

Step 3. import theme styles to your project

ngx-datatable package has three themes:Dark, Bootstrap and Material. There two ways to import these themes to your angular project

Step i: Import to style.scss by adding the lines below

/* styles.scss */
/* You can add global styles to this file, and also import other style files */
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/themes/bootstrap.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

Step ii: Adding the themes to angular.json

"styles": [
              "src/styles.scss",
              "./node_modules/@swimlane/ngx-datatable/index.css",
              "./node_modules/@swimlane/ngx-datatable/themes/material.scss",
              "./node_modules/@swimlane/ngx-datatable/themes/dark.scss",
              "./node_modules/@swimlane/ngx-datatable/themes/bootstrap.scss",
              "./node_modules/@swimlane/ngx-datatable/assets/icons.css"
            ],

Step 4: Create our table in app.component.html. This is an example of material table

N.B when working on a bigger project create your pages/forms/tables inside another component(not app component)

Step 5: Let’s create a dummy array to display data to our table in app.component.ts. N.B This is in-case you do not have data to test your table. You can also display data from back-end.

Step 6: run your application to display the table in your browser

ng serve

closer look of the table design

N.B ngx-datatable has so many features you can take advantage including pagination. etc

Happy coding!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!.