@xmehdi01/vue-table-component v0.0.3

vue-table-component 💫

========================

Simple and easy table component to use for Vue.js, designed to handle pagination, sorting, filtering, and custom rendering of data.

• Try: DEMO
• Install: NPM
• Source code: Github

Installation ⚙️

npm i @xmehdi01/vue-table-component

Component using 🚀

<template>
  <table-component
    :headers="headers"
    :items="items"
    :items-per-page="3"
    :custom-filter="customFilter"
    :multi-sort="true"
    :loading="loading"
    :loading-text="loadingText"
    :search-query="searchQuery"
  >
    <template v-slot:search>
      <input type="text" v-model="searchQuery" />
    </template>
    <template v-slot:name="slotProps">
      {{ slotProps.item.name }}
    </template>
    <template v-slot:age="slotProps">
      <span :class="{ 'slot-highlight': slotProps.item.age < 18 }">{{
        slotProps.item.age
      }}</span>
    </template>
  </table-component>
</template>

<script>
import TableComponent from "@xmehdi01/vue-table-component";

export default {
  name: "PageView",
  components: {
    MyTable,
  },
  data() {
    return {
 headers: [
        { name: "name", label: "Name" },
        { name: "age", label: "Age" },
        { name: "email", label: "Email" },
      ],
      items: [
        { name: "Alice", age: 25, email: "alice@example.com" },
        { name: "Bob", age: 30, email: "bob@example.com" },
        { name: "Charlie", age: 20, email: "charlie@example.com" },
        { name: "David", age: 18, email: "david@example.com" },
        { name: "Eve", age: 40, email: "eve@example.com" }
        ],
      searchQuery: "",
      loading: false,
      loadingText: "Loading...",
    };
  },
  methods: {
    customFilter(items, searchQuery) {
      return items.filter((item) =>
        item.name.toLowerCase().includes(searchQuery.toLowerCase())
      );
    },
  },
}

License 📝

This component is licensed under the MIT License.