Table

Last modified by Thiago Krieck on 2023/12/05 12:07

Shoelace

Shoelace does not have a table component, it should be done as a custom element.

vue-dsfr

https://vue-dsfr.netlify.app/?path=/docs/composants-dsfrtable--docs

<template>
  <DsfrTable
    :title="title"
    :headers="headers"
    :rows="rows"
    :no-caption="noCaption"
    :pagination="pagination"
    :defaultCurrentPage="defaultCurrentPage"
    :defaultOptionSelected="defaultOptionSelected"
  />
</template>

Vuetify

https://vuetifyjs.com/en/components/tables/

<v-table>
    <thead>
      <tr>
        <th class="text-left">
          Name
        </th>
        <th class="text-left">
          Calories
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
v-for="item in desserts"
:key="item.name"
      >
        <td>{{ item.name }}</td>
        <td>{{ item.calories }}</td>
      </tr>
    </tbody>
  </v-table>

Get Connected