Table scroll

Angular Bootstrap 5 Table scroll component

Responsive Angular Table scroll built with Bootstrap 5. Table scroll functionality works vertically (y axis) and horizontally (x axis).

To learn more read Docs.


Basic example

        
            
        <div class="datatable mt-4">
          <div
            class="datatable-inner"
            mdbScrollbar
            style="position: relative; width: 600px; height: 500px"
          >
            <table
              class="table datatable-table"
              mdbTable
              mdbTableSort="mdbTableSort"
              #table="mdbTable"
              #sort="mdbTableSort"
              [dataSource]="dataSource"
              [sort]="sort"
              [pagination]="pagination"
            >
              <thead class="datatable-header">
                <tr>
                  <th *ngFor="let header of headers" [mdbTableSortHeader]="header" scope="col">
                    {{ header | titlecase }}
                  </th>
                </tr>
              </thead>
              <tbody class="datatable-body">
                <tr *ngFor="let data of table.data" scope="row">
                  <td>
                    {{ data.name }}
                  </td>
                  <td>
                    {{ data.position }}
                  </td>
                  <td>
                    {{ data.office }}
                  </td>
                  <td>
                    {{ data.age }}
                  </td>
                  <td>
                    {{ data.startDate }}
                  </td>
                  <td>
                    {{ data.salary }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        
        
    
        
            
        import { Component } from '@angular/core';

        export interface Person {
          name: string;
          position: string;
          office: string;
          age: number;
          startDate: string;
          salary: string;
        }
        
        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.scss']
        })
        export class AppComponent {
          headers = ['Name', 'Position', 'Office', 'Age', 'Start Date', 'Salary'];
        
          dataSource: Person[] = [
            {
              name: 'Tiger Nixon',
              position: 'System Architect',
              office: 'Edinburgh',
              age: 61,
              startDate: '2011/04/25',
              salary: '$320,800',
            },
            {
              name: 'Sonya Frost',
              position: 'Software Engineer',
              office: 'Edinburgh',
              age: 23,
              startDate: '2008/12/13',
              salary: '$103,600',
            },
            {
              name: 'Jena Gaines',
              position: 'Office Manager',
              office: 'London',
              age: 30,
              startDate: '2008/12/19',
              salary: '$90,560',
            },
            {
              name: 'Quinn Flynn',
              position: 'Support Lead',
              office: 'Edinburgh',
              age: 22,
              startDate: '2013/03/03',
              salary: '$342,000',
            },
            {
              name: 'Charde Marshall',
              position: 'Regional Director',
              office: 'San Francisco',
              age: 36,
              startDate: '2008/10/16',
              salary: '$470,600',
            },
            {
              name: 'Haley Kennedy',
              position: 'Senior Marketing Designer',
              office: 'London',
              age: 43,
              startDate: '2012/12/18',
              salary: '$313,500',
            },
            {
              name: 'Tatyana Fitzpatrick',
              position: 'Regional Director',
              office: 'London',
              age: 19,
              startDate: '2010/03/17',
              salary: '$385,750',
            },
            {
              name: 'Michael Silva',
              position: 'Marketing Designer',
              office: 'London',
              age: 66,
              startDate: '2012/11/27',
              salary: '$198,500',
            },
            {
              name: 'Paul Byrd',
              position: 'Chief Financial Officer (CFO)',
              office: 'New York',
              age: 64,
              startDate: '2010/06/09',
              salary: '$725,000',
            },
            {
              name: 'Gloria Little',
              position: 'Systems Administrator',
              office: 'New York',
              age: 59,
              startDate: '2009/04/10',
              salary: '$237,500',
            },
            {
              name: 'Garrett Winters',
              position: 'Accountant',
              office: 'Tokyo',
              age: 63,
              startDate: '2011/07/25',
              salary: '$170,750',
            },
            {
              name: 'Ashton Cox',
              position: 'Junior Technical Author',
              office: 'San Francisco',
              age: 66,
              startDate: '2009/01/12',
              salary: '$86,000',
            },
            {
              name: 'Cedric Kelly',
              position: 'Senior Javascript Developer',
              office: 'Edinburgh',
              age: 22,
              startDate: '2012/03/29',
              salary: '$433,060',
            },
            {
              name: 'Airi Satou',
              position: 'Accountant',
              office: 'Tokyo',
              age: 33,
              startDate: '2008/11/28',
              salary: '$162,700',
            },
            {
              name: 'Brielle Williamson',
              position: 'Integration Specialist',
              office: 'New York',
              age: 61,
              startDate: '2012/12/02',
              salary: '$372,000',
            },
          ];
        }