Angular Bootstrap table scroll - horizontal and vertical

Angular Bootstrap Table Scroll - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5. Go to docs v.5

For the tables with a huge amount of data you can use scroll functionality, as an alternative for the pagination.

Scrolling functionality works vertically (y-axis) and horizontally (x-axis).

Table vertical scroll

More scroll options for static tables you can find in the Table Responsive documentation.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Mark Otto @mdo
5 Jacob Thornton @fat
6 Larry the Bird @twitter 
        
            
          <table mdbTable mdbTableScroll scrollY="true" maxHeight="200" bordered="true">
            <thead>
              <tr>
                <th *ngFor="let head of headElements; let i = index" scope="col">{{head}}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let el of elements; let i = index">
                <th scope="row">{{el.id}}</th>
                <td>{{el.first}}</td>
                <td>{{el.last}}</td>
                <td>{{el.handle}}</td>
              </tr>
            </tbody>
          </table>
        
        
    
        
            
          import { Component, OnInit } from '@angular/core';

          @Component({
            selector: 'table-scroll-y',
            templateUrl: './table-scroll-y.component.html',
            styleUrls: ['./table-scroll-y.component.scss']
          })
          export class TableScrollYComponent implements OnInit {
            elements: any = [];
            headElements = ['ID', 'First', 'Last', 'Handle'];

            ngOnInit() {
              for (let i = 1; i <= 15; i++) {
                this.elements.push({
                  id: i,
                  first: 'User ' + i,
                  last: 'Name ' + i,
                  handle: 'Handle ' + i
                });
              }
            }
          }

Table horizontal scroll

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
        
            
          <table mdbTable mdbTableScroll scrollX="true" maxWidth="400">
            <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.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>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'table-scroll-x',
            templateUrl: './table-scroll-x.component.html',
            styleUrls: ['./table-scroll-x.component.scss']
          })
          export class TableScrollX  {

            elements: 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'
              },
            ];
            headElements = ['ID', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading'];
          }

Table vertical and horizontal scroll

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
4 Cell Cell Cell Cell Cell Cell Cell Cell Cell
5 Cell Cell Cell Cell Cell Cell Cell Cell Cell
6 Cell Cell Cell Cell Cell Cell Cell Cell Cell
7 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
        
            
          <table mdbTable mdbTableScroll scrollY="true" maxHeight="200" scrollX="true" maxWidth="400">
            <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.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>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss']
          })
          export class AppComponent  {
          
            elements: 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'
              },
            ];
            headElements = ['ID', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading'];
          }

Advanced table options

For advanced options of the tables have a look at specific documentation pages listed below.

Datatables

MDBootstrap integration with the most popular plugin that enhances the possibilities of standard tables.
Table pagination

Pagination is a simple navigation which lets you split a huge amount of content within the tables into smaller parts.

Table search

The MDBootstrap search box enables super fast searching through all the table data.
Table sort

This functionality lets you sort the table data according to any specific columns.
Table editable

Table editable allows you to edit existing data within the table and add new data to the table.

Angular Table Scroll - API

In this section you will find advanced information about the Table component. You will find out which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { WavesModule, TableModule } from 'ng-uikit-pro-standard';
        
        
    
        
            
          import { WavesModule, TableModule } from 'angular-bootstrap-md';
Import Example Modules List

Directive

MdbTableScrollDirective

Selector: mdbTableScroll

Type: MdbTableScrollDirective

Inputs

Name Type Default Description Example
scrollY boolean false Allows you to scroll the array along the Y axis (the height one). It is also required to add the maxHeight input, which determines the maximum height of the table. scrollY="true"
maxHeight number null Sets the maximum height of the table, after which a scrollbar is added along the Y axis of the table. This input is required for table scrolling to work properly. maxHeight="200"
scrollX boolean false Allows you to scroll the array along the X axis (the width one). It is also required to add the maxWidth input, which determines the maximum width of the table. scrollX="true"
maxWidth number null Sets the maximum width of the table, after which a scrollbar is added along the X axis of the table. This input is required for table scrolling to work properly. maxWidth="200"