Getting Started

Setup

  1. Add the library using the Javascript package manager Bower: bower install --save sortable-table
  2. Import Web Components' polyfill: <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  3. Import Custom Element: <link rel="import" href="bower_components/sortable-table/sortable-table.html">
  4. Import a theme, like the Bootstrap compatible theme (Optional): <link href="bower_components/sortable-table/css/bootstrap.css" rel="stylesheet" shim-shadowdom> And include class="bootstrap" on any sortable-table to apply.
  5. Start using it!

    Start simple and use DOM to configure the grid: fruit alice bill casey [ [ "apple", 4, 10, 2 ], [ "banana", 0, 4, 0 ], [ "grape", 2, 3, 5 ], [ "pear", 4, 2, 8 ], [ "strawberry", 0, 14, 0 ] ]

    Or use Javascript attributes:

    <sortable-table columns='["fruit","alice","bill","casey"]' data='[ [ "apple", 4, 10, 2 ], [ "banana", 0, 4, 0 ], [ "grape", 2, 3, 5 ], [ "pear", 4, 2, 8 ], [ "strawberry", 0, 14, 0 ] ]'> </sortable-table>

    Or take advanced control with custom templates, 2-way data binding, and a remote datasource:

Element Attributes

Attribute Options Default Description
args object {} Custom meta-data to be made available in templates
cellTemplate string null See Table § cellTemplate
checkbox boolean false Renders a checkbox column as first column, facilitating row selection.
columns array [] Columns to display, with options. If [], columns will be computed from data. See Columns
data array [] Data rows
dataSize int 0 Size of data, greater than or equal to length if paging enabled
disableColumnMove boolean false Disables columns from being drag-and-dropped into different positions. Drag-and-drop will be automatically disabled if entire row templates (rowTemplate or rowEditorTemplate) are used. CSS styling using :nth-of-type will likely break unless this is set to true.
filterTemplate string null Sets a template to use to enable row filtering. See § Row Filters.
filterOps array =, <, > Operations for filters. Internal filtering supports: [ "=", "<", "≤", ">", "≥" ] but custom dataSource are free to implement anything.
Also supports JSON array: [{title:"string",op:"string",html:"string"}], allowing button title and html to be set.
footerTemplate string null See Table § footerTemplate
grid boolean false Parameter to toggle between row/grid style in article theme
headerTemplate string null See Table § headerTemplate
loading boolean false Is set to true if data is being retrieved by an external datasource
multiRowEdit boolean false Multiple rows can be part of a single edited and undo.
multiSelect boolean false Multiple rows can be selected
page int 1 Number of pages to skip, pageSize * (page-1) records skipped.
pageSize int -1 Maximum number of records to display, -1 is all records.
rowEditorTemplate string null See Table § rowEditorTemplate
rowSelection boolean false Enable user interactive row selection
rowTemplate string null See Table § rowTemplate
selected object null Element of data (if !multiSelect)
selected array [] Elements of data (if multiSelect)
sortColumn string null Current sorted column.name
sortDescending boolean false Current sorted column sort direction
userSort boolean false Disables built in sort and makes rows reorderable via user drag-and-drop

Data

Input format for data rows is an array of objects, where data for each column is a property of the row object.

Columns

Attribute Options Default Description
args object {} Custom meta-data to be made available in templates
cellTemplate string null See Column § cellTemplate
datatype string null Optional specification of type of data in the column.
footerTemplate string null See Column § footerTemplate
formula function null Single parameter row, return will override any value for property in data, as well as be used for sorting
headerTemplate string null See Column § headerTemplate
name string required Name of row property
sortable boolean null If false, column cannot be sorted by clicking on the column header.
title string name Text to display in column header