JTableVue3

A powerful and flexible Vue 3 data table component with rich features for displaying, filtering, and managing tabular data.

Features

• ✅ Powerful data filtering (search, date ranges, column filters)
• ✅ Pagination with customizable limits
• ✅ Multiple data display types (text, badge, select, switch, checkbox, date)
• ✅ Sortable columns
• ✅ Pill filters for quick data segmentation
• ✅ Action buttons for row operations
• ✅ Support for both local and remote data sources
• ✅ Loading state handling
• ✅ Fully customizable through configuration

Installation

npm install jtablevue3

Basic Usage

1. Import the component:

import { JTable } from 'jtablevue3'

2. Register it in your Vue component:

export default {
  components: {
    JTable
  }
}

3. Use it in your template:

<template>
  <JTable 
    :config="config" 
    :loading="loading" 
    @table-setting="handleSetting" 
    @table-event="handleAction" 
    @filter-event="handleFilter"
  />
</template>

4. Configure your table:

const config = ref({
  data: users,
  settings: {
    total: users.length,
    showHeader: true,
    showTitle: true,
    title: "Users",
    showDateFilter: true,
    showPillFilter: true,
    showSearchFilter: true,
    showActions: true,
    // ... additional settings
  },
  header: [
    { 
      type: 'text',
      value: 'name',
      label: 'Full Name' 
    },
    { 
      type: 'badge',
      value: 'status',
      label: 'Status',
      options: [
        { label: 'Active', value: 'active', color: 'success', icon: 'fa-solid fa-gauge' },
        { label: 'Inactive', value: 'inactive', color: 'secondary', icon: 'fa-solid fa-gauge' },
      ] 
    },
    // ... more columns
  ]
})

Event Handling

const handleSetting = (event) => {
  // Handle pagination and other table settings changes
  console.log(event.name, event.data);
}

const handleAction = (event) => {
  // Handle row actions like edit, delete, etc.
  console.log(event.name, event.data);
}

const handleFilter = (event) => {
  // Handle filtering events
  console.log(event.name, event.data);
}

Example Configuration

const config = ref({
  data: users,
  settings: {
    total: users.length,
    showHeader: true,
    showDateFilter: true,
    showTitle: true,
    title: "Employee",
    dateFilter: {
      filterBy: "appliedDate",
      presetValue: 'today',
    },
    showPillFilter: true,
    pillFilterReference: 'role',
    pillFilters: [
      { count: 5, label: `Admin`, value: "admin", color: "#007bff", icon: "fa-solid fa-shield-alt" },
      { count: 12, label: `User`, value: "user", color: "#6c757d", icon: "fa-solid fa-user" }
    ],
    showSearchFilter: true,
    showActions: true,
    actionsButtons: [
      { 
        label: 'Edit', 
        color: '#007bff', 
        icon: 'fa-solid fa-edit', 
        emitName: 'edit-user' 
      },
      { 
        label: 'Delete', 
        color: '#dc3545', 
        icon: 'fa-solid fa-trash', 
        emitName: 'delete-user' 
      }
    ]
  },
  header: [
    { type: 'text', value: 'id', label: 'ID' },
    { type: 'text', value: 'name', label: 'Full Name' },
    { 
      type: 'badge',
      value: 'status',
      label: 'Status',
      options: [
        { label: 'Active', value: 'active', color: 'success', icon: 'fa-solid fa-gauge' },
        { label: 'Inactive', value: 'inactive', color: 'secondary', icon: 'fa-solid fa-gauge' }
      ] 
    },
    { 
      type: 'select',
      value: 'role',
      label: 'Role',
      options: [
        { label: 'Admin', value: 'admin' },
        { label: 'User', value: 'user' }
      ] 
    },
    { type: 'switch', value: 'isVerified', label: 'Verified' },
    { type: 'date', value: 'createdAt', label: 'Created At' }
  ]
})

For More Documentation

For complete documentation, visit: https://quanduck/projects/jtablevue3