{"id":13535870,"url":"https://github.com/jbaysolutions/vue-bootstrap-table","last_synced_at":"2025-04-25T07:32:20.711Z","repository":{"id":57394732,"uuid":"65224661","full_name":"jbaysolutions/vue-bootstrap-table","owner":"jbaysolutions","description":"A sortable and searchable table, as a Vue component, using bootstrap styling.","archived":false,"fork":false,"pushed_at":"2019-10-02T01:02:38.000Z","size":662,"stargazers_count":87,"open_issues_count":5,"forks_count":18,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-03T00:32:53.605Z","etag":null,"topics":["ajax","bootstrap-styles","filter","pagination","vue","vue-bootstrap-table","vuejs","widget"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-08T17:27:54.000Z","updated_at":"2023-11-20T11:19:23.000Z","dependencies_parsed_at":"2022-09-06T02:51:20.364Z","dependency_job_id":null,"html_url":"https://github.com/jbaysolutions/vue-bootstrap-table","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue-bootstrap-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue-bootstrap-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue-bootstrap-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbaysolutions%2Fvue-bootstrap-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbaysolutions","download_url":"https://codeload.github.com/jbaysolutions/vue-bootstrap-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223988860,"owners_count":17236961,"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","bootstrap-styles","filter","pagination","vue","vue-bootstrap-table","vuejs","widget"],"created_at":"2024-08-01T09:00:30.828Z","updated_at":"2024-11-10T17:33:42.931Z","avatar_url":"https://github.com/jbaysolutions.png","language":"Vue","funding_links":[],"categories":["UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# vue-bootstrap-table\n\nvue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js.\n\n### VUE 1 : 1.1.8\n\n### Vue 2 : [jbaysolutions/vue2-bootstrap-table](https://github.com/jbaysolutions/vue2-bootstrap-table)\n\n### [Demo](https://jbaysolutions.github.io/vue-bootstrap-table/examples/01-basic.html)\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 1.* (tested with 1.0.26)\n* Bootstrap 3 css\n\n\n## Installation\n\nInstall the vue-bootstrap-table [package](https://www.npmjs.org/package/vue-bootstrap-table2) package using [npm](https://www.npmjs.com/):\n\n\tnpm install vue-bootstrap-table2\n\n\nOr add the js script to your html (download from [releases](https://github.com/jbaysolutions/vue-bootstrap-table/releases)):\n \n    \u003cscript src=\"vue-bootstrap-table.js\"\u003e\u003c/script\u003e\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                },\n                {\n                    title:\"age\",\n                    visible: true,\n                    editable: true,\n                },\n                {\n                    title:\"country\",\n                    visible: true,\n                    editable: true,\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            :multi-column-sortable=true\n            :paginated=\"true\"\n            :filter-case-sensitive=false\n    \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 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         * 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\n```\n\n### Column Array Definition\n\nThe `columns` array takes object of type:\n\n```javascript\n{\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}\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#### 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### 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\n    events: {\n        cellDataModifiedEvent: function( originalValue, newValue, columnTitle, entry) {\n\n            this.logging.push(\"Original Value : \" + originalValue +\n                         \" | New Value : \" + newValue +\n                         \" | Column : \" + columnTitle +\n                         \" | Complete Entry : \" +  entry );\n\n        },\n        ajaxLoadedEvent: function( data ) {\n            console.log(\"ajaxLoadedEvent - data : \" + data );\n        },\n        ajaxLoadingError: function( error ) {\n            console.log(\"ajaxLoadingError - error : \" + error );\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.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%2Fvue-bootstrap-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbaysolutions%2Fvue-bootstrap-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbaysolutions%2Fvue-bootstrap-table/lists"}