@egeatech/vue2-datatable-component NPM

@egeatech/vue2-datatable-component

This is a fork of Datatable for Vue.js 2.x of Ken Berkeley npm i @egeatech/vue2-datatable-component

Pro	Desc	Type	Optional values	Default value	Required
columns	Defination of columns	Array	-	-	Y
data	Data of the current page (rows)	Array	-	-	Y
total	Total number of the records	Number	-	-	Y
query	Query object	Object	-	-	Y
selection	Container for multi-select	Array	-	-	N
summary	Summary row	Object	-	-	N
xprops	Carrier for extra props passed to dynamic components	Object	-	-	N
HeaderSettings	Whether to render HeaderSettings	Boolean	true / false	false	N
Pagination	Whether to render pagination relevant	Boolean	true / false	true	N
pageSizeOptions	options for PageSizeSelect	Array	-	10, 20, 40, 80, 100	N
tbl-class	Classes for \	String / Object / Array	-	-	N
tbl-style	Inline styles for \	String / Object / Array	-	-	N
fixHeaderAndSetBodyMaxHeight	(Just as its name implies)	Number	-	-	N
support-backup	Whether to enable backup of HeaderSettings	Boolean	true / false	false	N
support-nested	Whether to enable nested components feature (accordion mode is available)	Boolean / String	true / false / 'accordion'	false	N
`(*)` loading	Display loading slot in table body	Boolean	-	false	N
`(*)` enableClickableRows	Enable the on-row-click event	Boolean	-	true	N
`(*)` enableSearchRow	Add a row for filtering the results	Boolean	-	false	N
`(*)` searchDebounce	The amount of time (in milliseconds) before debounced search will be triggered	Number	-	500	Y

Attr	Desc	Type	Optional values	Default value	Required
title	Displayed title	String	-	-	N
label	Label in HeaderSettings (title will take its place if not set)	String	-	-	N
field	Field name of the row	String	-	-	N
explain	Explanation of the field (tooltip)	String	-	-	N
sortable	Is sortable	Boolean	true / false	false	N
visible	Is visible	Boolean / String (if the type is String, the visibility is not allowed to toggle)	true / false / 'true' / 'false'	true	N
fixed	Is fixed	Boolean / String	true / false / 'left' / 'right'	-	N
group	Group name	String	-	-	N
colClass	Classes for the whole column	String / Object	-	-	N
colStyle	Inline styles for the whole column	Object	-	-	N
thClass	Classes for \	String	-	-	N
thStyle	Inline styles for \	Object	-	-	N
thComp	dynamic component for \	String / Object	-	-	N
tdClass	Classes for \	String	-	-	N
tdStyle	Inline styles for \	Object	-	-	N
tdComp	dynamic component for \	String / Object	-	-	N
`(*)` fireRowClick	fire the on-row-click event if the cell is clicked	Boolean	-	true	N
`(*)` searchable	enable the filtering input (enableSearchRow has to be set true)	Boolean	-	false	N
`(*)` searchField	fire the search and order queries with another string as field	String	-	-	N
`(*)` searchOptions	use a dropdown as search mode with a set of values `{label: '' value: ''}`, the label will be displayed, the value will be used for the search	Array	-	-	N

spinner slot: used to insert your own custom spinner (to use with the loading parameter above)
<template v-slot:spinner> Loading... </template>
scoped-slots named as the table fields: you can access the cell/row information and override the cell content
- data: for the cell field
- row: for the row object
  <template v-slot:surname="col"><span style="color: darkred"><i>{{ col.data }}</i></span></template>

fields can be written as object paths (like 'user.house.address')
small style and translation adjustments
on-row-click event (bound to cells, cells can be excluded using fireRowClick option)

2 months ago

2 months ago

2 months ago

2 months ago