diff --git a/docs/markdown/reference/color-variants/README.md b/docs/markdown/reference/color-variants/README.md index 33ce014ef50..f2ebb0560ec 100644 --- a/docs/markdown/reference/color-variants/README.md +++ b/docs/markdown/reference/color-variants/README.md @@ -72,7 +72,9 @@ Note the `link` variant does not have an outline version. ### Table variants -All the **base variants**: +All the **base variants** plus: + +- `active` These variants translate to class names `table-`. diff --git a/src/components/table/README.md b/src/components/table/README.md index 538527c4a7c..86b7702666c 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -70,8 +70,8 @@ modifier properties (make sure your field keys do not conflict with these names) | Property | Type | Description | | --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `_cellVariants` | Object | Bootstrap contextual state applied to individual cells. Keyed by field (Supported values: `active`, `success`, `info`, `warning`, `danger`). These variants map to classes `table-${variant}` or `bg-${variant}` (when the `dark` prop is set). | -| `_rowVariant` | String | Bootstrap contextual state applied to the entire row (Supported values: `active`, `success`, `info`, `warning`, `danger`). These variants map to classes `table-${variant}` or `bg-${variant}` (when the `dark` prop is set) | +| `_cellVariants` | Object | Bootstrap contextual state applied to individual cells. Keyed by field (See the [Color Variants](/docs/reference/color-variants) for supported values). These variants map to classes `table-${variant}` or `bg-${variant}` (when the `dark` prop is set). | +| `_rowVariant` | String | Bootstrap contextual state applied to the entire row (See the [Color Variants](/docs/reference/color-variants) for supported values). These variants map to classes `table-${variant}` or `bg-${variant}` (when the `dark` prop is set) | | `_showDetails` | Boolean | Used to trigger the display of the `row-details` scoped slot. See section [Row details support](#row-details-support) below for additional information | **Example: Using variants for table cells** diff --git a/src/index.d.ts b/src/index.d.ts index 053143c5107..a9f887bd194 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -14,6 +14,30 @@ declare module 'bootstrap-vue' { export default VuePlugin + type TableVariant = 'active' | 'success' | 'info' | 'warning' | 'danger' | 'primary' | 'secondary' | 'light' | 'dark' + type SortDirection = 'asc' | 'desc' | 'last' + type FormatterCallback = ((value: mixed, key: string, item: mixed) => any) + + export interface TableField { + label?: string + headerTitle?: string + headerAbbr?: string + class?: string | string[] + formatter?: string | FormatterCallback + sortable?: boolean + sortDirection?: SortDirection + tdClass?: string | string[] | FormatterCallback + thClass?: string | string[] + thStyle?: mixed + variant?: TableVariant | string + tdAttr?: mixed | ((value: mixed, key: string, item: mixed) => mixed) + isRowHeader?: boolean + } + export interface TableFieldObject { + [key: string]: TableField + } + export type TableFieldArray = Array + // Interfaces export interface Alert extends Vue { dismiss: () => void @@ -115,6 +139,7 @@ declare module 'bootstrap-vue' { export interface Progress extends Vue {} export interface Table extends Vue { refresh: () => void + fields?: TableFieldObject | TableFieldArray } export interface Tabs extends Vue {} export interface Tooltip extends Vue {