vue-pe-library v0.0.7

vue-pe-library

Vue FrontEnd Library

This library will contain the main components need it to build and applications.

Instalation

npm i vue-pe-library

PeTable

<PeTable/>

How to display data ?

// You should provide headers and records.
// Example: 

<script setup lang="ts">
    import {PeTable} from "vue-pe-library";

    // Headers should have the following structure. 
    let headers = [ { title: 'Id', name: 'id' }, { title: 'Brand', name: 'brand' } ]
    let records = [ { id: 1, brand: 'Kiat' }, { id: 2, brand: 'Chevrolet' }, { id: 3, brand: 'Toyota' } ]
</script>

<template> 
    <PeTable :headers="headers" :records="records" />
</template>

Table Pagination

// Add numRecords property to implement the pagination.
// Example: 

<script setup lang="ts">
    import {PeTable} from "vue-pe-library";

    // Headers should have the following structure. 
    let headers = [ { title: 'Id', name: 'id' }, { title: 'Brand', name: 'brand' } ]
    let records = [ { id: 1, brand: 'Kia' }, { id: 2, brand: 'Chevrolet' }, { id: 3, brand: 'Toyota' }, { id: 4, brand: 'Ford' }, { id: 5, brand: 'Fiat' }, { id: 6, brand: 'Mercedes Benz' }  ]
</script>

<template> 
    <PeTable :headers="headers" :records="records" :numRecords="5"/>
</template>

Sorting Headers (Asc/Desc)

// Add order property to implement the sorting.
// Example: 

<script setup lang="ts">
    import {PeTable} from "vue-pe-library";

    // Headers should have the following structure. 
    let headers = [ { title: 'Id', name: 'id' }, { title: 'Brand', name: 'brand' } ]
    let records = [ { id: 1, brand: 'Kia' }, { id: 2, brand: 'Chevrolet' }, { id: 3, brand: 'Toyota' }, { id: 4, brand: 'Ford' }, { id: 5, brand: 'Fiat' }, { id: 6, brand: 'Mercedes Benz' }  ]
</script>

<template> 
    <PeTable :headers="headers" :records="records" :order="true"/>
</template>

Table or Grid

// Add multipleViews property to implement the change view option.
// Example: 

<script setup lang="ts">
    import {PeTable} from "vue-pe-library";

    // Headers should have the following structure. 
    let headers = [ { title: 'Id', name: 'id' }, { title: 'Brand', name: 'brand' } ]
    let records = [ { id: 1, brand: 'Kia' }, { id: 2, brand: 'Chevrolet' }, { id: 3, brand: 'Toyota' }, { id: 4, brand: 'Ford' }, { id: 5, brand: 'Fiat' }, { id: 6, brand: 'Mercedes Benz' }  ]
</script>

<template> 
    <PeTable :headers="headers" :records="records" :multipleViews="true"/>
</template>

Filter & Searching

// Add filter property to implement the searching functionality.
// Example: 

<script setup lang="ts">
    import {PeTable} from "vue-pe-library";

    // Headers should have the following structure. 
    let headers = [ { title: 'Id', name: 'id' }, { title: 'Brand', name: 'brand' } ]
    let records = [ { id: 1, brand: 'Kia' }, { id: 2, brand: 'Chevrolet' }, { id: 3, brand: 'Toyota' }, { id: 4, brand: 'Ford' }, { id: 5, brand: 'Fiat' }, { id: 6, brand: 'Mercedes Benz' }  ]
</script>

<template> 
    <PeTable :headers="headers" :records="records" :filter="true"/>
</template>