c-table¶
A table component for displaying the contents of a ListViewModel. Also supports modifying the list's sort parameters by clicking on column headers. Pairs well with a c-list-pagination.
Examples¶
A simple table, rendering the items of a ListViewModel:
<c-table :list="list" />
A more complex example using more of the available options:
<c-table
:list="list"
:props="['firstName', 'lastName']"
:extra-headers="['Actions']"
>
<template #item.append="{item}">
<td>
<v-btn
title="Edit"
text icon
:to="{name: 'edit-person', params: { id: item.$primaryKey }}"
>
<i class="fa fa-edit"></i>
</v-btn>
</td>
</template>
</c-table>
Props¶
list: ListViewModel
- The ListViewModel to display pagination information for.
props?: string[]
If provided, specifies which properties, and their ordering, should be given a column in the table.
If not provided, all non-key columns that aren't annotated with [Hidden(HiddenAttribute.Areas.List)] are given a column.
extraHeaders?: string[]
- The text contents of one or more extra
th
elements to render in the table. Should be used in conjunction with theitem.append
slot. editable: boolean = false
- If true, properties in each table cell will be rendered with c-input. Non-editable properties will be rendered in accordance with the value of the
admin
prop. admin: boolean = false
- If true, properties in each table cell will be rendered with c-admin-display instead of c-display.