@wts-data-table/vue

Official Vue 3 wrapper and Composition API integration for wts-data-table.

Installation

npm install wts-data-table @wts-data-table/vue vue

<script setup lang="ts">
import { shallowRef } from 'vue';
import { WtsDataTableVue } from '@wts-data-table/vue';
import { standardPreset } from 'wts-data-table/presets';
import 'wts-data-table/styles.css';

const table = shallowRef();
const state = shallowRef();
const options = {
  columnFilters: 'always',
  columns: [{ accessor: 'name', header: 'Name' }],
  features: standardPreset<Person>(),
  getRowId: (row: Person) => row.id,
};
</script>

<template>
  <WtsDataTableVue
    :data="people"
    :options="options"
    ref="table"
    v-model:state="state"
  >
    <template #header-name><strong>Person</strong></template>
    <template #cell-name="{ value }"><PersonLink :name="value" /></template>
    <template #filter-name="{ value, setValue }">
      <NameFilter :model-value="value" @update:model-value="setValue" />
    </template>
    <template #menu-name><FavoritePeopleAction /></template>
    <template #empty><CreatePersonButton /></template>
    <template #loading><PeopleSkeleton /></template>
    <template #footer><PeopleTotals /></template>
  </WtsDataTableVue>
</template>

Use createWtsDataTableVue<T>() for a component constructor with typed props, or useWtsDataTable<T>() for custom components. Row changes update the existing controller; changing the options object remounts it.

Use the generic cell, header, filter, and menu slots for every column, or the cell-{columnId}, header-{columnId}, filter-{columnId}, and menu-{columnId} forms for one column. detail, empty, loading, and footer are also scoped slots.

Feature arrays and presets are passed directly to the full renderer. Import focused modules from wts-data-table/features/*; no Vue plug-in registration is required.

Modular base renderer

Use WtsDataTableBaseVue, createWtsDataTableBaseVue<T>(), or useWtsDataTableBase<T>() when optional behavior must be tree-shaken:

<script setup lang="ts">
import { WtsDataTableBaseVue } from '@wts-data-table/vue';
import { selectionFeature } from 'wts-data-table/features/selection';
import 'wts-data-table/base.css';

const options = {
  columns: [{ accessor: 'name', header: 'Name' }],
  features: [selectionFeature({ mode: 'multiple' })],
  getRowId: (row: Person) => row.id,
};
</script>

<template><WtsDataTableBaseVue :data="people" :options="options" /></template>

The exposed controller is DataTableBase<T>. Framework-owned scoped slots remain a capability of WtsDataTableVue; base features render portable DOM.