Polymer Web Component that generates a sortable <table> from inlined or AJAX JSON, JSON5, and arrays.
HTML JavaScript CSS PHP
Clone or download

README.md

<sortable-table>

Polymer Web Component that generates a sortable <table> from JSON.

There are many capable Javascript grids, this one aims to have all the same features plus:

  • leverage native browser support for template to be fully customizable, and
  • be declaratively configurable through DOM and require no Javascript to use.

Built-In Table Features

  • Click column headers to sort
  • Drag-and-Drop columns to reorder
  • Edit rows with multi-row Undo
  • Row paging, filtering, checkbox selection, and multi-select
  • Supports table, single row/article, and flowing grid layouts
  • Use of HTML5 template for customization (Cells, Rows, Column Headers and Footers)
  • 2-way data binding with the outside world
  • Separate argument input for metadata, presentation and value calculation in all templates
  • Local or remote data: AJAX support from server-side pagination

Themes

Bootstrap

Bootstrap

ExtJS 4

ExtJS4

ESPN

ESPN

Alternative Row / Non-Table Themes

Article

Article

Article in Grid Mode

Article in Grid Mode

Live Examples and Documentation

Themes

Alternative Row Themes

Row Editor with Undo Functionality

Row Filtering

Additional Arguments

Data Formats

DOM Elements

AJAX, Server-Side Pagination

Auto-Generated Columns

Row Templates

Selected Rows, Multi-Select

Dynamically Changing Columns and Templates

Paging, Top-N Rows

Usage

  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 rel="stylesheet"
          href="bower_components/sortable-table/css/bootstrap.css" 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:

    <sortable-table>
    	<sortable-column>fruit</sortable-column>
    	<sortable-column>alice</sortable-column>
    	<sortable-column>bill</sortable-column>
    	<sortable-column>casey</sortable-column>
    	<!-- data case be either an Array, JSON, or JSON5 -->
    	[
    		[ "apple", 4, 10, 2 ],
    		[ "banana", 0, 4, 0 ],
    		[ "grape", 2, 3, 5 ],
    		[ "pear", 4, 2, 8 ],
    		[ "strawberry", 0, 14, 0 ]
    	]
    </sortable-table>

    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:

    <sortable-table columns="{{columns}}">
    	<!-- add templates here -->
    	<!-- add remote datasource here -->
    </sortable-table>

History

For detailed changelog, check Releases.

License

MIT License © Steven Skelton