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

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

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.

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.

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.

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

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

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

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

HTML

html

<table CdbTable [responsive]="true">

    <thead>
        <