{"id":13937993,"url":"https://github.com/jbaysolutions/vue2-bootstrap-table","last_synced_at":"2025-04-09T09:05:36.110Z","repository":{"id":48456892,"uuid":"92973423","full_name":"jbaysolutions/vue2-bootstrap-table","owner":"jbaysolutions","description":"A sortable and searchable table, as a Vue2 component, using bootstrap styling.","archived":false,"fork":false,"pushed_at":"2022-07-28T10:58:24.000Z","size":2825,"stargazers_count":118,"open_issues_count":14,"forks_count":38,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-02T08:08:57.180Z","etag":null,"topics":["ajax","filter","vue","vue-bootstrap","vue-bootstrap-table","vuejs","vuejs2","widget"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jbaysolutions.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-31T17:54:12.000Z","updated_at":"2024-06-09T14:15:41.000Z","dependencies_parsed_at":"2022-09-18T12:12:13.369Z","dependency_job_id":null,"html_url":"https://github.com/jbaysolutions/vue2-bootstrap-table","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue2-bootstrap-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue2-bootstrap-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue2-bootstrap-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue2-bootstrap-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbaysolutions","download_url":"https://codeload.github.com/jbaysolutions/vue2-bootstrap-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008630,"owners_count":21032556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","filter","vue","vue-bootstrap","vue-bootstrap-table","vuejs","vuejs2","widget"],"created_at":"2024-08-07T23:04:09.443Z","updated_at":"2025-04-09T09:05:36.092Z","avatar_url":"https://github.com/jbaysolutions.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# vue2-bootstrap-table\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue2-bootstrap-table2\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue2-bootstrap-table2.svg\"/\u003e \u003cimg src=\"https://img.shields.io/npm/dm/vue2-bootstrap-table2.svg\"/\u003e\u003c/a\u003e \u003ca href=\"https://vuejs.org/\"\u003e\u003cimg src=\"https://img.shields.io/badge/vue-2.6.x-brightgreen.svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nvue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js.\n\n### Vue 2.6.0 : 1.2.1 (column slots support, Bootstrap v4.3.1) \n\n### Vue \u003c 2.6.0: 1.1.13 (Bootstrap v3) \n\n### Vue 1 : [jbaysolutions/vue-bootstrap-table](https://github.com/jbaysolutions/vue-bootstrap-table)\n\n### [Demo](https://jbaysolutions.github.io/vue2-bootstrap-table/examples/01-basic.html)\n### [Changelog](/CHANGELOG.md)\n\n\u003c!--\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Contribute](#contribute)\n- [TODO List](#todo-list)\n\n## Demos\n\n\nTODO UPDATE DOCS\nTODO UPDATE CHANGELOG\n\n--\u003e\n\n#### Projects using vue-bootstrap-table\n\n- [Draxed](https://www.draxed.com/?utm_source=github\u0026utm_medium=web\u0026utm_campaign=vue-bootstrap-table)\n\n*Know of others? Create a PR to let me know!*\n\n## Features\n\n* Sortable\n* Multicolumn Sorting\n* Searchable\n* Select display columns\n* Pagination\n* On Table Editing\n* Remote data loading\n* Remote data processing\n\n\n## Requirements\n\n* Vue 2.6.0+ (tested with 2.6.10)\n* Bootstrap 4 css (for Bootstrap 3 css use 1.1.x)\n* Fontawesome 5\n\n\n## Installation\n\n#### [npm](https://www.npmjs.org/package/vue2-bootstrap-table2)\n\n    # install with npm    \n\tnpm install vue2-bootstrap-table2 --save\n    \n    # install with yarn    \n    yarn add vue2-bootstrap-table2\n\n\nImport the library\n\n```javascript\n    import VueBootstrapTable from \"vue2-bootstrap-table2\";\n```\n\nAdd to other Vue components \n\n ```javascript\n    export default {\n        components: {\n            VueBootstrapTable: VueBootstrapTable,\n        },\n    // ... data, methods, mounted (), etc.\n    }\n    \n``` \n\n#### browser\n\nInclude the browser-ready bundle (download from [releases](https://github.com/jbaysolutions/vue2-bootstrap-table/releases)) in your page. The components will be automatically available.\n\n```html\n    \u003cscript src=\"vue2-bootstrap-table2.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n\n## Usage\n\n```javascript\n\n    new Vue({\n        el: '#app',\n        components: {\n            VueBootstrapTable: VueBootstrapTable\n        },\n        data: {\n            columns: [\n                {\n                    title:\"id\",\n                },\n                {\n                    title:\"name\",\n                    visible: true,\n                    editable: true,\n                    filterable: false\n                },\n                {\n                    title:\"age\",\n                    visible: true,\n                    editable: true,\n                },\n                {\n                    title:\"country\",\n                    visible: true,\n                    editable: true,\n                    sortable: false\n                }\n            ],\n            values: [\n                {\n                    \"id\": 1,\n                    \"name\": \"John\",\n                    \"country\": \"UK\",\n                    \"age\": 25,\n                },\n                {\n                    \"id\": 2,\n                    \"name\": \"Mary\",\n                    \"country\": \"France\",\n                    \"age\": 30,\n                },\n                {\n                    \"id\": 3,\n                    \"name\": \"Ana\",\n                    \"country\": \"Portugal\",\n                    \"age\": 20,\n                }\n            ]\n        },\n    });\n```` \n\n\n````html\n\n    \u003cvue-bootstrap-table\n            :columns=\"columns\"\n            :values=\"values\"\n            :show-filter=\"true\"\n            :show-column-picker=\"true\"\n            :sortable=\"true\"\n            :paginated=\"true\"\n            :multi-column-sortable=true\n            :filter-case-sensitive=false\n\n    \u003e\n        \u003ctemplate v-slot:name=\"slotProps\"\u003e\n            {{slotProps.value.name}}\n        \u003c/template\u003e\n        \u003ctemplate v-slot:description=\"slotProps\"\u003e\n            {{slotProps.value.description}}\n        \u003c/template\u003e\n    \u003c/vue-bootstrap-table\u003e\n```` \n\n## Configuration Props\n\n```javascript\n\n    props: {\n        /**\n         * The column titles, required\n         */\n        columns: {\n            type: Array,\n            required: true,\n        },\n        /**\n         * The rows, an Array of objects\n         */\n        values: {\n            type: Array,\n            required: true,\n        },\n        /**\n         * Enable/disable table row selection, optional, default false.\n         * When true, it will add a checkbox column on the left side and use the value.selected field\n         */\n        selectable: {\n            type: Boolean,\n            required: false,\n            default: true,\n        },\n        /**\n         * Enable/disable table sorting, optional, default true\n         */\n        sortable: {\n            type: Boolean,\n            required: false,\n            default: true,\n        },\n        /**\n         * Enable/disable table multicolumn sorting, optional, default false.\n         * Also sortable must be enabled for this function to work.\n         */\n        multiColumnSortable: {\n            type: Boolean,\n            required: false,\n            default: false,\n        },\n        /**\n         * Enable/disable input filter, optional, default false\n         */\n        showFilter: {\n            type: Boolean,\n            required: false,\n            default: false,\n        },\n        /**\n         * Define if Filter search field is to work in a case Sensitive way. Default: true\n         */\n        filterCaseSensitive: {\n            type: Boolean,\n            required: false,\n            default: true,\n        },\n        /**\n         * Enable/disable column picker to show/hide table columns, optional, default false\n         */\n        showColumnPicker: {\n            type: Boolean,\n            required: false,\n            default: false,\n        },\n        /**\n         * Enable/disable pagination for the table, optional, default false\n         */\n        paginated: {\n            type: Boolean,\n            required: false,\n            default: false,\n        },\n        /**\n         * If pagination is enabled defining the page size, optional, default 10\n         */\n        pageSize: {\n            type: Number,\n            required: false,\n            default: 10,\n        },\n        /**\n         * Setting default order column. Expected name of the column\n         */\n        defaultOrderColumn: {\n            type: String,\n            required: false,\n            default: null,\n        },\n        /**\n         * Setting default order direction. Boolean: true = ASC , false = DESC\n         */\n        defaultOrderDirection: {\n            type: Boolean,\n            required: false,\n            default: true,\n        },\n        /**\n         * If loading of table is to be done through ajax, then this object must be set\n         */\n        ajax: {\n            type: Object,\n            required: false,\n            default: function () {\n                return {\n                    enabled: false,\n                    url: \"\",\n                    method: \"GET\",\n                    delegate: false,\n                    axiosConfig: {}\n                }\n            }\n        },\n        /**\n         * Function to handle row clicks\n         */\n        rowClickHandler: {\n            type: Function,\n            required: false,\n            default: function () {}\n        },\n    },\n\n```\n\n### Column Array Definition\n\nThe `columns` array takes object of type:\n\n```javascript\n{\n    title: String,              // Mandatory: Title to be presented on the Table\n    name: String,               // Optional: The name of the \"data\" property. If nothing, title is used.\n    visible: Boolean,              // Optional: column visible? (Default: true)\n    editable: Boolean,            // Optional: column cells editable? (Default: false)\n    columnstyle: String         // Optional: styles to be applied to the Column Header\n    cellstyle: String           // Optional: styles to be applied to the Cells of this column\n    renderfunction: Function    // Optional: Function that receives as input the column name and entry, and returns an HTML String for drawing cell\n    sortable: Boolean           // Optional, by default it is true!  Used to set particular columns as not sortable, in case the table is sortable itself. - From 1.1.12\n    filterable: Boolean         // Optional, by default it is true!  Used to exclude columns from the filtering process. - From 1.1.13\n}\n```\n\n#### Column Definition Examples\n\nColumn with Title \"Id\" , which is visible but not editable:\n\n```javascript\n{\n    title:\"Id\",\n}\n```\nColumn with Title \"Name\" , which is visible and editable:\n\n```javascript\n{\n    title:\"Name\",\n    visible: true,\n    editable: true,\n}\n```\n\n#### Column slots example\n\n````html\n\n    \u003cvue-bootstrap-table\n            :columns=\"columns\"\n            :values=\"values\"\n            :show-filter=\"true\"\n            :show-column-picker=\"true\"\n            :sortable=\"true\"\n            :paginated=\"true\"\n            :multi-column-sortable=true\n            :filter-case-sensitive=false\n\n    \u003e\n        \u003ctemplate v-slot:name=\"slotProps\"\u003e\n            {{slotProps.value.name}}\n        \u003c/template\u003e\n        \u003ctemplate v-slot:description=\"slotProps\"\u003e\n            {{slotProps.value.description}}\n        \u003c/template\u003e\n    \u003c/vue-bootstrap-table\u003e\n```` \n\nA slot will be created for each column, named with column.name. It has two props available:\n * \"column\" - the column object\n * \"value\" - the value object for the corresponding row\n\n\n\n#### Render Function Example\n\nFor a Column definition like so:\n\n```javascript\ncolumns: [\n    {\n        title: \"Test\",\n        visible: true,\n        renderfunction: renderTestColumn\n    }\n],\n```\n\nThere must be a javascript function called `renderTestColumn`  :\n\n```javascript\n\u003cscript\u003e\n    var renderTestColumn = function (colname, entry) {\n        return '\u003cdiv class=\"btn-group\" role=\"group\" \u003e'+\n            '  \u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\"\u003e\u003cspan class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"\u003e\u003c/span\u003e\u003c/button\u003e'+\n            '  \u003cbutton type=\"button\" class=\"btn btn-sm btn-danger\"\u003e\u003cspan class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"\u003e\u003c/span\u003e\u003c/button\u003e'+\n            '\u003c/div\u003e\u003cspan\u003e'+JSON.stringify(entry)+'\u003c/span\u003e';\n    };\n\u003c/script\u003e\n```\n\n### ROW Click Handler\n\nTo add a Row click handler function:\n\n````html\n\n    \u003cvue-bootstrap-table\n            [...]\n            :row-click-handler=handleRowFunction\n    \u003e\n    \u003c/vue-bootstrap-table\u003e\n````\n\nOn your Vue instance :\n\n````javascript\ndata: {\n        handleRowFunction: handleRow,\n}\n````\n\nAnd have the javascript function declared like so:\n\n````javascript\nvar handleRow = function (event, entry) {\n    console.log(\"CLICK ROW: \" + JSON.stringify(entry));\n};\n````\n\nWhere event in the `MouseEvent` and `entry` e the complete entry corresponding to the row.\n\n\n### DEFAULT Ordering\n\nTo setup your default ordering for the table:\n\n````html\n\n    \u003cvue-bootstrap-table\n            [...]\n            :default-order-column=\"columnToSortBy\"\n            :default-order-direction=true\n    \u003e\n    \u003c/vue-bootstrap-table\u003e\n````\n\nOn your Vue instance :\n\n````javascript\ndata: {\n        columnToSortBy: \"name\",\n}\n````\n\nThis will make the default column order be :  \n * column: name  \n * order: ascending\n\n### AJAX Configuration\n\nAjax Object properties:\n\n* enabled : to enable loading through ajax call, enable this\n* url: the URL where to request the data\n* methods: GET and POST are the valid methods allowed\n* delegate: False = just get all the data and do processing on browser;  True = Ask for data as needed, and all processing is done on the server side.\n* axiosConfig: check [Axios Page](https://github.com/mzabriskie/axios) for information regarding Method Config.\n\n#### Example AJAX config for Remote Loading\n\nThis configuration will only make one request to the server, to get all the data and load it straight into the browser.\n\n```javascript\najax: {\n    enabled: true,\n    url: \"http://localhost:9430/data/test\",\n    method: \"GET\",\n    delegate: false,\n    axiosConfig: {}\n},\n```\n\n#### Example AJAX config for Remote Processing\n\nThis configuration will only make many requests to the server, each time data ir needed, or any processing is required: for filtering, ordering, pagniation, changes of page size, etc.\n\n```javascript\najax: {\n    enabled: true,\n    url: \"http://localhost:9430/data/test\",\n    method: \"GET\",\n    delegate: true,\n    axiosConfig: {\n        headers: {\n            'Authorization': 'Bearer TESTTESTTESTTESTTEST'\n        }\n    }\n},\n```\n\n### Ajax Request and Expected Response\n\n#### Ajax Request Parameters Sent\n\nWhen Ajax is enabled, the following parameters are sent with each request for the URL specified:\n\n - `sortcol` : Array of String columns to sort (only sent when `delegate` is true, otherwise will be null)\n - `sortdir` : Array of sorting directions for each column on sortcol, \"ASC\" or \"DESC\" (only sent when `delegate` is true, otherwise will be null)\n - `filter` : The filter to be used  (only sent when `delegate` is true, otherwise will be null)\n - `page` : The number of the page being requested ( when delegate is false, it will always be 1 )\n - `pagesize` : The number of records being requested.\n - `echo` : A unique number for the request.\n\n##### When using GET\n\n - `sortcol` : is sent in the following format  `sortcol[]=COLNAME\u0026sortcol[]=COLNAME`\n - `sortdir` : is sent in the following format  `sortdir[]=ASC\u0026sortdir[]=DESC`\n\nThis is performed automatically by AXIOS\n\n##### When using POST\n\n - `sortcol` : is sent in the following format  `sortcol[0]=COLNAME ; sortcol[1]=COLNAME; `\n - `sortdir` : is sent in the following format  `sortdir[0]=ASC ; sortdir[1]=DESC`\n\nThis is performed automatically by AXIOS\n\n#### Ajax Expected Response\n\nFor all requests, vue-bootstrap-table expects an object of the following type:\n\n```javascript\n{\n    echo: INTEGER,\n    filtered: INTEGER,\n    data: [OBJECT],\n},\n```\n\nWhere:\n\n- `echo` : is the same integer the request provided.\n- `filtered` : is the total amount of entries for the request, and is used for pagination\n- `data` : is an Array of Object with the entries.\n\nExample:\n\n```javascript\n{\n    echo: 1,\n    filtered: 2000,\n    data: [\n        {\n            id: 1,\n            name: \"Rui\"\n        },\n        {\n            id: 2,\n            name: \"Gustavo\"\n        },\n    ],\n},\n```\n\n## Events\n\n* `cellDataModifiedEvent` - When a cell is edited, an `cellDataModifiedEvent` event is dispatched.\n* `ajaxLoadedEvent` - When ajax call is executed successfully an `ajaxLoadedEvent` event is dispatched.\n* `ajaxLoadingError` -When ajax call is executed unsuccessfully an  `ajaxLoadingError` event is dispatched.\n\n### Handling Events\n\n```javascript\n    created: function () {\n        this.$on('cellDataModifiedEvent',\n            function( originalValue, newValue, columnTitle, entry) {\n                console.log(\"cellDataModifiedEvent - Original Value : \" + originalValue +\n                                         \" | New Value : \" + newValue +\n                                         \" | Column : \" + columnTitle +\n                                         \" | Complete Entry : \" +  entry );\n            }\n        );\n        this.$on('ajaxLoadedEvent',\n            function( data ) {\n                console.log(\"ajaxLoadedEvent - data : \" + data );\n            }\n        );\n        this.$on('ajaxLoadingError',\n            function( error ) {\n                console.log(\"ajaxLoadingError - error : \" + error );\n            }\n        );\n    },\n```\n\n## Contribute\n\nIf you have a feature request, please add it as an issue or make a pull request.\n\n\n## TODO List\n\n- [x] Basic table\n- [x] Sorting\n- [x] Multicolumn Sorting\n- [x] Filter\n- [x] Column picker\n- [x] Pagination\n- [x] Editing\n- [x] Ajax\n- [ ] Responsive\n- [ ] Dates sorting\n- [ ] Keyboard navigation\n\n\n## Changelog\n\n### 1.1.13\n\n* #19 - Disable filter for specific columns\n\n### 1.1.12\n\n* Enhancement - exposed methods.\n\n### 1.1.11\n\n* Enhancement - #11 - Dynamic Page Size\n* Enhancement - Started creating public methods to simplify stuff.\n\n### 1.1.10.1\n\n* Bug fix - axios problem with passing axios config object\n\n### 1.1.10\n\n* Bug fix - Delegate true and false behaviours leading to not loading data\n* Bug fix - Ajax redundant fetch when not needed\n* Enhancement - #14 - Adding support for default ordering\n* Enhancement - Documentation of code\n\n### 1.1.9\n\n* Bug fix - Support for IE11 (maybe fixed for IE10 aswell)\n\n### 1.1.8\n\n* Bug fix - Issue 5 - Axios config not being loaded with GET method and Delegate false.\n\n### 1.1.7\n\n* Allowing Axios configuration to be passed for the requests\n\n### 1.1.6\n\n* Search case sensitivity configurable\n\n### 1.1.5\n\n* Row Click Handler added\n\n### 1.1.4\n\n* Fix- delegate now doesn't use echo\n\n### 1.1.3\n\n* Define a Render Function support by column\n* Define Column Styles by column\n* Define Cell Styles by column\n\n### 1.1.2\n\n* Fix to Sorting\n* Added Multicolumn Sorting\n* Fix dynamic adding rows with update to interface\n* Ajax with multicolumn sorting\n\n### 1.1.1\n\n* Added more Events\n\n### 1.1.0\n\n* Remote data loading (through ajax call)\n* Remote data processing (through ajax calls)\n* Loading overlay\n\n### 1.0.2\n\n* Pagination working\n* Editing cells on the table\n* Configuration Improvements\n\n### 1.0.1\n\n* Bug fix\n\n### 1.0.0\n\n* First version\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbaysolutions%2Fvue2-bootstrap-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbaysolutions%2Fvue2-bootstrap-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbaysolutions%2Fvue2-bootstrap-table/lists"}