Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: about 2 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 6 years ago)
Default Branch: master
Last Pushed: 2018-08-02T01:49:24.000Z (almost 6 years ago)
Last Synced: 2024-02-23T00:42:50.706Z (3 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: 5
Open Issues: 4
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Lists

awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (UI Components / Table)
awesome-vue - vue-data-tablee ★34 - Based on vue-good-table, a simple and pretty table component (UI Components / Table)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (UI Components / Table)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (UI Components / Table)
awesome-vue. - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (UI Components / Table)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (UI Components / Table)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (UI Components / Table)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)
awesome-vue - vue-data-tablee - Based on vue-good-table, a simple and pretty table component (Components & Libraries / UI Components)

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)