Need help with sortable-table?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

stevenrskelton
201 Stars 36 Forks MIT License 194 Commits 25 Opened issues

Description

Polymer Web Component that generates a sortable <table> from inlined or AJAX JSON, JSON5, and arrays.

Services available

!
?

Need anything else?

Contributors list

No Data

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

    
    
  3. Import Custom Element:

    
    
  4. Import a theme, like the Bootstrap compatible theme (Optional):

    
    

    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:

    
    

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

        
        
    
    

History

For detailed changelog, check Releases.

License

MIT License © Steven Skelton

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.