A table component built with angular that is catered to real-time data.

• column-specific filtering
• column sorting
• stacked ordering
• column resizing
• column re-ordering
• localStorage state persistance
• pagination

$ git clone [email protected]:DataTorrent/malhar-angular-table.git
$ cd malhar-angular-table
$ npm install .
$ bower install

$ grunt serve

First, include mlhr-table.js and mlhr-table.css in your project. Then, in your markup, instantiate table instances with an <mlhr-table> tag:

<mlhr-table 
    options="options" 
    columns="columns" 
    rows="rows"
    table-class="table"
    selected="array_of_selected">
</mlhr-table>

The mlhr-table tag can have the following attributes:

The options object should be available on the parent scope of the <mlhr-table> element. It is optional (defaults are used) and has the following keys:

A common requirement for tables showing dynamically loaded data is to show loading feedback. There are several options pertaining to this: loading, loadingText, and loadingTemplateUrl. To disable loading text, a promise object from data loading can be provided, so that setLoading(false) can be attached to promise.then(). Optionally, onRegisterApi function can be specified, which provides direct access to setLoading and other table controller methods. This function specifies a single argument, which is the api object provided by the table. Example: onRegisterApi: function(api) { $scope.tableAPI = api; }.

Similar to loading state, there are two options for visual representation of when there are no rows: noRowsText and noRowsTemplateUrl.

Default Value: [ 'glyphicon glyphicon-sort', 'glyphicon glyphicon-chevron-up', 'glyphicon glyphicon-chevron-down' ] If a column has a sort function specified, the column header will contain a <span> element with a css class of sorting-icon. This sortClasses array contains three strings that will be appended to the <span> className, one for each state of a sorted column: [classes_for_no_sort, classes_for_ascending_sort, classes_for_descending_sort].

If defined, this requires the presence of storageKey. This object should follow a subset of the API for localStorage; specifically having the methods setItem, getItem, and removeItem. It will use storageKey as the key to set. The most common use-case for this is simply to pass localStorage to this option.

An advantage of providing an options object is that mlhrTable decorates it with a few things for greater control. Below are the things mlhrTable adds.

When the user is scrolling, this property will be a promise that gets resolved when the user has stopped scrolling. If the user is not scrolling, this will have a value of null. This can be useful if the table has a lot of columns and you want to optimize performance by deferring updates to when the user stops scrolling.

The columns should be an array of Column Definition Objects. The order in which they appear in this array dictates the order they will appear by default. Column Definition Objects have the following properties:

The rows of the table can be sortable based on a column by setting the sort attribute of a Column Definition Object to a function with the following signature:

/**
 * Defines sort function for ascending order.
 * @param {Object} rowA     First row being compared
 * @param {Object} rowB     Second row being compared
 * @return {Number}         Result of comparison. 
 */
function MySortFunction(rowA, rowB) {
    // Assuming propertyKey is numeric, 
    // this would work as a number sorter:
    return rowA.propertyKey - rowB.propertyKey;
}

The returned value should mirror how Array.prototype.sort works: If the returned value is negative, rowA will be placed above rowB in the ascending sort order. If it is negative, rowB will be placed above rowA in the ascending sort order. If it is zero, the two rows will be considered the same in terms of sorting precedence.

There are two built-in sort functions availablewhich handle the two most common use-cases: "string" and "number". To use these, simply set the sort attribute to one of these strings.

Sorting can be set by the user by clicking the headers of sortable columns, and can be stacked by holding shift and clicking. The initial sort order can be set using the initialSorts option in the Options Object, shown in the table above.

If a filter function is set on a Column Definition Object, that column will contain an input field below the main column header where the user can type in a value and the rows will be filtered based on what they type and the behavior of the function. This function should have the following signature:

/**
 * Defines a filtering function
 * @param {String} term          The term entered by the user into the filter field.
 * @param {Mixed} value          The value of row[column.key]
 * @param {Mixed} computedValue  The value of column.format(row[column.key], row). Will be the same as `value` if there is no format function for the column.
 * @param {Object} row            The actual row of data
 * @return {Boolean}
 */
function MyFilterFunction(term, value, computedValue, row) {
    // Assuming row[column.key] is a string,
    // this would work as a simple matching filter:
    return value.indexOf(term) >= 0;
}

When there is a value provided by the user in the filter field, every row in the dataset is passed through this function. If the function returns true, the row will be included in the resulting rows that get displayed. Otherwise it is left out.

There are several common filter functions that are built-in. Use them by passing one of the following strings instead of a function:

There is a special type of column called a selector, which will render as a checkbox that, when clicked, will populate a selected array that is provided through an attribute of the mlhr-table element. The following is an example column definition for a selector (Usually this column appears first):

$scope.myColumns = [
    {
        id: 'selector',
        key: 'idKeyOfObjects',   // used to populate the selected array
        label: '',               // no label for checkbox column
        selector: true,
        width: '40px',           // Fixed width of 40px
        lockWidth: true,         // to keep it narrow
        selectObject: true       // Optional: by default, selecting a row puts the value of 
                                 // row[idKeyOfObjects] into the selected array. If this option
                                 // is set to true, the entire object will be placed into the 
                                 // selected array.
    }
]

IE 9+ Firefox 4+ Safari 5+ Chrome 5+