# @valle/valle-table > Awesome valle-table - web component using Polymer 3 Latest version **1.0.1** (published 2020-03-20) · MIT license · 0 weekly downloads ## Install ```sh npm install @valle/valle-table pnpm add @valle/valle-table yarn add @valle/valle-table bun add @valle/valle-table ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.1 | | Published | 2020-03-20 | | First published | 2020-03-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 29.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | afonsopacifer, vallesistemas | | Keywords | polymer, polymer-3, web-components, valle-table | ## Links - npm: https://www.npmjs.com/package/@valle/valle-table - Repository: https://github.com/valleweb/valle-table - Issues: https://github.com/valleweb/valle-table/issues - npm.io page: https://npm.io/package/@valle/valle-table ## Dependencies (1) - [@polymer/polymer](https://npm.io/package/@polymer/polymer.md) ^3.0.0 ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 1.0.1 (latest) — 2020-03-20 - 1.0.0 — 2020-03-11 ## README # valle-table > Awesome valle-table - web component using Polymer 3 [![npm](https://img.shields.io/npm/v/@valle/valle-table.svg)](https://www.npmjs.com/package/@valle/valle-table) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@valle/valle-table) ## How to install and use: 1 - Install the element using [Yarn](http://yarn.io/): ```sh $ yarn add @valle/valle-table ``` 2 - Import the element: ```html ``` or in your javascript file ```js import "@valle/valle-table/main.js"; ``` 3 - Start using it! ```html Value Size 12cm 15kg 13cm 10kg Value Size ``` ## Components - [valle-table](#valle-table) - [valle-thead](#valle-thead) - [valle-th](#valle-th) - [valle-tbody](#valle-tbody) - [valle-tr](#valle-tr) - [valle-td](#valle-td) - [valle-tfooter](#valle-tfooter)
## valle-table The custom `` 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.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
## valle-thead The custom `` 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.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead)
## valle-th The custom `` 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.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th)
## valle-tbody The custom `` element groups one or more `` elements as the body of a `` element. ### Properties Property | Type | Default | Description :--- |:--- |:--- |:--- `-----` | *-----* | `-----` | ----- See more about original `tbody` element [here.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody)
## valle-tr The custom `` element defines a row of cells in a table. Those can be a mix of `` and `` elements. ### Properties Property | Type | Default | Description :--- |:--- |:--- |:--- `-----` | *-----* | `-----` | ----- See more about original `tr` element [here.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr)
## valle-td The custom `` 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.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td)
## valle-tfooter The custom `` element defines a set of rows summarizing the columns of the table. ### Properties Property | Type | Default | Description :--- |:--- |:--- |:--- `-----` | *-----* | `-----` | ----- See more about original `tfoot` element [here.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot)
## Browser Support Using the [webcomponents.js](https://github.com/WebComponents/webcomponentsjs): ![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/chrome/chrome_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/opera/opera_48x48.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/firefox/firefox_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/safari/safari_48x48.png) |![IE](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Edge](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.2.2/edge/edge_48x48.png) | :---: | :---: | :---: | :---: | :---: | :---: | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11+ | Latest ✔ ## Development 1 - Verify if you have [node](http://nodejs.org/) and [yarn](http://yarn.io/) installed. 2 - Install [Polymer-CLI](https://www.polymer-project.org/3.0/docs/tools/polymer-cli): ```sh $ [sudo] yarn global add polymer-cli ``` 3 - Install local dependencies: ```sh $ yarn ``` 4 - Start the development server: ```sh $ yarn start ``` ## Versioning To keep better organization of releases we follow the [Semantic Versioning 2.0.0](http://semver.org/) guidelines. ## Contributing Find on our [issues](https://github.com/valleweb/valle-table/issues/) the next steps of the project ;)
Want to contribute? [Follow these recommendations](https://github.com/valleweb/valle-table/blob/master/CONTRIBUTING.md). ## History See [Releases](https://github.com/valleweb/valle-table/releases) for detailed changelog. ## License [MIT License](https://github.com/valleweb/valle-table/blob/master/LICENSE.md) © [valleweb](https://github.com/orgs/valleweb/people) --- _Source: https://npm.io/package/@valle/valle-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._