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