@egeatech/vue2-datatable-component

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

Original repository | Original documentation

Parameters (*) => new on this fork:

| 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 <table>|String / Object / Array|-|-|N| |tbl-style|Inline styles for <table>|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|

Column Options (*) => new on this fork:

|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 <th>|String|-|-|N| |thStyle|Inline styles for <th>|Object|-|-|N| |thComp|dynamic component for <th>|String / Object|-|-|N| |tdClass|Classes for <td>|String|-|-|N| |tdStyle|Inline styles for <td>|Object|-|-|N| |tdComp|dynamic component for <td>|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|

New component slots:

• 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>

Other personalization:

• 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)