Vue-data-table-column NPM

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.

vue-data-table-column vue-data-tables element-ui vue vue2 table datatable

element-ui lodash vue

@everything-registry/sub-chunk-3078 @infinitebrahmanuniverse/nolb-vue-da

1.0.0

5 years ago