├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── rollup.config.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.test.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── examples ├── .firebaserc ├── .gitignore ├── firebase.json └── public │ └── index.html ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── AppServer.vue ├── assets │ ├── img │ │ ├── default_pagination.png │ │ ├── default_pagination_info.png │ │ ├── default_pagination_info_slot.png │ │ ├── default_pagination_slot.png │ │ ├── demo.gif │ │ ├── refresh_reset_slot.png │ │ └── sort_icons_slot.png │ ├── logo.png │ └── scss │ │ └── custom.scss ├── components │ ├── CheckBox.vue │ ├── Column.vue │ ├── Filters │ │ ├── MultiSelect.vue │ │ ├── MultiSelectAllItem.vue │ │ ├── MultiSelectItem.vue │ │ └── Simple.vue │ ├── Header.vue │ ├── Pagination.vue │ ├── PaginationInfo.vue │ ├── Row.vue │ ├── SelectAllRowsCheckBox.vue │ ├── SortIcon.vue │ └── VueBootstrap4Table.vue ├── event-bus.js ├── main.js └── wrapper.js ├── static └── .gitkeep └── test ├── setup.js └── unit ├── specs ├── checkbox.spec.js ├── globalsearch.spec.js └── refresh-reset-buttons.spec.js └── utils.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"], 7 | "node": 4 8 | } 9 | }], 10 | "stage-2" 11 | ], 12 | "plugins": ["transform-vue-jsx", "transform-runtime","lodash"], 13 | "env": { 14 | "test": { 15 | "presets": ["env", "stage-2"], 16 | "plugins": ["transform-vue-jsx", "istanbul"] 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | /test/unit/coverage/ 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | 17 | \.nyc_output/ 18 | 19 | coverage/ 20 | 21 | bundle_statistics\.html 22 | 23 | bundle_analysis/ 24 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6.11.4" 4 | install: 5 | - npm install 6 | cache: npm 7 | script: npm test 8 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Update the README.md with details of changes to the interface, this includes new environment 13 | variables, exposed ports, useful file locations and container parameters. 14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this 15 | Pull Request would represent. 16 | 17 | ## Code of Conduct 18 | 19 | ### Our Pledge 20 | 21 | In the interest of fostering an open and welcoming environment, we as 22 | contributors and maintainers pledge to making participation in our project and 23 | our community a harassment-free experience for everyone, regardless of age, body 24 | size, disability, ethnicity, gender identity and expression, level of experience, 25 | nationality, personal appearance, race, religion, or sexual identity and 26 | orientation. 27 | 28 | ### Our Standards 29 | 30 | Examples of behavior that contributes to creating a positive environment 31 | include: 32 | 33 | * Using welcoming and inclusive language 34 | * Being respectful of differing viewpoints and experiences 35 | * Gracefully accepting constructive criticism 36 | * Focusing on what is best for the community 37 | * Showing empathy towards other community members 38 | 39 | Examples of unacceptable behavior by participants include: 40 | 41 | * The use of sexualized language or imagery and unwelcome sexual attention or 42 | advances 43 | * Trolling, insulting/derogatory comments, and personal or political attacks 44 | * Public or private harassment 45 | * Publishing others' private information, such as a physical or electronic 46 | address, without explicit permission 47 | * Other conduct which could reasonably be considered inappropriate in a 48 | professional setting 49 | 50 | ### Our Responsibilities 51 | 52 | Project maintainers are responsible for clarifying the standards of acceptable 53 | behavior and are expected to take appropriate and fair corrective action in 54 | response to any instances of unacceptable behavior. 55 | 56 | Project maintainers have the right and responsibility to remove, edit, or 57 | reject comments, commits, code, wiki edits, issues, and other contributions 58 | that are not aligned to this Code of Conduct, or to ban temporarily or 59 | permanently any contributor for other behaviors that they deem inappropriate, 60 | threatening, offensive, or harmful. 61 | 62 | ### Scope 63 | 64 | This Code of Conduct applies both within project spaces and in public spaces 65 | when an individual is representing the project or its community. Examples of 66 | representing a project or community include using an official project e-mail 67 | address, posting via an official social media account, or acting as an appointed 68 | representative at an online or offline event. Representation of a project may be 69 | further defined and clarified by project maintainers. 70 | 71 | ### Enforcement 72 | 73 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 74 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All 75 | complaints will be reviewed and investigated and will result in a response that 76 | is deemed necessary and appropriate to the circumstances. The project team is 77 | obligated to maintain confidentiality with regard to the reporter of an incident. 78 | Further details of specific enforcement policies may be posted separately. 79 | 80 | Project maintainers who do not follow or enforce the Code of Conduct in good 81 | faith may face temporary or permanent repercussions as determined by other 82 | members of the project's leadership. 83 | 84 | ### Attribution 85 | 86 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 87 | available at [http://contributor-covenant.org/version/1/4][version] 88 | 89 | [homepage]: http://contributor-covenant.org 90 | [version]: http://contributor-covenant.org/version/1/4/ 91 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Rubanraj Ravichandran 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | # 1. vue-bootstrap4-table 10 | 11 | > Advanced table based on Vue 2 and Bootstrap 4 12 | 13 | 14 |

15 | Build Status 16 | Total downloads 17 | Latest version 18 | Latest version 19 | Latest version 20 |

21 | 22 | [Quick Demo in Codepen](https://codepen.io/rubanraj54/full/zyZdzN). 23 | 24 | [Docs in gitbook](https://rubanraj54.gitbook.io/vue-bootstrap4-table/). 25 | 26 | ![Demo](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/demo.gif) 27 | 28 | 29 | # 2. Features 30 | * Multi column filtering (Optimized filtering) 31 | * Simple filter 32 | * Select filter (Single & Multiple) 33 | * Global search 34 | * Single & Multi column sorting 35 | * Pagination (True! It works out of the box intelligently) 36 | * Pagination Information 37 | * Checkbox selection for rows 38 | * Client & Server mode 39 | * Highly customizable 40 | 41 | Table of Contents 42 | ================= 43 | - [1. vue-bootstrap4-table](#1-vue-bootstrap4-table) 44 | - [2. Features](#2-features) 45 | - [3. Installation](#3-installation) 46 | * [3.1. Install via npm or yarn](#31-install-via-npm-or-yarn) 47 | + [3.1.1. Dependencies](#311-dependencies) 48 | * [3.2. Install via CDN](#32-install-via-cdn) 49 | - [4. Basic Usage](#4-basic-usage) 50 | - [5. Columns](#5-columns) 51 | * [5.1. Basic structure](#51-basic-structure) 52 | * [5.2. Attributes details](#52-attributes-details) 53 | * [5.3. Column slot](#53-column-slot) 54 | + [5.3.1. Example](#531-example) 55 | + [5.3.2. Note](#532-note) 56 | + [5.3.3. props](#533-props) 57 | - [6. Rows](#6-rows) 58 | * [6.1. Basic structure](#61-basic-structure) 59 | * [6.2. Row Slot](#62-row-slot) 60 | + [6.2.1. Example](#621-example) 61 | + [6.2.2. Note](#622-note) 62 | + [6.2.3. props](#623-props) 63 | * [6.3. Empty result message slot](#63-empty-result-message-slot) 64 | + [6.3.1. Example](#631-example) 65 | - [7. Sorting](#7-sorting) 66 | * [7.1. Example](#71-example) 67 | * [7.2. Attributes details](#72-attributes-details) 68 | * [7.3. Single column sorting](#73-single-column-sorting) 69 | * [7.4. Multi column sorting](#74-multi-column-sorting) 70 | + [7.4.1. Example](#741-example) 71 | * [7.5. Slot](#75-slot) 72 | + [7.5.1. Sort Icon](#751-sort-icon) 73 | - [7.5.1.1. Example](#7511-example) 74 | - [8. Filtering](#8-filtering) 75 | * [8.1. Simple Filter](#81-simple-filter) 76 | + [8.1.1. Example](#811-example) 77 | + [8.1.2. Attributes details](#812-attributes-details) 78 | + [8.1.3. Clear button icon slot](#813-clear-button-icon-slot) 79 | * [8.2. Multi-Select Filter](#82-multi-select-filter) 80 | + [8.2.1. Example (Single select)](#821-example--single-select-) 81 | + [8.2.2. Example (Multi select)](#822-example--multi-select-) 82 | + [8.2.3. Attribute details](#823-attribute-details) 83 | - [9. Global search](#9-global-search) 84 | * [9.1. Example](#91-example) 85 | * [9.2. Attributes details](#92-attributes-details) 86 | * [9.3. Clear button icon slot](#93-clear-button-icon-slot) 87 | - [10. Pagination & Info](#10-pagination---info) 88 | * [10.1. Example](#101-example) 89 | * [10.2. Attributes details](#102-attributes-details) 90 | * [10.3. Slot](#103-slot) 91 | + [10.3.1. Previous & Next button](#1031-previous---next-button) 92 | + [10.3.2. Pagination info](#1032-pagination-info) 93 | - [10.3.2.1. props](#10321-props) 94 | + [10.3.3. Selected rows info](#1033-selected-rows-info) 95 | - [10.3.3.1. props](#10331-props) 96 | - [11. Refresh and Reset button](#11-refresh-and-reset-button) 97 | * [11.1. Refresh Button](#111-refresh-button) 98 | + [11.1.1. Example](#1111-example) 99 | * [11.2. Reset button](#112-reset-button) 100 | * [11.3. Slots](#113-slots) 101 | + [11.3.1. Button text and icons](#1131-button-text-and-icons) 102 | - [11.3.1.1. Example](#11311-example) 103 | - [12. Custom action buttons](#12-custom-action-buttons) 104 | * [12.1. Example](#121-example) 105 | * [12.2. Attributes details](#122-attributes-details) 106 | - [13. Custom classes](#13-custom-classes) 107 | * [13.1. Example](#131-example) 108 | - [14. vbt-classes](#14-vbt-classes) 109 | * [14.1. vbt-row-selected](#141-vbt-row-selected) 110 | * [14.2. vbt-table-wrapper](#142-vbt-table-wrapper) 111 | - [15. Config](#15-config) 112 | * [15.1. Example](#151-example) 113 | * [15.2. Attributes details](#152-attributes-details) 114 | - [16. Server mode](#16-server-mode) 115 | * [16.1. Example](#161-example) 116 | + [16.1.1. Step 1](#1611-step-1) 117 | + [16.1.2. Step 2](#1612-step-2) 118 | + [16.1.3. Step 3](#1613-step-3) 119 | + [16.1.4. Step 4](#1614-step-4) 120 | + [16.1.5. Note](#1615-note) 121 | * [16.2. Loader overlay](#162-loader-overlay) 122 | - [17. Events](#17-events) 123 | * [17.1. on-select-row](#171-on-select-row) 124 | + [17.1.1. Payload (Object)](#1711-payload--object-) 125 | * [17.2. on-all-select-rows](#172-on-all-select-rows) 126 | + [17.2.1. Payload (Object)](#1721-payload--object-) 127 | * [17.3. on-unselect-row](#173-on-unselect-row) 128 | + [17.3.1. Payload (Object)](#1731-payload--object-) 129 | * [17.4. on-all-unselect-rows](#174-on-all-unselect-rows) 130 | + [17.4.1. Payload (Object)](#1741-payload--object-) 131 | * [17.5. refresh-data](#175-refresh-data) 132 | - [18. Build Setup](#18-build-setup) 133 | 134 | # 3. Installation 135 | ## 3.1. Install via npm or yarn 136 | 137 | **`$ npm i vue-bootstrap4-table --save`** 138 | 139 | **`$ yarn add vue-bootstrap4-table`** 140 | 141 | Currently this package will install only the vue-bootstrap4-table component, not their dependencies. So make sure to install the following dependencies. 142 | 143 | ### 3.1.1. Dependencies 144 | 145 | - bootstrap 4 (js and css) You should include bootstrap before vue-bootstrap4-table plugin. 146 | 147 | 148 | We are using **`lodash`** internally, so you don't need to install separately for this plugin. 149 | 150 | ## 3.2. Install via CDN 151 | ```html 152 | 153 | 154 | ... 155 | 156 | 157 | 158 | 159 | 160 | 161 | ... 162 | 163 | 164 | ``` 165 | **Note:** If you've included bootstrap & jQuery packages already in your project, then include only **vue-bootstrap4-table.min.js** script. 166 | 167 | # 4. Basic Usage 168 | It is easy to include vue-bootstrap4-table as a component in your application. 169 | 170 | Import VueBootstrap4Table component in any of your vue component and start using it right away. 171 | 172 | **Note:** If you included the library via CDN, then you don't need to import, you can use **`vue-bootstrap4-table`** component right away. 173 | 174 | **`rows`** and **`columns`** props should be passed down to **`vue-bootstrap4-table`** component to work with the table. 175 | 176 | ```vue 177 | 183 | 184 | 268 | ``` 269 | # 5. Columns 270 | ## 5.1. Basic structure 271 | For example, your "columns" object might look like this, 272 | 273 | ```javascript 274 | columns: [{ 275 | label: "id", 276 | name: "id", 277 | filter: { 278 | type: "simple", 279 | placeholder: "Enter id" 280 | }, 281 | sort: true, 282 | uniqueId: true 283 | }, 284 | { 285 | label: "First Name", 286 | name: "name.first_name", // access nested objects properties with "." 287 | filter: { 288 | type: "simple", 289 | placeholder: "Enter first name", 290 | case_sensitive: true, // "false" by default 291 | }, 292 | sort: true, // "false" by default 293 | initial_sort: true, // "false" by default 294 | initial_sort_order: "desc" // "asc" by default 295 | }, 296 | { 297 | label: "Email", 298 | name: "email", 299 | sort: true, 300 | row_text_alignment: "text-left", 301 | column_text_alignment: "text-left", 302 | row_classes: "my-row-class1 my-row-class2", 303 | column_classes: "my-column-class1 my-column-class2" 304 | }, 305 | { 306 | label: "Country", 307 | name: "address.country", // access nested objects properties with "." 308 | filter: { 309 | type: "simple", 310 | placeholder: "Enter country" 311 | }, 312 | visibility: false 313 | }] 314 | ``` 315 | 316 | ## 5.2. Attributes details 317 | |Attributes|Description|Type|Default| 318 | |--|--|--|--| 319 | |label | Name for the column header | String| " " | 320 | |name | Name of the attribute that you would like to show from **`"rows"`** object. You can access nested objects properties with "." | String| " " | 321 | |slot_name | Overrides default slot name assignment. For more details refer "Rows" section | String| " " | 322 | |uniqueId | You can teach table which column has unique values. It helps table to do faster operations and it is really useful in "server_mode". | Boolean| false | 323 | |visibility | Show/Hide specific column. | Boolean| true | 324 | |filter | Configuration for the column filter. If you don't want to have filtering for specific columns, then just don't mention it :-) | Object| Empty | 325 | |filter.type | Type of filter you want to use for your column. | String| " " | 326 | |filter.placeholder | Placeholder is **`hint`** text for filter text box |String |" " | 327 | |filter.case_sensitive | Enable/Disable case sensitive filtering.| Boolean | false | 328 | |sort | Enable or disable sorting in column.| Boolean | false | 329 | |initial_sort | Sort the column at the first time loading. This only works if **`sort`** is **`true`** | Boolean | false | 330 | |initial_sort_order | Sort the column at the first time loading based on given order. This only works if **`initial_sort`** is **`true`** |String | "asc" | 331 | | row_text_alignment | Align your text in the row cell. Possible options are, `"text-justify","text-right","text-left","text-center"` | String | "text-center" | 332 | | column_text_alignment | Align your text in the column header. Possible options are, `"text-justify","text-right","text-left","text-center"` | String | "text-center" | 333 | | row_classes | You can specify your custom classes for each row under specified column. You can add multiple classes with a space delimiter. This classes will be added to **``** element. | String | " " | 334 | | column_classes | You can specify your custom classes for each column header. You can add multiple classes with a space delimiter.This classes will be added to **``** element. | String|" " | 335 | 336 | ## 5.3. Column slot 337 | 338 | At some point, you might want to override or format the values in the column header. **`vue-bootstrap4-table`** allow you to achieve that with the help of vue slotting. 339 | ### 5.3.1. Example 340 | 341 | ```vue 342 | ... 343 | 344 | 349 | 354 | 355 | ... 356 | 370 | ``` 371 | Column slot name will be combination of **`column_`** keyword with the **`name`** which you provided in the columns configuration. In the above example, **`slot="column_email"`** represents the "email" column header in the table. 372 | 373 | ### 5.3.2. Note 374 | You might have some columns with nested objects names. In that case, the slot name will be **`column_`** keyword + column **`name`** and dots(.) in the column **`name`** will be replaced by underscore(_). 375 | 376 | You can see the above example, slot name for **`name.first_name`** column is **`column_name_first_name`**. 377 | 378 | ### 5.3.3. props 379 | From **`slot-scope="props"`** you can access the following attributes. 380 | 381 | |Attributes | Description | 382 | |--|--| 383 | | props.column | Current column config object | 384 | # 6. Rows 385 | You bind your list of items as array of objects to **`rows`** props to **`vue-bootstrap4-table`** component, then voilà.. you can start work with the table. 386 | ## 6.1. Basic structure 387 | ```javascript 388 | rows: [{ 389 | "id": 1, 390 | "name": { 391 | "first_name": "Vladimir", 392 | "last_name": "Nitzsche" 393 | }, 394 | "address": { 395 | "country": "Mayotte" 396 | }, 397 | "email": "franecki.anastasia@gmail.com", 398 | }, 399 | { 400 | "id": 2, 401 | "name": { 402 | "first_name": "Irwin", 403 | "last_name": "Bayer" 404 | }, 405 | "age": 23, 406 | "address": { 407 | "country": "Guernsey" 408 | }, 409 | "email": "rlittle@macejkovic.biz", 410 | }, 411 | { 412 | "id": 3, 413 | "name": { 414 | "first_name": "Don", 415 | "last_name": "Herman" 416 | }, 417 | "address": { 418 | "country": "Papua New Guinea" 419 | }, 420 | "email": "delia.becker@cormier.com", 421 | }] 422 | ``` 423 | ## 6.2. Row Slot 424 | At some point, you might want to override or format the values in the row cells. **`vue-bootstrap4-table`** allow you to achieve that with the help of vue slotting. 425 | ### 6.2.1. Example 426 | ```vue 427 | ... 428 | 429 | 434 | 439 | 444 | 445 | ... 446 | 464 | ``` 465 | Slot name will be same as the name which you provided in the columns configuration. In the above example, **`slot="email"`** represents the "email" column in the table. 466 | ### 6.2.2. Note 467 | You might have some columns getting the values from nested objects from **`rows`**. In that case, the slot name will be column **`name`** and dots(.) in the column **`name`** will be replaced by underscore(_). 468 | 469 | You can see the above example, slot name for **`name.first_name`** column is **`name_first_name`**. 470 | 471 | If you don't like this default "slot name" assignment, then you can set names to row slots as shown in the above example. 472 | 473 | ### 6.2.3. props 474 | From **`slot-scope="props"`** you can access the following attributes. 475 | 476 | | Attributes | Description | 477 | |--|--| 478 | | props.cell_value | Returns the actual value of the cell| 479 | | props.row | Current row object| 480 | | props.column | Current column config object| 481 | 482 | ## 6.3. Empty result message slot 483 | If the given **`rows`** data is empty or result set is empty after applying filters, vue-bootstrap4-table shows this default message "No results found". You can override the message as like your wish with the help of **`empty-results`** slot. 484 | 485 | ### 6.3.1. Example 486 | ```vue 487 | ... 488 | 489 | 492 | 493 | ... 494 | ``` 495 | 496 | # 7. Sorting 497 | Sorting configuration is added along with the each column config. 498 | ## 7.1. Example 499 | ```vue 500 | ... 501 | columns: [ 502 | { 503 | label: "First Name", 504 | name: "name.first_name", // access nested objects properties with "." 505 | sort: true, // "false" by default 506 | initial_sort: true, // "false" by default 507 | initial_sort_order: "desc", // "asc" by default 508 | sortCaseSensitive: false // "true" by default 509 | } 510 | ] 511 | ... 512 | ``` 513 | ## 7.2. Attributes details 514 | | Attributes | Description | 515 | |--|--| 516 | | sort | Enable or disable sorting in column. Default value is **`false`**.| 517 | | initial_sort | Sort the column at the first time loading. Default value is **`false`**. This only works if **`sort`** is **`true`**. | 518 | | initial_sort_order | Sort the column at the first time loading based on given order. Default value is **`asc`**. This only works if **`initial_sort`** is **`true`**. | 519 | | sortCaseSensitive | Enable or disable case sensitive sorting. Default value is **`true`**. | 520 | 521 | ## 7.3. Single column sorting 522 | By default single column sort mode is enabled. 523 | 524 | ## 7.4. Multi column sorting 525 | If you would like to enable the multi column sorting, set **`multi_column_sort`** to **`true`** in table **`config`** props. 526 | 527 | ### 7.4.1. Example 528 | 529 | ```vue 530 | 536 | 537 | 562 | ``` 563 | ## 7.5. Slot 564 | 565 | ### 7.5.1. Sort Icon 566 | 567 | You can change the sort icons based on your choice, For example if you're using font-awesome or glyphicon in your application, you can still use them for vue-bootstrap4-table. 568 | 569 | You can inject your favorite sort icons via slots. 570 | 571 | #### 7.5.1.1. Example 572 | ```vue 573 | ... 574 | 575 | 578 | 581 | 584 | 585 | ... 586 | ``` 587 | After applying the above custom template to sort icons , output will look like this. 588 | 589 | | ![Custom sort icons](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/sort_icons_slot.png) | 590 | |:--:| 591 | | *Custom sort icons* | 592 | 593 | # 8. Filtering 594 | Filtering configuration is added along with the each column config. 595 | ## 8.1. Simple Filter 596 | Filter the rows based on the given keyword. If you don't specify filter config then filter feature will be disabled for the specific column. 597 | ### 8.1.1. Example 598 | ```javascript 599 | ... 600 | columns: [ 601 | { 602 | label: "First Name", 603 | name: "name.first_name", // access nested objects properties with "." 604 | filter: { 605 | type: "simple", 606 | placeholder: "Enter first name", 607 | case_sensitive: true, // "false" by default 608 | showClearButton: false, 609 | filterOnPressEnter: false, 610 | debounceRate: 1000, 611 | init: { 612 | value : "Christin" 613 | } 614 | } 615 | } 616 | ] 617 | ... 618 | ``` 619 | ### 8.1.2. Attributes details 620 | 621 | |Attributes | Description | Type |Default | 622 | |--|--|--|--| 623 | | filter.type | Defines the type of filter. | String | Empty string | 624 | | filter.placeholder | Placeholder is **`hint`** text for filter text box | String | Empty string | 625 | | filter.case_sensitive | Enable/Disable case sensitive filtering. | Boolean | false | 626 | | filter.filterOnPressEnter | Enable/Disable filtering on "enter" key press. | Boolean | false | 627 | | filter.debounceRate | Defines the wait time for filtering between the key strokes. Value should be in milliseconds. | Number | 60 | 628 | | filter.showClearButton | Show/Hide clear button in the simple filter. | Boolean | true | 629 | | filter.init.value | Assign initial value to the the filter before rendering the table. | String | Empty string | 630 | 631 | ### 8.1.3. Clear button icon slot 632 | 633 | You can override the default clear button icon in the simple filter text input. 634 | 635 | ```vue 636 | ... 637 | 638 | 641 | 642 | ... 643 | ``` 644 | 645 | ## 8.2. Multi-Select Filter 646 | 647 | You can have multi select dropdown filter for each columns. The options in the dropdown will be rendered with bootstrap 4 custom checkboxes. 648 | 649 | ### 8.2.1. Example (Single select) 650 | 651 | ```vue 652 | ... 653 | columns: [ 654 | { 655 | label: "First Name", 656 | name: "name.first_name", // access nested objects properties with "." 657 | filter: { 658 | type: "select", 659 | mode: "single", 660 | closeDropdownOnSelection: true, 661 | placeholder: "Select options", 662 | options: [{ 663 | "name": "option one", 664 | "value": "option one" 665 | }, 666 | { 667 | "name": "option two", 668 | "value": "option two" 669 | }, 670 | { 671 | "name": "option three", 672 | "value": "option three" 673 | } 674 | ], 675 | init: { 676 | value : 2 677 | } 678 | } 679 | } 680 | ] 681 | ... 682 | ``` 683 | ### 8.2.2. Example (Multi select) 684 | 685 | ```vue 686 | ... 687 | columns: [ 688 | { 689 | label: "First Name", 690 | name: "name.first_name", // access nested objects properties with "." 691 | filter: { 692 | type: "select", 693 | mode: "multi", 694 | closeDropdownOnSelection: true, 695 | placeholder: "Select options", 696 | options: [{ 697 | "name": "option one", 698 | "value": "option one" 699 | }, 700 | { 701 | "name": "option two", 702 | "value": "option two" 703 | }, 704 | { 705 | "name": "option three", 706 | "value": "option three" 707 | } 708 | ], 709 | select_all_checkbox : { 710 | visibility: true, 711 | text: "Select all items" 712 | }, 713 | init: { 714 | value : [0,1] 715 | } 716 | } 717 | } 718 | ] 719 | ... 720 | ``` 721 | 722 | ### 8.2.3. Attribute details 723 | 724 | | Attributes |Description | Type |Default | 725 | |--|--|--|--| 726 | | filter.type | Defines the type of filter. | String | Empty string | 727 | | filter.mode | Defines the mode of selection in the dropdown. Allowed options are **`single`** and **`multi`**. If the mode is **`single`**, then dropdown will be rendered with **`radio`** buttons, else if the mode is multi, then dropdown will be rendered with **`checkboxes`**. | String | "single" | 728 | | filter.placeholder | Default text for the dropdown. | String | Empty string | 729 | | filter.closeDropdownOnSelection | Immediately close dropdown on selection. | Boolean | false | 730 | | filter.options | You can provide your list of name and value objects to be populated in the multi-select filter dropdown. | Array | Empty array | 731 | | filter.init.value | Select initial value in the dropdown list before rendering the table.
In **single** select mode, value should be a single number (index of the item).
In **multi** select mode, value should be array of numbers (indexes of the items). | Number(single mode) or Array(multi mode) | - | 732 | | select_all_checkbox.visibility | Enable or disable select all items checkbox in the dropdown list. This option is valid only in **multi** select mode. | Boolean | true | 733 | | select_all_checkbox.text | You can override the default text of **Select All** item text. This option is valid only in **multi** select mode. | String | "Select All" | 734 | 735 | # 9. Global search 736 | Global search searches the complete list of rows for the given search keyword. 737 | 738 | You can enable or disable search text input with custom configuration as shown in the below example. 739 | 740 | ## 9.1. Example 741 | 742 | ```vue 743 | 749 | 750 | 785 | ``` 786 | ## 9.2. Attributes details 787 | 788 | | Attributes | Description | Type| Default | 789 | |--|--|--|--| 790 | | global_search.placeholder | Placeholder is **`hint`** text for search text box | String | "Enter search text" | 791 | | global_search.visibility | Show/Hide global search text input | Boolean | true | 792 | | global_search.case_sensitive | Enable/Disable case sensitive searching. | Boolean | false | 793 | | global_search.showClearButton | Show/Hide clear button in the global search input text. | Boolean | true | 794 | | global_search.searchOnPressEnter | Enable/Disable global search on "enter" key press. | Boolean | false | 795 | | global_search.searchDebounceRate | Defines the wait time for searching between the key strokes. Value should be in milliseconds. | Number | 60 | 796 | | global_search.init.value | Assign initial value to the the global search filter before rendering the table. | String | Empty string | 797 | 798 | ## 9.3. Clear button icon slot 799 | 800 | You can override the default clear button icon in the global search text input. 801 | 802 | 803 | ```vue 804 | ... 805 | 806 | 809 | 810 | ... 811 | ``` 812 | 813 | # 10. Pagination & Info 814 | Pagination component is built based on Bootstrap 4 pagination template. You can enable or disable pagination and pagination info details based on your choice. 815 | 816 | | ![Default pagination component](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination.png) | 817 | |:--:| 818 | | *Default pagination component* | 819 | 820 | | ![Default pagination info compoent](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_info.png) | 821 | |:--:| 822 | | *Default pagination info compoent* | 823 | 824 | ## 10.1. Example 825 | ```vue 826 | 832 | 833 | 860 | ``` 861 | ## 10.2. Attributes details 862 | | Attributes | Description | type | Default | 863 | |--|--|--|--| 864 | | pagination | Enable/Disable pagination in the table | Boolean |true | 865 | | pagination_info |Enable/Disable pagination info in the table | Boolean| true| 866 | |num_of_visibile_pagination_buttons | Limit the number of visible pagination buttons in the pagination bar | Number | 5 | 867 | | per_page |Number of rows to display per page |Number |10 | 868 | | per_page_options |List of options to choose how many rows being showed in single page |Array of numbers |[5,10,15] | 869 | ## 10.3. Slot 870 | Currently you can override "Previous" & "Next" button icon/text. 871 | ### 10.3.1. Previous & Next button 872 | ```vue 873 | ... 874 | 875 | 878 | 881 | 882 | ... 883 | ``` 884 | After applying the above custom template to **`previous`** and **`next`** button, pagination component will look like this. 885 | 886 | | ![Pagination after applying slot](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_slot.png) | 887 | |:--:| 888 | | *Pagination after applying slot* | 889 | 890 | ### 10.3.2. Pagination info 891 | 892 | ```vue 893 | ... 894 | 895 | 900 | 901 | ... 902 | ``` 903 | After applying the above custom template to pagination info , pagination info component will look like this. 904 | 905 | | ![Pagination info after applying slot](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/default_pagination_info_slot.png) | 906 | |:--:| 907 | | *Pagination info after applying slot* | 908 | 909 | #### 10.3.2.1. props 910 | From **`slot-scope="props"`** you can access the following attributes. 911 | 912 | | Attributes | Description| 913 | |--|--| 914 | | props.currentPageRowsLength | Number of rows currently showing in the page | 915 | | props.filteredRowsLength | Total number of items in the result after filtering | 916 | | props.originalRowsLength| Original number of items in the data| 917 | 918 | ### 10.3.3. Selected rows info 919 | 920 | ```vue 921 | ... 922 | 923 | 926 | 927 | ... 928 | ``` 929 | 930 | #### 10.3.3.1. props 931 | From **`slot-scope="props"`** you can access the following attributes. 932 | 933 | | Attributes | Description| 934 | |--|--| 935 | | props.selectedItemsCount | Number of rows currently showing in the pageNumber of rows currently being selected | 936 | 937 | # 11. Refresh and Reset button 938 | 939 | ## 11.1. Refresh Button 940 | 941 | Refresh button emits a refresh event to your application (parent component). You can listen for this event and make ajax call for new data and update **`rows`** data. Table will receive the new data and update the rows with current queries. 942 | 943 | ### 11.1.1. Example 944 | 945 | ```vue 946 | 955 | 956 | 987 | ``` 988 | 989 | ## 11.2. Reset button 990 | 991 | Reset button resets currently applied **`sorting, filtering, and global search`** queries. 992 | 993 | By default reset button is enabled. If you would like to disable reset button, set **`show_reset_button`** to **`false`** in initial config. 994 | 995 | | Attributes | Description | type | Default | 996 | |--|--|--|--| 997 | |show_refresh_button | Show/Hide Refresh button | Boolean | true | 998 | | show_reset_button | Show/Hide Refresh button. Resets all query (sort, filter, global search) currently applied in the table. | Boolean | true | 999 | 1000 | ## 11.3. Slots 1001 | 1002 | ### 11.3.1. Button text and icons 1003 | 1004 | You can override the text in the refresh & reset buttons with slots **`refresh-button-text`** & **`reset-button-text.`** If you like, you can add icon to the buttons. 1005 | 1006 | #### 11.3.1.1. Example 1007 | 1008 | ```vue 1009 | ... 1010 | 1011 | 1014 | 1017 | 1018 | ... 1019 | ``` 1020 | 1021 | After applying the above custom template to refresh & reset buttons , output will look like this. 1022 | 1023 | | ![Custom sort icons](https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/develop/src/assets/img/refresh_reset_slot.png) | 1024 | |:--:| 1025 | | *Custom refresh and reset button texts & icons* | 1026 | 1027 | 1028 | # 12. Custom action buttons 1029 | 1030 | You can add your custom buttons in the table by **`actions`** props and listen for their events in your component. 1031 | 1032 | ## 12.1. Example 1033 | 1034 | ```vue 1035 | 1045 | 1046 | 1084 | ``` 1085 | 1086 | Each action object should contain the below attributes. 1087 | 1088 | ## 12.2. Attributes details 1089 | 1090 | | Attributes | Description | type | Default | 1091 | |--|--|--|--| 1092 | | btn_name | Display name for the button |String | " "| 1093 | | event_name | Name of the event that you want to listen back (Mandatory)| String | undefined | 1094 | | class | Class which you want to override default button classes | String | " " | 1095 | | event_payload | Payload you want to send with the event | Any | undefined | 1096 | 1097 | # 13. Custom classes 1098 | 1099 | You can pass your classes for the table, row, cell, etc.. via **`classes`** prop. And interesting thing is you can pass a validator function to apply custom classes conditionally. 1100 | 1101 | ## 13.1. Example 1102 | ```vue 1103 | 1111 | 1112 | 1152 | ``` 1153 | Currently you can add custom classes to **`
, , and element will have "vbt-row-selected" class attached to it. 1163 | 1164 | ```html 1165 | 1166 | ... 1167 | 1168 | ``` 1169 | ## 14.2. vbt-table-wrapper 1170 | This class is being applied to outer
element of
`** elements for table outer div element, table, row, and cell properties respectively. 1154 | 1155 | You can either pass the custom classes directly or pass a function with your condition check to decide whether to apply to class or not. 1156 | 1157 | For example, in the above example, look at the property **`cell`**. There we are applying classes **"my-cell my-cell2"** directly to **``** element and **"text-danger"** class only to the "salary" column & also the salary value should be above 2500. 1158 | 1159 | # 14. vbt-classes 1160 | By default, vue-bootstrap-table add classes to table elements which allows users to override the default styles. 1161 | ## 14.1. vbt-row-selected 1162 | If a row is being selected with checkbox or row, then the selected row
element. 1171 | 1172 | ```html 1173 |
1174 |
1175 | ... 1176 |
1177 |
1178 | ``` 1179 | 1180 | # 15. Config 1181 | You can optionally pass config as a prop to **`vue-bootstrap4-table`** component to override the table configuration defaults. 1182 | 1183 | ## 15.1. Example 1184 | ```vue 1185 | 1191 | 1192 | 1237 | ``` 1238 | 1239 | > If you don't provide an attribute in the config, then default value will be assigned to that attribute. 1240 | 1241 | ## 15.2. Attributes details 1242 | 1243 | |Attributes | Description | type| Default | 1244 | |--|--|--|--| 1245 | | card_mode | You can choose between table surrounded with card layout and plain default table alone.| Boolean | true | 1246 | | pagination | Enable/Disable pagination in the table |Boolean | true| 1247 | | pagination_info | Enable/Disable pagination info in the table | Boolean| true| 1248 | |selected_rows_info |Enable/Disable number of rows selected info in the table | Boolean | false | 1249 | | num_of_visibile_pagination_buttons | Limit the number of visible pagination buttons in the pagination bar |Number | 5 | 1250 | | per_page | Number of rows to display per page |Number | 10 | 1251 | | checkbox_rows | Enable/Disable checkbox in each rows |Boolean | false | 1252 | | highlight_row_hover | Enable/Disable highlighting row on hover |Boolean | true | 1253 | |rows_selectable | Enable/Disable selecting items on row click |Boolean | false | 1254 | | multi_column_sort | Enable/Disable multi column sorting | Boolean| false| 1255 | | highlight_row_hover_color | Change the row hover highlighting color | String| "#d6d6d6" | 1256 | | card_title | Sets the table title in the card header | String| "" (empty string) | 1257 | | global_search.placeholder | Placeholder is **`hint`** text for search text box | String | "Enter search text" | 1258 | | global_search.visibility | Show/Hide global search text input | Boolean | true | 1259 | |global_search.case_sensitive | Enable/Disable case sensitive searching. | Boolean | false | 1260 | | per_page_options | List of options to choose how many rows being showed in single page | Array of numbers | [5,10,15]| 1261 | | show_refresh_button | Show/Hide Refresh button | Boolean | true | 1262 | | show_reset_button | Show/Hide Refresh button. Resets all query (sort, filter, global search) currently applied in the table. |Boolean | true | 1263 | | server_mode | Enable/Disable server side processing (Sorting, Filtering, Global search & pagination) |Boolean | false | 1264 | | preservePageOnDataChange | Enable/Disable preserving current index of the page on data change. For example, if this option is set to true, consider that you are in page **4** and performed some actions like sorting or filtering, then now table gets a new data and still the pagination will be in page **4**. If this config is set to false (default), for any data change current page in the pagination will be shifted to page **1**. |Boolean | false | 1265 | | loaderText | Overrides default loading text in the loader overlay | String | Loading... | 1266 | 1267 | # 16. Server mode 1268 | 1269 | In server mode, client side filtering, sorting, global search and pagination will be disabled. Instead your server will do all this and returns only the processed response. New response will update the rows in the table. 1270 | 1271 | ## 16.1. Example 1272 | 1273 | ```vue 1274 | 1285 | 1286 | 1347 | 1348 | 1351 | ``` 1352 | 1353 | ### 16.1.1. Step 1 1354 | 1355 | In your application you should have the below information in **`data.`** 1356 | 1357 | ```javascript 1358 | queryParams: { 1359 | sort: [], 1360 | filters: [], 1361 | global_search: "", 1362 | per_page: 10, 1363 | page: 1, 1364 | }, 1365 | total_rows: 0, 1366 | ``` 1367 | 1368 | ### 16.1.2. Step 2 1369 | 1370 | If you want to work with pagination, then don't forget to set **`total_rows`** as prop to **`totalRows`**. 1371 | 1372 | Then listen for the event **`on-change-query`**. 1373 | 1374 | ```vue 1375 | 1381 | 1382 | ``` 1383 | 1384 | ### 16.1.3. Step 3 1385 | 1386 | Wherever there is a change in table query params, you will get your new query params in your **`onChangeQuery`** function. With the new values update your **`queryParams`** and fetch new data from server. 1387 | 1388 | ```javascript 1389 | onChangeQuery(queryParams) { 1390 | this.queryParams = queryParams; 1391 | this.showLoader = true; 1392 | this.fetchData(); 1393 | }, 1394 | ``` 1395 | 1396 | ### 16.1.4. Step 4 1397 | 1398 | I assume you are using **`axios`** library for handling ajax requests. 1399 | 1400 | Once you have the new updated result, update **rows** with new data and also update **`total_rows`** with the total number of records. 1401 | 1402 | ```javascript 1403 | fetchData() { 1404 | let self = this; 1405 | axios.get('http://example.com/search', { 1406 | params: { 1407 | "queryParams": this.queryParams, 1408 | "page": this.queryParams.page 1409 | } 1410 | }) 1411 | .then(function(response) { 1412 | self.rows = response.data.data; 1413 | self.total_rows = response.data.total; 1414 | self.showLoader = false; 1415 | }) 1416 | .catch(function(error) { 1417 | console.log(error); 1418 | self.showLoader = false; 1419 | }); 1420 | } 1421 | ``` 1422 | ### 16.1.5. Note 1423 | To get best performance, it is recommended to mention in column config that which column have unique values. You can refer the below example. 1424 | ```javascript 1425 | columns: [ 1426 | ... 1427 | { 1428 | label: "id", 1429 | name: "id", 1430 | filter: { 1431 | type: "simple", 1432 | placeholder: "Enter id" 1433 | }, 1434 | sort: true, 1435 | uniqueId: true // like this 1436 | } 1437 | ... 1438 | ] 1439 | ``` 1440 | 1441 | ### 16.2. Loader overlay 1442 | 1443 | You may need to show a loader animation over the table while your request is busy with processing data on the server. You can show/hide the loader overlay by passing the prop **`show-loader`** to **`vue-bootstrap4-table`**. 1444 | 1445 | If you would like to change the loader default text **`Loading...`**, you could pass your custom text in the **`config`** param **`loaderText`** https://github.com/rubanraj54/vue-bootstrap4-table#15-config. 1446 | 1447 | Didn't like the default loader animation ??? No problem, you can use **`loader-overlay`** slot to use your custom loader animation. 1448 | 1449 | # 17. Events 1450 | 1451 | ## 17.1. on-select-row 1452 | 1453 | Triggered after selecting a row. 1454 | 1455 | ### 17.1.1. Payload (Object) 1456 | 1457 | | Attribute| Description | 1458 | |--|--| 1459 | |selected_items | List of currently selected rows | 1460 | | selected_item | Currently selected item | 1461 | 1462 | ## 17.2. on-all-select-rows 1463 | 1464 | Triggers after clicking select all check box. 1465 | 1466 | ### 17.2.1. Payload (Object) 1467 | 1468 | | Attribute| Description | 1469 | |--|--| 1470 | |selected_items | List of currently selected rows | 1471 | 1472 | ## 17.3. on-unselect-row 1473 | 1474 | Triggered after deselecting a row. 1475 | 1476 | ### 17.3.1. Payload (Object) 1477 | 1478 | | Attribute| Description | 1479 | |--|--| 1480 | |selected_items | List of currently selected rows | 1481 | | unselected_item |Currently deselected item | 1482 | 1483 | ## 17.4. on-all-unselect-rows 1484 | 1485 | Triggers after clicking deselect all check box. 1486 | 1487 | ### 17.4.1. Payload (Object) 1488 | 1489 | | Attribute| Description | 1490 | |--|--| 1491 | |selected_items | List of currently selected rows | 1492 | 1493 | ## 17.5. refresh-data 1494 | 1495 | Triggers after clicking refresh button. This event doesn't carry any payload. 1496 | 1497 | # 18. Build Setup 1498 | 1499 | ``` bash 1500 | # install dependencies 1501 | npm install 1502 | 1503 | # serve with hot reload at localhost:8080 (if it is not running in 8080, then check console for right port) 1504 | npm run dev 1505 | 1506 | # build for production with minification 1507 | npm run build 1508 | 1509 | # build for production and view the bundle analyzer report 1510 | npm run build --report 1511 | 1512 | # run unit tests 1513 | npm run unit 1514 | 1515 | # run all tests 1516 | npm test 1517 | ``` 1518 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/6554d4b32e8fbd2184e67fbee988edcdbc934a8d/build/logo.png -------------------------------------------------------------------------------- /build/rollup.config.js: -------------------------------------------------------------------------------- 1 | import vue from 'rollup-plugin-vue'; // Handle .vue SFC files 2 | import buble from 'rollup-plugin-buble'; // Transpile/polyfill with reasonable browser support 3 | import resolve from 'rollup-plugin-node-resolve'; 4 | import commonjs from 'rollup-plugin-commonjs'; 5 | import visualizer from 'rollup-plugin-visualizer'; 6 | import babel from 'rollup-plugin-babel'; 7 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 8 | 9 | 10 | import { 11 | terser 12 | } from "rollup-plugin-terser"; 13 | 14 | 15 | export default { 16 | input: 'src/wrapper.js', // Path relative to package.json 17 | output: { 18 | name: 'VueBootstrap4Table', 19 | exports: 'named', 20 | }, 21 | external: ['vue'], 22 | plugins: [ 23 | vue({ 24 | css: true, // Dynamically inject css as a 487 | -------------------------------------------------------------------------------- /src/AppServer.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 180 | 181 | 184 | -------------------------------------------------------------------------------- /src/assets/img/default_pagination.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/6554d4b32e8fbd2184e67fbee988edcdbc934a8d/src/assets/img/default_pagination.png -------------------------------------------------------------------------------- /src/assets/img/default_pagination_info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/6554d4b32e8fbd2184e67fbee988edcdbc934a8d/src/assets/img/default_pagination_info.png -------------------------------------------------------------------------------- /src/assets/img/default_pagination_info_slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/6554d4b32e8fbd2184e67fbee988edcdbc934a8d/src/assets/img/default_pagination_info_slot.png -------------------------------------------------------------------------------- /src/assets/img/default_pagination_slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/6554d4b32e8fbd2184e67fbee988edcdbc934a8d/src/assets/img/default_pagination_slot.png -------------------------------------------------------------------------------- /src/assets/img/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/6554d4b32e8fbd2184e67fbee988edcdbc934a8d/src/assets/img/demo.gif -------------------------------------------------------------------------------- /src/assets/img/refresh_reset_slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/6554d4b32e8fbd2184e67fbee988edcdbc934a8d/src/assets/img/refresh_reset_slot.png -------------------------------------------------------------------------------- /src/assets/img/sort_icons_slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/6554d4b32e8fbd2184e67fbee988edcdbc934a8d/src/assets/img/sort_icons_slot.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rubanraj54/vue-bootstrap4-table/6554d4b32e8fbd2184e67fbee988edcdbc934a8d/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/scss/custom.scss: -------------------------------------------------------------------------------- 1 | @import "../../../node_modules/bootstrap/scss/bootstrap"; 2 | @import '../../../node_modules/vue2-daterange-picker/dist/lib/vue-daterange-picker.min.css'; 3 | 4 | .pagination>li>a { 5 | background-color: white; 6 | // text color 7 | color: #5A4181; 8 | } 9 | 10 | .pagination>li>a:focus, 11 | .pagination>li>a:hover, 12 | .pagination>li>span:focus, 13 | .pagination>li>span:hover { 14 | // text color 15 | color: #5a5a5a; 16 | background-color: #eee; 17 | border-color: #ddd; 18 | } 19 | 20 | .pagination>.active>a { 21 | // text color 22 | color: white; 23 | background-color: #5A4181 !important; 24 | border: solid 1px #5A4181 !important; 25 | } 26 | 27 | .pagination>.active>a:hover { 28 | background-color: #5A4181 !important; 29 | border: solid 1px #5A4181; 30 | } 31 | -------------------------------------------------------------------------------- /src/components/CheckBox.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 45 | 46 | 52 | -------------------------------------------------------------------------------- /src/components/Column.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 90 | 91 | // TODO icon color 92 | 93 | 98 | -------------------------------------------------------------------------------- /src/components/Filters/MultiSelect.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 207 | 208 | 215 | -------------------------------------------------------------------------------- /src/components/Filters/MultiSelectAllItem.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 46 | -------------------------------------------------------------------------------- /src/components/Filters/MultiSelectItem.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 91 | -------------------------------------------------------------------------------- /src/components/Filters/Simple.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 82 | 83 | 123 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 135 | 136 | 144 | -------------------------------------------------------------------------------- /src/components/Pagination.vue: -------------------------------------------------------------------------------- 1 | 67 | 68 | 204 | 205 | 213 | -------------------------------------------------------------------------------- /src/components/PaginationInfo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 45 | -------------------------------------------------------------------------------- /src/components/Row.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 236 | -------------------------------------------------------------------------------- /src/components/SelectAllRowsCheckBox.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 30 | 31 | 37 | -------------------------------------------------------------------------------- /src/components/SortIcon.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 73 | -------------------------------------------------------------------------------- /src/event-bus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | export const EventBus = new Vue(); 3 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | 4 | import './assets/scss/custom.scss'; 5 | 6 | window.axios = require('axios'); 7 | 8 | import Vue from 'vue' 9 | import App from './App' 10 | import AppServer from './AppServer' 11 | require('bootstrap') 12 | import { library } from '@fortawesome/fontawesome-svg-core' 13 | import { faUserSecret } from '@fortawesome/free-solid-svg-icons' 14 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 15 | Vue.config.productionTip = false 16 | 17 | library.add(faUserSecret) 18 | 19 | Vue.component('font-awesome-icon', FontAwesomeIcon) 20 | 21 | /* eslint-disable no-new */ 22 | new Vue({ 23 | el: '#app', 24 | components: { 25 | App 26 | }, 27 | template: '' 28 | }) 29 | // /* eslint-disable no-new */ 30 | // new Vue({ 31 | // el: '#app', 32 | // components: { 33 | // AppServer 34 | // }, 35 | // template: '' 36 | // }) 37 | -------------------------------------------------------------------------------- /src/wrapper.js: -------------------------------------------------------------------------------- 1 | // Import vue component 2 | import component from './components/VueBootstrap4Table.vue'; 3 | 4 | // Declare install function executed by Vue.use() 5 | export function install(Vue) { 6 | if (install.installed) return; 7 | install.installed = true; 8 | Vue.component('VueBootstrap4Table', component); 9 | } 10 | 11 | // Create module definition for Vue.use() 12 | const plugin = { 13 | install, 14 | }; 15 | 16 | // Auto-install when vue is found (eg. in browser via