@livelybone/vue-table

pkg.module supported, which means that you can apply tree-shaking in you project

A vue table component, support width change.

Prop heads has changed since 2.0.0. Install v1.8.0 if you want use the old config of heads

repository

https://github.com/livelybone/vue-table.git

Demo

https://livelybone.github.io/vue/vue-table/

Installation

npm i -S @livelybone/vue-table

Register

// import all
import * as VueTable from '@livelybone/vue-table';
const {TableBase,TableExtend} = VueTable

// Global register
Vue.component('VueTable', TableBase);
Vue.component('VueTable', TableExtend);

// Local register
new Vue({
  components:{TableBase,TableExtend}
})

Use in html, see what your can use in CDN: unpkg

<-- use what you want -->
<script src="https://unpkg.com/@livelybone/vue-table/lib/umd/<--module-->.js"></script>

Example

See: example

Slots

th slot, slotName: th-{{headKey}}

td slot, slotName: td-{{dataKey}}-{{headKey}}

// The source code just like：

<template>
  <table>
    <tr>
      <th v-for="(h, headKey) in heads">
        ...
        <slot :name="'th-' + headKey"></slot>
      </th>
    </tr>
    <tr v-for="(d, dataKey) in data">
      <td v-for="(h, headKey) in heads">
        ...
        <slot :name="'th-' + dataKey + '-' +headKey"></slot>
      </td>  
    </tr>
  </table>
</template>

Props

Common

Name	Type	DefaultValue	Description
heads	[Array, Object]	[]	List of head, see head
data	[Array, Object]	[]	List of data
headTrStyle	Object	none
trStyle	Object	none
evenTrStyle	Object	none
noHead	Boolean	false	Set to true to hide thead

/**
 * @key { String } title
 * @key { String } key
 * @key { Number } width, init width of td, only works in TableExtend component
 * @key { Object } style, init style of th or td, width property do not works in TableExtend component
 * @key { Object } tdStyle, init style of td, width property do not works in TableExtend component, priority than `style`
 * @key { Function } formatter
 * @key { Function } headFormatter
 * */
const head = {
  title,
  key,
  width,
  style,
  tdStyle,
  formatter,
  headFormatter,
}

TableExtend

Name	Type	DefaultValue	Description
scrollbarProps	Object	{isMobile: false, maxHeight: '1000vh'}	Props of module @livelybone/vue-scrollbar-live

Events

Name	EmittedData	Description
clickTh	clickData
clickTr	clickData
clickTd	clickData

const clickData={
  ev: MouseEvent,
  th, // index,
  tr, // index,
  td, // index,
}

style

For building style, you can use the css or scss file in lib directory.

// scss
import 'node_modules/@livelybone/vue-table/lib/css/index.scss'

// css
import 'node_modules/@livelybone/vue-table/lib/css/index.css'

Or

// scss
@import 'node_modules/@livelybone/vue-table/lib/css/index.scss';

// css
@import 'node_modules/@livelybone/vue-table/lib/css/index.css';

Or, you can build your custom style by copying and editing index.scss

Especially, You can rewrite the style of TableExtend by flex layout

QA

1. Error Error: spawn node-sass ENOENT

You may need install node-sass globally, npm i -g node-sass