feat(table): add TypeScript definitions for table fields (#2867)

Matt Grande · jacobmllr95 · commit 436e8c1d4ce9 · 2019-04-04T23:39:29.000+02:00
* feat(table): Add TypeScript definitions for table fields

* Changes from code review

VueVariant -&gt; TableVariant
interface TableFieldArray -&gt; type TableFieldArray
Make fields optional

* Update README.md

* Update README.md

* Update index.d.ts

* Updates from code review

* Update index.d.ts

* Update index.d.ts

Change to `?:`
diff --git 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-<variant>`.
 
diff --git 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
@@ -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<string | ({key: string} & TableField)>
+
   // 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 {
