How To Create A Data table in Angular 10 Using Bootstrap And Contrast
Tags: webdev, css, programming, angular
Published: 2021-04-22 21:52:29

---
title: How To Create A Data table in Angular 10 Using Bootstrap And Contrast
published: true
date: 2021-01-20 01:16:04 UTC
tags: [webdev, css, programming, angular]
canonical_url: https://www.devwares.com/blog//create-datatable-in-angular-10
---

How To Create A Data table in Angular 10 Using Bootstrap And Contrast

![AD-BANNER](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41meil9ho9yx2ulb535m.png)

### What is a Data table?

Data tables are simply tables that have options that can be used to configure and process the data to be displayed.

### What is Contrast?

Contrast Design Bootstrap, popularly known as Contrast, was developed by Devwares. It is an amazing UI kit that has a vast number of components that helps make the development process a breeze. Contrast incorporated bootstrap into its core, making it all the more functional, responsive and elegant. This goes without saying, by installing Contrast in your project, bootstrap also tags along. It’s like getting two amazing products for the price of one. What a bargain! One of the components Contrast has to offer is the data table component, which is functional and easy to use. The data table component mixes tables with advanced options like searching, sorting and pagination. This article is going to show you, step by step, how to create a bootstrap angular data table using contrast.

### PREREQUISITES

This Data table will be built using Angular, Bootstrap, and Contrast (ng-cdbangular-pro). You don’t need to have any prior knowledge of ng-cdbangular-pro but the following are necessary: A basic understanding of Angular A basic understanding of Bootstrap NPM installed

Let’s get started shall we.

### STEP 1

[Get the Pro](https://www.devwares.com/product/angular-contrast-pro) version of Contrast from here

### STEP 2

Add the ng-cdbangular-pro tgz file to your projects root folder and run this command in your terminal:

`npm install ./ng-cdbangular-pro-1.0.0.tgz`

### STEP 3

Add Contrast Pro’s assets and bootstrap-css-only to angular.json

```javascript
"assets": [
	{
	"glob": "**/*",
	"input": "node_modules/ng-cdbangular-pro/assets",
	"output": "/assets/"
	}
],
"styles": [
	"node_modules/bootstrap-css-only/css/bootstrap.min.css"
]

```

### STEP 4

```javascript
Import table module in app.module.ts
import { TableModule } from 'ng-cdbangular-pro';
@NgModule({
	imports: [TableModule]
})

```

NB, for our example, we will be needing some other components so our final app.module.ts file will look like this;

```javascript
import { TableModule, CardModule } from 'ng-cdbangular-pro';
@NgModule({
	imports: [TableModule, CardModule]
})

```

Note: instead of importing one component at a time, contrast has a module called CDBProModule which contains the imports of all the custom components contrast has to offer.

```javascript
import { CDBProModule } from 'ng-cdbangular-pro';
@NgModule({
	imports: [CDBProModule]
})

```

Easy right? Now let’s go on. Contrast’s data table component has quite a lot of boiler plate code, so let’s go through it. In the .component.ts file, paste the following code snippets:

```javascript
import { Component, OnInit, ViewChild } from '@angular/core';
import { CdbTableDirective } from 'ng-cdbangular-pro';

export class ExampleComponent implements OnInit {
  @ViewChild(CdbTableDirective, { static: true }) CdbTable: CdbTableDirective;

  pages = [];
  activePage = 0;
  previousData;
  entries = [5, 10, 15];
  searchText: string = '';
  elements: any = [
    {
      name: 'Tiger Nixon',
      position: 'System Architect',
      office: 'Edinburgh',
      age: '61',
      date: '2011/04/25',
      salary: '320',
    },
    {
      name: 'Garrett Winters',
      position: 'Accountant',
      office: 'Tokyo',
      age: '63',
      date: '2011/07/25',
      salary: '170',
    },
    {
      name: 'Ashton Cox',
      position: 'Junior Technical Author',
      office: 'San Francisco',
      age: '66',
      date: '2009/01/12',
      salary: '86',
    },
    {
      name: 'Cedric Kelly',
      position: 'Senior JavaScript Developer',
      office: 'Edinburgh',
      age: '22',
      date: '2012/03/29',
      salary: '433',
    },
    {
      name: 'Airi Satou',
      position: 'Accountant',
      office: 'Tokyo',
      age: '33',
      date: '2008/11/28',
      salary: '162',
    },
    {
      name: 'Brielle Williamson',
      position: 'Integration Specialist',
      office: 'New York',
      age: '61',
      date: '2012/12/02',
      salary: '372',
    },
    {
      name: 'Herrod Chandler',
      position: 'Sales Assistant',
      office: 'San Francisco',
      age: '59',
      date: '2012/08/06',
      salary: '137',
    },
    {
      name: 'Rhona Davidson',
      position: 'Integration Specialist',
      office: 'Tokyo',
      age: '55',
      date: '2010/10/14',
      salary: '327',
    },
    {
      name: 'Colleen Hurst',
      position: 'JavaScript Developer',
      office: 'San Francisco',
      age: '39',
      date: '2009/09/15',
      salary: '205',
    },
    {
      name: 'Sonya Frost',
      position: 'Software Engineer',
      office: 'Edinburgh',
      age: '23',
      date: '2008/12/13',
      salary: '103',
    },
    {
      name: 'Jena Gaines',
      position: 'Office Manager',
      office: 'London',
      age: '30',
      date: '2008/12/19',
      salary: '90',
    },
    {
      name: 'Quinn Flynn',
      position: 'Support Lead',
      office: 'Edinburgh',
      age: '22',
      date: '2013/03/03',
      salary: '342',
    },
    {
      name: 'Charde Marshall',
      position: 'Regional Director',
      office: 'San Francisco',
      age: '36',
      date: '2008/10/16',
      salary: '470',
    },
    {
      name: 'Haley Kennedy',
      position: 'Senior Marketing Designer',
      office: 'London',
      age: '43',
      date: '2012/12/18',
      salary: '313',
    },
  ];
  headElements = [
    {
      label: 'Name',
      field: 'name',
      enableSort: 'enabled',
    },
    {
      label: 'Position',
      field: 'position',
      enableSort: 'enabled',
    },
    {
      label: 'Office',
      field: 'office',
      enableSort: 'enabled',
    },
    {
      label: 'Age',
      field: 'age',
      enableSort: 'enabled',
    },
    {
      label: 'Date',
      field: 'date',
      enableSort: 'enabled',
    },
    {
      label: 'Salary',
      field: 'salary',
      enableSort: 'enabled',
    },
  ];

  ngOnInit(): void {
    this.CdbTable.\_activePage.subscribe(data => {
      this.activePage = data;
    });

    this.CdbTable.setEntries(this.entries[0]);
    this.CdbTable.setDataSource(this.elements);
    this.CdbTable.setPages();
    this.previousData = this.CdbTable.getDataSource();
    this.pages = this.CdbTable.pages;
  }

  searchItems() {
    const prev = this.CdbTable.getDataSource();

    if (!this.searchText) {
      this.elements = this.CdbTable.getDataSource();
      this.CdbTable.setDataSource(this.previousData);
      this.CdbTable.setPages();
      this.pages = this.CdbTable.pages;
    }

    if (this.searchText) {
      this.CdbTable.setDataSource(this.previousData);
      this.elements = this.CdbTable.filterData(this.searchText);
      this.CdbTable.setDataSource(this.elements);
      this.CdbTable.setPages();
      this.pages = this.CdbTable.pages;
    }
  }

  changeEntries(e) {
    this.CdbTable.setEntries(e.target.value);
    this.CdbTable.setPages();
    this.pages = this.CdbTable.pages;
    this.CdbTable.\_activePage.next(0);
  }

  sort() {
    this.pages = this.CdbTable.pages;
  }
}

```

The “elements” property should contain your custom data and the “headElements” should contain your data’s “thead” values. By passing “enabled” to the “enableSort” option, you give the table head (thead) the ability to sort the data by ascending value and descending value. To disable this, just pass “disabled” to the “enableSort” option. The entries property should contain the customizable number of data values to be shown per page. P.S, everything apart from “elements”, “headElements” and “entries” should be left alone.

HTML VIEW Paste the following code snippet in your html view:

```javascript
<CDBCard>
	<CDBCardBody>
		<div class="container">
			<div class="row">
				<div class="col-md-6 mx-auto pl-0">
					<label>
						Show Entries
						<select
							class='custom-select custom-select-sm form-control form-control-sm ml-0'
							style="margin-left: .5rem" (change)='changeEntries(\$event)'
						>
							<option *ngFor='let entry of entries' [value]="entry">
								{{ entry }}
							</option>
						</select>
					</label>
				</div>
				<div class="col-md-6 mx-auto pl-0 pr-0 mb-1">
					<div class="md-form">
						<input
							type="text"
							placeholder="Search"
							class="form-control" [(ngModel)]="searchText"
							(keyup)="searchItems()" id="search-input"
						>
					</div>
				</div>
				<table CdbTable CdbTableScroll maxHeight="500"
					#tableEl1="CdbTable" stickyHeader="true" hover="true"
					striped='true' bordered="true" class="z-depth-1 col-md-12"
				>
					<thead class="sticky-top">
						<tr>
							<th *ngFor="let head of headElements; let i = index" (sortEnd)="sort()"
								[CdbTableSort]="elements" [tableEl]='tableEl1'
								[enableSort]='headElements[i].enableSort'
								[sortBy]="headElements[i].field" scope="col"
							>
								{{head.label | titlecase}}
								<CDBIcon [fas]=true icon="sort"></CDBIcon>
							</th>
						</tr>
					</thead>
					<tbody #row>
						<tr *ngFor="let el of pages[activePage]; let i = index">
							<th scope="row">{{el.name}}</th>
							<td class="red-text">{{el.position}}</td>
							<td>{{el.office}}</td>
							<td>{{el.age}}</td>
							<td>{{el.date}}</td>
							<td>{{el.salary | currency:'USD' }}</td>
						</tr>
						<tr *ngIf="!pages[activePage]">
							<td scope="row" colspan="100%">No Matching Records Found</td>
						</tr>
					</tbody>
					<thead class="sticky-top">
						<tr>
							<th _ngFor="let head of headElements; let i = index"
								(sortEnd)="sort()"
								[CdbTableSort]="elements" [tableEl]='tableEl1'
								[enableSort]='headElements[i].enableSort'
								[sortBy]="headElements[i].field"
								scope="col"
							>
								{{head.label | titlecase}}
								<CDBIcon [fas]=true icon="sort"></CDBIcon>
							</th>
						</tr>
					</thead>
				</table>
				<div class="mt-2">
					Showing
					{{activePage > 0 ? (activePage _ pages[0].length) + 1 : activePage + 1}}
					to {{pages.length -
				    1 > activePage
				    ? pages[activePage].length * (activePage + 1)
				    : elements.length}} of {{elements.length}} records
				</div>
				<CDBTable-pagination class="ml-auto pr-0 mt-2" [tableEl]='tableEl1'>
				</CDBTable-pagination>
			</div>
		</div>
	</CDBCardBody>
</CDBCard>

```

This example made use of another Contrast component called CDBCard for purely visual purposes. The end result looks like this: Whew! We’ve come to the end of this article. I hope it was as fun and informative as it was for me for you. Please click this link and navigate to the Data table page to see the live demo. Contrast’s Data table component ships with a lot of customizable features. For more information, please check out the docs.



###Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. [Try contrast pro!](https://www.devwares.com/product/contrast-pro)

![Contrast Design Boostrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulsutxnzjpbpaauhvbew.png)

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. [Learn more about Contrast Pro](https://www.devwares.com/product/contrast-pro)

## Resources 

- [Get Contrast PRO](https://www.devwares.com/product/bootstrap-contrast-pro)

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [How to create a Angular Bootstrap Sidebar](https://www.devwares.com/blog/how-to-create-an-angular-bootstrap-sidebar/)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)