Data table simple
A responsive table using Bootstrap table . For further details about the properties used, refer to the official Bootstrap documentation. Familiarity with the capabilities of the base component is strongly recommended if expanding the functionality of this table.
Basic version
| Field name 1 | Item value 1 |
| Field name 2 | Item value 2 |
| Field name 3 | Item value 3 |
| Field name 4 | Item value 4 |
Striped
| Field name 1 | Item value 1 |
| Field name 2 | Item value 2 |
| Field name 3 | Item value 3 |
| Field name 4 | Item value 4 |
Side by side
| Field name 1 | Item value 1 |
| Field name 2 | Item value 2 |
| Field name 3 | Item value 3 |
| Field name 4 | Item value 4 |
| Field name 1 | Item value 1 |
| Field name 2 | Item value 2 |
| Field name 3 | Item value 3 |
| Field name 4 | Item value 4 |
Values only
| Item value 1 |
| Item value 2 |
| Item value 3 |
| Item value 4 |
Slot content
| Header text goes here |
|---|
| Field name 1 | Item value 1 |
|---|
| Field name 2 | Item value 2 |
|---|
| Field name 3 | Item value 3 |
|---|
EsDataTableSimple Props
- Name
fields
- Type
Array
- Default
null
- Description
- List of strings to use as field names.
- Name
items
- Type
Array
- Default
[]
- Description
- List of values to display.
- Name
table-class
- Type
Array|String
- Default
null
- Description
- CSS class (or classes) to apply to the table element.
- Name
reverse-stripes
- Type
Boolean
- Default
false
- Description
- Reverse the zebra striping so it applies to even-numbered table rows.
- Name
striped
- Type
Boolean
- Default
false
- Description
- Add zebra striping to odd-numbered table rows.