For a live demo of this predix UI component, visit

License: Other

Language: HTML

Keywords: predix-ui



Px-Data-Table is a Predix Experience ('Px') component that defines a data table, optionally using a sub-element for advanced column settings.



  1. node.js
  2. npm
  3. bower
  4. webcomponents-lite.js polyfill

Node, npm and bower are necessary to install the component and dependencies. webcomponents.js adds support for web components and custom elements to your application.

Getting Started

First, install the component via bower on the command line.

bower install --save

Second, import the component to your application with the following tag in your head.

<link rel="import" href="bower_components/px-data-table/px-data-table.html"/>

Finally, use the component in your application:


    <px-data-table table-data="{{data}}"></px-data-table>


    <px-data-table filterable selectable table-data="{{data}}"></px-data-table>

    <px-data-table selected-rows="{{mySelectedItems}}" filterable selectable striped table-data="{{data}}">
      <px-data-table-column name="last" ...></px-data-table-column>
      <px-data-table-column name="color" ...></px-data-table-column>
      <px-data-table-column name="date" ...></px-data-table-column>

Integrating with other frameworks (ex: Angular):

You may not be able to use 2-way binding with the objects/arrays in other frameworks such as Angular.

We suggest instead to use events and selectors, for example:

document.getElementById("myDataTable").addEventListener("px-row-click", function(e) {

document.getElementById("myDataTable").addEventListener("px-select-all-click", function(e) {

$scope.doSomethingWithSelectedRows = function() {
    $scope.allSelectedRows = document.getElementById("myDataTable").selectedRows;

You may also want to prevent your data from auto-synching with your model. If so, we've written up a [little explanation] to help you with that.




Type: Array - (Required)

Data for the table to display.

Expected data format is just a json array. Each object in the array represents a row in the table.

Each item in an object will be displayed as a separate column, unless px-data-table-columns are defined to limit which columns are displayed.

<px-data-table table-data="{{data}}"></px-data-table>
   "index": 0,
   "name": "Liz Grimes",
   "image": "",
   "date": "Sun Aug 14 1994 03:27:03 GMT-0700 (PDT)"
   "index": 1,
   "name": "Frazier Lara",
   "image": "",
   "date": "Tue May 24 1988 14:10:20 GMT-0700 (PDT)",

Type: Boolean - (Optional) - Default: false

Use the filterable attribute if the table has filtering functionality per column turned on.

If columns are specified with px-data-table-column, they must have a filterable attribute to be able to be filtered.

<px-data-table filterable table-data="{{data}}"></px-data-table>

Type: Boolean - (Optional) - Default: false

Use the selectable attribute if the table rows should be able to be selected.

<px-data-table selectable table-data="{{data}}"></px-data-table>

Type: Boolean - (Optional) - Default: false

Use the striped attribute if the table rows are striped

<px-data-table striped table-data="{{data}}"></px-data-table>

Type: Boolean - (Optional) - Default: false

Use the table-columns attribute if the table should be displayed as columns, instead of a grid.

<px-data-table table-columns table-data="{{data}}"></px-data-table>

Type: Boolean - (Optional) - Default: false

Use the table-rows attribute if the table should be displayed as rows, instead of a grid.

<px-data-table table-rows table-data="{{data}}"></px-data-table>

Type: Array - (Optional)

Selected rows in the data table setup for binding.

This property is read only.

<px-data-table selected-rows="{{mySelectedItems}}" table-data="{{data}}"></px-data-table>

Type: Boolean - (Optional) - Default: false

Use the show-column-chooser attribute if you want to display a drodpown above the top right of the table, allowing to select which columns should be shown and which columns should be hidden. List of columns of tbhe dropdown is following the order of columns in the table.

<px-data-table show-column-chooser table-data="{{data}}"></px-data-table>

Type: Boolean - (Optional) - Default: false

Use the enable-column-reorder attribute if you want to allow the user to drag and drop the column headers to reorder the column headers.

<px-data-table enable-column-reorder table-data="{{data}}"></px-data-table>

Type: Boolean - (Optional) - Default: false

Use the enable-column-resize attribute if you want to allow the user to resize the column headers by clicking and dragging the right border of a header. If there is no space available then resizing won't be possible (i.e all columns already to their minimum size, typically when the table can't be displayed entirely).

<px-data-table enable-column-resize table-data="{{data}}"></px-data-table>



Fired when table row is clicked (selected or unselected)

document.getElementById("mytable").addEventListener("px-row-click", function(e) {
  var clickedRow = e.detail.row;
  console.log("Row clicked", clickedRow, " _selected: ", clickedRow._selected);


Fired when the select all button is clicked (selected or unselected)

document.getElementById("mytable").addEventListener("px-select-all-click", function(e) {
  var allSelectedRows = e.detail;
  console.log("Select/unselect all", allSelectedRows);



Takes a column name as parameter and hides the matching column.


Takes a column name as parameter and shows the matching column if hidden.


Element that defines a columns in a data table.

<px-data-table-column name="first"></px-data-table-column>



Type: String - (Required)


Name of the item in a row object to display.

<px-data-table-column name="first" ...></px-data-table-column>

Type: String - (Optional) - Default: string


Type of the item in a row object to display.

Options: string, html

WARNING! Potential XSS vulnerability if html comes from an untrusted source. This component does NOT do any sanitizing, it will execute whatever you pass it.

<px-data-table-column type="html" ...></px-data-table-column>

Type: String - (Optional) - Default: capitalized name

Label in table heading for column. Optional, will use capitalized name attribute by default.

<px-data-table-column label="The First Name" ...></px-data-table-column>

Type: Boolean - (Optional) - Default: false

If column is filterable for filtering.

<px-data-table-column filterable ...></px-data-table-column>

Type: Boolean - (Optional) - Default: false

If column is sortable.

<px-data-table-column sortable ...></px-data-table-column>

Type: Number - (Optional) - Default: no maximum, will make row as wide as necessary to display all content

Maximum number of characters in a column. Optional.

<px-data-table-column max-column-character-width="10" ...></px-data-table-column>

Type: String - (Optional) - Default: false

Where to clip the data and put ellipsis for the maximum characters in the column.

Options: center, left, right

<px-data-table-column ellipsis-clip-position="center" ...></px-data-table-column>

Type: String - (Optional) - Default: filter on the typed in string

Full path to the custom function (on window) to filter this row with.

A custom function with this path must on window. If not, the column falls back to default filtering behavior.

We highly suggest namespacing this function name so you don't pollute the global namespace and so you can have multiple datatables with different filtering functions.

<px-data-table-column filter-function-name="pressureDataTableCustomFunctions.filterWholeWord" ...></px-data-table-column>

Type: String - (Optional) - Default: sort in increasing/decreasing alphanumerical

Full path to the custom function (on window) to sort this row with.

A custom function with this path must on window. If not, the column falls back to default sorting behavior.

We highly suggest namespacing this function name so you don't pollute the global namespace and so you can have multiple datatables with different sorting functions.

<px-data-table-column sort-function-name="temperatureDataTableCustomFunctions.sortByEmailDomain" ...></px-data-table-column>

Type: Boolean - (Optional) - Default: false

use this attribute to hide the column.

<px-data-table-column hide ...></px-data-table-column>


No events are fired by px-data-table-column.


No functions are exposed by px-data-table-column.

Using Events

Events follow the Polymer data-binding standards.

You can can attach listeners by using one of the methods below:

  1. Polymer Event listener
  2. "on-x" annotated event listener
  3. addEventListener vanilla Javascript method

Local Development

From the component's directory...

$ npm install
$ bower install
$ grunt sass

From the component's directory, to start a local server run:

$ grunt depserve

Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples.


By default grunt watch is configured to enable LiveReload and will be watching for modifications in your root directory as well as /css.

Your browser will also need to have the LiveReload extension installed and enabled. For instructions on how to do this please refer to:

Disable LiveReload by removing the livereload key from the configuration object or explicitly setting it to false.


Devmode runs grunt depserve and grunt watch concurrently so that when you make a change to your source files and save them, your preview will be updated in any browsers you have opened and turned on LiveReload. From the component's directory run:

$ grunt devmode

GE Coding Style Guide

GE JS Developer's Guide

Known Issues

Please use Github Issues to submit any bugs you might find.

Project Statistics

Sourcerank 8
Repository Size 3.37 MB
Stars 11
Forks 89
Watchers 908
Open issues 44
Dependencies 29
Contributors 11
Tags 167
Last updated
Last pushed

Top Contributors See all

Martin Wragg lrbridge FrenchBen Runn Vermel Grant R Pickett gedesigntech Justin DeLuna 212402415 Steve Winkler Yash Dane Petersen

Packages Referencing this Repo

For a live demo of this predix UI component, visit
Latest release v6.1.0 - Published - 11 stars

Recent Tags See all

v6.1.0 March 13, 2018
v6.0.0 March 07, 2018
v5.1.13 February 23, 2018
v5.1.12 February 10, 2018
v5.1.11 February 09, 2018
v5.1.10 January 05, 2018
v5.1.9 December 11, 2017
v5.1.8 December 01, 2017
v5.1.7 November 30, 2017
v5.1.6 November 09, 2017
v5.1.5 October 31, 2017
v5.1.4 October 31, 2017
v5.1.3 October 31, 2017
v5.1.2 October 30, 2017
v5.1.1 October 30, 2017

Something wrong with this page? Make a suggestion

Last synced: 2016-05-27 14:00:34 UTC

Login to resync this repository