ComponentsTableA table displays rows of data, including all data in a set, making it efficient to look up values.
Guidelines
Web
Resources You can use these components by accessing the provided resource files.
Usage
The package is already installed in the repository's shell. To use the component, you only need to add the following code:
<BTable :fields="tableHeader" :items="tableData"/>
Attributes
If there is a question mark ? in the Data Type, it means that the properties are optional.
| Property | Data Type | Description | Default Value |
|---|---|---|---|
| responsive | boolean | If true table will responsive. | true |
| fields | FieldTypes[] | Table header. | none |
| items | object | Table id. | none |
| id | string | Table id. | none |
| sortable | boolean | Enable sorting for the table. | false |
| singleSort | boolean | Enable single-column sorting. | false |
| striped | boolean | Add striped rows to the table. | false |
| tableClass | string | Custom class for the table. | none |
| freezeFirstColumn | boolean | Freeze the first column. | false |
| freezeLastColumn | boolean | Freeze the last column. | false |
| freezeColumn | object | Specify columns to freeze. | none |
| freezeShadowStatic | boolean | Static shadow for frozen columns. | false |
| headingCenter | boolean | Center-align column headings. | false |
| headingVerticalCenter | boolean | Vertically center column headings. | false |
| select | boolean | Enable row selection. | false |
| multiSelect | boolean | Enable multi-row selection. | false |
| isActiveKey | string | Key to mark a row as active. | isActive |
| activeOnClick | boolean | Set row as active on click. | false |
| noCheckbox | boolean | Hide checkboxes for row selection. | false |
| hideDisabledCheckbox | boolean | Hide disabled checkboxes. | false |
| tableHeader | boolean | Show or hide the table header. | false |
| pagination | boolean | Enable pagination for the table. | false |
| tableTitle | string | Title of the table. | none |
| searchValue | string | Value for the search field. | none |
| isFilterActive | boolean | Whether a filter is active. | false |
Variants
The <BTable /> fields must be filled, with this data::
| Property | Data Type | Description | Default Value |
|---|---|---|---|
| key | string | Unique key identifier for the column. | none |
| label | string | Display label for the column header. | none |
| thClass | string | Custom class for the column header (<th>). | none |
| sort | string | Key for sorting the column data. | none |
| child | string | Key for nested child data in the column. | none |
| disableSort | boolean | Disable sorting for this column if true. | false |