aeria-table

This component renders a styled table with some extra features. If used with stores, columns and rows can be passed in dynamically, but they can be still customized later with slots. HTML-style usage is also possible using thead, tbody, and tfoot slots.

Example

#	Name	Description
1	Example	This is an example row
2	Example	This is an example row
3	Example	This is an example row
4	Example	This is an example row
5	Example	This is an example row
6	Example	This is an example row
7	Example	This is an example row
8	Example	This is an example row
9	Example	This is an example row
10	Example	This is an example row

Usage with stores

<aeria-table
  v-bind="{
    columns: userStore.useProperties([
      'first_name',
      'last_name',
      'roles'
    ]),
    rows: userStore.items
}"></aeria-table>

Normal usage

<aeria-table>
  <template #thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </template>
  <template #tbody>
    <tr
      v-for="index in 10"
      :key="`row-${index}`"
    >
      <th>{{ index }}</th>
      <th>Example</th>
      <th>This is an example row</th>
    </tr>
  </template>
</aeria-table>