Table search

Bootstrap 5 Table search component

Responsive Table search built with Bootstrap 5. Super fast and easy to use searching functionality dedicated to bootstrap tables.

To learn more read Docs.


Basic example

        
            
        <template>
          <MDBInput v-model="search3" />
          <MDBDatatable :dataset="dataset3" :search="search3" />
        </template>
        
        
    
        
            
        <script>
          import { ref } from "vue";
          import { MDBDatatable, MDBInput } from "mdb-vue-ui-kit";
          export default {
            components: {
              MDBDatatable,
              MDBInput
            },
            setup() {
              const search3 = ref("");
              const dataset3 = {
                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 {
                search3,
                dataset3
              };
            }
          };
        </script>