Datatable

Default Datatable

This shows the default ui styles and behavior when using the Invision UI datatable.

This example demonstrates how to use the datatable component to present a collection of JSON data.

This datatable has a Custom Header Cell Template applied to it, which adds a cog icon to each header cell that is visible on mouse-hover.

This datatable also has a Custom Header Template applied to it, which adds a cog element to the top-right corner.

You will find code in the controller (datatable.example.controller.js) that wires up a click-handler to each header cell cog. In this example, clicking a header cell cog prints a message to the log.

To turn on auto column resize feature, use the attribute directive inv-grid-autosize-column

HTML

<p>
    This example demonstrates how to use the datatable component to present a collection of JSON
    data.
</p>
<p>
    This datatable has a Custom Header Cell Template applied to it, which adds a cog icon to
    each header cell that is visible on mouse-hover.
</p>
<p>
    This datatable also has a Custom Header Template applied to it, which adds a cog element to
    the top-right corner.
</p>
<p>
    You will find code in the controller (datatable.example.controller.js) that wires up a
    click-handler to each header cell cog. In this example, clicking a header cell cog prints a
    message to the log.
</p>

<p>
    To turn on auto column resize feature, use the attribute directive <code>inv-grid-autosize-column</code>
</p>

<div ng-controller="datatableExampleController" class="t-content">
    <div class="s-datatable c-datatable"
         ui-grid-resize-columns
         inv-grid-autosize-column
         ui-grid="{ data: datatable.tableData,
                    onRegisterApi: datatable.init,
                    columnDefs: datatable.columnsWithDefaultSizing }"></div>
</div>

Column Moving

Datatable columns can be moved by clicking, dragging and dropping.

HTML

<div ng-controller="datatableExampleController" class="t-content">
    <div class="c-datatable">
        <div ui-grid="{ data: datatable.tableData,
                        columnDefs: datatable.columnsWithDefaultSizing }" class="s-datatable" ui-grid-move-columns></div>
    </div>
</div>

Min/Max Column Widths

Datatable columns can be configured with minimum and maximum widths.

HTML

<div ng-controller="datatableExampleController" class="t-content">
    <div class="c-datatable">
        <div class="s-datatable"
             ui-grid="{ data: datatable.tableData,
                        columnDefs: datatable.columns,
                        enableSorting: false }"></div>
    </div>
</div>

Add/Remove datatable columns dynamically

Datatables can be configured with default columns, as well as ad-hoc adding/removing columns at the user's discretion.

HTML

<style>
  #datatable-example-btn[disabled] { opacity: .4; }
  #datatable-example-grid-container .ui-grid-pager-container { display: none; }
  #datatable-example-grid-container .ui-grid-pager-count-container {
    float: left;
    font-size: .9em;
    color: #6a6a6a;
    padding: 0 0 5px;
  }
</style>

<div ng-controller="datatableDynamicColumnsExampleController" class="t-content">
  <div class="u-mb++">
    <button id="datatable-example-btn"
            class="btn u-mr+"
            ng-disabled="datatable.pricingPlanIsVisible === false"
            ng-click="datatable.removePricingPlanColumn()">Remove Pricing Plan Column</button>
    <button id="datatable-example-btn"
            class="btn u-mr+"
            ng-disabled="datatable.pricingPlanIsVisible === true"
            ng-click="datatable.addPricingPlanColumn()">Add Pricing Plan Column</button>
  </div>

  <div id="datatable-example-grid-container" class="c-datatable">
    <div class="s-datatable"
         ui-grid-pagination
         ui-grid-resize-columns
         ui-grid="{ data: datatable.tableData,
                    columnDefs: datatable.columns,
                    onRegisterApi: datatable.init,
                    enablePagination: true,
                    paginationPageSizes: [25, 50, 100] }">
    </div>
  </div>
</div>

Custom Cell Templates

There are various custom cell templates that can be re-used that are provided by the guide.

HTML

<div ng-controller="datatableExampleController" class="t-content">
    <div class="c-datatable">
        <div ui-grid="{ data: customColumnsTableData,
                        columnDefs: customColumnDefinitions }" class="s-datatable"></div>
    </div>
</div>

Pinned Column

Have a column that is fixed to one side of the table. The column also stays fixed in the event of scrolling

To have a pinned/fixed column, add to the ui-grid table ui-grid-pinning and append property pinnedLeft: true or pinnedRight: true to the column definition.

If you want to pin a column in the middle, all the unpinned columns to the left of it need to have enablePinning: false declared in their column definitions.

HTML

To have a pinned/fixed column, add to the ui-grid table <code>ui-grid-pinning</code> and
 append property </code><code>pinnedLeft: true</code> or <code>pinnedRight: true</code> to the column definition.<br><br>

If you want to pin a column in the middle, all the unpinned columns to the left of it need to have
 <code>enablePinning: false</code> declared in their column definitions.

<div ng-controller="datatableExampleController" class="t-content">
    <div class="c-datatable">
        <div class="s-datatable"
             ui-grid="{ data: datatable.tableData,
                        columnDefs: columnsWithPinning }"
             ui-grid-pinning></div>
    </div>
</div>

Action Column

The action column is fixed to the right and is used for buttons like the ellipsis menu and rearranging rows

Add to the ui-grid table ui-grid-pinning to enable pinning.
The action column must have the property pinnedRight: true on its column definition.
Sorting should be disabled for this column (enableSorting: false).
The table must use the class c-datatable--actions.
The cell template must use the class c-datatable-actionCell.

HTML

Add to the ui-grid table <code>ui-grid-pinning</code> to enable pinning.<br>
The action column must have the property <code>pinnedRight: true</code> on its column definition.<br>
Sorting should be disabled for this column (<code>enableSorting: false</code>).<br>
The table must use the class <code>c-datatable--actions</code>.<br>
The cell template must use the class <code>c-datatable-actionCell</code>.<br><br>

<div ng-controller="datatableExampleController" class="t-content c-content">
    <div class="c-content-innerContainer">
        <div class="c-content-tableContainer c-content-tableContainer--flush">
            <div class="s-datatable c-datatable c-datatable--actions"
                 ui-grid="{ data: datatable.tableData,
                            columnDefs: columnsWithActions }"
                 ui-grid-pinning>
            </div>
        </div>
    </div>
</div>

Flexible Height

Overrides default height set by UI Grid in favor of auto height.

I'm a sibling element right up on the bottom of the table because we override the calculated height with height: auto

HTML

<div ng-controller="datatableExampleController" class="t-content">
    <div class="s-datatable c-datatable c-datatable--flexibleHeight"
         ui-grid-resize-columns
         inv-grid-autosize-column
         ui-grid="{ data: datatable.short,
                    onRegisterApi: datatable.init,
                    columnDefs: datatable.columnsWithDefaultSizing }"></div>
    <div>I'm a sibling element right up on the bottom of the table because we override the calculated height with height: auto</div>
</div>

Footer

Grid with Column Footer

When setting grid option for footer, merge the gridOption with gridOptionDefault in datatable.style.js to ensure the footer dimension is properly set.

ui-grid only provides min/max/sum/avg/count aggregation with flat-data table, to use custom aggregation, use the grouping feature. Explanation is provided in UI Grid Tutorial and here is an example of custom aggregation.

HTML

<p>
    When setting grid option for footer, merge the gridOption with <code>gridOptionDefault</code> in
    <code>datatable.style.js</code> to ensure the footer dimension is properly set.
</p>
<p>
    ui-grid only provides min/max/sum/avg/count aggregation with flat-data table, to use
    custom aggregation, use the grouping feature.  Explanation is provided
    <a href="http://ui-grid.info/docs/#/tutorial/105_footer" target="_blank">in UI Grid Tutorial</a>
    and here is <a href="http://plnkr.co/edit/3lAuYzzGBwaQ3PJRSvh8?p=preview" target="_blank">an example of custom aggregation</a>.
</p>


<div ng-controller="datatableExampleController" class="t-content">
    <div class="c-datatable">
        <div class="s-datatable"
             ui-grid="gridOptionWithPinningAndAggregation"
             ui-grid-pinning
             ui-grid-move-columns></div>
    </div>
</div>

No Results

Grid with no results

This example demonstrates how to display no results.

HTML

<p>
    This example demonstrates how to display no results.
</p>

<div ng-controller="datatableExampleController" class="t-content">
    <div style="height: 500px;"
         class="s-datatable c-datatable"
         ui-grid-resize-columns
         inv-grid-autosize-column
         ui-grid="{ data: datatable.emptyData,
                    onRegisterApi: datatable.init,
                    columnDefs: datatable.columnsWithDefaultSizing }"
         ng-class="{'is-empty': !datatable.emptyData.length}">

        <div class="c-datatable-emptyMessage c-callToAction u-sizeFull">
            <inv-icon class="c-callToAction-logo" glyph="'loc-search-cross'"></inv-icon>
            <div class="c-callToAction-label" ng-bind="::coreLocaleKeys.ZERO_STATE.NO_DATA | i18n"></div>
            <div class="c-callToAction-label c-callToAction-label--secondary"
                 ng-bind="::coreLocaleKeys.ZERO_STATE.NO_DATA_ADJUST_FILTERS | i18n"></div>
        </div>
    </div>
</div>

Column Menu

This shows the default ui styles and behavior when using the Invision UI datatable.

HTML

<div class="t-content" ng-controller="datatableWithMenuExampleController">
    <div class="c-datatable">
        <div class="s-datatable"
             ui-grid="gridOption"
             ui-grid-pinning
             ui-grid-move-columns></div>
    </div>
</div>

Cell Formatting

Format cells based on the value of the column

HTML

<div ng-controller="datatableExampleController" class="t-content">
    <div class="s-datatable c-datatable"
         ui-grid-resize-columns
         inv-grid-autosize-column
         ui-grid="gridWithColumnFormatting"></div>
</div>

Column Header with Button

Sample shows how to use special column header that includes a button

To add a subtle button that reveals on hover in header, do the following in column definition:

Set the headerCellTemplate to use headerWithButtonTemplate
Add button object in the column definition
Specify both the iconGlyph and the onClick properties on the button object

Last Button click: {{ controller.lastClick.displayName }}

HTML

<div class="t-content" ng-controller="DatatableWithButtonExampleController as controller">

    <p>
        To add a subtle button that reveals on hover in header, do the following in column definition:
    </p>

    <ol>
        <li>Set the headerCellTemplate to use <code>headerWithButtonTemplate</code></li>
        <li>Add <code>button</code> object in the column definition</li>
        <li>Specify both the <code>iconGlyph</code> and the <code>onClick</code> properties on the <code>button object</code></li>
    </ol>

    Last Button click: {{ controller.lastClick.displayName }}

    <div class="c-datatable">
        <div class="s-datatable"
             ui-grid="controller.gridOption"
             ui-grid-move-columns></div>
    </div>
</div>

Select All Header Button with row checkbox

Sample shows how to use the native select all from ui-grid

This example demonstrates how to use a Select All header with individual checkbox per row. The feature is enabled through ui-grid-selection directive. This example also shows how to disable a row from row selection.

HTML

<p>
    This example demonstrates how to use a Select All header with individual checkbox per row.  The feature is enabled through <code>ui-grid-selection</code> directive.
    This example also shows how to disable a row from row selection.
</p>

<div ng-controller="datatableWithSelectAllCheckboxController as $ctrl" class="t-content">
    <div class="s-datatable c-datatable"
         ui-grid-resize-columns
         ui-grid-selection
         inv-grid-autosize-column
         ui-grid="$ctrl.gridConfig"></div>
</div>

Tree View with Delimited List Header

Grid with Tree View and Delimited List Header.

HTML

<div class="t-content" ng-controller="DatatableWithTreeViewExampleController as $ctrl">
    <div class="c-datatable">
        <div class="s-datatable"
             ui-grid="$ctrl.gridOptions"
             ui-grid-pinning
             ui-grid-move-columns
             ui-grid-tree-view></div>
    </div>
</div>

Basic Table with editable fields

Datatable with editable fields.

This example adds editable columns to a datatable, this component receives table definition as well as table contents if there is such.

HTML

<p>
    This example adds editable columns to a datatable, this component receives table definition as well as table contents if there is such.
</p>


<div ng-controller="DatatableWithEditableFieldsExample as ctrl" class="t-content">
    <inv-datatable-editable-fields table-data="ctrl.tableData"
                                   column-defs="ctrl.columnDefs"
                                   no-data-text="ctrl.noDataText"
                                   add-item-text="ctrl.addItemText"
                                   clear-all-text="ctrl.clearAllText"
                                   remove-text="ctrl.removeText"
                                   delete-confirmation-title="ctrl.deleteConfirmationTitle"
                                   delete-confirmation-message="ctrl.deleteConfirmationMessage"
                                   on-elements-change="ctrl.onDatatableElementsChange.bind(ctrl)"
                                   on-element-selected="ctrl.onElementSelected.bind(ctrl)"
                                   on-element-added="ctrl.onElementAdded.bind(ctrl)"
                                   on-delete-selected="ctrl.onDeleteSelected.bind(ctrl)"
                                   on-all-items-selected="ctrl.onAllItemsSelected.bind(ctrl)"
                                   on-all-items-deselected="ctrl.onAllItemsDeselected.bind(ctrl)">
    </inv-datatable-editable-fields>
</div>

Basic Table with filters

Datatable with filters.

This example shows datatable that can be filtered on the client side, this component receives table data and callback function onRegisterApi.

onRegisterApi callback function captures the instance of Grid Api and registers a row processor function. This row processor function includes logic to filter datatable by search term and is executed when grid is refreshed.

HTML

<p>
    This example shows datatable that can be filtered on the client side, this component receives table data and callback function onRegisterApi.
</p>
<p>
    onRegisterApi callback function captures the instance of Grid Api and registers a row processor function. This row processor function includes logic to filter datatable by search term 
    and is executed when grid is refreshed.
</p>

<div ng-controller="DatatableWithFiltersExampleController as ctrl" class="t-content">
    <div class="c-filterBar">
        <div class="c-searchForm c-filterBar-filters">
            <input type="text" class="c-filterBar-filter" placeholder="Filter" ng-model="ctrl.filterText" ng-change="ctrl.filterData.bind(ctrl)()" ng-model-options="{debounce: 300}">
        </div>
    </div>
    
    <div class="c-content-tableContainer c-content-containHeight">
        <!--gridOption = { 
            data: data, 
            onRegisterApi: callBackFunction 
        }-->
        <div class="s-datatable c-datatable"
             ui-grid="ctrl.gridOption"></div>
    </div>
</div>

Basic Table with pagination

Datatable with pagination.

This example shows datatable that can be paginated, this component receives table data and callback function onRegisterApi and pagination configuration.

This example hides ui-grid's built in UI to control pagination and uses InvPagerBar controls.

HTML

<p>
    This example shows datatable that can be paginated, this component receives table data and callback function onRegisterApi and pagination configuration.
</p>
<p>
    This example hides ui-grid's built in UI to control pagination and uses InvPagerBar controls.
</p>

<div ng-controller="DatatableWithPaginationExampleController as ctrl" class="t-content">
    <!--gridOption = { 
        enablePaginationControls: false, 
        paginationPageSize: 10, 
        data: data, 
        onRegisterApi: callBackFunction 
    }-->
    <div class="c-content-tableContainer c-content-containHeight">
        <div class="s-datatable c-datatable"
             ui-grid="ctrl.gridOption"
             ui-grid-pagination></div>
    </div>
    <inv-pager-bar
        current-page="ctrl.page.currentPage"
        is-pager-visible="true"
        is-page-information-visible="true"
        is-page-size-options-visible="false"
        items-per-page="ctrl.page.itemsPerPage"
        number-of-items="ctrl.data.length"
        on-page-selected="ctrl.pageChanged.bind(ctrl)">
    </inv-pager-bar>
</div>

Basic Datatable Orderable

Datatable with orderable elements.

This example shows datatable that can be ordered on the client side, this component receives table data and configuration options.

HTML

<p>
    This example shows datatable that can be ordered on the client side, this component receives table data and configuration options.
</p>

<div ng-controller="DatatableWithOrderableElementsExampleController as ctrl" class="t-content" style="width: 100%;">
    <div class="c-content-tableContainer c-content-containHeight">

        <!--
        Object to configure component behaviour

        gridConfiguration = { 
            controlColumnLabel: 'Order',           // String: Label of the column with order controls
            controlColumnPosition: 'last',         // String | Number: Position of the controller column, default is last
            controlOrderingField: 'priority',      // String: The field to be ordered
            controlSelection: {
                onSelectItems: this.onSelectItems, // Function: ( arrayOfElements ) => {}
                selectedItems: []                  // Array: Currently selected elements
            },
            controlStyling:{
                colorized: true,                   // Boolean: Colorize the icons
                downControlGlyph: null,            // String: Choose the glyph
                downControlStyle: null,            // Object: { border: '1px solid red' }
                upControlGlyph: null,              // String: Choose the glyph
                upControlStyle: null,              // Object: { border: '1px solid red' }
            },
            onReorder: this.onReorder,             // Function:( arrayOfElementsReordered ) => {}
            variablesForCellTemplate: {},          // Object: Objects accessible on templates  ::grid.appScope.$ctrl.configuration.variablesForCellTemplate.varName
        
        }-->

        <inv-datatable-orderable 
            table-data="ctrl.gridOptions" 
            configuration="ctrl.gridConfiguration">
        </inv-datatable-orderable>

    </div>
</div>