Creating Custom Tables

The data for Table needs to be supplied as an array of arrays, where each inner array represents a row:

// Table data. 2 rows, 5 columns
var tableData = [
    [1, 16, 2, 24, 64], 
    [2, 17, 5, 96, 22] 
];

You need to create a <table> element in your HTML with an id to which you can refer:

<table id="actions-table"></table>

You need to create a new insight.components.Table object and pass in a reference to the container id in the markup, the column configuration, the data, and optionally extra DataTables settings to pass through for additional customizations:

 var table1 = new insight.components.Table({
    id: 'actions-table', 
    columns: [
        {name: 'Index', type: insight.enums.DataType.INTEGER, width: '40px'},
        {name: 'Column 1', type: insight.enums.DataType.REAL, width: '60px'},
        {name: 'Column 2', type: insight.enums.DataType.REAL, width: '60px'},
        {name: 'Column 3', type: insight.enums.DataType.STRING, width: '60px'},
        {name: 'Column 4', type: insight.enums.DataType.STRING, width: '60px'}
    ], 
    data: tableData
});

The following is an example of an editable table being initialized:

var table = new insight.components.Table({
    id: 'data-table', 
    columns: [
        {
            name: 'Boolean', 
            type: insight.enums.DataType.INTEGER, 
            editable: true, 
            editorType: 'checkbox', 
            uncheckedValue: 0, 
            checkedValue: 1
        },
        {
            name: 'Integer (1-10000)', 
            type: insight.enums.DataType.INTEGER, 
            editable: true, 
            editorSave: function (newValue, rowData, cellElement) {
                // Should only accept integers between 1-10000
                if (!isNaN(newValue) &&
                        (newValue % 1 === 0) &&
                        newValue >= 1 &&
                        newValue <= 10000) {
                    alert('Perform some action on new value: ' + 
				newValue); 
                    return; 
                }
                // Throw Errors if anything goes wrong
                throw new Error('New value is invalid, will not save: ' + 
				newValue); 
            }
        }
    ], 
    data: data
);