Welcome
VFlexTable
Vuero provides a custom table component called <VFlexTable />
. It looks like a table but is not an Html5 table. Instead, it uses the flexbox technology and is fully responsive. Check the markup for more details about usage.
Debugging objects
By default objects are not rendered. If you need to display they content for debugging purpose, you can add print-objects
attribute to the <VFlexTable />
.
[
{
"id": 0,
"picture": "/demo/avatars/25.jpg",
"initials": "AC",
"color": "info"
},
{
"id": 1,
"initials": "JP",
"color": "info"
},
{
"id": 2,
"picture": "/images/avatars/svg/vuero-1.svg",
"initials": "EK",
"color": "h-purple"
},
{
"id": 3,
"picture": "/demo/avatars/5.jpg",
"initials": "ML",
"color": "danger"
},
{
"id": 4,
"initials": "SC",
"color": "success"
}
]
[
{
"id": 4,
"initials": "SC",
"color": "h-purple"
}
]
[
{
"id": 12,
"initials": "BT",
"color": "success"
},
{
"id": 9,
"picture": "/demo/avatars/7.jpg",
"initials": "AC",
"color": "h-purple"
}
]
[
{
"id": 7,
"picture": "/demo/avatars/13.jpg",
"initials": "TS",
"color": "info"
}
]
[
{
"id": 0,
"picture": "/demo/avatars/25.jpg",
"initials": "AC",
"color": "info"
},
{
"id": 14,
"picture": "/demo/avatars/11.jpg",
"initials": "KL",
"color": "danger"
},
{
"id": 17,
"picture": "/demo/avatars/5.jpg",
"initials": "ML",
"color": "warning"
}
]
VFlexTable Props
Here is the full props available for <VFlexTable />
component:
Props | Default | Type |
---|---|---|
data | [] | Array<any> |
columns | undefined | Record<string, { label?: string align?: 'start' | 'center' | 'end' bold?: boolean inverted?: boolean scrollX?: boolean scrollY?: boolean grow?: boolean | 'lg' | 'xl' media?: boolean cellClass?: string format?: (value: any, row: any, index: number) => any renderHeader?: () => VNode renderRow?: (row: any, column: VFlexTableColumn, index: number) => VNode }> |
compact | false | boolean |
rounded | false | boolean |
subtable | false | boolean |
separators | false | boolean |
noHeader | false | boolean |
reactive | false | boolean |
clickable | false | boolean |
printObjects | false | boolean |
VFlexTable Events
Here is the full events available for <VFlexTable />
component:
Event | Callback | Description |
---|---|---|
@rowClick | (row: any) => void | Raised when a row is clicked Requires clickable props |
VFlexTable Slots
Here is the full slots available for <VFlexTable />
component:
Slot | Properties | Description |
---|---|---|
#header | null | All header area |
#header-column | <{ column: VFlexTableColumn }> | The header cell content |
#body | null | All body area |
#body-row-pre | <{ row: any, columns: Record<string, VFlexTableColumn>, index: number, }> | Display content before the row |
#body-row | <{ row: any, columns: Record<string, VFlexTableColumn>, index: number, }> | The row content |
#body-row-post | <{ row: any, columns: Record<string, VFlexTableColumn>, index: number, }> | Display content after the row |
#body-cell | <{ row: any, column: VFlexTableColumn, index: number, value: any, }> | The cell content |