Datatables

Vue Bootstrap 5 Datatables

Vue Datatable is a component which mix tables with advanced options like searching, sorting and pagination.

Note: Read the API tab to find all available options and advanced customization

Basic example - HTML markup

Vue Datatable component can render your data in three ways. In the first one, you simply create a HTML markup for your table inside MDBDatatable component - you can customize your table later by adding props to the component. Some of the more advanced options for columns, described in the Advanced Data Structure section can be also used by setting proper attritube directly to a column (f.e. sort:"false").

Vue Datatable collects information from HTML markup to create a data structure - the <table> element will be replaced in the DOM with a different node after component initializes.

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

Basic data structure

The second option is a very basic data structure, where columns are represented by an array of strings and so is each row. The table will match each string in a row to a corresponding index in a columns array. This data structure, as it's based on indexes, not key-value pairs, can be easily used for displaying data from the CSV format. 

        
            
            <template>
              <MDBDatatable :dataset="dataset1" />
            </template>
          
        
    
        
            
            <script>
              import { MDBDatatable } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatatable
                },
                setup() {
                  const dataset1 = {
                    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 {
                    dataset1
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBDatatable } from "mdb-vue-ui-kit";

              const dataset1 = {
                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"
                  ]
                ]
              };
            </script>

Advanced data structure

The last and most advanced data structure allows customizing each column (sort, width, fixed, field) and matches values from each row to a column in which the field equals to a given key value. This data format can be easily used to display JSON data.

You can also use a mixed version, where columns are an array of object and each row is an array of strings. 

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

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

Selectable rows

When the selectable property is set to true, user can interact with your table by selecting rows - you can get the selected rows by listening to the selected-rows emitted event. 

        
            
            <template>
              <MDBDatatable :dataset="dataset5" selectable multi />
            </template>
          
        
    
        
            
            <script>
              import { MDBDatatable } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatatable
                },
                setup() {
                  const dataset5 = {
                    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 {
                    dataset5
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBDatatable } from "mdb-vue-ui-kit";

              const dataset5 = {
                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"
                  ]
                ]
              };
            </script>

Scroll

Setting maximum height/width will enable vertical/horizontal scrolling.

        
            
            <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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBDatatable } from "mdb-vue-ui-kit";

              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"
                  ]
                ]
              };
            </script>

Fixed header

Use the fixedHeader property to ensure that a table's header is always visible while scrolling. 

        
            
            <template>
              <MDBDatatable :dataset="dataset7" :maxHeight="460" fixedHeader />
            </template>
          
        
    
        
            
            <script>
              import { MDBDatatable } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatatable
                },
                setup() {
                  const dataset7 = {
                    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 {
                    dataset7
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBDatatable } from "mdb-vue-ui-kit";

              const dataset7 = {
                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"
                  ]
                ]
              };
            </script>

Fixed columns

Making a column sticky requires setting two options - width and fixed. A first option is a number of pixels, while the other one can be either a true (in which case the column will stick on the left) or a string right. 

        
            
            <template>
              <MDBDatatable :dataset="dataset8" />
            </template>
          
        
    
        
            
            <script>
              import { MDBDatatable } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatatable
                },
                setup() {
                  const dataset8 = {
                    columns: [
                      { label: 'Name', field: 'name', sort: true, width: 200, fixed: true },
                      { label: 'Position', field: 'position', sort: false, width: 200 },
                      { label: 'Office', field: 'office', sort: false, width: 200, fixed: true },
                      { label: 'Age', field: 'age', sort: false, width: 200 },
                      { label: 'Start date', field: 'date', sort: true, width: 200 },
                      { label: 'Salary', field: 'salary', sort: false, width: 200, fixed: 'right' },
                    ],
                    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 {
                    dataset8
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBDatatable } from "mdb-vue-ui-kit";

              const dataset8 = {
                columns: [
                  { label: 'Name', field: 'name', sort: true, width: 200, fixed: true },
                  { label: 'Position', field: 'position', sort: false, width: 200 },
                  { label: 'Office', field: 'office', sort: false, width: 200, fixed: true },
                  { label: 'Age', field: 'age', sort: false, width: 200 },
                  { label: 'Start date', field: 'date', sort: true, width: 200 },
                  { label: 'Salary', field: 'salary', sort: false, width: 200, fixed: 'right' },
                ],
                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"
                  ]
                ]
              };
            </script>

Async data

Loading content asynchronously is an important part of working with data tables - with Vue Datatable you can easily display content after fetching it from API by updating the dataset object. The component watches dataset object and updates on each change. Additionally, setting a loading option to true will disable all interactions and display a simple loader while awaiting data. 

        
            
            <template>
              <MDBBtn @click="reloadDataset9" color="primary" class="mb-4">
                Reload data
                <MDBIcon icon="sync" class="ms-2" />
              </MDBBtn>
              <MDBDatatable :dataset="dataset9" :loading="loading9" />
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBDatatable, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatatable,
                  MDBBtn,
                  MDBIcon
                },
                setup() {
                  const dataset9 = ref({
                    columns: [
                      { label: "Address", field: "address" },
                      { label: "Company", field: "company" },
                      { label: "Email", field: "email" },
                      { label: "Name", field: "name" },
                      { label: "Phone", field: "phone" },
                      { label: "Username", field: "username" },
                      { label: "Website", field: "website" }
                    ]
                  });
                  const loading9 = ref(false);
                  const reloadDataset9 = () => {
                    dataset9.value.rows = [];
                    loading9.value = true;
                    // timeout is for demonstration purposes only
                    setTimeout(() => {
                      fetch("https://jsonplaceholder.typicode.com/users")
                        .then(response => response.json())
                        .then(data => {
                          dataset9.value.rows = data.map(user => ({
                            ...user,
                            address: `${user.address.city}, ${user.address.street}`,
                            company: user.company.name
                          }));
                          loading9.value = false;
                        });
                    }, 2000);
                  };
                  return {
                    dataset9,
                    loading9,
                    reloadDataset9
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBDatatable, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";

              interface Dataset9 {
                columns: {[props: string]: string}[],
                rows: {[props: string]: string}[],
              }

              interface User {
                [props: string]: any
              }

              const dataset9 = ref<Dataset9>({
                columns: [
                  { label: "Address", field: "address" },
                  { label: "Company", field: "company" },
                  { label: "Email", field: "email" },
                  { label: "Name", field: "name" },
                  { label: "Phone", field: "phone" },
                  { label: "Username", field: "username" },
                  { label: "Website", field: "website" }
                ],
                rows: []
              });
              const loading9 = ref(false);
              const reloadDataset9 = () => {
                dataset9.value.rows = [];
                loading9.value = true;
                // timeout is for demonstration purposes only
                setTimeout(() => {
                  fetch("https://jsonplaceholder.typicode.com/users")
                    .then(response => response.json())
                    .then(data => {
                      dataset9.value.rows = data.map((user: User) => ({
                        ...user,
                        address: `${user.address.city}, ${user.address.street}`,
                        company: user.company.name
                      }));
                      loading9.value = false;
                    });
                }, 2000);
              };
            </script>

Action buttons

With the Datatable it's possible to render custom content, such as action buttons and attach listeners to their events. Keep in mind, that the component rerenders content when various actions occur (f.e. sort, search) and event listeners need to be updated. To make it possible, the components emits a custom event render. 

        
            
            <template>
              <MDBDatatable :dataset="dataset10" hover @render="setActions" />
            </template>
          
        
    
        
            
            <script>
              import { MDBDatatable } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatatable
                },
                setup() {
                  const dataset10 = {
                    columns: [
                      { label: "Name", field: "name" },
                      { label: "Position", field: "position" },
                      { label: "Office", field: "office" },
                      { label: "Contact", field: "contact", sort: false }
                    ],
                    rows: [
                      {
                        name: "Tiger Nixon",
                        position: "System Architect",
                        office: "Edinburgh",
                        phone: "+48000000000",
                        email: "tiger.nixon@gmail.com"
                      },
                      {
                        name: "Sonya Frost",
                        position: "Software Engineer",
                        office: "Edinburgh",
                        phone: "+53456123456",
                        email: "sfrost@gmail.com"
                      },
                      {
                        name: "Tatyana Fitzpatrick",
                        position: "Regional Director",
                        office: "London",
                        phone: "+42123432456",
                        email: "tfitz@gmail.com"
                      }
                    ].map(row => {
                      return {
                        ...row,
                        contact: `
                          <button class="call-btn btn btn-outline-primary btn-floating btn-sm" data-mdb-number="${row.phone}"><i class="fa fa-phone"></i></button>
                          <button class="message-btn btn ms-2 btn-primary btn-floating btn-sm" data-mdb-email="${row.email}"><i class="fa fa-envelope"></i></button>`
                      };
                    })
                  };
                  const setActions = () => {
                    document.getElementsByClassName("call-btn").forEach(btn => {
                      if (btn.getAttribute("click-listener") !== "true") {
                        btn.addEventListener("click", () => {
                          console.log(`call ${btn.attributes["data-mdb-number"].value}`);
                        });
                        btn.setAttribute("click-listener", "true");
                      }
                    });
                    document.getElementsByClassName("message-btn").forEach(btn => {
                      if (btn.getAttribute("click-listener") !== "true") {
                        btn.addEventListener("click", () => {
                          console.log(
                            `send a message to ${btn.attributes["data-mdb-email"].value}`
                          );
                        });
                        btn.setAttribute("click-listener", "true");
                      }
                    });
                  };
                  return {
                    dataset10,
                    setActions
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBDatatable } from "mdb-vue-ui-kit";

              const dataset10 = {
                columns: [
                  { label: "Name", field: "name" },
                  { label: "Position", field: "position" },
                  { label: "Office", field: "office" },
                  { label: "Contact", field: "contact", sort: false }
                ],
                rows: [
                  {
                    name: "Tiger Nixon",
                    position: "System Architect",
                    office: "Edinburgh",
                    phone: "+48000000000",
                    email: "tiger.nixon@gmail.com"
                  },
                  {
                    name: "Sonya Frost",
                    position: "Software Engineer",
                    office: "Edinburgh",
                    phone: "+53456123456",
                    email: "sfrost@gmail.com"
                  },
                  {
                    name: "Tatyana Fitzpatrick",
                    position: "Regional Director",
                    office: "London",
                    phone: "+42123432456",
                    email: "tfitz@gmail.com"
                  }
                ].map(row => {
                  return {
                    ...row,
                    contact: `
                      <button class="call-btn btn btn-outline-primary btn-floating btn-sm" data-mdb-number="${row.phone}"><i class="fa fa-phone"></i></button>
                      <button class="message-btn btn ms-2 btn-primary btn-floating btn-sm" data-mdb-email="${row.email}"><i class="fa fa-envelope"></i></button>`
                  };
                })
              };
              const setActions = () => {
                document.getElementsByClassName("call-btn").forEach(btn => {
                  if (btn.getAttribute("click-listener") !== "true") {
                    btn.addEventListener("click", () => {
                      console.log(`call ${btn.attributes["data-mdb-number"].value}`);
                    });
                    btn.setAttribute("click-listener", "true");
                  }
                });
                document.getElementsByClassName("message-btn").forEach(btn => {
                  if (btn.getAttribute("click-listener") !== "true") {
                    btn.addEventListener("click", () => {
                      console.log(
                        `send a message to ${btn.attributes["data-mdb-email"].value}`
                      );
                    });
                    btn.setAttribute("click-listener", "true");
                  }
                });
              };
            </script>

Cell formatting

        
            
            <template>
              <MDBDatatable
                :dataset="dataset11"
                sortField="purchases"
                sortOrder="desc"
              />
            </template>
          
        
    
        
            
            <script>
              import { computed } from "vue";
              import { MDBDatatable } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatatable
                },
                setup() {
                  const dataset11 = {
                    rows: [
                      ["Product 1", 10, 103],
                      ["Product 2", 45, 110],
                      ["Product 3", 76, 56],
                      ["Product 4", 89, 230],
                      ["Product 5", 104, 240],
                      ["Product 6", 97, 187],
                      ["Product 7", 167, 130],
                      ["Product 8", 50, 199],
                      ["Product 9", 4, 206],
                      ["Product 10", 120, 88],
                      ["Product 11", 22, 100]
                    ]
                  };
                  const maxValue = Math.max(...dataset11.rows.map(row => row[2]));
                  const minValue = Math.min(...dataset11.rows.map(row => row[2]));
                  const colors = ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5"];
                  const step = (maxValue - minValue) / (colors.length - 1);
                  const format = computed(() =>
                    dataset11.rows.map(row => {
                      const colorIndex = Math.floor((row[2] - minValue) / step);
                      return {
                        backgroundColor: colors[colorIndex],
                        fontWeight: 400
                      };
                    })
                  );
                  dataset11.columns = [
                    { label: "Product", field: "product" },
                    { label: "Quantity", field: "quantity" },
                    { label: "Purchases", field: "purchases", format }
                  ];
                  return {
                    dataset11
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { computed } from "vue";
              import { MDBDatatable } from "mdb-vue-ui-kit";

              const dataset11: {columns: {[props:string]: any}[]; rows: (string | number)[][];} = {
                columns:[],
                rows: [
                  ["Product 1", 10, 103],
                  ["Product 2", 45, 110],
                  ["Product 3", 76, 56],
                  ["Product 4", 89, 230],
                  ["Product 5", 104, 240],
                  ["Product 6", 97, 187],
                  ["Product 7", 167, 130],
                  ["Product 8", 50, 199],
                  ["Product 9", 4, 206],
                  ["Product 10", 120, 88],
                  ["Product 11", 22, 100]
                ]
              };
              const maxValue = Math.max(...dataset11.rows.map(row => row[2] as number));
              const minValue = Math.min(...dataset11.rows.map(row => row[2] as number));
              const colors = ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5"];
              const step = (maxValue - minValue) / (colors.length - 1);
              const format = computed(() =>
                dataset11.rows.map(row => {
                  const colorIndex = Math.floor((row[2] as number - minValue) / step);
                  return {
                    backgroundColor: colors[colorIndex],
                    fontWeight: 400
                  };
                })
              );
              dataset11.columns = [
                { label: "Product", field: "product" },
                { label: "Quantity", field: "quantity" },
                { label: "Purchases", field: "purchases", format }
              ];
            </script>

Clickable rows

Click on the row to preview the message.

Selecting the row with checkbox doesn't emit the row-click event.

Note: To prevent this action with other clickable elements within the row, call stopPropagation() method.

Note: This feature cannot be used simultaneously with edit option. 

        
            
            <template>
              <MDBDatatable
                :dataset="dataset12"
                selectable
                multi
                clickableRows
                ref="datatable12"
                @row-click="toggleModal"
                @render="setupButtons('star'), setupButtons('delete')"
              />
              <MDBModal
                tabindex="-1"
                labelledby="exampleModalLabel"
                v-model="modalState"
              >
                <MDBModalHeader>
                  <MDBModalTitle id="exampleModalLabel">{{
                    modal.title
                  }}</MDBModalTitle>
                </MDBModalHeader>
                <MDBModalBody class="mt-4 mb-5">
                  <h6 class="mb-4">
                    From: <strong>{{ modal.from }}</strong>
                  </h6>
                  <p>{{ modal.message }}</p>
                </MDBModalBody>
                <MDBModalFooter>
                  <MDBBtn outline="primary"
                    >Reply<MDBIcon icon="paper-plane" class="ms-2"
                  /></MDBBtn>
                  <MDBBtn outline="primary"
                    >Forward<MDBIcon icon="arrow-right" class="ms-2"
                  /></MDBBtn>
                </MDBModalFooter>
              </MDBModal>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import {
                MDBDatatable,
                MDBBtn,
                MDBIcon,
                MDBModal,
                MDBModalHeader,
                MDBModalTitle,
                MDBModalBody,
                MDBModalFooter
              } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBDatatable,
                  MDBBtn,
                  MDBIcon,
                  MDBModal,
                  MDBModalHeader,
                  MDBModalTitle,
                  MDBModalBody,
                  MDBModalFooter
                },
                setup() {
                  const modalState = ref(false);
                  const modal = {
                    title: "",
                    from: "",
                    message: "",
                    date: ""
                  };
                  const messages = [
                    {
                      from: "admin@mdbootstrap.com",
                      title: "MDBootstrap spring sale",
                      message:
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.",
                      date: "11/12/2019"
                    },
                    {
                      from: "user@mdbootstrap.com",
                      title: "How to purchase MDB5 package?",
                      message:
                        "Quisque tempor ligula eu lobortis scelerisque. Mauris tristique mi a erat egestas, quis dictum nibh iaculis. Sed gravida sodales egestas. In tempus mollis libero sit amet lacinia. Duis non augue sed leo imperdiet efficitur faucibus vitae elit. Mauris eu cursus ligula. Praesent posuere efficitur cursus.",
                      date: "10/12/2019"
                    },
                    {
                      from: "user@mdbootstrap.com",
                      title: "Licence renewal",
                      message:
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.",
                      date: "09/12/2019"
                    },
                    {
                      from: "admin@mdbootstrap.com",
                      title: "Black friday offer",
                      message:
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.",
                      date: "08/12/2019"
                    }
                  ];
                  const dataset12 = {
                    columns: [
                      { label: "Actions", field: "actions", sort: false },
                      { label: "From", field: "from" },
                      { label: "Title", field: "title" },
                      { label: "Message", field: "preview", sort: false },
                      { label: "Date", field: "date" }
                    ],
                    rows: messages.map((email, i) => {
                      const getPreview = (message, length) => {
                        if (message.length <= length) return message;
                        return `${message.slice(0, length)}...`;
                      };
                      return {
                        ...email,
                        preview: getPreview(email.message, 20),
                        actions: `
                          <a role="button" class="star-email-button text-warning" data-mdb-index="${i}"
                            ><i class="far fa-star"></i
                          ></a>
                          <a role="button" class="delete-email-button text-muted ms-2" data-mdb-index="${i}"
                            ><i class="fa fa-trash-alt"></i
                          ></a>
                          `
                      };
                    })
                  };
                  const toggleModal = index => {
                    for (const [key, value] of Object.entries(messages[index])) {
                      modal[key] = value;
                      modalState.value = true;
                    }
                  };
                  const datatable12 = ref(null);
                  const setupButtons = action => {
                    document
                      .getElementsByClassName(`${action}-email-button`)
                      .forEach(button => {
                        button.addEventListener("click", e => {
                          e.stopPropagation();
                          const index = button.getAttribute("data-mdb-index");
                          console.log(`${action} message: ${index}`, messages[index]);
                        });
                      });
                  };
                  return {
                    modalState,
                    modal,
                    dataset12,
                    toggleModal,
                    datatable12,
                    setupButtons
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import {
                MDBDatatable,
                MDBBtn,
                MDBIcon,
                MDBModal,
                MDBModalHeader,
                MDBModalTitle,
                MDBModalBody,
                MDBModalFooter
              } from "mdb-vue-ui-kit";

              const modalState = ref(false);
              const modal = {
                title: "",
                from: "",
                message: "",
                date: ""
              };
              const messages = [
                {
                  from: "admin@mdbootstrap.com",
                  title: "MDBootstrap spring sale",
                  message:
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.",
                  date: "11/12/2019"
                },
                {
                  from: "user@mdbootstrap.com",
                  title: "How to purchase MDB5 package?",
                  message:
                    "Quisque tempor ligula eu lobortis scelerisque. Mauris tristique mi a erat egestas, quis dictum nibh iaculis. Sed gravida sodales egestas. In tempus mollis libero sit amet lacinia. Duis non augue sed leo imperdiet efficitur faucibus vitae elit. Mauris eu cursus ligula. Praesent posuere efficitur cursus.",
                  date: "10/12/2019"
                },
                {
                  from: "user@mdbootstrap.com",
                  title: "Licence renewal",
                  message:
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.",
                  date: "09/12/2019"
                },
                {
                  from: "admin@mdbootstrap.com",
                  title: "Black friday offer",
                  message:
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.",
                  date: "08/12/2019"
                }
              ];
              const dataset12 = {
                columns: [
                  { label: "Actions", field: "actions", sort: false },
                  { label: "From", field: "from" },
                  { label: "Title", field: "title" },
                  { label: "Message", field: "preview", sort: false },
                  { label: "Date", field: "date" }
                ],
                rows: messages.map((email, i) => {
                  const getPreview = (message: string, length: number) => {
                    if (message.length <= length) return message;
                    return `${message.slice(0, length)}...`;
                  };
                  return {
                    ...email,
                    preview: getPreview(email.message, 20),
                    actions: `
                      <a role="button" class="star-email-button text-warning" data-mdb-index="${i}"
                        ><i class="far fa-star"></i
                      ></a>
                      <a role="button" class="delete-email-button text-muted ms-2" data-mdb-index="${i}"
                        ><i class="fa fa-trash-alt"></i
                      ></a>
                      `
                  };
                })
              };
              const toggleModal = (index: number) => {
                for (const [key, value] of Object.entries(messages[index])) {
                  modal[key] = value;
                  modalState.value = true;
                }
              };
              const datatable12 = ref(null);
              const setupButtons = (action: string) => {
                document
                  .getElementsByClassName(`${action}-email-button`)
                  .forEach(button => {
                    button.addEventListener("click", e => {
                      e.stopPropagation();
                      const index = button.getAttribute("data-mdb-index");
                      console.log(`${action} message: ${index}`, messages[index]);
                    });
                  });
              };
            </script>

Datatables - API

Import

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

Properties

Property Type Default Description
bordered Boolean false Adds borders to a datatable
borderless Boolean false Removes all borders from a datatable
borderColor String Changes a border color to one of main colors
clickableRows Boolean false Makes rows clickable
color String Adds a color class to a datatable (f.e 'bg-dark')
dark Boolean false Changes a font color to white
defaultValue String "-" This string will be used as a placeholder if a row doesn't have a defined value for a column
disableSortToDefault Boolean false Changing to true remove sorting back to default and leave only ascending and descending
dataset Object { columns: [], rows: [] } Main data object
edit Boolean false Enables edit mode
entries Number 10 Number of visible entries (pagination)
entriesOptions Array [10, 25, 50, 200] Options available to choose from in a pagination select (rows per page)
fixedHeader Boolean false When it's set to true, the table's header will remain visible while scrolling
fullPagination Boolean false Displays additional buttons for the first and last pages
hover Boolean false Changes the background color of a hovered row
loaderClass String "bg-primary" The class name for a loader (loading mode)
loading Boolean false Sets the loading mode - disables interactions and displays a loader
loadingMessage String "Loading results..." A message displayed while loading data
maxHeight [Number, String] Sets a maximum height of a datatable - can be either a string ("10%") or a number of pixels.
maxWidth [Number, String] "100%" Sets a maximum width of a datatable - can be either a string ("10%") or a number of pixels.
multi Boolean false Allows selecting multiple rows (selectable mode)
noFoundMessage String "No matching results found" A message displayed when a table is empty
ofPaginationText String of Allows changing the of word in pagination
pagination Boolean true Shows/hides the pagination panel
rowsText String "Rows per page:" A text indicating a number of rows per page
search String Search phrase
searchCaseSensitive Boolean false Makes search case sensitive
searchColumns Array [] Columns to include while searching. All columns included for an empty array
selectable Boolean false Enables selecting rows with checkboxes
sm Boolean false Decreases a row's paddings
sortField String Default sorted column enabled by a field name
sortOrder String Default sorting order. Available values: "asc" or "desc".
striped Boolean false Slightly changes the background's color in every other row
tag String "div" Defines wrapper tag

Column properties

Name Type Default Description
label String '' A displayed header of a column
field String label.toLowerCase() A field's name - will be used as a key for values in rows
fixed [Boolean, String] false When set to true, makes a column stick on the left while scrolling. Changing its value to right will do the same on the other side. For this option to work, you need to define width as well.
width Number A column's width in pixels
sort Boolean true Enables/disables sorting for this column
format Array Cell formatting array of objects for each cell.

Methods

Name Description Example
setActivePage Sets a specific page of entries. Page count starts from 0. datatableRef.setActivePage(1) 
        
            
          <template>
            <MDBDatatable :dataset="dataset1" ref="datatableRef" />
            <MDBBtn @click="datatableRef?.setActivePage(1)">Go to 2nd page</MDBBtn>
          </template>
        
        
    
        
            
        <script>
          import { MDBDatatable, MDBBtn } from "mdb-vue-ui-kit";
          import { ref } from "vue";
          
          export default {
            components: {
              MDBDatatable,
              MDBBtn,
            },
            setup() {
              const datatableRef = ref(null);
          
              const dataset1 = {
                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 {
                datatableRef,
                dataset1,
              };
            },
          };
          </script>
        
        
    
        
            
        <script setup lang="ts">
          import { MDBDatatable, MDBBtn } from "mdb-vue-ui-kit";
          import { ref } from "vue";
          
          const datatableRef = ref<InstanceType<typeof MDBDatatable> | null>(null);
          
          const dataset1 = {
            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",
              ],
            ],
          };
        </script>

Events

Name Description
all-selected This event fires when a user selects rows with checkboxes. If all are selected it returns true. In another case it's false.
all-filtered-rows-selected This event fires when a user selects rows with checkboxes. If all filtered rows are selected it returns true. In another case it's false.
render Event emitted after the component renders/updates rows.
row-click Event emitted after clicking on a row.
selected-rows This event fires when a user selects rows with checkboxes. It returns an array of selected rows.
selected-indexes This event fires when a user selects rows with checkboxes. It returns an array of selected row indexes.
update This event fires in an editable mode when a user updates values. 
        
            
          <template>
            <MDBDatatable :dataset="dataset1" @row-click="doSomething"/>
          </template>

CSS variables

        
            
        // .datatable
        --#{$prefix}datatable-color: #{$datatable-color};
        --#{$prefix}datatable-border-color: #{$datatable-border-color};
        --#{$prefix}datatable-striped-color: #{$datatable-striped-color};
        --#{$prefix}datatable-accent-bg: #{$datatable-accent-bg};
        --#{$prefix}datatable-hover-color: #{$datatable-hover-color};
        --#{$prefix}datatable-hover-bg: #{$datatable-hover-bg};
        --#{$prefix}datatable-muted-color: #{$datatable-muted-color};
        --#{$prefix}datatable-active-color: #{$datatable-active-color};
        --#{$prefix}datatable-font-size: #{$datatable-font-size};
        --#{$prefix}datatable-background-color: #{$datatable-background-color};
        --#{$prefix}datatable-table-th-td-max-width: #{$datatable-table-th-td-max-width};
        --#{$prefix}datatable-table-th-td-padding-y: #{$datatable-table-th-td-padding-y};
        --#{$prefix}datatable-table-th-td-padding-x: #{$datatable-table-th-td-padding-x};
        --#{$prefix}datatable-thead-tr-border-width: #{$datatable-thead-tr-border-width};
        --#{$prefix}datatable-thead-th-font-weight: #{$datatable-thead-th-font-weight};
        --#{$prefix}datatable-thead-fixed-cell-background-color: #{$datatable-thead-fixed-cell-background-color};
        --#{$prefix}datatable-tbody-font-weight: #{$datatable-tbody-font-weight};
        --#{$prefix}datatable-tbody-tr-transition: #{$datatable-tbody-tr-transition};
        --#{$prefix}datatable-tbody-tr-last-child-height: #{$datatable-tbody-tr-last-child-height};
        --#{$prefix}datatable-tbody-loader-height: #{$datatable-tbody-loader-height};
        --#{$prefix}datatable-tbody-progress-animation: #{$datatable-tbody-progress-animation};
        --#{$prefix}datatable-tbody-progress-width: #{$datatable-tbody-progress-width};
        --#{$prefix}datatable-tbody-progress-opacity: #{$datatable-tbody-progress-opacity};
        --#{$prefix}datatable-tbody-progress-border-radius: #{$datatable-tbody-progress-border-radius};
        --#{$prefix}datatable-pagination-padding-y: #{$datatable-pagination-padding-y};
        --#{$prefix}datatable-pagination-border-width: #{$datatable-pagination-border-width};
        --#{$prefix}datatable-pagination-nav-font-size: #{$datatable-pagination-nav-font-size};
        --#{$prefix}datatable-pagination-buttons-margin-left: #{$datatable-pagination-buttons-margin-left};
        --#{$prefix}datatable-pagination-button-padding-x: #{$datatable-pagination-button-padding-x};
        --#{$prefix}datatable-sort-icon-transition-duration: #{$datatable-sort-icon-transition-duration};
        --#{$prefix}datatable-sort-icon-left: #{$datatable-sort-icon-left};
        --#{$prefix}datatable-sort-icon-top: #{$datatable-sort-icon-top};
        --#{$prefix}datatable-select-wrapper-font-size: #{$datatable-select-wrapper-font-size};
        --#{$prefix}datatable-select-wrapper-font-weight: #{$datatable-select-wrapper-font-weight};
        --#{$prefix}datatable-sm-th-td-padding-y: #{$datatable-sm-th-td-padding-y};
        --#{$prefix}datatable-sm-th-td-padding-x: #{$datatable-sm-th-td-padding-x};
        --#{$prefix}datatable-sm-tbody-tr-last-child-height: #{$datatable-sm-tbody-tr-last-child-height};
        --#{$prefix}datatable-sm-pagination-padding: #{$datatable-sm-pagination-padding};
        --#{$prefix}datatable-bordered-th-td-border-width: #{$datatable-bordered-th-td-border-width};
        --#{$prefix}datatable-hover-tbody-tr-transition: #{$datatable-hover-tbody-tr-transition};
        --#{$prefix}datatable-dark-select-arrow-input-color: #{$datatable-dark-select-arrow-input-color};
        --#{$prefix}datatable-dark-border-color: #{$datatable-dark-border-color};
        --#{$prefix}datatable-dark-check-border-color: #{$datatable-dark-check-border-color};
        --#{$prefix}datatable-dark-datatable-progress-opacity: #{$datatable-dark-datatable-progress-opacity};
        
        // &.datatable-dark
        --#{$prefix}datatable-color: #{$datatable-dark-color};
        --#{$prefix}datatable-border-color: #{$datatable-dark-border-color};
        --#{$prefix}datatable-active-color: #{$datatable-dark-active-color};
        --#{$prefix}datatable-striped-color: #{$datatable-dark-striped-color};
        --#{$prefix}datatable-accent-bg: #{$datatable-dark-accent-bg};
        --#{$prefix}datatable-hover-bg: #{$datatable-dark-hover-bg};
        --#{$prefix}datatable-hover-color: #{$datatable-dark-hover-color};
      
        // @each $color, $value in $theme-colors
        // &.border-#{$color}
        --#{$prefix}datatable-border-color: #{$value};

        // &.datatable-borderless {
        --#{$prefix}datatable-border-color: #{transparent};

SCSS variables

        
            
        $datatable-color: rgb(33, 37, 41);
        $datatable-border-color: rgb(224, 224, 224);
        $datatable-striped-color: rgb(33, 37, 41);
        $datatable-accent-bg: rgba(0, 0, 0, 0.02);
        $datatable-hover-color: rgb(19, 19, 19);
        $datatable-hover-bg: rgba(0, 0, 0, 0.048);
        $datatable-muted-color: grey;
        $datatable-active-color: rgba(19, 19, 19, 0.05);

        $datatable-font-size: 0.9rem;
        $datatable-background-color: $white;
        $datatable-table-th-td-max-width: 250px;
        $datatable-table-th-td-padding-y: 1rem;
        $datatable-table-th-td-padding-x: 1.4rem;
        $datatable-thead-tr-border-width: 1px;
        $datatable-thead-th-font-weight: 500;
        $datatable-thead-fixed-cell-background-color: $white;

        $datatable-tbody-font-weight: 300;
        $datatable-tbody-tr-transition: all 0.3s ease-in;
        $datatable-tbody-tr-last-child-height: 71px;
        $datatable-tbody-loader-height: 2px;

        $datatable-tbody-progress-animation: datatableProgress 3s ease-in-out;
        $datatable-tbody-progress-width: 45%;
        $datatable-tbody-progress-opacity: 0.5;
        $datatable-tbody-progress-border-radius: 1px;

        $datatable-pagination-padding-y: 0.5rem;
        $datatable-pagination-border-width: 1px;
        $datatable-pagination-nav-font-size: 0.9rem;
        $datatable-pagination-buttons-margin-left: 2rem;
        $datatable-pagination-button-padding-x: 1rem;

        $datatable-sort-icon-transition-duration: 0.3s;
        $datatable-sort-icon-left: 0.4rem;
        $datatable-sort-icon-top: calc(50% - 0.5rem);

        $datatable-select-wrapper-font-size: 0.9rem;
        $datatable-select-wrapper-font-weight: 300;

        $datatable-select-font-size: 1rem;
        $datatable-select-line-height: 1.3;
        $datatable-select-padding-top: 0.4em;
        $datatable-select-padding-right: 1.2em;
        $datatable-select-padding-bottom: 0.3em;
        $datatable-select-padding-left: 0.6em;
        $datatable-select-margin-right: 1.4rem;
        $datatable-select-margin-left: 0.1rem;
        $datatable-select-background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000'><polygon points='0,0 100,0 50,50'/></svg>");
        $datatable-select-background-position: right 0.4em top 60%, 0 0;
        $datatable-select-background-size: 0.65em auto, 100%;
        $datatable-select-focus-font-weight: 500;
        $datatable-select-option-color: $black;

        $datatable-sm-th-td-padding-y: 0.5rem;
        $datatable-sm-th-td-padding-x: 1.4rem;
        $datatable-sm-tbody-tr-last-child-height: 55px;
        $datatable-sm-pagination-padding: 0.2rem;

        $datatable-dark-check-border-color: $white;
        $datatable-dark-select-background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='white'><polygon points='0,0 100,0 50,50'/></svg>");
        $datatable-dark-datatable-progress-opacity: 0.8;
        $datatable-dark-select-arrow-input-color: white;
        $datatable-dark-border-color: rgb(251, 251, 251);
        $datatable-dark-color: #fff;
        $datatable-dark-border-color: #fff;
        $datatable-dark-striped-color: white;
        $datatable-dark-accent-bg: rgba(255, 255, 255, 0.05);
        $datatable-dark-hover-color: white;
        $datatable-dark-hover-bg: rgba(255, 255, 255, 0.2);
        $datatable-dark-active-color: rgba(255, 255, 255, 0.2);

        $datatable-hover-tbody-tr-transition: background-color 0.2s ease-in;
        $datatable-bordered-th-td-border-width: 1px;
        $datatable-loading-select-background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='grey'><polygon points='0,0 100,0 50,50'/></svg>");