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.

Example Usage

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[] | {header: string; isFixed: boolean }[]

The text contents of one or more extra th elements to render in the table. Each header can be defined as either fixed (sticky) or scrollable. Should be used in conjunction with the item-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.

Slots

item-append - A slot rendered after the td elements on each row that render the properties of each item in the table. Should be provided zero or more additional td elements. The number should match the number of additional headers provided to the extraHeaders prop.