@valle/valle-table v1.0.1
valle-table
Awesome valle-table - web component using Polymer 3
How to install and use:
1 - Install the element using Yarn:
$ yarn add @valle/valle-table
2 - Import the element:
<script type="module" src="node_modules/@valle/valle-table/main.js"></script>
or in your javascript file
import "@valle/valle-table/main.js";
3 - Start using it!
<valle-table>
<valle-thead>
<valle-tr>
<valle-th> Value </valle-th>
<valle-th> Size </valle-th>
</valle-tr>
</valle-thead>
<valle-tbody>
<valle-tr>
<valle-td> 12cm </valle-td>
<valle-td> 15kg </valle-td>
</valle-tr>
<valle-tr>
<valle-td> 13cm </valle-td>
<valle-td> 10kg </valle-td>
</valle-tr>
</valle-tbody>
<valle-tfooter>
<valle-tr>
<valle-th> Value </valle-th>
<valle-th> Size </valle-th>
</valle-tr>
</valle-tfooter>
</valle-table>
Components
valle-table
The custom <valle-table>
element represents tabular data — that is, information expressed via a two-dimensional data table.
Properties
Property | Type | Default | Description |
---|---|---|---|
label | String | "" | table label (Other element ID) |
See more about original table
element here.
valle-thead
The custom <valle-thead>
element defines a set of rows defining the head of the columns of the table.
Properties
Property | Type | Default | Description |
---|---|---|---|
----- | ----- | ----- | ----- |
See more about original thead
element here.
valle-th
The custom <valle-th>
element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
Properties
Property | Type | Default | Description |
---|---|---|---|
----- | ----- | ----- | ----- |
Styling
The following custom properties and mixins are available for styling:
Custom property | Default | Description |
---|---|---|
--valle-th-text-size | 13px | Font size |
--valle-th-text-color | rgba(0,0,0,.54) | Text color |
See more about original th
element here.
valle-tbody
The custom <valle-tbody>
element groups one or more <valle-tr>
elements as the body of a <valle-table>
element.
Properties
Property | Type | Default | Description |
---|---|---|---|
----- | ----- | ----- | ----- |
See more about original tbody
element here.
valle-tr
The custom <valle-tr>
element defines a row of cells in a table. Those can be a mix of <valle-td>
and <valle-th>
elements.
Properties
Property | Type | Default | Description |
---|---|---|---|
----- | ----- | ----- | ----- |
See more about original tr
element here.
valle-td
The custom <valle-td>
element defines a cell of a table that contains data. It participates in the table model.
Properties
Property | Type | Default | Description |
---|---|---|---|
label | String | "" | td label (Thead ID) |
Styling
The following custom properties and mixins are available for styling:
Custom property | Default | Description |
---|---|---|
--valle-td-text-size | 13px | Font size |
--valle-td-text-color | rgba(0,0,0,.54) | Text color |
See more about original th
element here.
valle-tfooter
The custom <valle-tfooter>
element defines a set of rows summarizing the columns of the table.
Properties
Property | Type | Default | Description |
---|---|---|---|
----- | ----- | ----- | ----- |
See more about original tfoot
element here.
Browser Support
Using the webcomponents.js:
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11+ | Latest ✔ |
Development
1 - Verify if you have node and yarn installed.
2 - Install Polymer-CLI:
$ [sudo] yarn global add polymer-cli
3 - Install local dependencies:
$ yarn
4 - Start the development server:
$ yarn start
Versioning
To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.
Contributing
Find on our issues the next steps of the project ;) Want to contribute? Follow these recommendations.
History
See Releases for detailed changelog.