vue-data-table

v0.1.1

Published

2 years ago

data table - done in vue

Downloads

0High
0Medium
0Low

paulpflug

data grid data-table vue invisible pagination

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.

Demo

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/.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vue-data-table

Demo

Disclaimer

Install

Usage

Props

data-table

data-table-column

Autoheight

Dynamic data

Development

License