/cmp-table

VueJs table/grid component

Primary LanguageJavaScript

Vue.js table/grid component

  • table-mode
  • grid-mode
  • slots
  • sorting
  • filtering
  • grouping
  • data binding
  • readonly columns
  • rendering text by values/codes

Dependencies

  • Vue.js (>=2.0)

Live Demo

Usage

Direct include

Just import the cmp-table.js after vue.js library in your page like so.

	<script src="js/vue.js"></script>	
	<script src="js/cmp-table.js"></script>

Slots

№ Slot Name Available Props
1 table-th-add group, groupindex, rows
2 table-group-header group, groupindex, rows
3 table-row row, rowindex
4 table-td-add row, rowindex, group
5 table-row-add row, rowindex, group, groupindex
6 table-group-add group, groupindex, rows
7 table-footer
8 column-YOURCOLUMNNAME column, row, colKey, rowKey, value, valueFormatted, isEditableColumn

image

Slots priority

first [table-row] second [column-YOURCOLUMNNAME]

it means if you are overriding row your custom column control will not shown

Options

table

Option Type Description Default
title String h2 header ''
style-class String table css class 'table table-bordered'
grid-mode Boolean editable grid / table false
line-numbers Object show first column with row numbers {show: false, throughGroups: false}
columns Array []
rows Array []
filter-key String input filter string ''

Column

Option Type Description Default
field String datasource field name ''
label String column title ''
identity Boolean identity column, required in grid-mode false
hidden Boolean hide column false
type String [text, decimal, number, date] 'text'
readonly Boolean readonly column in grid-mode false
thclass String th css class ''
tdclass String td css class ''
width String column width 'auto'
sortable Boolean allow sort by column false
filterable Boolean allow filter by column false
control object column control settings ''
control.type String [textbox, select, radio, checkbox] 'textbox'
control.source Array Example [{text:'Title', value:0}] []

Css

i did not include any css into the project, but there is minimal style for example

th.sortable{
	cursor:pointer;
}			
th.active .arrow {
	opacity: 1;
	position: absolute;
}
.arrow {
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 0;
	margin-left: 10px;
	opacity: 0.66;
}
 .arrow.asc {
 	border-left: 4px solid transparent;
 	border-right: 4px solid transparent;
 	border-bottom: 4px solid #080808;
 }
 .arrow.dsc {
	border-left: 4px solid transparent;
 	border-right: 4px solid transparent;
 	border-top: 4px solid #080808;
 }

Example

new Vue({
	el:'#app'	,
	data: function () {
        return {  			
            columns: [                       
                        {
                            label: 'Position',
                            field: 'Position',                         				
                            control: {                             
                                source: [					
                                    { text: 'Actor', value: 1 },
                                    { text: 'Writer', value: 2 },
                                    { text: 'Character', value: 3 }
                                ]
                            }
                        }					

            ],			
            rows: [
                  { Position: 1},
				  { Position: 2}              
            ]
        }
    }
});
<cmp-table          
 	v-bind:columns="columns"
 	v-bind:rows="rows">					  
 </cmp-table>

we have datasource ROWS with values or codes, but it will be rendered as text:

image

License

This project is licensed under the MIT License