Creating Custom Tables

The Table component is a wrapper around the third-party library, DataTables.

See http://www.datatables.net for more information. The generated table will have some standard styling and options applied.

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(
    'actions-table', 
    [
        {name: 'Index', width: '40px'},
        {name: 'Column 1', width: '60px'},
        {name: 'Column 2', width: '60px'},
        {name: 'Column 3', width: '60px'},
        {name: 'Column 4', width: '60px'}
    ], 
    tableData
     );

The second argument is an array of column configuration objects. Each configuration object needs to contain all the required properties and can contain any of the optional properties. For a full list of required and optional properties, see the JavaScript API reference for insight.components.Table.

By default no data formatting will be applied to columns. However if you specify the type property in the column configuration with which you instantiate the Table component, then you can benefit from any global formatting rules that apply. There are system default number formats that can be modified globally and will be applied to integers and reals. You can also fallback to using the DataTable mRender configuration property for custom rendering and formatting of cells.

The Table component can be made editable per column. When configuring editable columns, you will need to provide a callback function that will be invoked on each edit finishing. This callback will be passed the new value of the cell, an array of row data, and the actual cell object. Within the callback, you can perform validation of the new value (or use the editorValidate configuration property as described in the JavaScript documentation) and take any action needed upon success. When validation fails or if there is a problem processing the value, you should throw an error with a meaningful message for the end user.

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

var table = new insight.components.Table(
    'data-table', 
    [
        {
            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
);

Contents

Index

Glossary

Search Results

Creating Custom Tables