diff --git a/README.md b/README.md index 68d8bfa..585562f 100644 --- a/README.md +++ b/README.md @@ -118,6 +118,7 @@ Table of Contents + [16.1.3. Step 3](#1613-step-3) + [16.1.4. Step 4](#1614-step-4) + [16.1.5. Note](#1615-note) + * [16.2. Loader overlay](#162-loader-overlay) - [17. Events](#17-events) * [17.1. on-select-row](#171-on-select-row) + [17.1.1. Payload (Object)](#1711-payload--object-) @@ -159,7 +160,7 @@ We are using **`lodash`** internally, so you don't need to install separately fo ... - + ``` **Note:** If you've included bootstrap & jQuery packages already in your project, then include only **vue-bootstrap4-table.min.js** script. @@ -504,7 +505,7 @@ columns: [ sort: true, // "false" by default initial_sort: true, // "false" by default initial_sort_order: "desc", // "asc" by default - sortCaseSensitive: false // "true" by default + sortCaseSensitive: true // "false" by default } ] ... @@ -515,7 +516,7 @@ columns: [ | sort | Enable or disable sorting in column. Default value is **`false`**.| | initial_sort | Sort the column at the first time loading. Default value is **`false`**. This only works if **`sort`** is **`true`**. | | 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`**. | -| sortCaseSensitive | Enable or disable case sensitive sorting. Default value is **`true`**. | +| sortCaseSensitive | Enable or disable case sensitive sorting. Default value is **`false`**. | ## 7.3. Single column sorting By default single column sort mode is enabled. @@ -626,6 +627,8 @@ columns: [ | filter.debounceRate | Defines the wait time for filtering between the key strokes. Value should be in milliseconds. | Number | 60 | | filter.showClearButton | Show/Hide clear button in the simple filter. | Boolean | true | | filter.init.value | Assign initial value to the the filter before rendering the table. | String | Empty string | +| filter.filter_by | The method to be used on filtering | Function | `(value, filter) => (value.indexOf(filter) > -1)` | +| filter.cleanseText | The method to be used on normalizing filter texts | Function | `(value) => (value)` | ### 8.1.3. Clear button icon slot @@ -793,6 +796,8 @@ You can enable or disable search text input with custom configuration as shown i | global_search.searchOnPressEnter | Enable/Disable global search on "enter" key press. | Boolean | false | | global_search.searchDebounceRate | Defines the wait time for searching between the key strokes. Value should be in milliseconds. | Number | 60 | | global_search.init.value | Assign initial value to the the global search filter before rendering the table. | String | Empty string | +| global_search.search_by | The method to be used on searching | Function | `(value, search) => (value.indexOf(search) > -1)` | +| global_search.cleanseText | The method to be used on normalizing search texts | Function | `(value) => (value)` | ## 9.3. Clear button icon slot @@ -1223,7 +1228,8 @@ You can optionally pass config as a prop to **`vue-bootstrap4-table`** component show_refresh_button: true, show_reset_button: true, server_mode: true, - preservePageOnDataChange: true + preservePageOnDataChange: true, + loaderText: 'Updating...', } } }, @@ -1260,6 +1266,7 @@ You can optionally pass config as a prop to **`vue-bootstrap4-table`** component | show_reset_button | Show/Hide Refresh button. Resets all query (sort, filter, global search) currently applied in the table. |Boolean | true | | server_mode | Enable/Disable server side processing (Sorting, Filtering, Global search & pagination) |Boolean | false | | 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 | +| loaderText | Overrides default loading text in the loader overlay | String | Loading... | # 16. Server mode @@ -1274,6 +1281,7 @@ In server mode, client side filtering, sorting, global search and pagination wil :columns="columns" :config="config" @on-change-query="onChangeQuery" + :show-loader="showLoader" :total-rows="total_rows"> @@ -1291,7 +1299,8 @@ In server mode, client side filtering, sorting, global search and pagination wil ], config: { ... - server_mode: true // by default false + server_mode: true, // by default false + loaderText: 'Updating...', // by default 'Loading...' ... }, queryParams: { @@ -1302,11 +1311,13 @@ In server mode, client side filtering, sorting, global search and pagination wil page: 1, }, total_rows: 0, + showLoader: true, } }, methods: { onChangeQuery(queryParams) { this.queryParams = queryParams; + this.showLoader = true; this.fetchData(); }, fetchData() { @@ -1320,8 +1331,10 @@ In server mode, client side filtering, sorting, global search and pagination wil .then(function(response) { self.rows = response.data.data; self.total_rows = response.data.total; + self.showLoader = false; }) .catch(function(error) { + self.showLoader = false; console.log(error); }); } @@ -1367,6 +1380,7 @@ Then listen for the event **`on-change-query`**. :columns="columns" :config="config" @on-change-query="onChangeQuery" + :show-loader="showLoader" :totalRows="total_rows"> ``` @@ -1378,6 +1392,7 @@ Wherever there is a change in table query params, you will get your new query pa ```javascript onChangeQuery(queryParams) { this.queryParams = queryParams; + this.showLoader = true; this.fetchData(); }, ``` @@ -1400,9 +1415,11 @@ fetchData() { .then(function(response) { self.rows = response.data.data; self.total_rows = response.data.total; + self.showLoader = false; }) .catch(function(error) { console.log(error); + self.showLoader = false; }); } ``` @@ -1424,6 +1441,15 @@ columns: [ ... ] ``` + +### 16.2. Loader overlay + +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`**. + +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. + +Didn't like the default loader animation ??? No problem, you can use **`loader-overlay`** slot to use your custom loader animation. + # 17. Events ## 17.1. on-select-row diff --git a/package-lock.json b/package-lock.json index 1dce787..e282e27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-bootstrap4-table", - "version": "1.1.2", + "version": "1.1.11", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5055,7 +5055,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5076,12 +5077,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5096,17 +5099,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5223,7 +5229,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5235,6 +5242,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5249,6 +5257,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5256,12 +5265,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5280,6 +5291,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5360,7 +5372,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5372,6 +5385,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5457,7 +5471,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5493,6 +5508,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5512,6 +5528,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5555,12 +5572,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -8259,6 +8278,7 @@ "version": "0.1.4", "bundled": true, "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -8583,7 +8603,8 @@ "is-buffer": { "version": "1.1.6", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "is-builtin-module": { "version": "1.0.0", @@ -8682,6 +8703,7 @@ "version": "3.2.2", "bundled": true, "dev": true, + "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -8728,7 +8750,8 @@ "longest": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "lru-cache": { "version": "4.1.3", @@ -8994,7 +9017,8 @@ "repeat-string": { "version": "1.6.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "require-directory": { "version": "2.1.1", @@ -14778,6 +14802,12 @@ } } }, + "vue-router": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.5.tgz", + "integrity": "sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==", + "dev": true + }, "vue-style-loader": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz", diff --git a/src/App.vue b/src/App.vue index 3e399d8..d1b346a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,7 +9,9 @@ @on-select-row="onSelectRows" @refresh-data="onRefreshData" :show-loader="showLoader" - @on-download="onDownload"> + @on-download="onDownload" + > +