You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/components/table/README.md
+68-32Lines changed: 68 additions & 32 deletions
Original file line number
Diff line number
Diff line change
@@ -273,7 +273,9 @@ The following field properties are recognized:
273
273
| Property | Type | Description
274
274
| ---------| ---- | -----------
275
275
| `key` | String | The key for selecting data from the record in the items array. Required when setting the `fields` from as an array of objects.
276
-
| `label` | String | Appears in the columns table header (and footer if `foot-clone` is set). Defaults to the field's key (in humanized format) if not provided. It's possible to use empty labels by assigning an empty string `""`
276
+
| `label` | String | Appears in the columns table header (and footer if `foot-clone` is set). Defaults to the field's key (in humanized format) if not provided. It's possible to use empty labels by assigning an empty string `""` but be sure you also set `headerTitle` to provide non-sighted users a hint about the column contents.
277
+
| `headerTitle` | Text to place on the fields header `<th>` attribute `title`. Defaults to no `title` attribute.
278
+
| `headerAbbr` | Text to place on the fields header `<th>` attribute `abbr`. Set this to the unabbreviated version of the label (or title) if label (or title) is an abbreviation. Defaults to no `abbr` attribute.
277
279
| `class` | String or Array | Class name (or array of class names) to add to `<th>`**and**`<td>` in the column.
278
280
| `formatter` | String or Function | A formatter callback function, can be used instead of (or in conjunction with) slots for real table fields (i.e. fields, that have corresponding data at items array). Refer to [**Custom Data Rendering**](#custom-data-rendering) for more details.
279
281
| `sortable` | Boolean | Enable sorting on this column. Refer to the [**Sorting**](#sorting) Section for more details.
@@ -486,9 +488,8 @@ export default {
486
488
<!-- table-responsive.vue -->
487
489
```
488
490
489
-
>**Responsive table notes:**
490
-
> -_Possible vertical clipping/truncation_. Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
491
-
> - When in responsive mode the table will lose it's width of 100%. This is a known issue with bootstrap V4 css and placing the `table-responsive` class on the `<table>` element as recommended by Bootstrap.
491
+
**Responsive table notes:**
492
+
-_Possible vertical clipping/truncation_. Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this may clip off dropdown menus and other third-party widgets.
492
493
493
494
494
495
## Stacked tables
@@ -680,12 +681,12 @@ The slot's scope variable (`data` in the above sample) will have the following p
680
681
| `toggleDetails` | Function | Can be called to toggle the visibility of the rows `row-details` scoped slot. See section [**Row details support**](#row-details-support) below for additional information
681
682
682
683
683
-
>**Notes:**
684
-
>-_`index` will not always be the actual row's index number, as it is
684
+
**Notes:**
685
+
-_`index` will not always be the actual row's index number, as it is
685
686
computed after pagination and filtering have been applied to the original
686
687
table data. The `index` value will refer to the **displayed row number**. This
687
688
number will align with the indexes from the optional `v-model` bound variable._
688
-
>-_When placing inputs, buttons, selects or links within a data cell scoped slot,
689
+
-_When placing inputs, buttons, selects or links within a data cell scoped slot,
689
690
be sure to add a `@click.stop` (or `@click.native.stop` if needed) handler (which can
690
691
be empty) to prevent the click on the input, button, select, or link, from triggering
691
692
the `row-clicked` event:_
@@ -698,8 +699,8 @@ the `row-clicked` event:_
698
699
```
699
700
700
701
#### Displaying raw HTML
701
-
By default `b-table` escapes HTML tags in items, if you need to display raw HTML code in `b-table`, you should use
702
-
`v-html` directive on an element in a in scoped field slot
702
+
By default `b-table` escapes HTML tags in items data and results of formatter functions, if you need to display
703
+
raw HTML code in `b-table`, you should use `v-html` directive on an element in a in scoped field slot
703
704
704
705
```html
705
706
<template>
@@ -727,8 +728,8 @@ export default {
727
728
<!-- table-html-data-slots.vue -->
728
729
```
729
730
730
-
**Note:** Be cautious of using this to display user supplied content, as script
731
-
tags could be injected into your page!
731
+
**Warning:** Be cautious of using this to display user supplied content, **as script
732
+
tags could be injected into your page!**
732
733
733
734
734
735
### Formatter callback
@@ -952,7 +953,7 @@ based on the current sort critera. See the
952
953
[Vue docs](http://vuejs.org/v2/guide/components.html#sync-Modifier) for details
953
954
on the `.sync` prop modifier
954
955
955
-
>**Note:**_The built-in `sort-compare` routine **cannot** sort virtual columns, nor
956
+
**Note:**_The built-in `sort-compare` routine **cannot** sort virtual columns, nor
956
957
sort based on the custom rendering of the field data (formatter functions and/or
957
958
scoped slots are used only for presentation only, and do not affect the underlying data).
958
959
Refer to the [**Sort-compare routine**](#sort-compare-routine) section below for details on
@@ -1054,7 +1055,8 @@ function toString (value) {
1054
1055
### Disable local sorting
1055
1056
If you want to handle sorting entirely in your app, you can disable the local
1056
1057
sorting in `<b-table>` by setting the prop `no-local-sorting` to true, while
1057
-
still maintaining the sortable header functionality.
1058
+
still maintaining the sortable header functionality (via `sort-changed` or
1059
+
`context-changed` events as well as syncable props).
1058
1060
1059
1061
You can use the syncable props `sort-by.sync` and `sort-desc.sync` to detect
1060
1062
changes in sorting column and direction.
@@ -1079,20 +1081,50 @@ See the [Complete Example](#complete-example) below for an example of using this
1079
1081
1080
1082
## Filtering
1081
1083
Filtering, when used, is applied to the **original items** array data, and hence it is not
1082
-
possible to filter data based on custom rendering of virtual columns. The items row data
1083
-
is stringified and the filter searches that stringified data (excluding any properties
1084
-
that begin with an underscore `_`).
1084
+
currently possible to filter data based on custom rendering of virtual columns.
1085
+
1086
+
### Built in filtering
1087
+
The items row data values are stringified (see the sorting section above for how
1088
+
stringification is done) and the filter searches that stringified data (excluding
1089
+
any of the special properties that begin with an underscore `_`). The stringification
1090
+
also includes any data not shown in the presented columns.
1091
+
1092
+
With the default built-in filter function, The `filter` prop value can either be a string or
1093
+
a `RegExp` object (regular expressions should _not_ have the `/g` global flag set).
1094
+
1095
+
If the stringified row contains the provided string value or matches the RegExp expression
1096
+
then it is inclded in the displayed results.
1097
+
1098
+
Set the `filter` prop to `null` or the empty string to clear the current filter.
1099
+
1100
+
### Custom filter function
1101
+
You can also use a custom filter function, by setting the prop `filter-function` to a
1102
+
reference of custom filter test function. The filter function will be passed two arguments:
1103
+
- the original item row record data object. **Treat this argument as read-only.**
1104
+
- the content of the `filter` prop (could be a string, RegExp, array, or object)
1105
+
1106
+
The function should return `true` if the record matches your criteria or `false` if
1107
+
the record is to be filtered out.
1085
1108
1086
-
The `filter` prop value can be a string, a `RegExp` or a `function` reference. If
1087
-
a function is provided, the first argument is the original item record data object. The
1088
-
function should return `true` if the record matches your criteria or `false` if
1089
-
the record is to be filtered out.
1109
+
For proper reactive updates to the displayed data, when not filtering you should set the
1110
+
`filter` prop to `null` or an emtpy string (and not an empty object or array).
1111
+
The filter function will not be called when the `fitler` prop is a falsey value.
1090
1112
1113
+
The display of the `empty-filter-text` relies on the truthyness of the `filter` prop.
1114
+
1115
+
**Deprecation Notice:** Passing a filter function via the `filter` prop is deprecated
1116
+
and should be avoided. Use the `filter-function` prop instead.
1117
+
1118
+
### Filter events
1091
1119
When local filtering is applied, and the resultant number of items change, `<b-table>`
1092
-
will emit the `filtered` event, passing a single argument which is the complete list of
1093
-
items passing the filter routine. **Treat this argument as read-only.**
1120
+
will emit the `filtered` event with a two arguments:
1121
+
- an array reference which is the complete list of items passing the filter routine. **Treat this argument as read-only.**
1122
+
- the number of records that passed the filter test (the length of the first argument)
1094
1123
1095
-
Setting the prop `filter` to null or an empty string will disable local items filtering.
1124
+
Setting the prop `filter` to null or an empty string will clear local items filtering.
1125
+
1126
+
### Filtering notes
1127
+
You can disable local filtering competely by setting the `no-local-filtering` prop to `true`.
1096
1128
1097
1129
See the [Complete Example](#complete-example) below for an example of using the
1098
1130
`filter` feature.
@@ -1121,7 +1153,7 @@ the original `items` array (except when `items` is set to a provider function).
1121
1153
Deleting a record from the v-model will **not** remove the record from the
1122
1154
original items array.
1123
1155
1124
-
>**Note:**_Do not bind any value directly to the `value` prop. Use the `v-model` binding._
1156
+
**Note:**_Do not bind any value directly to the `value` prop. Use the `v-model` binding._
1125
1157
1126
1158
1127
1159
## Using Items Provider Functions
@@ -1144,6 +1176,7 @@ following five properties:
1144
1176
| `filter` | String or RegExp or Function | the value of the `Filter` prop
1145
1177
| `sortBy` | String | The current column key being sorted, or `null` if not sorting
1146
1178
| `sortDesc` | Boolean | The current sort direction (`true` for descending, `false` for ascending)
1179
+
| `apiUrl` | String | the value providedd to the `api-url` prop. `null` if none provided.
1147
1180
1148
1181
The second argument `callback` is an optional parameter for when using the callback asynchronous method.
1149
1182
@@ -1197,7 +1230,7 @@ function myProvider (ctx) {
1197
1230
a `busy` prop that can be used either to override inner `busy`state, or to monitor
1198
1231
`<b-table>`'s current busy state in your application using the 2-way `.sync` modifier.
1199
1232
1200
-
>**Note:**_in order to allow `<b-table>` fully track it's `busy` state, custom items
1233
+
**Note:**_in order to allow `<b-table>` fully track it's `busy` state, custom items
1201
1234
provider function should handle errors from data sources and return an empty
1202
1235
array to `<b-table>`._
1203
1236
@@ -1236,10 +1269,10 @@ methods: {
1236
1269
}
1237
1270
```
1238
1271
1239
-
>**Notes:**
1240
-
>-_If you manually place the table in the `busy` state, the items provider will
1272
+
**Notes:**
1273
+
-_If you manually place the table in the `busy` state, the items provider will
1241
1274
__not__ be called/refreshed until the `busy` state has been set to `false`._
1242
-
>-_All click related and hover events, and sort-changed events will __not__ be
1275
+
-_All click related and hover events, and sort-changed events will __not__ be
1243
1276
emitted when in the `busy` state (either set automatically during provider update,
1244
1277
or when manually set)._
1245
1278
@@ -1259,12 +1292,12 @@ following `b-table` prop(s) to `true`:
1259
1292
When `no-provider-paging` is `false` (default), you should only return at
1260
1293
maximum, `perPage` number of records.
1261
1294
1262
-
>**Notes:**
1263
-
>-_`<b-table>` needs reference to your pagination and filtering values in order to
1295
+
**Notes:**
1296
+
-_`<b-table>` needs reference to your pagination and filtering values in order to
1264
1297
trigger the calling of the provider function. So be sure to bind to the `per-page`,
1265
1298
`current-page` and `filter` props on `b-table` to trigger the provider update function call
1266
1299
(unless you have the respective `no-provider-*` prop set to `true`)._
1267
-
>-_The `no-local-sorting` prop has no effect when `items` is a provider function._
1300
+
-_The `no-local-sorting` prop has no effect when `items` is a provider function._
1268
1301
1269
1302
### Event based refreshing of data
1270
1303
You may also trigger the refresh of the provider function by emitting the
@@ -1283,7 +1316,8 @@ Or by calling the refresh method on the table reference
1283
1316
this.$refs.table.refresh();
1284
1317
```
1285
1318
1286
-
These refresh event/methods are only applicable when `items` is a provider function.
1319
+
**Note:** If the table is in the `busy` state, refresh event/methods will silently be ignored.
1320
+
1287
1321
1288
1322
### Detection of sorting change
1289
1323
By listening on `<b-table>``sort-changed` event, you can detect when the sorting key
@@ -1318,6 +1352,8 @@ Special care must be taken when using server side rendering (SSR) and an `items`
1318
1352
function. Make sure you handle any special situations that may be needed server side
1319
1353
when fetching your data!
1320
1354
1355
+
When `b-table` is mounted in the document, it will automatically trigger a provider update call.
0 commit comments