VueJs table/grid component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Vue.js table/grid component

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


  • Vue.js (>=2.0)

Live Demo


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>


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


Slots priority

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

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



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 ''


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}] []


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

} .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;


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}              

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



This project is licensed under the MIT License