Vue Table

Der @tanstack/vue-table Adapter ist ein Wrapper um die Kern-Tabellenlogik. Die meiste Arbeit besteht darin, den Zustand auf "Vue"-Art zu verwalten, Typen bereitzustellen und die Rendering-Implementierung von Zell-/Header-/Footer-Vorlagen zu liefern.

Exporte

Der @tanstack/vue-table exportiert alle APIs von @tanstack/table-core und die folgenden

useVueTable

Nimmt ein options Objekt entgegen und gibt eine Tabelle zurück.

import { useVueTable } from '@tanstack/vue-table'

const table = useVueTable(options)
// ...render your table

import { useVueTable } from '@tanstack/vue-table'

const table = useVueTable(options)
// ...render your table

FlexRender

Eine Vue-Komponente zum Rendern von Zell-/Header-/Footer-Vorlagen mit dynamischen Werten.

Beispiel

vue

import { FlexRender } from '@tanstack/vue-table'

<template>
  <tbody>
    <tr v-for="row in table.getRowModel().rows" :key="row.id">
      <td v-for="cell in row.getVisibleCells()" :key="cell.id">
        <FlexRender
          :render="cell.column.columnDef.cell"
          :props="cell.getContext()"
        />
      </td>
    </tr>
  </tbody>
</template>

import { FlexRender } from '@tanstack/vue-table'

<template>
  <tbody>
    <tr v-for="row in table.getRowModel().rows" :key="row.id">
      <td v-for="cell in row.getVisibleCells()" :key="cell.id">
        <FlexRender
          :render="cell.column.columnDef.cell"
          :props="cell.getContext()"
        />
      </td>
    </tr>
  </tbody>
</template>

Exporte

useVueTable

FlexRender

Bytes abonnieren

Bytes abonnieren