🤩
Windframe Import Update is finally here.

Table

Angular Bootstrap Table

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.

typescript
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
typescript
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
typescript
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
typescript
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
typescript
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
typescript
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 {}
}

Hover able 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
typescript
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
typescript
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
typescript
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
typescript
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 React Bootstrap Table Props

This section will build on your information about the props you get to use with the Contrast React 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]

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast