Package Exports

vue-data-table-column

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-data-table-column) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-data-table-column

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

Screenshot

Features

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

Requirements

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.