Table scroll - horizontal and vertical

Angular Bootstrap table scroll

For the tables with the 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



        
          
            
              {{head}}
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}



        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



        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.heading1}}
              {{el.heading2}}
              {{el.heading3}}
              {{el.heading4}}
              {{el.heading5}}
              {{el.heading6}}
              {{el.heading7}}
              {{el.heading8}}
              {{el.heading9}}

{{head}}
{{el.id}}	{{el.heading1}}	{{el.heading2}}	{{el.heading3}}	{{el.heading4}}	{{el.heading5}}	{{el.heading6}}	{{el.heading7}}	{{el.heading8}}	{{el.heading9}}



        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


        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.heading1}}
              {{el.heading2}}
              {{el.heading3}}
              {{el.heading4}}
              {{el.heading5}}
              {{el.heading6}}
              {{el.heading7}}
              {{el.heading8}}
              {{el.heading9}}

{{head}}
{{el.id}}	{{el.heading1}}	{{el.heading2}}	{{el.heading3}}	{{el.heading4}}	{{el.heading5}}	{{el.heading6}}	{{el.heading7}}	{{el.heading8}}	{{el.heading9}}



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 enhancing 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

MDBootstrap search box enables super fast searching among all the data of the table.

Table sort

This functionality lets you sort the data of the tables 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.