Basic Table

• Basic Example
• Usage
  • kebab-case
  • PascalCase
  • Page Definition
• Props
  • chart
  • tableClass
  • headerClass
  • labelClass
  • rowClass
  • cellClass
  • rowHeaderCol

Basic Example

A basic <BasicTable> element using Bootstrap 5 for styling. This component takes an array of objects and renders an accessible (508 compliant) data table where each key/value pair corresponds to a column header/value. If the data is not in this format, you can include a tableAdapter function that accepts your data and transforms it into the necessary format. For more information on Harness-Vue tableAdapter functions see the section on Structured Data and Tables in the Harness-Vue documentation.

Transformed key	Transformed key 2
VALUE TRANSFORMED UPPERCASE	VALUE2 TRANSFORMED UPPERCASE
VALUE3 TRANSFORMED UPPERCASE	VALUE4 TRANSFORMED UPPERCASE
VALUE5 TRANSFORMED UPPERCASE	VALUE6 TRANSFORMED UPPERCASE

Usage

kebab-case

    <basic-table :chart="{ key: 'exampleTable' }" />

PascalCase

    <BasicTable :chart="{ key: 'exampleTable' }" />

Page Definition

import { components } from '@rtidatascience/harness-vue-bootstrap'
components['BasicTable'] // array syntax
components.BasicTable // object syntax
'BasicTable' // string syntax if mixin installed

Props

chart

The chart object to render (Note: this is automatically handled by ChartGrid, so if you are using the grid you don't need this in your page definition)

• Type: Object
• Required: Yes

tableClass

A string appended to the class of the table, for applying bootstrap table options. This can also be used for applying user-created classes as well.

• Type: String
• Required: No
• Default: null

Example table-hover

Transformed key	Transformed key 2
VALUE TRANSFORMED UPPERCASE	VALUE2 TRANSFORMED UPPERCASE
VALUE3 TRANSFORMED UPPERCASE	VALUE4 TRANSFORMED UPPERCASE
VALUE5 TRANSFORMED UPPERCASE	VALUE6 TRANSFORMED UPPERCASE

<BasicTable class="table-hover" />

headerClass

A string appended to the class of the <thead> element, for applying bootstrap table options. This can also be used for applying user-created classes as well.

• Type: String
• Required: No
• Default: null

Example thead-dark

Transformed key	Transformed key 2
VALUE TRANSFORMED UPPERCASE	VALUE2 TRANSFORMED UPPERCASE
VALUE3 TRANSFORMED UPPERCASE	VALUE4 TRANSFORMED UPPERCASE
VALUE5 TRANSFORMED UPPERCASE	VALUE6 TRANSFORMED UPPERCASE

<BasicTable headerClass="thead-dark" />

labelClass

A string appended to the class of each <th> element, for applying bootstrap table options. This can also be used for applying user-created classes as well.

• Type: String
• Required: No
• Default: null

rowClass

A string appended to the class of each <tr> element, for applying bootstrap table options. This can also be used for applying user-created classes as well.

• Type: String
• Required: No
• Default: null

Example table-success

Transformed key	Transformed key 2
VALUE TRANSFORMED UPPERCASE	VALUE2 TRANSFORMED UPPERCASE
VALUE3 TRANSFORMED UPPERCASE	VALUE4 TRANSFORMED UPPERCASE
VALUE5 TRANSFORMED UPPERCASE	VALUE6 TRANSFORMED UPPERCASE

<BasicTable rowClass="table-success" />

cellClass

A string appended to the class of each <td> element, for applying bootstrap table options. This can also be used for applying user-created classes as well.

• Type: String
• Required: No
• Default: null

Example table-danger

Transformed key	Transformed key 2
VALUE TRANSFORMED UPPERCASE	VALUE2 TRANSFORMED UPPERCASE
VALUE3 TRANSFORMED UPPERCASE	VALUE4 TRANSFORMED UPPERCASE
VALUE5 TRANSFORMED UPPERCASE	VALUE6 TRANSFORMED UPPERCASE

<BasicTable cellClass="table-danger" />

rowHeaderCol

Adds scope="row" to the first cell in each row to make it a row header

• Type: Boolean
• Required: No
• Default: false

Example true

Transformed key	Transformed key 2
VALUE TRANSFORMED UPPERCASE	VALUE2 TRANSFORMED UPPERCASE
VALUE3 TRANSFORMED UPPERCASE	VALUE4 TRANSFORMED UPPERCASE
VALUE5 TRANSFORMED UPPERCASE	VALUE6 TRANSFORMED UPPERCASE

<BasicTable :rowHeaderCol="true" />