Table responsive

Vue Bootstrap 5 Table responsive component

Vue Responsive Table built with Bootstrap 5 allow tables to be scrolled horizontally with ease. They can be comfortably used both on desktops and mobile devices.

To learn more read Docs.

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Vertical clipping/truncation:
Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

        
            
          <template>
            <MDBTable responsive></MDBTable>
          </template>
          
        
    

        
            
          <script>
            import {
              MDBTable
            } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBTable
              },
            };
          </script>
          
        
    

        
            
          <template>
            <MDBTable responsive></MDBTable>

            <MDBTable responsive="sm"></MDBTable>

            <MDBTable responsive="md"></MDBTable>

            <MDBTable responsive="lg"></MDBTable>

            <MDBTable responsive="xl"></MDBTable>

            <MDBTable responsive="xxl"></MDBTable>
          </template>
          
        
    

        
            
          <script>
            import {
              MDBTable
            } from 'mdb-vue-ui-kit';

            export default {
              components: {
                MDBTable
              },
            };
          </script>