Harness-Vue-Bootstrap

Appearance

Filter Grid ​

Basic Example ​

A basic <FilterGrid> element using Bootstrap 4 for styling. The FilterGrid component automatically lays out all of your filters defined in harness, bound to the appopriate getters/actions. This component can accept a subset of filters, and can be made synchronous/asynchronous. Each filter and label is classed and given an id based on the name of the filter it represents.

 

Usage ​

kebab-case ​

html
    <filter-grid :columns="2" />

PascalCase ​

html
    <FilterGrid :columns="2" />

Props ​

clearButton ​

If true, includes a button to clear all filters and set them to their defaults. This button is consistent with the synchronous behavior.

  • Type: Boolean
  • Required: No
  • Default: true

No Clear Filter Button Example ​

html
<FilterGrid :columns="2" :clearButton="false"/>

buttonPosition ​

Sets the button alignment in the bottom row. If none, it will not display any buttons.

  • Type: String
  • Required: No
  • Options:
    • 'left'
    • 'center'
    • 'right'
    • 'none'
  • Default: 'center'

Clear Filter Button End Example ​

 
html
<FilterGrid :columns="2" :buttonPosition="'end'" />

Clear Filter Button Start Example ​

 
html
<FilterGrid :columns="2" :buttonPosition="'start'" />

columns ​

The number of columns to use in each row of the grid. Must be a divisor of 12, as this uses the Bootstrap Grid. Default is 1.

  • Type: Number
  • Required: No
  • Options:
    • 1 - 12
  • Default: 1

4 Column Example ​

 
html
<FilterGrid :columns="4" />

1 Column Example ​

 
html
<FilterGrid />

only ​

Only filters with keys in this array will be rendered. Filters will be rendered in the order created on the harness page.

  • Type: Array
  • Required: No

Only ['exampleInput', 'exampleSelect'] Example ​

 
html
<FilterGrid :columns="2" :only="['exampleInput', 'exampleSelect']"/>

orderByOnly ​

Pairs with order prop to order FilterGrid based on the order of filters in only.

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

Ordered ['exampleInput', 'exampleSelect'] Example ​

 
html
<FilterGrid :columns="2" :only="['exampleInput', 'exampleSelect']" :order-by-only="true" />

except ​

Only filters with keys not in this array will be rendered.

  • Type: Array
  • Required: No

Except ['exampleInput', 'exampleSelect'] Example ​

 
html
<FilterGrid :columns="2" :except="['exampleInput', 'exampleSelect']" />

rowClass ​

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

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

align-items-end Class Example ​

 
html
<FilterGrid :columns="2" :row-class="'align-items-end'"/>

colClass ​

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

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

componentClass ​

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

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