3.1.2 • Published 5 years ago
@igoodbad/responsive-table v3.1.2
\<responsive-table>
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