vue-data-table-column

A simple, customizable data table column based on vue2 and element-ui with essential features like sorting, column filtering etc.

Features

• Popover filters. Supports: text, select, date range.
• Sorting and other features from el-table-column.

Requirements

• element-ui
• lodash
• vue2

Installation

yarn add vue-data-table-column

Usage

Include the component

import DataTableColumn from 'vue-data-table-column';

Then, register the component, however you like:

{
  ...
  components: {
    ...
    DataTableColumn
  }
}

or register globally:

import ElementUI from 'element-ui';
import DataTableColumn from 'vue-data-table-column';
...
Vue.use(ElementUI);
Vue.use(DataTableColumn);
...
new Vue({
  el: '#app',
  render: h => h(App),
});

And then use the component:

<template>
  <el-table>
    <data-table-column
      v-model="filter"
      :column-props="{ ...original el-table-column props... }"
      :filter-props="{ ...filter props... }"
    ></data-table-column>
  </el-table>
</template>

Documentation

Available filter types:

• text or input - text filter
• select - dropdown filter
• date - date range filter
• datetime - date time range filter

Filter properties:

| Prop | Type | Default | Description | | ------------------- | -------- | -------------------- | ----------------------------------------------- | | type | String | | Filter type ('text','select','date','datetime') | | data | Array | | Data for select filter [{label, value}] | | filterMethod | Function | | Same as el-table-column filter method | | callbackMethod | Function | | Call when v-model changed (column, prop, value) | | placeholder | String | | Filter placeholder | | width | String | 230px | Filter popover width | | icon | String | el-icon-search | Field icon class | | dateFormat | String | yyyy-MM-dd | Date field display format | | dateValueFormat | String | yyyy-MM-dd | Date field value format | | dateTimeFormat | String | yyyy-MM-dd HH:mm:ss | Datetime field display format | | dateTimeValueFormat | String | yyyy-MM-dd HH:mm:ss | Datetime field value format | | defaultTime | Array | [00:00:00, 23:59:59] | Default time range for datetime field |

Authors

• Alex Zet

Contributions

All contributions are welcome send your PR and Issues.

License

This project is licensed under the MIT License - see the LICENSE file for details.