@flextable/vue

Vue 3 data table built on TanStack Vue Table: FlexTable.vue, composables, and the Vue column-def render layer for @flextable/core's ColumnFactory. Container-query responsive, fully overridable via scoped slots and classNames, ships a precompiled stylesheet — no Tailwind required in your app.

Install

bun add @flextable/core @flextable/vue @flextable/vue-ui @tanstack/vue-table

@flextable/vue-ui is optional — it ships the default reka-ui-based primitives used by toVueColumnDef(). Bring your own by passing a components override instead.

import '@flextable/vue-ui/styles.css';
import '@flextable/vue/styles.css';

Quick start

<script setup lang="ts">
import { ColumnFactory } from '@flextable/core';
import { FlexTable, toVueColumnDef } from '@flextable/vue';
import { computed } from 'vue';

interface User {
  id: string;
  name: string;
  email: string;
}

const props = defineProps<{ users: Array<User> }>();
const t = (key: string) => key;

const columns = computed(() => {
  const factory = new ColumnFactory<User>(t);
  return [
    factory.select(),
    factory.name({ accessorKey: 'name', getTitle: (u) => u.name, getDescription: (u) => u.email }),
    factory.actions({ onEdit: (u) => console.log('edit', u), onDelete: (ids) => console.log(ids) }),
  ].map((config) => toVueColumnDef<User>(config, { t }));
});
</script>

<template>
  <FlexTable :columns="columns" :data="props.users" :t="t" />
</template>

That's sortable headers, client-side fuzzy search, pagination, and row selection out of the box. Flip individual pieces (serverSideSorting, serverSideFiltering, serverSidePagination) to server-side independently as your dataset grows.

Docs

Full guides — theming, i18n, server-side pagination/filtering/sorting, the CRUD add-on package — and the generated API reference live at donilite.github.io/Flextable.

License

Apache-2.0