@carsalhaz/vue-data-table v1.0.9

Vue Data Table

A flexible data table component for Vue 3.

Installation

npm install @carsalhaz/vue-data-table

Requirements

This component requires the following peer dependencies:

{
  "vue": "^3.0.0",
  "@phosphor-icons/vue": "^2.0.0",
  "@headlessui/vue": "^1.0.0",
  "@vueuse/core": "^10.0.0",
  "tailwindcss": "^3.0.0"
}

Make sure your application has these packages installed and that Tailwind CSS is properly configured.

Usage

<script setup>
// default import first, then the renderers that are being used
import DataTable, {
  ClientCell,
  DateCell,
  ItemsCell,
  MoneyCell,
  IsPaidCell,
} from '@carsalhaz/vue-data-table';

<template>
  <DataTable
    :data="tableData"
    :columns="columns"
    :searchable-columns="['name', 'email']"
    :filters="filters"
    :actions="actions"
    @selection-change="handleSelectionChange"
    @toggle-update="handleToggleUpdate"
    @action="handleAction"
  />
</template>

// Your component logic here...
</script>