https://github.com/golubkovden/vue-table-js
Vue table component without any css :ghost:
https://github.com/golubkovden/vue-table-js
component multilevel table vue
Last synced: over 1 year ago
JSON representation
Vue table component without any css :ghost:
- Host: GitHub
- URL: https://github.com/golubkovden/vue-table-js
- Owner: golubkovden
- License: mit
- Archived: true
- Created: 2019-03-22T22:18:34.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-18T13:11:17.000Z (over 6 years ago)
- Last Synced: 2025-03-03T08:03:16.375Z (over 1 year ago)
- Topics: component, multilevel, table, vue
- Language: JavaScript
- Homepage:
- Size: 35.2 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Installation
``` bash
npm install vue-table-js --save
```
# Hello world
``` html
new Vue({
el: '#app',
components: { VueTableJs },
data: {
columns: ['id', 'name'],
data: [
{id: 1, name: 'John'},
{id: 2, name: 'Mike'},
],
},
});
```
# Component props
## Columns
* type: `String|Object` (see [Columns definition](#columns-definition))
* required
## Data
* type: `Array`
* default: `[]`
## RowClass
* type: `String|Function`
* default: `undefined`
We can pass a string to `v-bind:row-class` to dynamically apply table row with specified class.
If you would like to add custom logic, you can do it with function, which return value compatible with
[vue class bindings] types.
```javascript
function fn(item, index) {
// item - current element in an array of data props
// index - index of element
return ['foo', 'bar'];
}
```
## MultipleSorting
* type: `Boolean`
* default: `false`
# #Columns definition
## key
* type: `String`
* default: `undefined`
Key of the data to be display. In multilevel headers you can leave the field `undefined` to combine different keys
in one table column.
```javascript
const column = {
title: 'Foo',
children: [
'id',
'name'
]
}
```
## title
* type: `String|Function|Object`
* default: `undefined`
Here you can define what will be rendered inside table header cell. Otherwise `key` option will be used. Using this
option as `function` is useful with i18n. Also you can use [vue components].
> If you are using [functional component] you **must** provide v-bind and v-on by yourself
``` html
Custom table header
```
## #component
* type: `String|Object`
* default: `undefined`
The vue component that will be used for display data in table data cell.
```vue
export default {
props: {
// The data of the selected by key path in current row
data: {
required: true,
},
// Other props available to be passed see in props below
}
}
```
## #sortable
* type: `boolean|string`
* default: `false`
Define is a column are sortable.
Using as `string` allows you override default behavior (full path of keys), see [events](#events)
Appends to table header cell classes `sortable`, `desc` or `asc`
## props
* type: `Object|Function`
* default: `undefined`
Additional props passed into [component](#component)
## transform
* type `Function|Array`,
* default: `undefined`
## children
* type: `Array`
* default: `undefined`
Sub columns
``` js
{
key: 'geo',
title: 'Geolocation',
children: [
{key: 'lat', title: 'Latitude'},
{key: 'lng', title: 'Longitude'},
],
},
```
# #Events
## sorted
Event fired when user clicked on [`sorted` column](#sortable). Example of incoming payload of event
```
[
{column: 'id', direction: 'asc'},
// if using multiple-sorting option
{column: 'name', direction: 'desc'},
// if sortable option in column definition equals {..., sortable: 'my-custom-field', ...}
{column: 'my-custom-field', direction: 'asc'},
]
```
[vue class bindings]: https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
[vue components]: https://vuejs.org/v2/guide/components.html
[functional component]: https://vuejs.org/v2/guide/render-function.html#Functional-Components