Bootstrap Table scroll - free examples & tutorial (original) (raw)

Bootstrap 5 Table scroll component

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

To learn more read Docs.

Basic example

• HTML

• JS

    `
        
    <template>
      <MDBDatatable :dataset="dataset6" :maxHeight="520" :maxWidth="520" />
    </template>
    
    `
  
    `
        
    <script>
      import {
        MDBDatatable
      } from "mdb-vue-ui-kit";
      export default {
        components: {
          MDBDatatable
        },
        setup() {
          const dataset6 = {
            columns: ["Name", "Position", "Office", "Age", "Start date", "Salary"],
            rows: [
              [
                "Tiger Nixon",
                "System Architect",
                "Edinburgh",
                "61",
                "2011/04/25",
                "$320,800"
              ],
              [
                "Garrett Winters",
                "Accountant",
                "Tokyo",
                "63",
                "2011/07/25",
                "$170,750"
              ],
              [
                "Ashton Cox",
                "Junior Technical Author",
                "San Francisco",
                "66",
                "2009/01/12",
                "$86,000"
              ],
              [
                "Cedric Kelly",
                "Senior Javascript Developer",
                "Edinburgh",
                "22",
                "2012/03/29",
                "$433,060"
              ],
              [
                "Airi Satou",
                "Accountant",
                "Tokyo",
                "33",
                "2008/11/28",
                "$162,700"
              ],
              [
                "Brielle Williamson",
                "Integration Specialist",
                "New York",
                "61",
                "2012/12/02",
                "$372,000"
              ],
              [
                "Herrod Chandler",
                "Sales Assistant",
                "San Francisco",
                "59",
                "2012/08/06",
                "$137,500"
              ],
              [
                "Rhona Davidson",
                "Integration Specialist",
                "Tokyo",
                "55",
                "2010/10/14",
                "$327,900"
              ],
              [
                "Colleen Hurst",
                "Javascript Developer",
                "San Francisco",
                "39",
                "2009/09/15",
                "$205,500"
              ],
              [
                "Sonya Frost",
                "Software Engineer",
                "Edinburgh",
                "23",
                "2008/12/13",
                "$103,600"
              ],
              [
                "Jena Gaines",
                "Office Manager",
                "London",
                "30",
                "2008/12/19",
                "$90,560"
              ],
              [
                "Quinn Flynn",
                "Support Lead",
                "Edinburgh",
                "22",
                "2013/03/03",
                "$342,000"
              ],
              [
                "Charde Marshall",
                "Regional Director",
                "San Francisco",
                "36",
                "2008/10/16",
                "$470,600"
              ],
              [
                "Haley Kennedy",
                "Senior Marketing Designer",
                "London",
                "43",
                "2012/12/18",
                "$313,500"
              ]
            ]
          };
          return {
            dataset6
          };
        }
      };
    </script>
    
    `

Related resources