Skip to content

Commit e0e1eee

Browse files
authored
fix(table): fix filtered event, fix emptyFilter message w/filter function, fix reactivity of filter sub routines, fix empty header label accessibility issue (Fixes #1989,#1517) (#2149)
1 parent 656d6df commit e0e1eee

File tree

3 files changed

+511
-290
lines changed

3 files changed

+511
-290
lines changed

src/components/table/README.md

Lines changed: 68 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,9 @@ The following field properties are recognized:
273273
| Property | Type | Description
274274
| ---------| ---- | -----------
275275
| `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.
277279
| `class` | String or Array | Class name (or array of class names) to add to `<th>` **and** `<td>` in the column.
278280
| `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.
279281
| `sortable` | Boolean | Enable sorting on this column. Refer to the [**Sorting**](#sorting) Section for more details.
@@ -486,9 +488,8 @@ export default {
486488
<!-- table-responsive.vue -->
487489
```
488490

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.
492493

493494

494495
## Stacked tables
@@ -680,12 +681,12 @@ The slot's scope variable (`data` in the above sample) will have the following p
680681
| `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
681682

682683

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
685686
computed after pagination and filtering have been applied to the original
686687
table data. The `index` value will refer to the **displayed row number**. This
687688
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,
689690
be sure to add a `@click.stop` (or `@click.native.stop` if needed) handler (which can
690691
be empty) to prevent the click on the input, button, select, or link, from triggering
691692
the `row-clicked` event:_
@@ -698,8 +699,8 @@ the `row-clicked` event:_
698699
```
699700

700701
#### 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
703704

704705
```html
705706
<template>
@@ -727,8 +728,8 @@ export default {
727728
<!-- table-html-data-slots.vue -->
728729
```
729730

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!**
732733

733734

734735
### Formatter callback
@@ -952,7 +953,7 @@ based on the current sort critera. See the
952953
[Vue docs](http://vuejs.org/v2/guide/components.html#sync-Modifier) for details
953954
on the `.sync` prop modifier
954955

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
956957
sort based on the custom rendering of the field data (formatter functions and/or
957958
scoped slots are used only for presentation only, and do not affect the underlying data).
958959
Refer to the [**Sort-compare routine**](#sort-compare-routine) section below for details on
@@ -1054,7 +1055,8 @@ function toString (value) {
10541055
### Disable local sorting
10551056
If you want to handle sorting entirely in your app, you can disable the local
10561057
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).
10581060

10591061
You can use the syncable props `sort-by.sync` and `sort-desc.sync` to detect
10601062
changes in sorting column and direction.
@@ -1079,20 +1081,50 @@ See the [Complete Example](#complete-example) below for an example of using this
10791081

10801082
## Filtering
10811083
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.
10851108

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.
10901112

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
10911119
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)
10941123

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`.
10961128

10971129
See the [Complete Example](#complete-example) below for an example of using the
10981130
`filter` feature.
@@ -1121,7 +1153,7 @@ the original `items` array (except when `items` is set to a provider function).
11211153
Deleting a record from the v-model will **not** remove the record from the
11221154
original items array.
11231155

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._
11251157

11261158

11271159
## Using Items Provider Functions
@@ -1144,6 +1176,7 @@ following five properties:
11441176
| `filter` | String or RegExp or Function | the value of the `Filter` prop
11451177
| `sortBy` | String | The current column key being sorted, or `null` if not sorting
11461178
| `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.
11471180

11481181
The second argument `callback` is an optional parameter for when using the callback asynchronous method.
11491182

@@ -1197,7 +1230,7 @@ function myProvider (ctx) {
11971230
a `busy` prop that can be used either to override inner `busy`state, or to monitor
11981231
`<b-table>`'s current busy state in your application using the 2-way `.sync` modifier.
11991232

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
12011234
provider function should handle errors from data sources and return an empty
12021235
array to `<b-table>`._
12031236

@@ -1236,10 +1269,10 @@ methods: {
12361269
}
12371270
```
12381271

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
12411274
__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
12431276
emitted when in the `busy` state (either set automatically during provider update,
12441277
or when manually set)._
12451278

@@ -1259,12 +1292,12 @@ following `b-table` prop(s) to `true`:
12591292
When `no-provider-paging` is `false` (default), you should only return at
12601293
maximum, `perPage` number of records.
12611294

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
12641297
trigger the calling of the provider function. So be sure to bind to the `per-page`,
12651298
`current-page` and `filter` props on `b-table` to trigger the provider update function call
12661299
(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._
12681301

12691302
### Event based refreshing of data
12701303
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
12831316
this.$refs.table.refresh();
12841317
```
12851318

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+
12871321

12881322
### Detection of sorting change
12891323
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`
13181352
function. Make sure you handle any special situations that may be needed server side
13191353
when fetching your data!
13201354

1355+
When `b-table` is mounted in the document, it will automatically trigger a provider update call.
1356+
13211357

13221358
## Complete Example
13231359

0 commit comments

Comments
 (0)