Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Apr 4, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/markdown/reference/color-variants/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>`.

Expand Down
4 changes: 2 additions & 2 deletions src/components/table/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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**
Expand Down
25 changes: 25 additions & 0 deletions src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 {
Expand Down