Basic Setup of Themes
CSS should be used to define the presentation of a sortable-table, and a template should be used to define any custom content.
A theme is a combination of presentation and content: CSS defines the overall look, while a collection of templates may be used to define certain behaviours such as paging toolbars.
It is easy enough to define a custom theme, as long as one understands the proper syntax to affect Shadow DOM.
A theme inspired by Bootstrap CSS
options
<link rel="stylesheet" href="../../css/bootstrap.css" shim-shadowdom>
<div class="panel panel-default">
<div class="panel-heading">Optional heading</div>
<sortable-table class="bootstrap" footerTemplate="indexedPager">
<!-- data -->
</sortable-table>
</div>
Optional heading
Fruit
Alice
Bill
Casey
Average
Total
{{value}}
|
[
{fruit: 'apple', alice: 4, bill: 10, casey: 2 },
{fruit: 'banana', alice: 0, bill: 4, casey: 0 },
{fruit: 'grape', alice: 2, bill: 3, casey: 5 },
{fruit: 'pear', alice: 4, bill: 2, casey: 8 },
{fruit: 'strawberry', alice: 0, bill: 14, casey: 0 },
{fruit: 'strawberry', alice: 4, bill: 5, casey: 2 },
{fruit: 'pear', alice: 0, bill: 7, casey: 4 },
{fruit: 'banana', alice: 3, bill: 9, casey: 2 },
{fruit: 'apple', alice: 5, bill: 6, casey: 4 },
{fruit: 'grape', alice: 8, bill: 3, casey: 0 }
]
A theme inspired by Sencha's ExtJS 4 Grid CSS options
<link rel="stylesheet" href="../../css/extjs4.css" shim-shadowdom>
<div class="x-panel x-grid x-panel-default-framed">
<div class="x-panel-header-default-framed-top">Optional heading</div>
<sortable-table class="extjs4" footerTemplate="defaultPager">
<!-- data -->
</sortable-table>
</div>
Fruit
Alice
Bill
Casey
Average
Total
|
{{value}}
|
[
{fruit: 'apple', alice: 4, bill: 10, casey: 2 },
{fruit: 'banana', alice: 0, bill: 4, casey: 0 },
{fruit: 'grape', alice: 2, bill: 3, casey: 5 },
{fruit: 'pear', alice: 4, bill: 2, casey: 8 },
{fruit: 'strawberry', alice: 0, bill: 14, casey: 0 },
{fruit: 'strawberry', alice: 4, bill: 5, casey: 2 },
{fruit: 'pear', alice: 0, bill: 7, casey: 4 },
{fruit: 'banana', alice: 3, bill: 9, casey: 2 },
{fruit: 'apple', alice: 5, bill: 6, casey: 4 },
{fruit: 'grape', alice: 8, bill: 3, casey: 0 }
]
A theme inspired by ESPN.com CSS
<link rel="stylesheet" href="../../css/espn.css" shim-shadowdom>
<div class="mod-container">
<div class="mod-header">Optional heading</div>
<sortable-table class="espn" footerTemplate="simplePager">
<!-- data -->
</sortable-table>
</div>
Fruit
Alice
Bill
Casey
Average
Total
|
{{value}}
|
[
{fruit: 'apple', alice: 4, bill: 10, casey: 2 },
{fruit: 'banana', alice: 0, bill: 4, casey: 0 },
{fruit: 'grape', alice: 2, bill: 3, casey: 5 },
{fruit: 'pear', alice: 4, bill: 2, casey: 8 },
{fruit: 'strawberry', alice: 0, bill: 14, casey: 0 },
{fruit: 'strawberry', alice: 4, bill: 5, casey: 2 },
{fruit: 'pear', alice: 0, bill: 7, casey: 4 },
{fruit: 'banana', alice: 3, bill: 9, casey: 2 },
{fruit: 'apple', alice: 5, bill: 6, casey: 4 },
{fruit: 'grape', alice: 8, bill: 3, casey: 0 }
]