Skip to content

Commit 0caa64c

Browse files
gmsagmsa
authored
Merge pull request #25 from jbaysolutions/slots
update to vue 2.6.10, bootstrap 4, switched to fontawesome, columns s…
2 parents 3e74032 + 65d258e commit 0caa64c

File tree

9 files changed

+732
-2526
lines changed

9 files changed

+732
-2526
lines changed

‎CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Changelog
22

3+
### 1.2.0 (May 21, 2019)
4+
5+
* Support for column slots
6+
* Selectable rows
7+
* Update to Bootstrap v4.3.1
8+
* Update to Vue v2.6.10
9+
10+
311
### 1.1.13 (August 24, 2018)
412

513
* #19 - Disable filter for specific columns

‎README.md

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
vue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js.
44

5-
### VUE 2 : 1.1.12
5+
### VUE 2.6.0 : 1.2.0 (column slots support, Bootstrap v4.3.1)
6+
7+
### VUE < 2.6.0: 1.1.13 (Bootstrap v3)
68

79
### Vue 1 : [jbaysolutions/vue-bootstrap-table](https://github.com/jbaysolutions/vue-bootstrap-table)
810

@@ -45,8 +47,9 @@ TODO UPDATE CHANGELOG
4547

4648
## Requirements
4749

48-
* Vue 2.* (tested with 2.3.3)
49-
* Bootstrap 3 css
50+
* Vue 2.6.0+ (tested with 2.6.10)
51+
* Bootstrap 4 css (for Bootstrap 3 css use 1.1.x)
52+
* Fontawesome 5
5053

5154

5255
## Installation
@@ -131,6 +134,12 @@ Or add the js script to your html (download from [releases](https://github.com/j
131134
:filter-case-sensitive=false
132135

133136
>
137+
<template v-slot:name="slotProps">
138+
{{slotProps.value.name}}
139+
</template>
140+
<template v-slot:description="slotProps">
141+
{{slotProps.value.description}}
142+
</template>
134143
</vue-bootstrap-table>
135144
````
136145

@@ -153,6 +162,15 @@ Or add the js script to your html (download from [releases](https://github.com/j
153162
type: Array,
154163
required: true,
155164
},
165+
/**
166+
* Enable/disable table row selection, optional, default false.
167+
* When true, it will add a checkbox column on the left side and use the value.selected field
168+
*/
169+
selectable: {
170+
type: Boolean,
171+
required: false,
172+
default: true,
173+
},
156174
/**
157175
* Enable/disable table sorting, optional, default true
158176
*/
@@ -291,6 +309,36 @@ Column with Title "Name" , which is visible and editable:
291309
}
292310
```
293311

312+
#### Column slots example
313+
314+
````html
315+
316+
<vue-bootstrap-table
317+
:columns="columns"
318+
:values="values"
319+
:show-filter="true"
320+
:show-column-picker="true"
321+
:sortable="true"
322+
:paginated="true"
323+
:multi-column-sortable=true
324+
:filter-case-sensitive=false
325+
326+
>
327+
<template v-slot:name="slotProps">
328+
{{slotProps.value.name}}
329+
</template>
330+
<template v-slot:description="slotProps">
331+
{{slotProps.value.description}}
332+
</template>
333+
</vue-bootstrap-table>
334+
````
335+
336+
A slot will be created for each column, named with column.name. It has two props available:
337+
* "column" - the column object
338+
* "value" - the value object for the corresponding row
339+
340+
341+
294342
#### Render Function Example
295343

296344
For a Column definition like so:

‎dist/vue-bootstrap-table.js

Lines changed: 500 additions & 2416 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-bootstrap-table.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-bootstrap-table.min.js

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,10 @@
66
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
77
<link rel="stylesheet" href="examples/app.css">
88
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
910
</head>
1011
<body>
1112
<style>
12-
.colstyletest {
13-
background-color: #000066;
14-
}
15-
16-
.cellstyletest {
17-
background-color: #a94442;
18-
}
1913
</style>
2014

2115
<div class="container-fluid">
@@ -24,14 +18,16 @@ <h1>Vue Bootstrap Table</h1>
2418
<div class="row">
2519
<div class="col-sm-12">
2620
<button @click="addItem" class="btn btn-primary"><i class="glyphicon glyphicon-plus-sign"></i> Add an item</button>
27-
<button @click="toggleFilter" class="btn btn-default">Toggle Filter</button>
28-
<button @click="togglePicker" class="btn btn-default">Toggle Column Picker</button>
29-
<button @click="togglePagination" class="btn btn-default">Toggle Pagination</button>
30-
<button @click="refreshTable" class="btn btn-default">Refresh</button>
31-
<button @click="setNewPageSize" class="btn btn-default">Page Size = 1 </button>
21+
<button @click="toggleFilter" class="btn btn-outline-primary">Toggle Filter</button>
22+
<button @click="togglePicker" class="btn btn-outline-primary">Toggle Column Picker</button>
23+
<button @click="toggleSelect" class="btn btn-outline-primary">Toggle Select column</button>
24+
<button @click="togglePagination" class="btn btn-outline-primary">Toggle Pagination</button>
25+
<button @click="refreshTable" class="btn btn-outline-primary">Refresh</button>
26+
<button @click="setNewPageSize" class="btn btn-outline-primary">Page Size = 1 </button>
3227
</div>
3328
<br/><br/>
34-
<vue-bootstrap-table ref="exampleTable"
29+
<vue-bootstrap-table
30+
ref="exampleTable"
3531
:columns="columns"
3632
:values="values"
3733
:show-filter="showFilter"
@@ -41,7 +37,14 @@ <h1>Vue Bootstrap Table</h1>
4137
:ajax="ajax"
4238
:row-click-handler=handleRowFunction
4339
:filter-case-sensitive=false
40+
:selectable="showSelect"
4441
>
42+
<!--<template v-slot:name="slotProps">
43+
<b>NAME:</b> {{slotProps.value.name}}
44+
</template>
45+
<template v-slot:description="slotProps">
46+
<b>DESC:</b> {{slotProps.value.description}}
47+
</template>-->
4548
</vue-bootstrap-table>
4649
</div>
4750
<h2>Events Received</h2>
@@ -51,7 +54,9 @@ <h2>Events Received</h2>
5154
</div>
5255

5356
</div>
54-
<script src="node_modules/vue/dist/vue.js"></script>
57+
<script src="./node_modules/vue/dist/vue.js"></script>
58+
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
59+
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
5560
<script src="build/bundle.js"></script>
5661
</body>
57-
</html>
62+
</html>

‎package.json

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue2-bootstrap-table2",
3-
"version": "1.1.13",
4-
"description": "A sortable and searchable vue table, as a Vue component, using bootstrap styling.",
3+
"version": "1.2.0",
4+
"description": "A sortable and searchable table, as a Vue component, using Bootstrap and Fontawesome styling.",
55
"keywords": [
66
"table",
77
"vuejs",
@@ -15,7 +15,7 @@
1515
],
1616
"main": "dist/vue-bootstrap-table.min.js",
1717
"scripts": {
18-
"dev": "webpack-dev-server --host 0.0.0.0 --public 172.16.213.1:8080 --inline --hot",
18+
"dev": "webpack-dev-server --host 0.0.0.0 --port 8080 --inline --hot",
1919
"build": "cross-env NODE_ENV=production && webpack --progress --hide-modules",
2020
"dist": "webpack --progress --hide-modules --config webpack.build.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.build.min.js"
2121
},
@@ -25,15 +25,15 @@
2525
},
2626
"author": "Gustavo Santos (JBay Solutions) <gustavo.santos@jbaysolutions.com> (http://www.jbaysolutions.com)",
2727
"dependencies": {
28-
"babel-runtime": "^6.0.0",
29-
"es6-promise-promise" : "1.0.0",
30-
"axios": "^0.16.1",
28+
"axios": "^0.18.0",
3129
"qs": "^6.0.0",
3230
"lodash.orderby": "^4.6.0",
3331
"lodash.findindex": "^4.6.0",
3432
"lodash.includes": "^4.3.0"
3533
},
3634
"devDependencies": {
35+
"babel-runtime": "^6.0.0",
36+
"es6-promise-promise" : "1.0.0",
3737
"babel-cli": "^6.5.1",
3838
"babel-core": "^6.x",
3939
"babel-eslint": "^4.1.8",
@@ -44,7 +44,9 @@
4444
"babel-preset-es2015": "^6.5.0",
4545
"babel-preset-es2015-loose": "^7.0.0",
4646
"babel-preset-stage-1": "^6.5.0",
47-
"bootstrap": "3.3.7",
47+
"bootstrap": "^4.3.1",
48+
"@fortawesome/fontawesome-free": "^5.8.2",
49+
"jquery": "^3.4.1",
4850
"cross-env": "^2.0.0",
4951
"css-loader": "^0.23.1",
5052
"ejs": "^2.4.1",
@@ -54,7 +56,7 @@
5456
"imports-loader": "^0.6.5",
5557
"style-loader": "^0.13.1",
5658
"stylus-loader": "^1.2.1",
57-
"vue": "^2.3.3",
59+
"vue": "^2.6.10",
5860
"vue-hot-reload-api": "^1.3.3",
5961
"vue-html-loader": "^1.0.0",
6062
"vue-loader": "^8.5.2",

0 commit comments

Comments
 (0)