diff --git a/src/components/table/README.md b/src/components/table/README.md index 79e6f46a64f..2b0be8d8261 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -233,26 +233,26 @@ formatting, etc). Only columns (keys) that appear in the fields array will be sh The following field properties are recognized: -| Property | Type | Description | -| ------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `key` | String | The key for selecting data from the record in the items array. Required when setting the `fields` via an array of objects. | -| `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. | -| `headerTitle` | String | Text to place on the fields header `` attribute `title`. Defaults to no `title` attribute. | -| `headerAbbr` | String | Text to place on the fields header `` 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. | -| `class` | String or Array | Class name (or array of class names) to add to `` **and** `` in the column. | -| `formatter` | String or Function | A formatter callback function or name of a method in your component, can be used instead of (or in conjunction with) scoped field slots. Refer to [Custom Data Rendering](#custom-data-rendering) for more details. | -| `sortable` | Boolean | Enable sorting on this column. Refer to the [Sorting](#sorting) Section for more details. | -| `sortDirection` | String | Set the initial sort direction on this column when it becomes sorted. Refer to the [Change initial sort direction](#Change-initial-sort-direction) Section for more details. | -| `sortByFormatted` | Boolean or Function | Sort the column by the result of the field's `formatter` callback function when set to `true`. Default is `false`. Boolean has no effect if the field does not have a `formatter`. Optionally accepts a formatter function _reference_ to format the value before sorting. Refer to the [Sorting](#sorting) Section for more details. | -| `filterByFormatted` | Boolean or Function | Filter the column by the result of the field's `formatter` callback function when set to `true`. Default is `false`. Boolean has no effect if the field does not have a `formatter`. Optionally accepts a formatter function _reference_ to format the value before filtering. Refer to the [Filtering](#filtering) section for more details. | -| `tdClass` | String or Array or Function | Class name (or array of class names) to add to `` data `` cells in the column. If custom classes per cell are required, a callback function can be specified instead. The function will be called as `tdClass( value, key, item )` and it may return an `Array` or `String`. | -| `thClass` | String or Array | Class name (or array of class names) to add to this field's ``/`` heading `` cell. | -| `thStyle` | Object | JavaScript object representing CSS styles you would like to apply to the table ``/`` field ``. | -| `variant` | String | Apply contextual class to all the `` **and** `` in the column - `active`, `success`, `info`, `warning`, `danger`. These variants map to classes `thead-${variant}` (in the header), `table-${variant}` (in the body), or `bg-${variant}` (when the prop `dark` is set). | -| `tdAttr` | Object or Function | JavaScript object representing additional attributes to apply to the `` field `` cell. If custom attributes per cell are required, a callback function can be specified instead. The function will be called as `tdAttr( value, key, item )` and it may return an `Object`. | -| `thAttr` | Object or Function | JavaScript object representing additional attributes to apply to the field's ``/`` heading `` cell. If the field's `isRowHeader` is set to `true`, the attributes will also apply to the `` field `` cell. If custom attributes per cell are required, a callback function can be specified instead. The function will be called as `thAttr( value, key, item, type )` and it may return an `Object`. | -| `isRowHeader` | Boolean | When set to `true`, the field's item data cell will be rendered with `` rather than the default of ``. | -| `stickyColumn` | Boolean | When set to `true`, and the table in in [responsive](#responsive-tables) mode or has [sticky headers](#sticky-headers), will cause the column to become fixed to the left when the table's horizontal scrollbar is scrolled. See [Sticky columns](#sticky-columns) for more details | +| Property | Type | Description | +| ------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `key` | String | The key for selecting data from the record in the items array. Required when setting the `fields` via an array of objects. The `key` is also used for generating the [custom data rendering](#custom-data-rendering) and [custom header and footer](#header-and-footer-custom-rendering-via-scoped-slots) slot names. | +| `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. | +| `headerTitle` | String | Text to place on the fields header `` attribute `title`. Defaults to no `title` attribute. | +| `headerAbbr` | String | Text to place on the fields header `` 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. | +| `class` | String or Array | Class name (or array of class names) to add to `` **and** `` in the column. | +| `formatter` | String or Function | A formatter callback function or name of a method in your component, can be used instead of (or in conjunction with) scoped field slots. The formatter will be called with the syntax `formatter(value, key, item)`. Refer to [Custom Data Rendering](#custom-data-rendering) for more details. | +| `sortable` | Boolean | Enable sorting on this column. Refer to the [Sorting](#sorting) Section for more details. | +| `sortDirection` | String | Set the initial sort direction on this column when it becomes sorted. Refer to the [Change initial sort direction](#Change-initial-sort-direction) Section for more details. | +| `sortByFormatted` | Boolean or Function | Sort the column by the result of the field's `formatter` callback function when set to `true`. Default is `false`. Boolean has no effect if the field does not have a `formatter`. Optionally accepts a formatter function _reference_ to format the value for sorting purposes only. Refer to the [Sorting](#sorting) Section for more details. | +| `filterByFormatted` | Boolean or Function | Filter the column by the result of the field's `formatter` callback function when set to `true`. Default is `false`. Boolean has no effect if the field does not have a `formatter`. Optionally accepts a formatter function _reference_ to format the value for filtering purposes only. Refer to the [Filtering](#filtering) section for more details. | +| `tdClass` | String or Array or Function | Class name (or array of class names) to add to `` data `` cells in the column. If custom classes per cell are required, a callback function can be specified instead. The function will be called as `tdClass(value, key, item)` and it must return an `Array` or `String`. | +| `thClass` | String or Array | Class name (or array of class names) to add to this field's ``/`` heading `` cell. | +| `thStyle` | Object | JavaScript object representing CSS styles you would like to apply to the table ``/`` field ``. | +| `variant` | String | Apply contextual class to all the `` **and** `` in the column - `active`, `success`, `info`, `warning`, `danger`. These variants map to classes `thead-${variant}` (in the header), `table-${variant}` (in the body), or `bg-${variant}` (when the prop `dark` is set). | +| `tdAttr` | Object or Function | JavaScript object representing additional attributes to apply to the `` field `` cell. If custom attributes per cell are required, a callback function can be specified instead. The function will be called as `tdAttr(value, key, item)` and it must return an `Object`. | +| `thAttr` | Object or Function | JavaScript object representing additional attributes to apply to the field's ``/`` heading `` cell. If the field's `isRowHeader` is set to `true`, the attributes will also apply to the `` field `` cell. If custom attributes per cell are required, a callback function can be specified instead. The function will be called as `thAttr(value, key, item, type)` and it must return an `Object`. | +| `isRowHeader` | Boolean | When set to `true`, the field's item data cell will be rendered with `` rather than the default of ``. | +| `stickyColumn` | Boolean | When set to `true`, and the table in in [responsive](#responsive-tables) mode or has [sticky headers](#sticky-headers), will cause the column to become fixed to the left when the table's horizontal scrollbar is scrolled. See [Sticky columns](#sticky-columns) for more details | **Notes:**