sortable-table

<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:

Built-In Table Features

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="">
         <!-- add templates here -->
         <!-- add remote datasource here -->
     </sortable-table>
    

History

For detailed changelog, check Releases.

License

MIT License © Steven Skelton