update table syntax

src/components/Dashboard.vue

@@ -148,7 +148,7 @@
           <mdb-col md="6" class="mb-4">
               <mdb-card>
                   <mdb-card-body>
-                      <mdb-table hover>
+                      <mdb-tbl hover>
                           <thead class="blue-grey lighten-4">
                               <tr>
                                   <th>#</th>
@@ -177,14 +177,14 @@
                                   <td>Cell 9</td>
                               </tr>
                           </tbody>
-                      </mdb-table>
+                      </mdb-tbl>
                   </mdb-card-body>
               </mdb-card>
           </mdb-col>
           <mdb-col md="6" class="mb-4">
               <mdb-card>
                   <mdb-card-body>
-                      <mdb-table hover>
+                      <mdb-tbl hover>
                           <thead class="blue lighten-4">
                               <tr>
                                   <th>#</th>
@@ -213,7 +213,7 @@
                                   <td>Cell 9</td>
                               </tr>
                           </tbody>
-                      </mdb-table>
+                      </mdb-tbl>
                   </mdb-card-body>
               </mdb-card>
           </mdb-col>
@@ -537,7 +537,7 @@
 </template>
 
 <script>
-import { mdbRow, mdbCol, mdbBtn, mdbCard, mdbCardBody, mdbCardHeader, mdbCardText, mdbIcon, mdbTable, mdbBarChart, mdbPieChart, mdbLineChart, mdbRadarChart, mdbDoughnutChart, mdbListGroup, mdbListGroupItem, mdbBadge, mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter } from 'mdbvue'
+import { mdbRow, mdbCol, mdbBtn, mdbCard, mdbCardBody, mdbCardHeader, mdbCardText, mdbIcon, mdbTbl, mdbBarChart, mdbPieChart, mdbLineChart, mdbRadarChart, mdbDoughnutChart, mdbListGroup, mdbListGroupItem, mdbBadge, mdbModal, mdbModalHeader, mdbModalTitle, mdbModalBody, mdbModalFooter } from 'mdbvue'
 
 export default {
   name: 'Dashboard',
@@ -550,7 +550,7 @@ export default {
     mdbCardHeader,
     mdbCardText,
     mdbIcon,
-    mdbTable,
+    mdbTbl,
     mdbBarChart,
     mdbPieChart,
     mdbLineChart,

src/components/Tables.vue

@@ -9,31 +9,31 @@
           <mdb-card-body>
             <h3 class="mt-5 text-left"><strong>Basic examples</strong></h3>
             <p>Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.</p>
-            <mdb-table>
+            <mdb-tbl>
               <thead>
                 <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
               </thead><tbody>
                 <tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr>
               </tbody>
-            </mdb-table>
+            </mdb-tbl>
             <h3 class="mt-5 text-left"><strong>Table head options</strong></h3>
             <p>To change a background-color of thead (or any other element) use our color classes. If you are going to use a dark background you should also consider white text (to provide a proper contrast) by adding .text-white class. </p>
-            <mdb-table>
+            <mdb-tbl>
               <thead class="blue-grey lighten-4">
                 <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
               </thead>
               <tbody>
                 <tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr>
               </tbody>
-            </mdb-table>
-            <mdb-table>
+            </mdb-tbl>
+            <mdb-tbl>
               <thead class="mdb-color darken-3">
                 <tr class="text-white"><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr>
               </thead>
               <tbody>
                 <tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr>
               </tbody>
-            </mdb-table>
+            </mdb-tbl>
             <h3 class="mt-5 text-left"><strong>Striped rows:</strong></h3>
             <table class="table table-striped">
               <thead>
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { mdbRow, mdbCol, mdbCard, mdbView, mdbCardBody, mdbTable } from 'mdbvue'
+import { mdbRow, mdbCol, mdbCard, mdbView, mdbCardBody, mdbTbl } from 'mdbvue'
 
 export default {
   name: 'Tables',
@@ -61,7 +61,7 @@ export default {
     mdbCard,
     mdbView,
     mdbCardBody,
-    mdbTable
+    mdbTbl
   },
   data () {
     return {}