Skip to content

A high-customizable data-table based on vue-clusterize

Notifications You must be signed in to change notification settings

vue-comps/vue-data-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-data-table

A high-customizable data-table based on vue-clusterize

Has invisible pagination with dynamic data, pinned columns and template based header / cells.

Disclaimer

Only for webpack workflows.

No jQuery dependency

Install

npm install --save-dev vue-data-table

Usage

# link the components up
components:
  "data-table": require("vue-data-table/data-table")
  "data-table-column": require("vue-data-table/data-table-column")
# or ES6 import
import {dataTable,dataTableColumn} from "vue-data-table"
components: {
  "data-table": dataTable
  "data-table-column": dataTableColumn
}
<data-table :height="200" :data="dataSet">
  <data-table-column name="name" :width=80 pinned>
    {{data.first + " " + data.last}}
    <span slot="header"> Name (first + last)</span>
  </data-table-column>
</data-table>

For examples see dev/.

Props

data-table
Name type default description
binding-name String "data" name to access the data in your template
height Number null Height of the clusterize element
auto-height Boolean false If autoheight should be used (see below)
manual-start Boolean false rendering doesn't start on ready (call start on the component instance instead)
data Array [] static data to render
scroll-top Number 0 sets scrollTop
scroll-left Number 0 sets scrollLeft
data-table-column
Name type default description
name String - (required) name of the column. Used as default for the header. Must be unique
style Object {whiteSpace:"nowrap"} style for the header of the column.
pinned Boolean false column will be on the left, always visible
no-resize Boolean false disable resize of this column
width Number -1 initial width of the column (defaults to width of the header)
min-width Number -1 minimal width of the column (defaults to width of the header)
max-width Number Number.MAX_VALUE maximal width of the column
default-width Number or String "auto" width of the column on double click on resizer. "auto" looks for content width of the column

Autoheight

There are two ways data-table can be used, either use a fixed height:

<data-table :data="dataSet" :height="400">

Or use autoheight:

<html style="height:100%">
  <body style="height:100%">
    <div style="position:relative">
      <data-table :data="dataSet" auto-height>

In this case data-table will always fill the nearest parent element with either position:relative; or position:absolute; Keep in mind, that padding of the parent will be ignored. If you need a padding, use a wrapper <div>.

Dynamic data

The data-table instance emits to events to get dynamic data:

<data-table @get-data="getData" @get-data-count="getDataCount">
methods:
  # For the first datapiece, first and last will be 0
  getData: function(first,last,cb) {
      # somehow get data
      cb(data)
    }
  getDataCount: function(cb) {
    cb(dataCount)
  }

Development

Clone repository.

npm install
npm run test

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

About

A high-customizable data-table based on vue-clusterize

Resources

Stars

Watchers

Forks

Packages

No packages published