VitorLuizC / Vue Data Tablee
Licence: mit
Yeap, another Vue table component.
Stars: ✭ 40
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Data Tablee
vstx-data-table
A data table component for the Vue Stacks Ecosystem
Stars: ✭ 34 (-15%)
Mutual labels: data-table
Datatablesbundle
This Bundle integrates the jQuery DataTables plugin into your Symfony application.
Stars: ✭ 334 (+735%)
Mutual labels: data-table
React Handsontable
React Data Grid with Spreadsheet Look & Feel. Official React wrapper for Handsontable.
Stars: ✭ 511 (+1177.5%)
Mutual labels: data-table
flex-table-card
Highly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept
Stars: ✭ 122 (+205%)
Mutual labels: data-table
Reactgrid
Add spreadsheet-like behavior to your React app
Stars: ✭ 289 (+622.5%)
Mutual labels: data-table
Android Extensions
An Android library with modules to quickly bootstrap an Android application.
Stars: ✭ 356 (+790%)
Mutual labels: data-table
react-smart-data-table
A smart data table component for React meant to be configuration free
Stars: ✭ 80 (+100%)
Mutual labels: data-table
Ember Data Table
Data tables for Ember following Google Design specs
Stars: ✭ 19 (-52.5%)
Mutual labels: data-table
Angular Slickgrid
Angular-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
Stars: ✭ 298 (+645%)
Mutual labels: data-table
Nghandsontable
Official AngularJS directive for Handsontable
Stars: ✭ 438 (+995%)
Mutual labels: data-table
Vaadin Grid
vaadin-grid is a free, high quality data grid / data table Web Component. Part of the Vaadin components.
Stars: ✭ 383 (+857.5%)
Mutual labels: data-table
cp-react-tree-table
A fast, efficient tree table component for ReactJS.
Stars: ✭ 83 (+107.5%)
Mutual labels: data-table
Sensei Grid
Simple and lightweight data grid in JS/HTML
Stars: ✭ 808 (+1920%)
Mutual labels: data-table
Material Ui X
The Material-UI eXtension with advanced components for a richer eXperience.
Stars: ✭ 341 (+752.5%)
Mutual labels: data-table
Luckysheet
Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.
Stars: ✭ 9,772 (+24330%)
Mutual labels: data-table
Reactabular
A framework for building the React table you need (MIT)
Stars: ✭ 903 (+2157.5%)
Mutual labels: data-table
Cheetah Grid
The fastest open-source data table for web.
Stars: ✭ 417 (+942.5%)
Mutual labels: data-table
Vue Data Tablee
Yeap, another Vue table component. This one is based on vue-good-table, a simple and pretty table component.
Install
Install from npm.
npm install vue-data-tablee
With Vue.use function declare vue-data-tablee components.
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.
<template>
<data-table :rows="rows" :cols="cols" />
</template>
<script>
import { DataTable } from 'vue-data-tablee'
export default {
components: { DataTable },
...
}
</script>
Component Props
| Name | Type | Default | About |
|---|---|---|---|
| cols | Array.<Col> |
[] |
Cols list. |
| rows | Array.<Object> |
[] |
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. |
| sortExternal | Boolean |
false |
Only change sort and arrow. Useful to sort outsite component. |
Cols properties
| Name | Type | About |
|---|---|---|
| label | String |
Column label (<th>{{ label }}</th>). |
| 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. Stronger than global sort |
Events
| Name | Payload | About |
|---|---|---|
| select | Array.<Object> |
Emitted on select row (selectable option). |
| sort | { column:Col, sortment:('ascending'|'descending') } |
Emitted on sort change. |
License
Released under MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].