About the responsive-table category

Directory responsive-table
1

responsive-table: # <responsive-table>
Table full responsive in any devices
Published on webcomponents.org Platform Build Status

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