Press "Enter" to skip to content

Advanced Table Based on Vue 2 and Bootstrap 4

vue-bootstrap4-table is an advanced table component based on Vue 2 and Bootstrap 4.

vue 3 table, vue bootstrap table, bootstrap vue table filter example, table vue, vue table component example

Features

  • Multi-column filtering (Optimized filtering)
    • Simple filter
    • Select filter (Single & Multiple)
  • Global search
  • Single & Multi-column sorting
  • Pagination (True! It works out of the box intelligently)
  • Pagination Information
  • Checkbox selection for rows
  • Client & Server mode
  • Highly customizable

How to make use of it:

Install & Download:

# NPM
$ npm install vue-bootstrap4-table --save

Usage

<template>
    <div id="app">
        <vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
        </vue-bootstrap4-table>
    </div>
</template>
<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'

export default {
    name: 'App',
    data: function() {
        return {
            rows: [{
                    "id": 1,
                    "name": {
                        "first_name": "Vladimir",
                        "last_name": "Nitzsche"
                    },
                    "address": {
                        "country": "Mayotte"
                    },
                    "email": "[email protected]",
                },
                {
                    "id": 2,
                    "name": {
                        "first_name": "Irwin",
                        "last_name": "Bayer"
                    },
                    "age": 23,
                    "address": {
                        "country": "Guernsey"
                    },
                    "email": "[email protected]",
                },
                {
                    "id": 3,
                    "name": {
                        "first_name": "Don",
                        "last_name": "Herman"
                    },
                    "address": {
                        "country": "Papua New Guinea"
                    },
                    "email": "[email protected]",
                }],
            columns: [{
                    label: "id",
                    name: "id",
                    filter: {
                        type: "simple",
                        placeholder: "id"
                    },
                    sort: true,
                },
                {
                    label: "First Name",
                    name: "name.first_name",
                    filter: {
                        type: "simple",
                        placeholder: "Enter first name"
                    },
                    sort: true,
                },
                {
                    label: "Email",
                    name: "email",
                    sort: true,
                },
                {
                    label: "Country",
                    name: "address.country",
                    filter: {
                        type: "simple",
                        placeholder: "Enter country"
                    },
                }],
            config: {
                checkbox_rows: true,
                rows_selectable: true,
                card_title: "Vue Bootsrap 4 advanced table"
            }
        }
    },
    components: {
        VueBootstrap4Table
    }
}
</script>

advanced bootstrap 4 table for vue js, vue-bootstrap4-table Plugin/Github


See Demo And Download

Official Website(rubanraj54): Click Here

This superior jQuery/javascript plugin is developed by rubanraj54. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *