v-datatable-light is a lightweight vue spreadsheet component with no dependencies.
vue datatable example, vue datatable server side, vuetify data table dynamic columns, v data table, vuetify datatable codesandbox, vuetify data table custom sort
Features
- Lightweight
- Provide a pagination component
- Provide an element component for each page
- no dependencies
- Event driven (all events will be sent to you, and you decide how to respond to them)
- css is flexible (it is possible to add classes to almost all generated elements)
- Sort by events
- Head Possibility Repair
- custom columns
- custom headers
- Row selection
How to make use of it:
Install & Download:
npm install v-datatable-light --save
Usage
<DataTable :header-fields="headerFields" :data="data" />
import { DataTable } from 'v-datatable-light' export default { components: { DataTable } }
DataTable Props
Field | Type | Required | default | Description |
---|---|---|---|---|
headerFields | array | true | null | Definition of each column of the table. In each item of this array, you will define how this column will behave. |
data | array | true | null | An array of objects that will feed the data table. |
isLoading | boolean | false | false | Flag to indicate to datatable if the data is loading. If it is, your spinner slot will be shown. |
sortField | string | false | null | To indicate by which field the datatable is sorted for. |
sort | string | false | null | To indicate by which direction the databale is sorted for (‘asc’ or ‘desc’). |
notFoundMsg | string | false | null | Message to by show when no data was found. |
trackBy | string | false | ‘id’ | A unique id column is used for checkbox column type to compare if a field is checked or not. |
css | object | false | Structure | An object with attributes used to add css classes to DataTable internal elements. |
tableHeight | string | false | null | Used to have a fixed header in the table. |
defaultColumnWidth | string | false | ‘150px’ | Set the default column with, only used when ‘tableHeight’ prop is informed. |
onlyShowOrderedArrow | boolean | false | false | When is true  will only show the sorted column’s current direction arrow. |
DataTable Events
Event Name | Description | Params |
---|---|---|
on-update | Called every time the DataTable is sorted | Object with sortField  and sort  attributes. Where sortField  is the column name and sort is the direction (eg asc , desc ) |
on-check-all | Called when the checkbox on the DataTable header is checked or unchecked | If the checkbox is checked it sends the DataTable data list, if it is not, an empty array |
on-checked-item | Called when a checkbox row is checked | Object with the row’s data |
on-unchecked-item | Called when a checkbox row is unchecked | Object with the row’s data |
DataTable Header Fields Props
Name | Type | Required | Default | Description |
---|---|---|---|---|
name | string | true | null | Attribute that the DataTable will try to retrieve the value from the data item. |
label | string | true | null | Attribute that the DataTable will show on the header for the column. |
sortable | boolean | false | false | Define if that column will be sortable or not. In case the value is true, two arrows will be shown on the header. |
customElement | boolean or string | false | null | If sent a true  the DataTable will render a slot with the same name attribute. To customize the slot name, send an string with the whose name |
customHeader | boolean or string | false | null | If sent a true  the DataTable will render a slot with the same name  attribute plus :header , example: name:header . To customize the slot name, send an string with the whose name, without need plus :header . |
format | function | false | null | A function is used to format a value in each line of the DataTable’s body. |
width | string | false | null | String used to define the column width. Only used when ‘tableHeight’ props are informed. |
__slot:actions | string | false | null | Used to create a new column to be used for buttons or any kind of action. You have to inform the slot ‘actions’ and it will be rendered inside each line. In case you want to use more than one action in the same table, you can inform different IDs for each one, and this ID will be used as the slot ID. The format would be: __slot:actions:myActionID , in this case myActionID  is the slot ID |
__slot:checkboxes | string | false | null | Used to create a column with a checkbox. Every time you check or uncheck an item an event is emitted. |
DataTable Css Props Structure
Name | Type | Required | Default | Description |
---|---|---|---|---|
table | string | false | ” | Applied on the table element. |
thead | string | false | ” | Applied on the table thead element. |
theadTr | string | false | ” | Applied on the table thead tr elements. |
theadTh | string | false | ” | Applied on the table thead th elements. |
tbody | string | false | ” | Applied on the table tbody element. |
tbodyTr | string | false | ” | Applied on the table tbody tr elements. |
tbodyTd | string | false | ” | Applied on the table tbody td elements. |
tbodyTrSpinner | string | false | ” | Applied on the table tbody tr element when the spinner is displayed. |
tbodyTdSpinner | string | false | ” | Applied on the table tbody td element when the spinner is displayed. |
tfoot | string | false | ” | Applied on the table tfoot element. |
tfootTr | string | false | ” | Applied on the table tfoot tr element. |
tfootTd | string | false | ” | Applied on the table tfoot td element. |
footer | string | false | ” | Applied on the table tfoot div element wrapping the slots. |
thWrapper | string | false | ” | Applied on div inside the table thead th element wrapping the column header content. |
thWrapperCheckboxes | string | false | ” | Applied on div inside the table thead th element wrapping the column header content when it is a checkbox. |
arrowsWrapper | string | false | ” | Applied on div inside the table thead th element wrapping the arrows. |
arrowUp | string | false | ” | Applied on div inside the table thead th element where the arrow up is draw. |
arrowDown | string | false | ” | Applied on div inside the table thead th element where the arrow down draws. |
checkboxHeader | string | false | ” | Applied on the table thead checkbox element. |
checkbox | string | false | ” | Applied on the table tbody checkbox elements. |
notFoundTr | string | false | ” | Applied on the table tbody tr element when the data is empty. |
notFoundTd | string | false | ” | Applied on the table tbody td element when the data is empty. |
Pagination Props
Name | Type | Required | Default | Description |
---|---|---|---|---|
totalItems | number | true | null | Total of items in your storage. |
itemsPerPage | number | false | 10 | A number of items displayed per page. |
page | number | false | 1 | Current page index. |
moveLastPage | boolean | false | true | Flag to show or not the button to move to the last page. |
moveFirstPage | boolean | false | true | Flag to show or not the button to move to the first page. |
moveNextPage | boolean | false | true | Flag to show or not the button to move to the next page. |
movePreviousPage | boolean | false | true | Flag to show or not the button to move to the previous page. |
Pagination Events
Event Name | Description | Params |
---|---|---|
on-update | Called every time the user clicks to change the page. | Next page number |
update-current-page | Called every time the Pagination component changes the current page. It is normally called when users increase the number of items to be shown per page and the current page does not exist anymore. In this case, the Pagination component will emit this event to let the user know which is the new current page. | Next page number |
ItemsPerPageDropdown Props
Name | Type | Required | Default | Description |
---|---|---|---|---|
listItemsPerPage | array | false | [10, 20, 30] | An array of numbers which the user will have the possibility to change how many items are displayed in the DataTable. |
itemsPerPage | number | false | 10 | The current value of how many items are displayed on the DataTable. |
ItemsPerPageDropdown Events
Event Name | Description | Params |
---|---|---|
on-update | Called every time the user changes the number of items per page | Next items per page number |
Lightweight Vue Datatable Component, v-datatable-light Plugin/Github, vuetify data table expand row on click
See Demo And Download
Official Website(aquilesb): Click Here
This superior jQuery/javascript plugin is developed by aquilesb. For extra advanced usage, please go to the official website.
Be First to Comment