Module name

border

Use this function to set the border of the table using css parameters.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        border: '1px solid #aaaaaa' //setting the border
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).border('1px solid #aaaaaa').draw(); //setting the border
            

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.border('1px solid #aaaaaa'); //returns table

//Getter
alert('border: '+table.border()); //returns value of border
            

borderCollapse

Use this function to enable or disable border collapsing in the table.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        border: '1px solid #aaaaaa',
        borderCollapse: false  //disabling borderCollapse
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        border: '1px solid #aaaaaa'
}).borderCollapse(false).draw();
            

var table=$A.newTable({
    cols:[ 
        {name: 'name', text:'Campaign name'},
        {name: 'subject', text: 'Campaign subject'}
    ],
    border: '1px solid #aaaaaa'
}).draw();

//Setter
table.borderCollapse(false); //returns table

//Getter
alert('borderCollapse: '+table.borderCollapse()); //returns value of borderCollapse
            

border

Use this function to set the border of the table using css parameters.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        border: '1px solid #aaaaaa' //setting the border
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).border('1px solid #aaaaaa').draw(); //setting the border
            

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.border('1px solid #aaaaaa'); //returns table

//Getter
alert('border: '+table.border()); //returns value of border
            

cols

Use this function to set the colums of the table.
If invoked without parameter returns the columns of the table, otherwise returns the table.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();
            

$A.newTable().draw().cols([{name: 'name', text:'Campaign name'},{name: 'subject', text: 'Campaign subject'}]);
            

var table=$A.newTable().draw();

//Setter
table.cols([{name: 'name', text:'Campaign name'},{name: 'subject', text: 'Campaign subject'}]); //returns table

//Getter
table.cols(); //returns the cols array
alert('cols: '+table.cols());
            

exportable

If you set this option true, a little export icon wil appear next to the table.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        exportable: true
}).draw();
            

$A.newTable().draw().cols([{name: 'name', text:'Campaign name'},{name: 'subject', text: 'Campaign subject'}]).exportable(true);
            

var table=$A.newTable().cols([{name: 'name', text:'Campaign name'},{name: 'subject', text: 'Campaign subject'}]).draw();

//Setter
table.exportable(true); //returns table

//Getter
table.exportable(); //returns value of exportable
alert('exportable: '+table.exportable());
            

inlineButtons

Use this function to set enable or disable the openable inline button box of the table.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            }
        ],
        inlineButtons:[
            {text: 'Edit'},
            {text: 'Delete'}
        ]
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            }
        ]
}).draw().inlineButtons([{text: 'Edit'},{text: 'Delete'}]);
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            }
        ]
}).draw();

//Setter
table.inlineButtons([{text: 'Edit'},{text: 'Delete'}]); //returns table

//Getter
alert('inlineButtons '+table.inlineButtons()); // returns value of inlineButtons
            

loadingCellContent

loadingCellContent

Use this function to set the text you want to show while the cells are loading.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        loadingCellContent: '<b>Loading...</b>'
}).draw().loading();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().loadingCellContent('<b>Loading...</b>').loading();
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().loading();

//Setter
table.loadingCellContent('<b>Loading...</b>'); //returns table

//Getter
alert('loadingCellContent: '+table.loadingCellContent()); // returns value of loadingCellContent
            

page

Use this function to set the number of the actual page showed in the right top corner.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        page: 2
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().page(2);
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.page(2); //returns table

//Getter
alert('page: '+table.page()); // returns value of page
            

openableInlineBox

Use this function to set enable or disable the openable inline button box of the table.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        openableInlineBox: false
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().openableInlineBox(false);
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.openableInlineBox(false); //returns table

//Getter
alert('openableInlineBox: '+table.openableInlineBox()); // returns value of openableInlineBox
            

pageMax

Use this function to set the number of all pages showed in the right top corner.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        pageMax: 5
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().pageMax(5);
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.pageMax(5) // returns table

//Getter
alert('pageMax: '+table.pageMax()); //returns value of pageMax

            

perPage

Use this function to set the maximum number of rows appearon on a single page.
Only values from the perPageList are accepted.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        perPage: 100
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().perPage(100);
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.perPage(100); //returns table

//Getter
alert('perPage: '+table.perPage()); // returns value of perPage
            

perPageLabel

Use this function to set the label next to the perPage selector.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        perPageLabel: 'Rows per page:'
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().perPageLabel('Rows per page');
            

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.perPageLabel('Rows per page'); //returns table

//Getter
alert('perPageLabel: '+table.perPageLabel()); //returns value of perPageLabel
            

perPageList

The array of numbers which will appear in hte perPage selector.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        perPageList: [1, 5, 10, 20, 25]
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).perPageList([1, 5, 10, 20, 25]).draw();
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.perPageList([1, 5, 10, 20, 25]); //returns table

//Getter
alert('perPageList: '+table.perPageList()); //return the array
            

rows

Use this function to set the rows of the table.
If invoked without parameter returns the rows of the table, otherwise returns the table.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1, // The id of the new row
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]        
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().rows([{recordId:1, values:{name: 'Campaign1',subject: 'test1'}},{recordId:2, values:{name: 'Campaign2',subject: 'test2'}}]);
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.rows([{recordId:1, values:{name: 'Campaign1',subject: 'test1'}},{recordId:2, values:{name: 'Campaign2',subject: 'test2'}}]); //returns table

//Getter
table.rows(); //returns the cols array
alert('rows: '+table.rows());
            

selectable

Use this function to add checkboxes before the first column, which are used to select rows.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        selectable: true
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().selectable(true);
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.selectable(true); //returns table

//Getter
alert('selectable: '+table.selectable()); //returns value of selectable
            

storeData

Use this option if you want to store the data of the cells. Next time you open the browser the table will remember the data.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        storeData: true
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().storeData(true);
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.storeData(true); //returns table

//Getter
alert('storeData: '+table.storeData()); //returns value of storeData
            

searchValue

Use this function to set the string in the table search input.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        searchValue: 'Search this!'
}).draw();
            

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw().searchValue('Search this!');
            

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	]
}).draw();

//Setter
table.searchValue('Search this!'); //returns table

//Getter
alert('searchValue: '+table.searchValue()); //returns value of searchValue
            

tableButtons

Use this option to set the array of buttons which appear above the table.
These buttons can have varios options, shown below in the examples.

$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],        
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ],
        //You can set the table buttons by defining the buttons array in the constructor object
        buttons:[
            {
                text: 'New campaign',
                skin: 'simple-orange' //Setting the automizy orange skin
            },
            {
                text: 'Edit campaign',
                condition: 'select-one', //select-one condition makes the button clickable only if one row is selected
                disabled:true //the button will be disabled by default
            },
            {
                text: 'Delete campaigns',
                condition: 'select-more-than-zero', //select-more-than-zero condition makes the button clickable if one or more rows are selected
                disabled:true //the button will be disabled by default
            }
        ],
        selectable: true //To use the conditions we have to make the table rows selectable
}).draw();
            

//You can also set the buttons after the table is initialized by using the tableButtons() method.
$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],        
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).tableButtons([
    {
        text: 'New campaign',
        skin: 'simple-orange' //Setting the automizy orange skin
    },
    {
        text: 'Edit campaign',
        condition: 'select-one', //select-one condition makes the button clickable only if one row is selected
        disabled:true //the button will be disabled by default
    },
    {
        text: 'Delete campaigns',
        condition: 'select-more-than-zero', //select-more-than-zero condition makes the button clickable if one or more rows are selected
        disabled:true //the button will be disabled by default
    }
]).draw();
            

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],        
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
});

//Setter
table.tableButtons([
    {
        text: 'New campaign',
        skin: 'simple-orange' //Setting the automizy orange skin
    },
    {
        text: 'Edit campaign',
        condition: 'select-one', //select-one condition makes the button clickable only if one row is selected
        disabled:true //the button will be disabled by default
    },
    {
        text: 'Delete campaigns',
        condition: 'select-more-than-zero', //select-more-than-zero condition makes the button clickable if one or more rows are selected
        disabled:true //the button will be disabled by default
    }
]); //return table

//Getter
table.tableButtons(); //return the buttons array
alert('tableButtons: '+JSON.stringify(table.tableButtons()));
            

html

Use this function to get or set the html of the given column's header.

$A.newTable({
	cols:[ 
            {
                name: 'name',
                text:'Campaign name'
            },
            {
                name: 'subject',
                text: 'Campaign subject',
                html: '<div>Subject</div>' //This way the html will be inserted after the name.
            }
	]
}).draw();
            

$A.newTable({
	cols:[ 
            {
                name: 'name',
                text:'Campaign name'
            },
            {
                name: 'subject',
                text: 'Campaign subject'
            }
	]
}).draw().getColByIndex(1).html('<div>Subject</div>'); //Getting the column then setting the html
                                                            //This way the column name will be replaced by the html
            

var table =$A.newTable({
	cols:[ 
            {
                name: 'name',
                text:'Campaign name'
            },
            {
                name: 'subject',
                text: 'Campaign subject'
            }
	]
}).draw();
var col=table.getColByIndex(1);

//Setter
col.html('<div>Subject</div>'); //returns col

//Getter
alert('html: '+col.html()); //returns value of html
            

addCols(arr)

Use this method to add columns to your table.

• arr
  Type: Array
  The array containing the objects which defines the columns you want to add.

var table=$A.newTable({
	cols:[
            {name: 'name', text:'Campaign name'}
        ]
}).draw();

//Adding new columns
table.addCols([
    {
        name: 'type',
        text: 'Type',
        visibility:false    //This makes the column hidden
    },
    {
        name: 'createDate',
        text: 'Created'
    }
]);
            

addRows(arr)

Use this method to add new rows to your table.

• arr
  Type: Array | Object
  The new row object, or the array of new row objects you want to add.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject',text: 'Subject'}
	]
}).draw();

//Adding a new row using object as parameter
table.addRows({
    recordId: 1, // The id of the new row
    values:{
        name: 'Campaign1',
        subject: 'test1'
    }
})

//Adding new rows using array as parameter
table.addRows([
    {
        recordId: 2,
        values:{
            name: 'Campaign2',
            subject: 'test2'
        }
    },
    {
        recordId: 3,
        values:{
            name: 'Campaign3',
            subject: 'test3'
        }
    }
]);
            

deleteCol(index)

Use this function to delete a column by the given index.
Please note that column indexes start at 0.

• index
  Type: Integer
  The index of the column you want to delete.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject',text: 'Subject'}
	]
}).draw();

//Deleting the first column
table.deleteCol(0); //returns table
            

deleteCols(indexes)

Use this function to delete multiple columns.

• indexes
  Type: Array
  The array of column indexes you want to remove.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject',text: 'Subject'},
            {name: 'date',text: 'Date'}
	]
}).draw();

//Deleting the first two columns
table.deleteCols([0,1]); //returns table
            

deleteRow(index)

Use this function to delete a row by the given index.

• index
  Type: Integer
  The index of the row you want to delete.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]        
}).draw();

//Deleting the first row
table.deleteRow(1); //returns table
            

deleteRows(indexes)

Use this function to delete multiple rows by the given indexes.

• indexes
  Type: Array
  The array of indexes of the rows you want to delete.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            },
            {
                recordId: 3,
                values:{
                    name: 'Campaign3',
                    subject: 'test3'
                }
            }
        ]        
}).draw();

//Deleting the first two rows
table.deleteRows([1,2]); //returns table
            

getCell(colIndex, rowIndex

Use this method to get a table cell by the given indexes.

• colIndex
  Type: Integer
  The column index of the cell you want to get.
• rowIndex
  Type: Integer
  The row index of the cell you want to get.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            },
            {
                recordId: 3,
                values:{
                    name: 'Campaign3',
                    subject: 'test3'
                }
            }
        ]        
}).draw();

//Getting the third cell of the second column
console.log(table.getCell(2,3)); //returns tableCell
            

getCells(type)

Use this function to get all cells of the table.

• type
  Type: String
  Accepted values:
  
  • Automizy || '': This is the default, if invoket without parameter.
    The function will return the cells as Automizy tableCell objects.
  • jQuery: The function will return the cells as jQuery objects.
  • DOM: The function will return the cells as DOM objects.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            },
        ]        
}).draw();

//Getting the cells
console.log(table.getCells()); //returns cells as array of Automizy tableCell objects.
console.log(table.getCells('jQuery')); //returns cells as array of jQuery objects.
console.log(table.getCells('DOM')); //returns cells as array of DOM objects.
            

$getCells

Use this method to get the cells of the table as jQuery elements.
Please note that this fuction does the same as the getCells('jQuery') method.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            },
        ]        
}).draw();

//Getting the cells ass jQuery objects
console.log(table.$getCells()); //returns cells as array of jQuery objects.
            

getColByIndex

Use this function to get a column of the tably by the given index.

• index
  Type: Integer The index of the column you want to get.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            }
        ],
        selectable: true; //the checkbox column will have the index 0
}).draw();

//Getting the first column of the table
console.log(table.getColByIndex(1));
            

getColByName

Use this method to get a table column by its name.

• name
  Type: String The name of the column you want to get.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            }
        ],
        selectable: true; //the checkbox column will have the index 0
}).draw();

//Getting the first column of the table
console.log(table.getColByNyme('subject'));
            

getDomCells

Use this method to get the cells of the table as DOM elements.
Please note that this function does the same as the getCells('DOM') function.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            },
        ]        
}).draw();

//Getting the cells as DOM elements
console.log(table.getDomCells());
            

getRowByIndex

Use this method to get a row by its index.

• index
  Type: Integer The index of the row you want to get.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            },
        ]        
}).draw();

//Getting the second row
console.log(table.getRowByIndex(2));
            

getRowByRecordId(id)

Use this function to get a row by its recordID.

• id
  Type: Integer The recordId of the row you want to get.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            },
        ]        
}).draw();

//Getting the row with recordId 2
console.log(table.getRowByRecordId(2));
            

loading

Use this function to set the table in 'Loading' state. If you invoke this function the rows will be deleted, and the loadingCellContent text will be shown.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        loadingCellContent: '<b>Loading...</b>'
}).draw().loading();
            

openedId

Use this method to get the id of the opened row.
If none of the rows is opened, the function will return false.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            },
        ]        
}).draw();

//Getting the opened row's id
table.openedId();
            

openedRow

Use this method to get the opened row if there is one.
If none of the rows is opened, the method will return false.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]        
}).draw();

//Getting the opened row's id
table.openedId();
            

rowCount

Use this method to get the number of rows in your table.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]        
}).draw();

alert('rowCount: '+table.rowCount());
            

selectedId

If your table is selectable, you can get the id of the first selected row by using this method.
If none of the rows is selected, the method will return 'undefined'.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ],
        selectable: true,
}).draw();

setTimeout(function(){
    $(table.getColByIndex(0).$cells()[2]).find('input[type="checkbox"]').prop('checked', true); //selecting the second row
    alert("selectedId: "+table.selectedId());
},1000);
            

selectedIds

Use this method to get the id of the selected rows.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            },
            {
                recordId: 3,
                values:{
                    name: 'Campaign3',
                    subject: 'test3'
                }
            }
        ],
        selectable: true,
}).draw();

setTimeout(function(){
    $(table.getColByIndex(0).$cells()[2]).find('input[type="checkbox"]').prop('checked', true); //selecting the second row
    $(table.getColByIndex(0).$cells()[3]).find('input[type="checkbox"]').prop('checked', true); //selecting the third row
    alert("selectedIds: "+table.selectedIds());
},1000);
            

selectedRow

Use this method to get the first selected table row.
If none of the rows is selected, the method will return false.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ],
        selectable: true,
}).draw();

setTimeout(function(){
    $(table.getColByIndex(0).$cells()[2]).find('input[type="checkbox"]').prop('checked', true); //selecting the second row
    alert("selectedRow: "+table.selectedRow());
},1000);
            

cells

Use this method to get the cells of the given row.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

//Getting the cells of the first row
alert('cells: '+table.rows()[1].cells());
            

$cells

Use this method to get the cells of the given row as jQuery objects.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

//Getting the cells of the first row
table.rows()[1].$cells();
            

domCells

Use this method to get the cells of the given row as DOM objects.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

//Getting the cells of the first row
table.rows()[1].domCells();
            

$checkbox

Use this method to get the checkbox of the given row.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

//Getting the cells of the second column
table.getRowByIndex(1).$checkbox();
            

getCellByColName(colName)

Use this function to get a cell of the given row by the column name.

• colName
  Type: String
  The name of the column you want to select the cell from.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

//Getting the cell of the second row from the 'name' column.
console.log(table.rows()[2].getCellByColName('name'));
            

index

Use this method to get the index of the given row.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

alert('index: '+table.rows()[2].index());
            

cells

Use this method to get the cells of the given column.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

//Getting the cells of the second column
console.log(table.getColByIndex(1).cells());
            

$cells

Use this method to get the cells of the given column as jQuery objects.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

//Getting the cells of the second column as jQuery objects
console.log(table.getColByIndex(1).$cells());
            

domCells

Type here how to use this method.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

//Getting the cells of the second column as DOM objects
console.log(table.domCells());
            

index

Use this function to get the index of the given column.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();

//Getting the index of the second column
alert("index:" +table.getColByName("subject").index());
            

col

Use this function to get the column of the given cell.

var table=$A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {name: 'subject', text: 'Campaign subject'}
	],
        rows:[
            {
                recordId: 1,
                values:{
                    name: 'Campaign1',
                    subject: 'test1'
                }
            },
            {
                recordId: 2,
                values:{
                    name: 'Campaign2',
                    subject: 'test2'
                }
            }
        ]
}).draw();


//Getting the colum on cell(2,2)
console.log(table.getCells(2,2).col());
            

html(html)

• html
  Type: String
  The html code you want to insert.

Use this tuction to set the html of the given cell.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();

//Setting the html
table.getCell(2,2).html('html');

//Getting the html
table.getCell(2,2).html();
            

index

Use this method to get the index of the given cell.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();

alert('index: '+table.getCell(2,2).index());
            

recordId

Use this method to get the recordId of the cell's row.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();

alert('recordId: '+table.getCell(2,2).recordId());
            

table

Use this method to get the table of the given column, row, or cell.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();

console.log(table.rows()[0].table());
            

beforeOpenInlineBox(event)

Use this function to set the event you want to trigger when opening the inline buttons box.

• event
  Type: function
  The event to be triggered.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();
table.beforeOpenInlineBox(function (){
    alert('opening');
});
            

onExport(event)

Use this function to set the event you want to trigger when clicking on the export icon.

• event
  Type: function
  The event to be triggered.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ],
        exportable: true
}).draw();
table.onExport(function (){
    alert('exporting');
});
            

onHideCol(event)

Use this function to set the event you want to trigger when clicking on the hide column button.

• event
  Type: function
  The event to be triggered.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();
table.onHideCol(function (){
    alert('column hidden');
});
            

onPageFirst

Use this function to set the event you want to trigger when clicking on the first page button.

• event
  Type: function
  The event to be triggered.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();
table.onPageFirst(function (){
    alert('first page');
});
            

onPageLast

Use this function to set the event you want to trigger when clicking on the last page button.

• event
  Type: function
  The event to be triggered.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();
table.onPageLast(function (){
    alert('last page');
});
            

onPageNext

Use this function to set the event you want to trigger when clicking on the next page button.

• event
  Type: function
  The event to be triggered.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();
table.onPageNext(function (){
    alert('next page');
});
            

onPagePrev

Use this function to set the event you want to trigger when clicking on the previous page button.

• event
  Type: function
  The event to be triggered.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();
table.onPagePrev(function (){
    alert('previous page');
});
            

onPerPage

Use this function to set the event you want to trigger when clicking on the per page button.

• event
  Type: function
  The event to be triggered.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();
table.onPerPage(function (){
    alert('setting per page');
});
            

onShowCol

Use this function to set the event you want to trigger when clicking on the show column button.

• event
  Type: function
  The event to be triggered.

var table = $A.newTable({
	cols:[ 
            {name: 'name', text:'Campaign name'},
            {
                name: 'subject',
            }
	],   
        rows:[
            {
                values:{
                    name:'Campaign1',
                    subject:'test',
                    html: 'test'
                }
            },
            {
                values:{
                    name:'Campaign2',
                    subject:'test2'
                }
            }
        ]
}).draw();
table.onShowCol(function (){
    alert('column shown');
});