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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!.