Sortable and Searchable Table Component For Bootstrap

Install & Download:

npm install vue2-bootstrap-table2

Description:

A Vue.js 2 component for creating sortable and searchable Bootstrap tables on the web applications.

Features:

Sortable
Multicolumn Sorting
Searchable
Select display columns
Pagination
On Table Editing
Remote data loading
Remote data processing

How to use it:

1. Import and register the component.

import VueBootstrapTable from "vue2-bootstrap-table2";

export default {
  components: {
    VueBootstrapTable: VueBootstrapTable,
 },
 // ...
}

2. Add the component to the app and define your tabular data as follows:

<vue-bootstrap-table
  :columns="columns"
  :values="values"
  :show-filter="true"
  :show-column-picker="true"
  :sortable="true"
  :paginated="true"
  :multi-column-sortable=true
  :filter-case-sensitive=false
>
<template v-slot:name="slotProps">
  {{slotProps.value.name}}
</template>
<template v-slot:description="slotProps">
  {{slotProps.value.description}}
</template>
</vue-bootstrap-table>

export default {
  components: {
    VueBootstrapTable: VueBootstrapTable,
  },
  data: {
    columns: [
        {
            title:"id",
        },
        {
            title:"name",
            visible: true,
            editable: true,
            filterable: false
        },
        {
            title:"age",
            visible: true,
            editable: true,
        },
        {
            title:"country",
            visible: true,
            editable: true,
            sortable: false
        }
    ],
    values: [
        {
            "id": 1,
            "name": "John",
            "country": "UK",
            "age": 25,
        },
        {
            "id": 2,
            "name": "Mary",
            "country": "France",
            "age": 30,
        },
        {
            "id": 3,
            "name": "Ana",
            "country": "Portugal",
            "age": 20,
        }
    ]
  },
}

3. All available props.

/**
* The column titles, required
*/
columns: {
  type: Array,
  required: true,
},
/**
* The rows, an Array of objects
*/
values: {
  type: Array,
  required: false,
},
/**
* Enable/disable table row selection, optional, default false.
* When true, it will add a checkbox column on the left side and use the value.selected field
*/
selectable: {
  type: Boolean,
  required: false,
  default: true,
},
/**
* Enable/disable table sorting, optional, default true
*/
sortable: {
  type: Boolean,
  required: false,
  default: true,
},
/**
* Enable/disable table multicolumn sorting, optional, default false.
* Also sortable must be enabled for this function to work.
*/
multiColumnSortable: {
  type: Boolean,
  required: false,
  default: false,
},
/**
* Enable/disable input filter, optional, default false
*/
showFilter: {
  type: Boolean,
  required: false,
  default: false,
},
/**
* Define if Filter search field is to work in a case Sensitive way. Default: true
*/
filterCaseSensitive: {
  type: Boolean,
  required: false,
  default: true,
},
/**
* Enable/disable column picker to show/hide table columns, optional, default false
*/
showColumnPicker: {
  type: Boolean,
  required: false,
  default: false,
},
/**
* Enable/disable pagination for the table, optional, default false
*/
paginated: {
  type: Boolean,
  required: false,
  default: false,
},
/**
* If pagination is enabled defining the page size, optional, default 10
*/
pageSize: {
  type: Number,
  required: false,
  default: 10,
},
/**
* Setting default order column. Expected name of the column
*/
defaultOrderColumn: {
  type: String,
  required: false,
  default: null,
},
/**
* Setting default order direction. Boolean: true = ASC , false = DESC
*/
defaultOrderDirection: {
  type: Boolean,
  required: false,
  default: true,
},
/**
* If loading of table is to be done through ajax, then this object must be set
*/
ajax: {
  type: Object,
  required: false,
  default: function () {
      return {
          enabled: false,
          url: "",
          method: "GET",
          delegate: false,
          axiosConfig: {}
      }
  }
},
/**
* Function to handle row clicks
*/
rowClickHandler: {
  type: Function,
  required: false,
  default: function () {}
},
/**
* Placeholder for filter input field
*/
filterPlaceholder: {
  type: String,
  required: false,
  default() {
      return "Filter";
  }
},
columnPickerLabel: {
  type: String,
  required: false,
  default() {
      return "Columns";
  }
},
tableClasses: {
  type: String,
  required: false,
  default() {
      return "table table-bordered table-hover table-condensed table-striped";
  }
}