https://github.com/vitorluizc/vue-data-tablee

Yeap, another Vue table component.
https://github.com/vitorluizc/vue-data-tablee

data-table javascript vue vue-data-table vue-data-tablee vue-table

Last synced: 4 months ago
JSON representation

Yeap, another Vue table component.

• Host: GitHub
• URL: https://github.com/vitorluizc/vue-data-tablee
• Owner: VitorLuizC
• License: mit
• Created: 2017-11-21T12:47:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-02T01:49:24.000Z (over 6 years ago)
• Last Synced: 2024-10-31T17:32:12.359Z (4 months ago)
• Topics: data-table, javascript, vue, vue-data-table, vue-data-tablee, vue-table
• Language: JavaScript
• Homepage: https://codepen.io/VitorLuizC/pen/qVJZoQ
• Size: 582 KB
• Stars: 42
• Watchers: 5
• Forks: 4
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Vue Data Tablee

![[JavaScript Style Guide][2]][3]

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-data-tablee.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-data-tablee?ref=badge_shield)

Yeap, another Vue table component. This one is based on [vue-good-table][0], a

simple and pretty table component.



## Install

Install from npm.

```sh

npm install vue-data-tablee

```

With `Vue.use` function declare vue-data-tablee components.

```js

import 'vue-data-tablee/dist/vue-data-tablee.css'

import Vue from 'vue'

import DataTablee from 'vue-data-tablee'

Vue.use(DataTablee)

```

You can also import just components you need, without installing globally.

```vue

  

import { DataTable } from 'vue-data-tablee'

export default {

  components: { DataTable },

  ...

}

```

## Component Props

Name         | Type                                     | Default  | About

----         | ----                                     | -------  | -----

cols         | `Array.`                            | `[]`     | [Cols][4] list.

rows         | `Array.`                         | `[]`     | Rows list.

align        | `'center' \| 'right' \| 'left'`          | `'left'` | Global column alignment option.

empty        | `String`                                 | `''`     | Empty cell's character.

selectable   | `Boolean`                                | `false`  | Add checkbox column to select a row. It emits event on change

sort         | `Boolean \| Function.(a:*, b:*):Number`  | `true`   | Global sort option. Could enable/disable sort or use a custom [sort function][5].

sortExternal | `Boolean`                                | `false`  | Only change sort and arrow. Useful to sort outsite component.

## Cols properties

Name         | Type                                     | About

----         | ----                                     | -----

label        | `String`                                 | Column label (`{{ label }}`).

field        | `String`                                 | Property name, or property path. Ex `'user.contact.phone'`.

align        | `'center' \| 'right' \| 'left'`          | Column alignment option. Stronger than global sort

width        | `Number`                                 | Column width.

hidden       | `Boolean`                                | Defines if column is hidden.

headerClass  | `String`                                 | Adds this class to column header cell.

contentClass | `String`                                 | Adds this class to columns content cells.

sort         | `Boolean \| Function.(a:*, b:*):Number`  | Could enable/disable column sort or use a custom [sort function][5]. Stronger than global sort

## Events

Name   | Payload                                                | About

-----  | -------                                                | -----

select | `Array.`                                       | Emitted on select row (`selectable` option).

sort   | `{ column:Col, sortment:('ascending'\|'descending') }` | Emitted on sort change.

## License

Released under [MIT license][1].

[0]: https://github.com/xaksis/vue-good-table

[1]: ./LICENSE.md

[2]: https://standardjs.com

[3]: https://img.shields.io/badge/code_style-standard-brightgreen.svg

[4]: /#cols-properties

[5]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-data-tablee.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-data-tablee?ref=badge_large)