# vueye-table

> A Vue framework for data tables and spreadsheets: a complete, themeable data table and grid, plus every layer beneath them.

Latest version **3.0.0-alpha.1** (published 2026-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install vueye-table
pnpm add vueye-table
yarn add vueye-table
bun add vueye-table
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.0-alpha.1 |
| Published | 2026-09-30 |
| First published | 2020-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=22.12.0 |
| Dependencies | 4 |
| Unpacked size | 71.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 111 |
| Maintainers | boussadjra |
| Keywords | data-grid, data-table, spreadsheet, table, vue, vue3 |

## Links

- npm: https://www.npmjs.com/package/vueye-table
- Repository: https://github.com/boussadjra/vueye-table
- Homepage: https://github.com/boussadjra/vueye-table#readme
- Issues: https://github.com/boussadjra/vueye-table/issues
- npm.io page: https://npm.io/package/vueye-table

## Dependencies (4)

- [@vueye-table/vue](https://npm.io/package/@vueye-table/vue.md) 3.0.0-alpha.1
- [@vueye-table/core](https://npm.io/package/@vueye-table/core.md) 3.0.0-alpha.1
- [@vueye-table/styled](https://npm.io/package/@vueye-table/styled.md) 3.0.0-alpha.1
- [@vueye-table/headless](https://npm.io/package/@vueye-table/headless.md) 3.0.0-alpha.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 3.0.0-alpha.1 (latest) — 2026-09-30
- 1.0.0-beta.4 (beta) — 2020-05-05
- 2.0.0-alpha.14 — 2024-03-16
- 2.0.0-alpha.13 — 2024-03-16
- 2.0.0-alpha.12 — 2024-03-09
- 2.0.0-alpha.10 — 2023-11-19
- 2.0.0-alpha.9 — 2023-11-18
- 2.0.0-alpha.8 — 2023-11-05
- 2.0.0-alpha.7 — 2023-11-05
- 2.0.0-alpha.6 — 2023-10-28
- 2.0.0-alpha.5 — 2023-10-03
- 2.0.0-alpha.4 — 2023-10-02
- 2.0.0-alpha.3 — 2023-09-28
- 2.0.0-alpha.2 — 2023-09-06
- 2.0.0-alpha.1 — 2023-08-26
- … 19 more at https://npm.io/package/vueye-table/versions

## README

# vueye-table

A Vue framework for data, data tables, and spreadsheets.

vueye-table began as a single table component. Version 3 is a rewrite around one idea: a table is
data plus state plus operations, and rendering is a separate concern. A framework-independent
engine owns searching, filtering, sorting, pagination, selection, column visibility, editing,
undo, clipboard, and export. Vue layers sit on top of it, and you pick the one that fits:

| Layer               | Package                 | Use it when                                                |
| ------------------- | ----------------------- | ---------------------------------------------------------- |
| Full UI             | `vueye-table`           | You want a complete table or spreadsheet in one tag.       |
| Styled components   | `@vueye-table/styled`   | You want the look, arranged your own way.                  |
| Headless components | `@vueye-table/headless` | You want accessible behavior with your own markup and CSS. |
| Vue composables     | `@vueye-table/vue`      | You want reactive state and nothing rendered.              |
| Engine              | `@vueye-table/core`     | You are outside Vue, on a server, or writing a binding.    |
| Nuxt module         | `@vueye-table/nuxt`     | You use Nuxt 4.                                            |

Each layer depends only on the layers beneath it, and `vueye-table` re-exports all of them, so
one install covers every level.

> **Status:** `3.0.0-alpha`. The API is provisional and may change between alpha releases. The
> 2.x component lives on the [`legacy`](https://github.com/boussadjra/vueye-table/tree/legacy)
> branch; see [Upgrading from 2.x](./docs/guide/upgrading-from-2.md).

## Install

```bash
pnpm add vueye-table
```

Vue 3.5 or newer is a peer dependency.

## Full table

```vue
<script setup lang="ts">
import "vueye-table/style.css";
import { ref } from "vue";
import { VueyeTable, defineColumns, type RowKey } from "vueye-table";

interface User {
  id: number;
  name: { first: string; last: string };
  age: number;
  city: string;
}

const users: User[] = [
  { id: 1, name: { first: "Ada", last: "Lovelace" }, age: 36, city: "London" },
  { id: 2, name: { first: "Alan", last: "Turing" }, age: 41, city: "Wilmslow" },
];

const columns = defineColumns<User>([
  { id: "name.first", header: "First name" },
  { id: "name.last", header: "Last name" },
  { id: "age", align: "end", format: (age) => `${age} years` },
  { id: "city" },
]);

const selected = ref<readonly RowKey[]>([]);
</script>

<template>
  <VueyeTable v-model:selected="selected" :data="users" :columns="columns" selectable striped>
    <template #cell.city="{ value }">
      <strong>{{ value }}</strong>
    </template>
  </VueyeTable>
</template>
```

Column ids are typed paths into your rows, so `format` above receives a `number`. Without
`columns`, columns are inferred from the data.

Every piece of state has a `v-model`: `page`, `pageSize`, `sorting`, `search`, `filters`,
`hiddenColumns`, and `selected`. Add `manual` and `row-count` to let a server search, sort, and
page, with the table presenting whatever page it returns.

## Spreadsheet

```vue
<VueyeGrid v-model:data="lines" :columns="columns" column-letters />
```

Cells edit in place. Arrows, Tab, Home, and End move; Shift extends the range; Enter or typing
starts an edit; Delete clears; and copy, cut, paste, undo, and redo behave like a spreadsheet
application. Each edit emits a new array; the one you passed in is never mutated. Text is parsed
by the column's type, and a value that cannot be read is refused and reported through
`edit-error`.

## Headless

```vue
<script setup lang="ts">
import { DataTableRoot, DataTablePagination, DataTableSearch, useDataTable } from "vueye-table";

const table = useDataTable({ data: users, columns });
</script>

<template>
  <DataTableRoot :table="table" as="div">
    <DataTableSearch />
    <article v-for="row in table.rows" :key="row.key">{{ row.getDisplay("name.first") }}</article>
    <DataTablePagination />
  </DataTableRoot>
</template>
```

Headless components render semantic, accessible markup (`aria-sort`, `aria-selected`,
`aria-rowindex`, a polite live status, grid keyboard navigation) with `data-*` state attributes
and no styles. Every one accepts `as` and exposes its state through slot props.

## Engine

```ts
import { createTable } from "@vueye-table/core";

const table = createTable({ data: users, columns: [{ id: "age" }, { id: "city" }] });
table.search("lon");
table.toggleSort("age");
table.getSnapshot().rows; // the current page
table.exportRows(); // CSV of every filtered row
```

The state is plain serializable data, so it can be saved, restored, sent to a server, or kept in
the URL.

## Nuxt

```ts
export default defineNuxtConfig({
  modules: ["@vueye-table/nuxt"],
});
```

The module auto-imports `<VueyeTable>`, `<VueyeGrid>`, `useDataTable`, `useDataGrid`, and
`defineColumns`, and adds the stylesheet. Set `vueyeTable: { layers: true }` to also register the
headless and styled components.

## Theming

The styled layer is driven by CSS custom properties on `.vt-surface`:

```css
.vt-surface {
  --vt-accent: #0f766e;
  --vt-radius: 4px;
  --vt-font-size: 0.8125rem;
}
```

Dark colors follow `prefers-color-scheme`; `theme="dark"` or `theme="light"` forces one.
Density is `compact`, `comfortable`, or `spacious`.

## Development

```bash
pnpm install
pnpm playground      # every layer, side by side
pnpm test            # every Vitest project
pnpm check           # format, lint, types, tests with coverage, build, boundaries, packages
```

Architecture lives in [ARCHITECTURE.md](./ARCHITECTURE.md) and decisions in
[docs/adr](./docs/adr).

## License

[MIT](./LICENSE)

---
_Source: https://npm.io/package/vueye-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._