vue-easy-data-table

A Vue 3 data table with sorting, search, pagination, selection, fixed columns, and slots — plus opt-in virtual rows, grouped headers, and better server-side DX.

This is an actively maintained fork of vue3-easy-data-table. 1.7.1 is drop-in compatible with upstream 1.5.x; new APIs are additive.

npm install vue-easy-data-table

Why this fork

Upstream last published in 2023. This package keeps the same component API and CSS class hooks, and ships fixes plus features that were stuck as README todos:

Vue is a peer (^3.4.0 || ^3.5.0), not bundled.

Install

npm install vue-easy-data-table
# or: pnpm add vue-easy-data-table / yarn add vue-easy-data-table

Register globally (or import per component):

import Vue3EasyDataTable from 'vue-easy-data-table';
import 'vue-easy-data-table/dist/style.css'; // required — this exact path

app.component('EasyDataTable', Vue3EasyDataTable);
// or: import { Vue3EasyDataTable as EasyDataTable } from 'vue-easy-data-table';

Types (Header, Item, ServerOptions, …) and aggregator helpers (computeSummaryValue, …) come from the package root.

Quick start

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
    item-key="name"
  />
</template>

<script setup lang="ts">
import type { Header, Item } from 'vue-easy-data-table';

const headers: Header[] = [
  { text: 'Name', value: 'name' },
  { text: 'Height (cm)', value: 'height', sortable: true },
  { text: 'Weight (kg)', value: 'weight', sortable: true },
  { text: 'Age', value: 'age', sortable: true },
];

const items: Item[] = [
  { name: 'Curry', height: 178, weight: 77, age: 20 },
  { name: 'James', height: 180, weight: 75, age: 21 },
  { name: 'Jordan', height: 181, weight: 73, age: 22 },
];
</script>

Copy-paste patterns (search, selection, server mode, virtual, grouped headers): docs/RECIPES.md.
Full props / slots / emits / CSS variables: docs/API.md.

Features

Client mode (default): pass items; the table searches, filters, sorts, and paginates locally.

Server mode: set v-model:server-options (non-null) plus server-items-length. The parent owns fetch / sort / page; client search and filter are skipped.

Use item-key ("id", "meta.uuid", …) on large, selectable, or virtual tables.

Migrating from vue3-easy-data-table

npm uninstall vue3-easy-data-table
npm install vue-easy-data-table

// before
import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

// after
import Vue3EasyDataTable from 'vue-easy-data-table';
import 'vue-easy-data-table/dist/style.css';

Component name, props, slots, emits, and CSS classes stay the same. Details: MIGRATION.md.

Docs

CDN

<link href="https://unpkg.com/vue-easy-data-table/dist/style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-easy-data-table"></script>

<div id="app">
  <easy-data-table :headers="headers" :items="items" />
</div>

<script>
  const App = {
    components: {
      EasyDataTable: window['vue3-easy-data-table'].default, // or .Vue3EasyDataTable
    },
    data() {
      return {
        headers: [
          { text: 'Name', value: 'name' },
          { text: 'Age', value: 'age', sortable: true },
        ],
        items: [
          { name: 'Curry', age: 20 },
          { name: 'James', age: 21 },
        ],
      };
    },
  };
  Vue.createApp(App).mount('#app');
</script>

The UMD global is still vue3-easy-data-table (dist filename unchanged for compatibility).

License

MIT. Thanks to everyone who filed issues and feature requests on the original project and this fork.