Extension points

Everything createDataTable exposes stays reachable through the table prop you pass in — sort, selection, pagination, grouping — nothing is hidden behind this component. On top of that, three slots let you override rendering per field or per row:

<AdaptiveTable :table="table" :fields="fields">
  <template #cell-status="{ item, formatted }">
    <v-chip size="small" variant="flat" :color="statusColor[item.status]">{{ formatted }}</v-chip>
  </template>

  <template #card-status="{ item, formatted }">
    <v-chip size="small" variant="flat" :color="statusColor[item.status]">{{ formatted }}</v-chip>
  </template>

  <template #actions="{ item }">
    <v-btn size="small" variant="tonal" @click="edit(item)">Edit</v-btn>
  </template>
</AdaptiveTable>

View

Desktop Mobile

Ada Lovelace	Paid
Alan Turing	Pending
Grace Hopper	Paid

The desktop cell above is a real v-chip, not a look-alike — cell-{key} and card-{key} take any component the same way (v-avatar, v-icon, v-btn included), and actions renders once per row in both modes, also receiving isMobile so you can adapt a control that needs more room in one mode (an icon button in a dense table row vs. a full button on mobile, for instance). For a table using all three at once — avatars, chips, and per-row action buttons — see the Design system example in the demo.