https://github.com/dacsang97/tanstack-table-vue
TanStack Table Vue is a wrapper library that simplifies using TanStack Table (formerly React Table) with Vue.js. It eliminates the need for JSX and render functions by leveraging Vue's scoped slots and template system.
https://github.com/dacsang97/tanstack-table-vue
no-jsx tanstack-table vue
Last synced: about 1 month ago
JSON representation
TanStack Table Vue is a wrapper library that simplifies using TanStack Table (formerly React Table) with Vue.js. It eliminates the need for JSX and render functions by leveraging Vue's scoped slots and template system.
- Host: GitHub
- URL: https://github.com/dacsang97/tanstack-table-vue
- Owner: dacsang97
- License: mit
- Created: 2025-04-08T06:21:59.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-04-14T03:51:34.000Z (11 months ago)
- Last Synced: 2026-01-28T16:51:55.052Z (about 1 month ago)
- Topics: no-jsx, tanstack-table, vue
- Language: TypeScript
- Homepage:
- Size: 98.6 KB
- Stars: 10
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# TanStack Table Vue
> **No more render functions, just Vue!** — Simple, type-safe TanStack Table integration for Vue.js
TanStack Table Vue is a wrapper library that simplifies using TanStack Table (formerly React Table) with Vue.js. It eliminates the need for JSX and render functions by leveraging Vue's scoped slots and template system.
## 🌟 Features
- ✅ **No JSX Required** - Define columns with plain objects, not render functions
- ✅ **Vue Idiomatic** - Uses scoped slots and Vue template syntax
- ✅ **Type-Safe** - Full TypeScript support with generics
- ✅ **Flexible** - Supports all TanStack Table features including sorting, grouping, and more
- ✅ **Simple API** - Easy to understand and use
- ✅ **Lightweight** - Minimal abstraction over TanStack Table
## 📦 Installation
```bash
# npm
npm install tanstack-table-vue @tanstack/vue-table
# yarn
yarn add tanstack-table-vue @tanstack/vue-table
# pnpm
pnpm add tanstack-table-vue @tanstack/vue-table
# bun
bun add tanstack-table-vue @tanstack/vue-table
```
## 🚀 Quick Start
```vue
import { TSTable } from 'tanstack-table-vue'
import { createColumnHelper, getCoreRowModel, getSortedRowModel } from '@tanstack/vue-table'
interface Person {
firstName: string
lastName: string
age: number
visits: number
status: string
progress: number
}
const data: Person[] = [
{
firstName: 'tanner',
lastName: 'linsley',
age: 24,
visits: 100,
status: 'In Relationship',
progress: 50,
},
{
firstName: 'tandy',
lastName: 'miller',
age: 40,
visits: 40,
status: 'Single',
progress: 80,
},
]
const columnHelper = createColumnHelper<Person>()
const columns = [
columnHelper.group({
id: 'name',
header: 'Name',
columns: [columnHelper.accessor('firstName', {}), columnHelper.accessor('lastName', {})],
}),
columnHelper.group({
id: 'info',
header: 'Info',
columns: [
columnHelper.accessor('age', {}),
columnHelper.group({
id: 'moreInfo',
header: 'More Info',
columns: [
columnHelper.accessor('visits', {}),
columnHelper.accessor('status', {}),
columnHelper.accessor('progress', {}),
],
}),
],
}),
]
const tableOptions = {
getSortedRowModel: getSortedRowModel(),
getCoreRowModel: getCoreRowModel(),
}
First Name
🔽
🔼
⏺️
{{ value }}
```
### Available Slots
Customize your table with these scoped slots:
- `#cell-{columnId}="{ value, row, cell }"` - Custom cell rendering
- `#header-{columnId}="{ column, header }"` - Custom header rendering with sorting support
- `#footer-{columnId}="{ column, footer }"` - Custom footer rendering
## 🔄 Column Definition
The library supports two ways to define columns:
1. Using `columnHelper.accessor`:
```typescript
// Simple accessor
columnHelper.accessor('firstName', {})
// With group
columnHelper.group({
id: 'name',
header: 'Name',
columns: [columnHelper.accessor('firstName', {}), columnHelper.accessor('lastName', {})],
})
```
2. Using `columnHelper.display` for custom columns:
```typescript
columnHelper.display({
id: 'actions',
cell: () => 'Actions',
})
```
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📄 License
[MIT](LICENSE)