@igoodbad/responsive-table

<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