Vue DataTable

A Vue 3 data table component using TanStack Table and shadcn/vue.

Installation

npm install raftel-vue-datatable

Dependencies

This package requires the following peer dependencies:

npm install @tanstack/vue-table lucide-vue-next

Required shadcn/vue components

Install the required shadcn/vue components:

npx shadcn-vue@latest add table
npx shadcn-vue@latest add button
npx shadcn-vue@latest add dropdown-menu
npx shadcn-vue@latest add select
npx shadcn-vue@latest add input
npx shadcn-vue@latest add badge
npx shadcn-vue@latest add separator
npx shadcn-vue@latest add popover
npx shadcn-vue@latest add command

Usage

<script setup lang="ts">
import { DataTable } from 'raftel-vue-datatable'
import type { ColumnDef } from '@tanstack/vue-table'

const columns: ColumnDef[] = [
  // Define your columns
]

const data = [
  // Your data array
]
</script>

<template>
  <DataTable 
    :columns="columns" 
    :data="data" 
  />
</template>

Documentation

[Link to your documentation]

License

MIT