Skip to content

Commit 236f4d2

Browse files
noogennoogen
committed
upgrade demo default to bootstrap 5
1 parent aea8130 commit 236f4d2

14 files changed

+403
-416
lines changed

Diff for: ‎README.md

+12-12
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,21 @@ npm install vue-datatables-net
3838
```
3939

4040
## Usage
41-
Default configuration and provide example for `bootstrap4` styling. Though, it allow for complete flexibility of customization with any other jQuery DataTables supported theme.
41+
Default configuration and provide example for `bootstrap5` styling. Though, it allow for complete flexibility of customization with any other jQuery DataTables supported theme.
4242

43-
> Example of imports for Bootstrap 4:
43+
> Example of imports for Bootstrap 5:
4444
4545
```html
46-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
47-
<link rel="stylesheet" href='https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css'>
46+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
47+
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
4848

4949
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
5050
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
5151

5252
<script>
5353
import VdtnetTable from 'vue-datatables-net'
5454
55-
import 'datatables.net-bs4'
55+
import 'datatables.net-bs5'
5656
5757
// below you should only import what you need
5858
// Example: import buttons and plugins
@@ -61,11 +61,11 @@ import 'datatables.net-buttons/js/buttons.html5.js'
6161
import 'datatables.net-buttons/js/buttons.print.js'
6262
6363
// import the rest for your specific theme
64-
import 'datatables.net-buttons-bs4'
65-
import 'datatables.net-select-bs4'
64+
import 'datatables.net-buttons-bs5'
65+
import 'datatables.net-select-bs5'
6666
67-
import 'datatables.net-select-bs4/css/select.bootstrap4.min.css'
68-
import 'datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css'
67+
import 'datatables.net-select-bs5/css/select.bootstrap5.min.css'
68+
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css'
6969
</script>
7070
```
7171

@@ -143,7 +143,7 @@ Our component parameters:
143143
type: String,
144144
},
145145
/**
146-
* Set the table classes you wish to use, default with bootstrap4
146+
* Set the table classes you wish to use, default with bootstrap5
147147
* but you can override with: themeforest, foundation, etc..
148148
*
149149
* @type String
@@ -397,7 +397,7 @@ Let say you have a column `description`, you can provide table footer template f
397397
## dom (Searching and Toolbar)
398398
`dom` configuration defines how jQuery DataTables components are rendered - https://datatables.net/reference/option/dom
399399
400-
Our default configuration compatible with Bootstrap4 is:
400+
Our default configuration compatible with Bootstrap5 is:
401401
```html
402402
"tr<'row vdtnet-footer'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'pl>>"
403403
```
@@ -421,7 +421,7 @@ window.open(url)
421421
```
422422
423423
## Responsive
424-
1. In Bootstrap4, there's a class called [table-responsive](https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables) that wrap the table at each screen breakpoint. We apply this class on our wrapper div to make the table scroll horizontally. We also include `d-print-inline` for print.
424+
1. In Bootstrap5, there's a class called [table-responsive](https://getbootstrap.com/docs/5.0/content/tables/#responsive-tables) that wrap the table at each screen breakpoint. We apply this class on our wrapper div to make the table scroll horizontally. We also include `d-print-inline` for print.
425425
426426
2. Alternatively, you can set `options.responsive = true` to use jQuery DataTable responsive plugin. **WARNING**: This plugin does not play well with `select-checkbox`, `master-details`, and many other features. It is recommended to use option 1 above.
427427

Diff for: ‎dist/index.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dist/index.js.LICENSE.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* vue-datatables-net
33
* Vue jQuery DataTables.net wrapper component
44
*
5-
* @version v1.6.0
5+
* @version v1.6.1
66
* @author [email protected]
77
* @repository https://github.com/niiknow/vue-datatables-net.git
88
*/

Diff for: ‎dist/mix-manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"/index.js": "/index.js?id=c3aea7f36e626df83718"
2+
"/index.js": "/index.js?id=12db3d98387d1b9aa7fd"
33
}

Diff for: ‎example/app.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -74,19 +74,19 @@
7474
// this demonstrate with buttons and responsive master/details row
7575
import VdtnetTable from '../src'
7676
77-
import 'datatables.net-bs4'
77+
import 'datatables.net-bs5'
7878
7979
// import buttons and plugins
8080
import 'datatables.net-buttons/js/dataTables.buttons.js'
8181
import 'datatables.net-buttons/js/buttons.html5.js'
8282
import 'datatables.net-buttons/js/buttons.print.js'
8383
8484
// import the rest
85-
import 'datatables.net-buttons-bs4'
86-
import 'datatables.net-select-bs4'
85+
import 'datatables.net-buttons-bs5'
86+
import 'datatables.net-select-bs5'
8787
88-
import 'datatables.net-select-bs4/css/select.bootstrap4.min.css'
89-
import 'datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css'
88+
import 'datatables.net-select-bs5/css/select.bootstrap5.min.css'
89+
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css'
9090
9191
export default {
9292
name: 'App',

Diff for: ‎example/index.js

+39-39
Large diffs are not rendered by default.

Diff for: ‎example/index.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎example/late-schema.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -75,19 +75,19 @@
7575
// this demonstrate with buttons and responsive master/details row
7676
import VdtnetTable from '../src'
7777
78-
import 'datatables.net-bs4'
78+
import 'datatables.net-bs5'
7979
8080
// import buttons and plugins
8181
import 'datatables.net-buttons/js/dataTables.buttons.js'
8282
import 'datatables.net-buttons/js/buttons.html5.js'
8383
import 'datatables.net-buttons/js/buttons.print.js'
8484
8585
// import the rest
86-
import 'datatables.net-buttons-bs4'
87-
import 'datatables.net-select-bs4'
86+
import 'datatables.net-buttons-bs5'
87+
import 'datatables.net-select-bs5'
8888
89-
import 'datatables.net-select-bs4/css/select.bootstrap4.min.css'
90-
import 'datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css'
89+
import 'datatables.net-select-bs5/css/select.bootstrap5.min.css'
90+
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css'
9191
9292
export default {
9393
name: 'App',

Diff for: ‎example/mix-manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"/index.js": "/index.js?id=df009d921acc7805114f"
2+
"/index.js": "/index.js?id=04fadb273badf98689e9"
33
}

Diff for: ‎example/responsive.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -73,22 +73,22 @@
7373
// this demonstrate with buttons and responsive master/details row
7474
import VdtnetTable from '../src'
7575
76-
import 'datatables.net-bs4'
76+
import 'datatables.net-bs5'
7777
7878
// import buttons and plugins
7979
import 'datatables.net-buttons/js/dataTables.buttons.js'
8080
import 'datatables.net-buttons/js/buttons.html5.js'
8181
import 'datatables.net-buttons/js/buttons.print.js'
8282
import 'datatables.net-responsive/js/dataTables.responsive.js'
83-
import 'datatables.net-responsive-bs4/js/responsive.bootstrap4.js'
83+
import 'datatables.net-responsive-bs5/js/responsive.bootstrap4.js'
8484
8585
// import the rest
86-
import 'datatables.net-buttons-bs4'
87-
import 'datatables.net-select-bs4'
86+
import 'datatables.net-buttons-bs5'
87+
import 'datatables.net-select-bs5'
8888
89-
import 'datatables.net-select-bs4/css/select.bootstrap4.min.css'
90-
import 'datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css'
91-
import 'datatables.net-responsive-bs4/css/responsive.bootstrap4.css'
89+
import 'datatables.net-select-bs5/css/select.bootstrap5.min.css'
90+
import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css'
91+
import 'datatables.net-responsive-bs5/css/responsive.bootstrap5.css'
9292
9393
export default {
9494
name: 'App',

Diff for: ‎index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="utf-8">
55
<title>vue-datatables-net demo</title>
6-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
7-
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
6+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
88

99
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
10-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
1111
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
1212
</head>
1313
<body>

0 commit comments

Comments
 (0)