Search...

Table

Contrast Angular Bootstrap Table

Contrast Angular Bootstrap Tables are component with basic tables features. They let you aggregate a huge amount of data and present it in a clear and orderly way.

Angular Bootstrap tables provide additional benefits like responsiveness, and the possibility to manipulate the styles of the tables. You can enhance your tables by adding buttons, checkboxes, panels, and many other additional elements. You can also use an advanced data tables options like sort, search or pagination.

Importing the Contrast Angular Bootstrap Table Module

To use the Contrast Angular Bootstrap Table component in your project you need to import TableModule.

ts
import {TableModule } from 'cdbangular';

Default Table

Angular Bootstrap Table

HTML
html
<table CdbTable>
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
TypeScript
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
elements: any = [
{ id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
{ id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
];
headElements = ['#', 'First', 'Last', 'Handle'];
elements2: any = [
{
id: 1,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 2,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 3,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
];
headElements2 = [
'#',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
];
constructor() {}
ngOnInit(): void {}
}

Table Head Options

Angular Bootstrap Table Head Options

HTML
html
<table CdbTable>
<thead class="text-white thead-dark">
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
<table CdbTable>
<thead class="text-white thead-light">
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
TypeScript
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
elements: any = [
{ id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
{ id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
];
headElements = ['#', 'First', 'Last', 'Handle'];
elements2: any = [
{
id: 1,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 2,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 3,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
];
headElements2 = [
'#',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
];
constructor() {}
ngOnInit(): void {}
}

Striped Table

Set the striped prop to true, to give your table have stripes.

Angular Bootstrap Table Striped

HTML
html
<table CdbTable [striped]="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
TypeScript
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
elements: any = [
{ id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
{ id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
];
headElements = ['#', 'First', 'Last', 'Handle'];
elements2: any = [
{
id: 1,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 2,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 3,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
];
headElements2 = [
'#',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
];
constructor() {}
ngOnInit(): void {}
}

Bordered Table

Give the table a bordered prop to true to give your table borders.

Angular Bootstrap Table

HTML
html
<table CdbTable [bordered]="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
TypeScript
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
elements: any = [
{ id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
{ id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
];
headElements = ['#', 'First', 'Last', 'Handle'];
elements2: any = [
{
id: 1,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 2,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 3,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
];
headElements2 = [
'#',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
];
constructor() {}
ngOnInit(): void {}
}

Borderless Table

Set the borderless prop to true for your table to have no borders.

Angular Bootstrap Table Borderless

HTML
html
<table CdbTable [borderless]="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
TypeScript
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
elements: any = [
{ id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
{ id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
];
headElements = ['#', 'First', 'Last', 'Handle'];
elements2: any = [
{
id: 1,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 2,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 3,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
];
headElements2 = [
'#',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
];
constructor() {}
ngOnInit(): void {}
}

Hoverable Rows

Angular Bootstrap Rows Hoverable

HTML
html
<table CdbTable [hoverable]="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
TypeScript
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
elements: any = [
{ id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
{ id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
];
headElements = ['#', 'First', 'Last', 'Handle'];
elements2: any = [
{
id: 1,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 2,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 3,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
];
headElements2 = [
'#',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
];
constructor() {}
ngOnInit(): void {}
}

Small Table

Angular Bootstrap Table Small

HTML
html
<table CdbTable [small]="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
TypeScript
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
elements: any = [
{ id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
{ id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
];
headElements = ['#', 'First', 'Last', 'Handle'];
elements2: any = [
{
id: 1,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 2,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 3,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
];
headElements2 = [
'#',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
];
constructor() {}
ngOnInit(): void {}
}

Captions

Angular Bootstrap Table Captions

HTML
html
<table CdbTable>
<caption>List of users</caption>
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
TypeScript
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
elements: any = [
{ id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
{ id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
];
headElements = ['#', 'First', 'Last', 'Handle'];
elements2: any = [
{
id: 1,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 2,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 3,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
];
headElements2 = [
'#',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
];
constructor() {}
ngOnInit(): void {}
}

Responsive Tables

Angular Bootstrap Tables Responsive

HTML
html
<table CdbTable [responsive]="true">
<thead>
<tr>
<th *ngFor="let head of headElements2" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements2">
<th scope="row">{{el.id}}</th>
<td>{{el.heading1}}</td>
<td>{{el.heading2}}</td>
<td>{{el.heading3}}</td>
<td>{{el.heading4}}</td>
<td>{{el.heading5}}</td>
<td>{{el.heading6}}</td>
<td>{{el.heading7}}</td>
<td>{{el.heading8}}</td>
<td>{{el.heading9}}</td>
</tr>
</tbody>
</table>
TypeScript
ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss'],
})
export class TableComponent implements OnInit {
elements: any = [
{ id: 1, first: 'Mark', last: 'Otto', handle: '@mdo' },
{ id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat' },
{ id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter' },
];
headElements = ['#', 'First', 'Last', 'Handle'];
elements2: any = [
{
id: 1,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 2,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
{
id: 3,
heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell',
},
];
headElements2 = [
'#',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
'Heading',
];
constructor() {}
ngOnInit(): void {}
}

API Reference: Contrast Angular Bootstrap Table Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap Table component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBTable component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
wrapperClassNameStringAdds custom wrapper classwrapperClassName="myWrapperClass"
autoWidthBooleanfalseAutomatically adjust columns width to the content.autoWidth=true
borderedBooleanfalseAdds border on all table's and cell's sides.bordered=true
borderlessBooleanfalseDisables border on all table's and cell's sides.borderless=true
btnBooleanfalseAdds a buttonbtn=true
darkBooleanfalseEnables the dark styledark=true
fixedBooleanfalseSets fixed columns width.fixed=true
hoverBooleanfalseAdds hover state on table rows (rows are marked on light-grey color).hover=true
maxHeightStringSets table's maxHeight. You can use px, vh or whatever fits to your needs.maxHeight="200px"
tHeadStringChanges the color of the table head texttHead="#000"
responsiveBooleanfalseMakes table scrollable horizontally when screen width is smaller than table content (under 768px). It make use of overflow-y: hidden which clips off content that goes beyond the bottom or top edge of the table.responsive=true
responsiveSmBooleanfalseMakes table scrollable horizontally on under 576px wide screens.responsiveSm=true
responsiveMdBooleanfalseMakes table scrollable horizontally on under 768px wide screens.responsiveMd=true
responsiveLgBooleanfalseMakes table scrollable horizontally on under 992px wide screens.responsiveLg=true
responsiveXlBooleanfalseMakes table scrollable horizontally on under 1200px wide screens.responsiveXl=true
scrollYBooleanfalseAllows table to be scrolled vertically if it's content is higher than 200px. Combine it with maxHeight to manipulate table's height.scrollY=true
smallBooleanfalseCuts cell's padding by half.small=true
stripedBooleanfalseAdds zebra-striping to any table row.striped=true

API Reference: Contrast Angular Bootstrap Table Header Props

The table below lists other prop options of the CDBTableHeader component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
colorStringChanges TableHead background color. Use CDB color classescolor="primary-color"
textWhiteBooleanfalseSets TableHead's font color to white.textWhite=true
columnsArray[Objects]falseBinds your data into the component.columns=[columns]

API Reference: Contrast Angular Bootstrap Table Body Props

The table below lists other prop options of the CDBTableBody component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
colorStringChanges TableBody background color. Use CDB color classescolor="primary-color"
textWhiteBooleanfalseSets TableBody's font color to white.textWhite=true
rowsArray[Objects]falseBinds your data into the component.rows=[rows]

API Reference: Contrast Bootstrap Table Footer Props

The table below lists other prop options of the CDBTableFooter component.

NameTypeDefaultDescriptionExample
classStringAdds custom classes<CDBTableFooter class="myClass"
colorStringChanges TableFooter background color. Use CDB color classescolor="primary-color"
textWhiteBooleanfalseSets TableFooter's font color to white.textWhite=true
columnsArray[Objects]falseBinds your data into the component.columns=[columns]

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner