[
{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: 'apple', alice: 5, bill: 6, casey: 4 },
{fruit: 'banana', alice: 3, bill: 9, casey: 2 },
{fruit: 'grape', alice: 8, bill: 3, casey: 0 },
{fruit: 'pear', alice: 0, bill: 7, casey: 4 },
{fruit: 'strawberry', alice: 4, bill: 5, casey: 2 }
]
Name | Element Types | Description |
---|---|---|
sortable-table |
table |
Root table used for web component. |
checkbox-column |
th , td |
Column used to display selection checkboxes |
column-N |
th , td |
(N is an integer) Data columns, in order of display. This is useful when formatting independant of whether
a checkbox column is or is not displayed. When a checkbox is not displayed, column-0 will
refer to td:nth-of-type(0) , but with a checkbox it will be td:nth-of-type(1) |
column-NAME |
th , td |
(NAME is a column 's name ) This is what should be used to style column cells.
Styles will be fixed to a column even when columns are reordered for display. |
grid |
tbody |
Added when {{grid}} is true |
selected-row |
tr |
Added to any row that has been selected (1 or more) |
editor-row |
tr |
Added to a row that is being edited (at most 1 row) |
edited-row |
tr |
Added to any row that has been been edited and the change is part of the undo stack. (at most 1; or 1 or more if multiRowEdit is true ) |
simplePager |
div |
Built-in footer template |
indexedPager |
div |
Built-in footer template |
defaultPager |
div |
Built-in footer template |
articlePager |
table |
Built-in footer template |
infinitePager |
div |
Built-in footer template |
alice
DOM index: | {{nodeIndex}} |
columns index: |
{{index}} |
CSS classes: | {{classes}} |