Skip to content

Commit

Permalink
feat(tables): add support for custom header attributes (closes #2244) (
Browse files Browse the repository at this point in the history
…#3876)

* feat(tables): add support for custom header attributes

* Update README.md

* Update mixin-tbody-row.js

* Update mixin-thead.js

* Update table.spec.js

* Update table-lite.spec.js
  • Loading branch information
jonfunkhouser authored and jacobmllr95 committed Aug 14, 2019
1 parent 0edac49 commit 8784f31
Show file tree
Hide file tree
Showing 6 changed files with 148 additions and 20 deletions.
39 changes: 20 additions & 19 deletions src/components/table/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -233,25 +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 `<th>` attribute `title`. Defaults to no `title` attribute. |
| `headerAbbr` | String | 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. |
| `class` | String or Array | Class name (or array of class names) to add to `<th>` **and** `<td>` 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 | <span class="badge badge-info small">NEW in 2.0.0-rc.28</span> Sort the column by the result of the field's `formatter` callback function. Default is `false`. Has no effect if the field does not have a `formatter`. Refer to the [Sorting](#sorting) Section for more details. |
| `filterByFormatted` | Boolean | <span class="badge badge-info small">NEW in 2.0.0-rc.28</span> Filter the column by the result of the field's `formatter` callback function. Default is `false`. Has no effect if the field does not have a `formatter`. 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 `<tbody>` data `<td>` cells in the column. If custom classes per cell are required, a callback function can be specified instead. |
| `thClass` | String or Array | Class name (or array of class names) to add to this field's `<thead>`/`<tfoot>` heading `<th>` cell. |
| `thStyle` | Object | JavaScript object representing CSS styles you would like to apply to the table `<thead>`/`<tfoot>` field `<th>`. |
| `variant` | String | Apply contextual class to all the `<th>` **and** `<td>` 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 `<tbody>` field `<td>` cell. If custom attributes per cell are required, a callback function can be specified instead. |
| `isRowHeader` | Boolean | When set to `true`, the field's item data cell will be rendered with `<th>` rather than the default of `<td>`. |
| `stickyColumn` | Boolean | <span class="badge badge-info small">NEW in 2.0.0-rc.28</span> 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. |
| `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 `<th>` attribute `title`. Defaults to no `title` attribute. |
| `headerAbbr` | String | 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. |
| `class` | String or Array | Class name (or array of class names) to add to `<th>` **and** `<td>` 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 | <span class="badge badge-info small">NEW in 2.0.0-rc.28</span> Sort the column by the result of the field's `formatter` callback function. Default is `false`. Has no effect if the field does not have a `formatter`. Refer to the [Sorting](#sorting) Section for more details. |
| `filterByFormatted` | Boolean | <span class="badge badge-info small">NEW in 2.0.0-rc.28</span> Filter the column by the result of the field's `formatter` callback function. Default is `false`. Has no effect if the field does not have a `formatter`. 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 `<tbody>` data `<td>` 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 `<thead>`/`<tfoot>` heading `<th>` cell. |
| `thStyle` | Object | JavaScript object representing CSS styles you would like to apply to the table `<thead>`/`<tfoot>` field `<th>`. |
| `variant` | String | Apply contextual class to all the `<th>` **and** `<td>` 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 `<tbody>` field `<td>` 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 `<thead>`/`<tfoot>` heading `<th>` cell. If the field's `isRowHeader` is set to `true`, the attributes will also apply to the `<tbody>` field `<th>` 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 `<th>` rather than the default of `<td>`. |
| `stickyColumn` | Boolean | <span class="badge badge-info small">NEW in 2.0.0-rc.28</span> 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:**

Expand Down
17 changes: 16 additions & 1 deletion src/components/table/helpers/mixin-tbody-row.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,19 @@ export default {
}
return defValue
},
getThValues(item, key, thValue, type, defValue) {
const parent = this.$parent
if (thValue) {
const value = get(item, key, '')
if (isFunction(thValue)) {
return thValue(value, key, item, type)
} else if (isString(thValue) && isFunction(parent[thValue])) {
return parent[thValue](value, key, item, type)
}
return thValue
}
return defValue
},
// Method to get the value for a field
getFormattedValue(item, field) {
const key = field.key
Expand Down Expand Up @@ -169,7 +182,9 @@ export default {
},
attrs: {
'aria-colindex': String(colIndex + 1),
...this.getTdValues(item, key, field.tdAttr, {})
...(field.isRowHeader
? this.getThValues(item, key, field.thAttr, 'row', {})
: this.getTdValues(item, key, field.tdAttr, {}))
}
}
const slotScope = {
Expand Down
1 change: 1 addition & 0 deletions src/components/table/helpers/mixin-thead.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export default {
title: field.headerTitle || null,
'aria-colindex': String(colIndex + 1),
'aria-label': ariaLabel,
...this.getThValues(null, field.key, field.thAttr, isFoot ? 'foot' : 'head', {}),
...sortAttrs
},
on: handlers
Expand Down
1 change: 1 addition & 0 deletions src/components/table/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ export interface BvTableField {
thStyle?: any
variant?: BvTableVariant | string
tdAttr?: any | ((value: any, key: string, item: any) => any)
thAttr?: any | ((value: any, key: string, item: any, type: string) => any)
isRowHeader?: boolean
}

Expand Down
Loading

0 comments on commit 8784f31

Please sign in to comment.