Skip to content

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:

template
<c-table :list="list" />

A more complex example using more of the available options:

template
<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 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.


Coalesce is a free and open-source framework created by IntelliTect to fill our desire to create better apps, faster. IntelliTect is a high-end software architecture and development consulting firm based in Spokane, Washington.

If you're looking for help with your software project, whether it be a Coalesce application, other technologies, or even just an idea, reach out to us at info@intellitect.com — we'd love to start a conversation! Our clients range from Fortune 100 companies to local small businesses and non-profits.