@valle/valle-table

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
• valle-thead
• valle-th
• valle-tbody
• valle-tr
• valle-td
• valle-tfooter

---

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.

License

MIT License valleweb