Contact us Create app

Directory

← Back

prism-table

Web component based on Polymer 2. Provide a table component with material design.

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/Prhythm/prism-table on 2019-05-10 ]

<prism-table>

<prism-table> is a Polymer 2 element provides table structure in material design and responsive.

Usage

<prism-table>
    <prism-thead>
        <prism-tr>
            <prism-th>OrderDate</prism-th>
            <prism-th>Region</prism-th>
            <prism-th>Rep</prism-th>
            <prism-th>Item</prism-th>
            <prism-th>Units</prism-th>
            <prism-th>UnitCost</prism-th>
            <prism-th>Total</prism-th>
        </prism-tr>
    </prism-thead>
    <prism-tbody>
        <prism-tr>
            <prism-td title="OrderDate">1/6/2016</prism-td>
            <prism-td title="Region">East</prism-td>
            <prism-td title="Rep">Jones</prism-td>
            <prism-td title="Item">Pencil</prism-td>
            <prism-td title="Units">95</prism-td>
            <prism-td title="UnitCost">1.99</prism-td>
            <prism-td title="Total">189.05</prism-td>
        </prism-tr>
        <prism-tr>
            <prism-td title="OrderDate">1/23/2016</prism-td>
            <prism-td title="Region">Central</prism-td>
            <prism-td title="Rep">Kivell</prism-td>
            <prism-td title="Item">Binder</prism-td>
            <prism-td title="Units">50</prism-td>
            <prism-td title="UnitCost">19.99</prism-td>
            <prism-td title="Total">999.50</prism-td>
        </prism-tr>
    </prism-tbody>
</prism-table>

Styling

<prism-table> provides the following custom properties and mixins for styling:

Custom property Description Default
--var-prism-table-font-size Font size inherit
--var-prism-table-font-weight Font weight inherit
--var-prism-table-backgrounc-color Table background transparent
--var-prism-table-cell-condense Cell padding 0.8em
--var-prism-table-row-hover-background-color Hovered row background color #c5c5c5
--var-prism-table-row-hover-color Hovered row text color inherit
--var-prism-table-row-stripe-background-color Striped row background color #f5f5f5
--var-prism-table-row-stripe-color Striped row text color inherit
--var-prism-table-row-selected-background-color Striped row background color #454545
--var-prism-table-row-selected-color Striped row text color white

Licence

MIT Licence

Compatibility

(Loading compatibility data...)

Last updated: 2017-07-21

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0

Released
2017-07-21
Maturity
TESTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

prism-table - Vaadin Add-on Directory

Web component based on Polymer 2. Provide a table component with material design. prism-table - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Prhythm/prism-table](https://github.com//Prhythm/prism-table/blob/2.0.0/README.md) on 2019-05-10 ]** # \ `` is a [Polymer 2](http://polymer-project.org/) element provides table structure in material design and responsive. # Usage ```html OrderDate Region Rep Item Units UnitCost Total 1/6/2016 East Jones Pencil 95 1.99 189.05 1/23/2016 Central Kivell Binder 50 19.99 999.50 ``` ## Styling `` provides the following custom properties and mixins for styling: Custom property | Description | Default ----------------|-------------|---------- `--var-prism-table-font-size` | Font size | `inherit` `--var-prism-table-font-weight` | Font weight | `inherit` `--var-prism-table-backgrounc-color` | Table background | `transparent` `--var-prism-table-cell-condense` | Cell padding | `0.8em` `--var-prism-table-row-hover-background-color` | Hovered row background color | `#c5c5c5` `--var-prism-table-row-hover-color` | Hovered row text color | `inherit` `--var-prism-table-row-stripe-background-color` | Striped row background color | `#f5f5f5` `--var-prism-table-row-stripe-color` | Striped row text color | `inherit` `--var-prism-table-row-selected-background-color` | Striped row background color | `#454545` `--var-prism-table-row-selected-color` | Striped row text color | `white` # Licence MIT Licence
GitHub Homepage
Issue tracker
License
Online Demo
Documentation
View on GitHub

prism-table version 2.0.0
### Dependencies Polymer/polymer#^2.0.0

Online