vue-coe-table ✅

This library was inspired by vue-data-tablee

✨ Example✨

Install

yarn add vue-coe-table@latest (package has not been registered yet)

Include Plugin

import Vue from 'vue'

import CoeTable from 'vue-coe-table'

Vue.use(CoeTable)

You can also import just components you need, without installing globally.

<script>
import CoeTable from 'vue-coe-table'

export default {
  components: { CoeTable }
  ...
}
</script>

Basic Example

<template>
  <table-builder :cols="cols" :rows="rows" />
</template>

<script>
  ...
  
  data () {
    return {
      cols: [
        { label: 'Nome', row: 'name' },
        { label: 'E-mail', row: 'email' },
        { label: 'Idade', row: 'age' }
      ],
      rows: [
        { name: 'coe1', email: 'coe1@gmail.com', age: 6 },
        { name: 'coe2', email: 'coe2@gmail.com', age: 3 },
        { name: 'coe3', email: 'coe3@gmail.com', age: 2 }
      ]
    }
  },
  
  ...
}

</script>

Full Example

<template>
  <table-builder
    :cols="cols"
    :rows="rows"
    :total="total"
    :search="search"
    :search-params="['name']"
    :checkeds.sync="checkeds"
    :current-page="2"
    :per-page="5"
    gap="x"
    @search="v => search = v"
    max-height="300"
    paginable
    selectable
    sortable
    pagination-type="ellipsised"
  />
</template>

Component Props

Name	Type	Default	Required	About
cols	Array<Obj>		true	Cols list
rows	Array<Obj>		true	Rows list
total	Object		true	Total list
gap	String	''	false	Empty cell's character
maxHeight	String		false	Set fixed table size. Obs: It does not work with pagination!
search	String		false(*)	Is required if 'search-params' is set
searchParams	Array<Str>		false	Must correspond some property of the row (accepts multiple options)
selectable	Boolean	false	false	Add checkbox column to select a row. It emits event on change
sortable	Boolean	false	false	Add option to sort the fields by clicking the column icon
paginable	Boolean	false	false	Adds pagination
paginationType	String	false	false	Has two types: 'full' and 'ellipsised'
paginate	Object	{}	false	If your pagination comes from an API
currentPage	Number, String	1	false	Current page.
perPage	Number, String	10	false	Obs: needs to be greater than 2
pagesLimit	Number, String	false	false	Obs: needs to be greater than 3

Slots

You can generate the table automatically, or use slots

Options:

• actions
• col => slot-scope="{ col }
• icon-sortable
• row => slot-scope="{ row, cols }
• total