tablevu (alpha version)

Simple javasript table for vuejs 3.x (Doesn't work with vuejs 2.x)

• No Dependencies

• Working with javascript array or server side (odata or default request)

• Sorting

• Filtering

• Custom column rendering

• ...

Install

npm install tablevu

Usage

• data : Array or Server side parameters

• grouping : Grouping data specific column or function

• filter : Reactive filter value

• search : Reactive search value

• rowid : Key value for row.

• class : Table class name. (default "table")

• buttonclass : Arrow buttons class name (default "btn")

• onRowClick : Row click event

• onRowDblClick : Row double click event

• columns

  • name : Column name

  • label : Column label

  • searchable : Column is searchable (default true)

  • orderable : Column is orderable (default true)

  • width : Column width

  • align : Column align

  • style : Column style

  • type : Data type (datetime, date, time, numeric). Show local value

  • render : Render value

Samples

• odata sample (Coming soon..)
• search sample (Coming soon..)

odata sample

<template>
  <tablevu :data="grid" rowid="OrderId" />
</template>

<script>
import { tablevu, odata } from 'tablevu'

export default {
  name: 'App',
  components: {
    tablevu
  },
  setup() {
    const prm = {
      url: `https://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json`,
      header: { 'Content-Type': 'application/json;odata=verbose' },
      select: ['OrderID', 'OrderDate', 'ShipName', 'ShipAddress'],
      expand: [
      ]
    };

    const grid = {
      adapter: (grd) => {
        return odata(prm, grd);
      },
      pageSize: 10,
      columns: [
        { name: 'OrderID', label: 'id', width: '26rem' },
        { name: 'OrderDate', label: 'name', width: '26rem' },
        { name: 'ShipName', label: 'name', width: '26rem' },
        { name: 'ShipAddress', label: 'name', width: '26rem' },
      ]
    }

    return { grid }
  }
}
</script>

Dev. Dependencies

• Vuejs 3.0+

Browser Support

Modern browsers.

Authors

endb

License

tablevu is open-sourced software licensed under the MIT license.