← Back

responsive-table

Full responsive table any device

Author

Rating

Popularity

<100

<responsive-table>

Name: responsive-table
Availability: InStock
Author: igoodbad

Table full responsive in any devices

Demo

<responsive-table></responsive-table>

Properties

Public properties

Name	Type	Description	Default
breakResize	Number	Declare minimum value in pixels to change view between table and list, this property only accept number.	601
columns	Array	Contains the array of value, the values are display into body of table.	Empty
editTable	Boolean	Boolean value to indicate if the component contains a edit button.	false
headers	Array	Contains the array of headers, shows in the first row in the table.	Empty
search	Boolean	Boolean value to indicate if the component contains search input.	false
searchPlaceholder	String	Word that show in placeholder of input search.	"Ingresa la palabra a buscar"
styleTable	String	Selector of table style, by default "stripped" style is selected.	"stripped"
textCancelBtn	String	Word that show in button cancel.	"Cancelar"
textEditBtn	String	Word that show in button edit.	"Editar"
textNoSelectedRow	String	Text displayed when user don't select row and click/tap in edit button.	"Debe seleccionar una fila para poder editarla"
textSaveBtn	String	Word that show in button save.	"Guardar"

Private properties

Name	Type	Description	Default
_bodyTableElement	Object	Contain the body node of table.	HTMLElement
_columnValues	Array	Contains processed data array columns.	Calculated value
_headerTableElement	Object	Contain the header node of table.	HTMLElement
_listElement	Object	Contain the list node.	HTMLElement
_modalElement	Object	Contain the node of div formated at modal.	HTMLElement
_rowSelectedElement	Array	Contain the full data of row selected, the array only contains a one Object element.	Empty
_valueSearch	String	Contain the word to filter the rows shown into table and list.	''

Coming soon properties

Name	Type	Description	Default
_numberPage	Number	Page indicator, modified by preview/next.	1
_pagination	Boolean	Boolean value to indicate if the component contains pagination.	false
_rowsOption	Array	Values to shown in select max rows by page.	[10, 20, 30]
_textPaginator	String	Text to display in page indicator.	"Página"
_textRowsSelector	String	Text to display in selector of max rows by page.	"Filas por página"

Events

Event	Type	Description	Return
edited-row	CustomEvent	Return data of row edited	Object
info-row	CustomEvent	Return original object of select row in table or list, when user don´t select any row, return a text	Object / String

Styling

Custom property	Description	Type	Default
--table-background-color	Background color of table	Variable	#fff
--stripped-table-header-custom	Styling of header table	Mixin	background-color:#a6ccff;color:#333;border-bottom: 0.15em solid #f3f3f3;
--striped-table-body-custom	Styling of body table	Mixin	background-color: #ededed;
--lineal-table-header-custom	Styling of header table	Mixin	border-bottom: 0.15em solid #b7b7b7;
--lineal-table-body-custom	Styling of body table	Mixin	border-bottom: 0.08em solid #b7b7b7;
--all-lines-table-header-custom	Styling of header table, this style affected all cells	Mixin	border: 0.1em solid black;
--all-lines-table-body-custom	Styling of body table, this style affected all cells	Mixin	border: 0.1em solid black;
--table-row-selected	Background color of selected row, also when user mouse over any row	Variable	#a6ccff
--table-header-sort-indicator-up	Indicator of sort ascending	Variable	" ▲"
--table-header-sort-indicator-down	Indicator of sort ascending	Variable	" ▼"
--list-style-custom	Styling base of list	Mixin	list-style-type: none; margin: 0px 0px; padding: 0; border: 0.07em solid #bababa;
--list-li-custom	Styling li element of list	Mixin	border-top: 0.07em solid black; background-color: #fff; padding: 3px 6px; cursor: pointer;
--list-li-hover-background-color	Background color to highlight element when mouse over	Variable	#a6ccff
--detail-open-custom	Styling to element when it's opened	Mixin	background-color: #cfeaf2;
--detail-open-summary-custom	Styling to element when details it's opened	Mixin	animation: sweep .5s ease-in-out;
--input-search-custom	Styling of input search	Mixin	display: relative; width: 80%; border: none; border-bottom: 2px solid #bababa; margin-bottom: 5px; margin-top: 5px; padding: 5px 10px; font-size: 1rem; font-family: verdana;
--modal-background-color	Background color of the modal window	Variable	rgba(62, 62, 62, 0.7);
--modal-window-custom	Styling of modal window	Mixin	min-width: 200px; max-width: 450px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(rgb(175, 202, 218), rgb(126, 160, 192)); background: -webkit-linear-gradient(rgb(175, 202, 218), rgb(126, 160, 192)); background: -o-linear-gradient(rgb(175, 202, 218), rgb(126, 160, 192));
--modal-input-custom	Style of the element within the modal	Mixin	-
--footer-btn-edit	Styling for edit button, button are visible when editTable is true	Mixin	background-color:#a6ccff; padding: 8px 30px; border: 0.06em groove; border-radius: 2rem; font-family: verdana; font-size: 1rem;
--modal-btn-cancel	Styling to cancel button into modal	Mixin	border: 0.05em solid #757575; padding: 8px 15px; background-color: #ededed; color: #000; border-radius: 2em; font-family: verdana; font-size: 14px; font-weight: bolder;
--modal-btn-save	Styling to save button into modal	Mixin	border: 0.05em solid #757575; padding: 8px 15px; background-color: #51c839; color: #232323; border-radius: 2em; font-family: verdana; font-size: 14px; font-weight: bolder;

Slots

Id slot	Description
slot-over-table	This element is located over the table
slot-footer-table	This element is located into footer of table
slot-bottom-table	This element is located in bottom of table
slot-top-content-modal	This element is located in top of content modal
slot-bottom-content-modal	This element is located in bottom of content modal
slot-footer-modal	This element is located in footer of content modal

License

Apache License 2004

Compatibility

(Loading compatibility data...)

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/paper-input#^3.0.1
@polymer/polymer#^3.0.0

Released: 2019-01-14
Maturity: IMPORTED
License: Apache License 2.0

Compatibility

Framework: Polymer 3.0+
Browser: Browser Independent

responsive-table - Vaadin Add-on Directory

Full responsive table any device

# \ Table full responsive in any devices [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element) [![Platform](https://img.shields.io/badge/Polymer-3.x.x-blue.svg)]() [![Build Status](https://travis-ci.org/igoodbad/responsive-table.svg?branch=master)](https://travis-ci.org/igoodbad/responsive-table) ## Demo ```html ``` ## Properties ### Public properties Name | Type | Description | Default | -----|------|-------------|---------| breakResize | Number | Declare minimum value in pixels to change view between table and list, this property only accept number. | 601 columns | Array | Contains the array of value, the values are display into body of table. | Empty editTable | Boolean | Boolean value to indicate if the component contains a edit button. | false headers | Array | Contains the array of headers, shows in the first row in the table. | Empty search | Boolean | Boolean value to indicate if the component contains search input. | false searchPlaceholder | String | Word that show in placeholder of input search. | "Ingresa la palabra a buscar" styleTable | String | Selector of table style, by default "stripped" style is selected. | "stripped" textCancelBtn | String | Word that show in button cancel. | "Cancelar" textEditBtn | String | Word that show in button edit. | "Editar" textNoSelectedRow | String | Text displayed when user don't select row and click/tap in edit button. | "Debe seleccionar una fila para poder editarla" textSaveBtn | String | Word that show in button save. | "Guardar" ### Private properties Name | Type | Description | Default | -----|------|-------------|---------| _bodyTableElement | Object | Contain the body node of table. | HTMLElement _columnValues | Array | Contains processed data array columns. | Calculated value _headerTableElement | Object | Contain the header node of table. | HTMLElement _listElement | Object | Contain the list node. | HTMLElement _modalElement | Object | Contain the node of div formated at modal. | HTMLElement _rowSelectedElement | Array | Contain the full data of row selected, the array only contains a one Object element. | Empty _valueSearch | String | Contain the word to filter the rows shown into table and list. | '' ### Coming soon properties Name | Type | Description | Default -----|------|-------------|-------- _numberPage | Number | Page indicator, modified by preview/next. | 1 _pagination | Boolean | Boolean value to indicate if the component contains pagination. | false _rowsOption | Array | Values to shown in select max rows by page. | [10, 20, 30] _textPaginator | String | Text to display in page indicator. | "Página" _textRowsSelector | String | Text to display in selector of max rows by page. | "Filas por página" ## Events Event | Type | Description | Return ------|------|-------------|------- edited-row | CustomEvent | Return data of row edited | Object info-row | CustomEvent | Return original object of select row in table or list, when user don´t select any row, return a text | Object / String ## Styling Custom property | Description | Type | Default ----------------|-------------|------|------- --table-background-color | Background color of table | Variable | #fff --stripped-table-header-custom | Styling of header table | Mixin | background-color:#a6ccff;color:#333;border-bottom: 0.15em solid #f3f3f3; --striped-table-body-custom | Styling of body table | Mixin | background-color: #ededed; --lineal-table-header-custom | Styling of header table | Mixin | border-bottom: 0.15em solid #b7b7b7; --lineal-table-body-custom | Styling of body table | Mixin | border-bottom: 0.08em solid #b7b7b7; --all-lines-table-header-custom | Styling of header table, this style affected all cells | Mixin | border: 0.1em solid black; --all-lines-table-body-custom | Styling of body table, this style affected all cells | Mixin | border: 0.1em solid black; --table-row-selected | Background color of selected row, also when user mouse over any row | Variable | #a6ccff --table-header-sort-indicator-up | Indicator of sort ascending | Variable | " ▲" --table-header-sort-indicator-down | Indicator of sort ascending | Variable | " ▼" --list-style-custom | Styling base of list | Mixin | list-style-type: none; margin: 0px 0px; padding: 0; border: 0.07em solid #bababa; --list-li-custom | Styling li element of list | Mixin | border-top: 0.07em solid black; background-color: #fff; padding: 3px 6px; cursor: pointer; --list-li-hover-background-color | Background color to highlight element when mouse over | Variable | #a6ccff --detail-open-custom | Styling to

element when it's opened | Mixin | background-color: #cfeaf2; --detail-open-summary-custom | Styling to

element when details it's opened | Mixin | animation: sweep .5s ease-in-out; --input-search-custom | Styling of input search | Mixin | display: relative; width: 80%; border: none; border-bottom: 2px solid #bababa; margin-bottom: 5px; margin-top: 5px; padding: 5px 10px; font-size: 1rem; font-family: verdana; --modal-background-color | Background color of the modal window | Variable | rgba(62, 62, 62, 0.7); --modal-window-custom | Styling of modal window | Mixin | min-width: 200px; max-width: 450px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(rgb(175, 202, 218), rgb(126, 160, 192)); background: -webkit-linear-gradient(rgb(175, 202, 218), rgb(126, 160, 192)); background: -o-linear-gradient(rgb(175, 202, 218), rgb(126, 160, 192)); --modal-input-custom | Style of the element within the modal | Mixin | - --footer-btn-edit | Styling for edit button, button are visible when editTable is true | Mixin | background-color:#a6ccff; padding: 8px 30px; border: 0.06em groove; border-radius: 2rem; font-family: verdana; font-size: 1rem; --modal-btn-cancel | Styling to cancel button into modal | Mixin | border: 0.05em solid #757575; padding: 8px 15px; background-color: #ededed; color: #000; border-radius: 2em; font-family: verdana; font-size: 14px; font-weight: bolder; --modal-btn-save | Styling to save button into modal | Mixin | border: 0.05em solid #757575; padding: 8px 15px; background-color: #51c839; color: #232323; border-radius: 2em; font-family: verdana; font-size: 14px; font-weight: bolder; ## Slots Id slot | Description --------|------------ slot-over-table | This element is located over the table slot-footer-table | This element is located into footer of table slot-bottom-table | This element is located in bottom of table slot-top-content-modal | This element is located in top of content modal slot-bottom-content-modal | This element is located in bottom of content modal slot-footer-modal | This element is located in footer of content modal ## License Apache License 2004

View on GitHub
View on NPM

responsive-table version 3.1.2
### Dependencies * @polymer/paper-input#^3.0.1 * @polymer/polymer#^3.0.0

Directory