Tablesdefinition

Default table styles

All tables has default styles: width 100%, cell padding 10px and text align left.

Name	Time CP	Network	Tiles update
Bing	0:00:01	0,1 Mb	0,1 Mb
Internet Explorer	0:00:01	0,1 Mb	0,1 Mb
Chrome	0:00:01	0,1 Mb	0,1 Mb
News	0:00:01	0,1 Mb	0,1 Mb
Weather	0:00:01	0,1 Mb	0,1 Mb
Music	0:00:01	0,1 Mb	0,1 Mb

<table>...</table>

Striped rows

Adds zebra-striping to any table row within the <tbody> with class .striped.

Name	Time CP	Network	Tiles update
domain	0:00:01	0,1 Mb	0,1 Mb
desc	0:00:01	0,1 Mb	0,1 Mb
domain	0:00:01	0,1 Mb	0,1 Mb
desc	0:00:01	0,1 Mb	0,1 Mb
domain	0:00:01	0,1 Mb	0,1 Mb
desc	0:00:01	0,1 Mb	0,1 Mb
domain	0:00:01	0,1 Mb	0,1 Mb
desc	0:00:01	0,1 Mb	0,1 Mb
domain	0:00:01	0,1 Mb	0,1 Mb
desc	0:00:01	0,1 Mb	0,1 Mb
domain	0:00:01	0,1 Mb	0,1 Mb
desc	0:00:01	0,1 Mb	0,1 Mb

Name	Time CP	Network	Tiles update
Bing	0:00:01	0,1 Mb	0,1 Mb
Internet Explorer	0:00:01	0,1 Mb	0,1 Mb
Chrome	0:00:01	0,1 Mb	0,1 Mb
News	0:00:01	0,1 Mb	0,1 Mb
Weather	0:00:01	0,1 Mb	0,1 Mb
Music	0:00:01	0,1 Mb	0,1 Mb

<table class="striped">...</table>

Bordered table

Adds borders to any table with class .bordered.

Name	Time CP	Network	Tiles update
Bing	0:00:01	0,1 Mb	0,1 Mb
Internet Explorer	0:00:01	0,1 Mb	0,1 Mb
Chrome	0:00:01	0,1 Mb	0,1 Mb
News	0:00:01	0,1 Mb	0,1 Mb
Weather	0:00:01	0,1 Mb	0,1 Mb
Music	0:00:01	0,1 Mb	0,1 Mb

<table class="bordered">...</table>

Hovered table

Enable a hover state on table rows within a <tbody>.

Name	Time CP	Network	Tiles update
Bing	0:00:01	0,1 Mb	0,1 Mb
Internet Explorer	0:00:01	0,1 Mb	0,1 Mb
Chrome	0:00:01	0,1 Mb	0,1 Mb
News	0:00:01	0,1 Mb	0,1 Mb
Weather	0:00:01	0,1 Mb	0,1 Mb
Music	0:00:01	0,1 Mb	0,1 Mb

<table class="hovered">...</table>

Optional row classes

For displaying optional rows you must add one of next classes for <tr>:

error
success
warning
info
selected

Name	Time CP	Network	Tiles update
Bing	0:00:01	0,1 Mb	0,1 Mb
Internet Explorer	0:00:01	0,1 Mb	0,1 Mb
Chrome	0:00:01	0,1 Mb	0,1 Mb
News	0:00:01	0,1 Mb	0,1 Mb
Music	0:00:01	0,1 Mb	0,1 Mb
Weather	0:00:01	0,1 Mb	0,1 Mb

<table>
    <tr class="error">...</tr>
</table>

TableControl.js

This component in progress...

var table, table_data;

table_data = [
    {id:"1",invdate:"2007-04-02",name:"test",note:"note",amount:"100.00",tax:"10.00",total:"120.00"},
    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
    {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
    {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];

$(function(){
    table = $("#table1").tablecontrol({
        cls: 'table hovered border myClass',
        colModel: [
            {field: 'id', caption: 'No', width: 50, sortable: false, cls: 'text-center', hcls: ""},
            {field: 'invdate', caption: 'Date', width: 120, sortable: false, cls: 'text-center', hcls: ""},
            {field: 'name', caption: 'Client', width: '', sortable: false, cls: 'text-left', hcls: "text-left"},
            {field: 'amount', caption: 'Amount', width: '80', sortable: false, cls: 'text-right', hcls: "text-right"},
            {field: 'tax', caption: 'Tax', width: '80', sortable: false, cls: 'text-right', hcls: "text-right"},
            {field: 'total', caption: 'Total', width: '80', sortable: false, cls: 'text-right', hcls: "text-right"},
            {field: 'note', caption: 'Notes', width: '', sortable: false, cls: 'span1', hcls: ""}
        ],

        data: table_data
    });
});