Vue Vuetify 3 Data Table

Simple Light Weight Data Table Component.

Demo

https://joyful-valkyrie-eb30c6.netlify.app

Features

• Render Jsx Element
• Sorts A-Z
• Pagination
• Style Customization
• Filter By Search

Usage/Examples

<script setup lang="ts">
import { DataTable } from "vv3-data-table"

const COLUMNS = {
  ID: {
    label: "Id",
    key: "id"
  },
  AVATAR: {
    label: "Avatar",
    key: "avatar"
  },
  FNAME: {
    label: "First Name",
    key: "firstname"
  },
  LNAME: {
    label: "Last Name",
    key: "lastname"
  },
  EMAIL: {
    label: "Email",
    key: "email"
  },
  ACTIONS: {
    label: "Actions",
    key: "actions"
  }
};

const DummyData = [
    {
        id: 1,
        image: "https://robohash.org/harumetodio.png?size=50x50&set=set1",
        fname: "Allan",
        lname: "Malthus",
        email: "[email protected]",
    }, 
    {
        id: 2,
        fname: "Fidel",
        image: "https://robohash.org/etenimaliquid.png?size=50x50&set=set1",
        lname: "Micheau",
        email: "[email protected]",
    }, 
    {
        id: 3,
        fname: "Virginie",
        image: "https://robohash.org/molestiasauterror.png?size=50x50&set=set1",
        lname: "Sergeant",
        email: "[email protected]",
    }, 
    {
        id: 4,
        fname: "Kristofor",
        image: "https://robohash.org/pariaturodioporro.png?size=50x50&set=set1",
        lname: "Izacenko",
        email: "[email protected]",
    }, 
    {
        id: 5,
        fname: "Brittan",
        image: "https://robohash.org/evenietconsequaturaliquam.png?size=50x50&set=set1",
        lname: "Oxshott",
        email: "[email protected]",
    }
]

</script>

<template>
    <data-table
        :data="DummyData" 
        :config="[
          {
            title: COLUMNS.ID,
            render: (data) => data?.id,
          },
          {
            title: COLUMNS.AVATAR,
          },
          {
            title: COLUMNS.FNAME,
            render: (data) => data?.fname,
            sortable: true
          },
          {
            title: COLUMNS.LNAME,
            render: (data) => data?.lname,
            sortable: true
          },
          {
            title: COLUMNS.EMAIL,
            render: (data) => data?.email,
            sortable: true
          },
          {
            title: COLUMNS.ACTIONS
          }
        ]">
        <template #avatar="{ data }">
          <v-avatar :image="data.image" />
        </template>
        <template #actions="{ data }">
          <v-icon>mdi-pencil</v-icon>
        </template>
      </data-table>
</template>

Badges

Support

https://www.buymeacoffee.com/sabihali

Authors

• @Sabih