Press "Enter" to skip to content

A Lightweight Vue Datatable Component | v-datatable-light

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

FieldTypeRequireddefaultDescription
headerFieldsarraytruenullDefinition of each column of the table. In each item of this array, you will define how this column will behave.
dataarraytruenullAn array of objects that will feed the data table.
isLoadingbooleanfalsefalseFlag to indicate to datatable if the data is loading. If it is, your spinner slot will be shown.
sortFieldstringfalsenullTo indicate by which field the datatable is sorted for.
sortstringfalsenullTo indicate by which direction the databale is sorted for (‘asc’ or ‘desc’).
notFoundMsgstringfalsenullMessage to by show when no data was found.
trackBystringfalse‘id’A unique id column is used for checkbox column type to compare if a field is checked or not.
cssobjectfalseStructureAn object with attributes used to add css classes to DataTable internal elements.
tableHeightstringfalsenullUsed to have a fixed header in the table.
defaultColumnWidthstringfalse‘150px’Set the default column with, only used when ‘tableHeight’ prop is informed.
onlyShowOrderedArrowbooleanfalsefalseWhen is true will only show the sorted column’s current direction arrow.

DataTable Events

Event NameDescriptionParams
on-updateCalled every time the DataTable is sortedObject with sortField and sort attributes. Where sortField is the column name and sort is the direction (eg asc, desc)
on-check-allCalled when the checkbox on the DataTable header is checked or uncheckedIf the checkbox is checked it sends the DataTable data list, if it is not, an empty array
on-checked-itemCalled when a checkbox row is checkedObject with the row’s data
on-unchecked-itemCalled when a checkbox row is uncheckedObject with the row’s data

DataTable Header Fields Props

NameTypeRequiredDefaultDescription
namestringtruenullAttribute that the DataTable will try to retrieve the value from the data item.
labelstringtruenullAttribute that the DataTable will show on the header for the column.
sortablebooleanfalsefalseDefine if that column will be sortable or not. In case the value is true, two arrows will be shown on the header.
customElementboolean or stringfalsenullIf 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
customHeaderboolean or stringfalsenullIf 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.
formatfunctionfalsenullA function is used to format a value in each line of the DataTable’s body.
widthstringfalsenullString used to define the column width. Only used when ‘tableHeight’ props are informed.
__slot:actionsstringfalsenullUsed 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:checkboxesstringfalsenullUsed to create a column with a checkbox. Every time you check or uncheck an item an event is emitted.

DataTable Css Props Structure

NameTypeRequiredDefaultDescription
tablestringfalseApplied on the table element.
theadstringfalseApplied on the table thead element.
theadTrstringfalseApplied on the table thead tr elements.
theadThstringfalseApplied on the table thead th elements.
tbodystringfalseApplied on the table tbody element.
tbodyTrstringfalseApplied on the table tbody tr elements.
tbodyTdstringfalseApplied on the table tbody td elements.
tbodyTrSpinnerstringfalseApplied on the table tbody tr element when the spinner is displayed.
tbodyTdSpinnerstringfalseApplied on the table tbody td element when the spinner is displayed.
tfootstringfalseApplied on the table tfoot element.
tfootTrstringfalseApplied on the table tfoot tr element.
tfootTdstringfalseApplied on the table tfoot td element.
footerstringfalseApplied on the table tfoot div element wrapping the slots.
thWrapperstringfalseApplied on div inside the table thead th element wrapping the column header content.
thWrapperCheckboxesstringfalseApplied on div inside the table thead th element wrapping the column header content when it is a checkbox.
arrowsWrapperstringfalseApplied on div inside the table thead th element wrapping the arrows.
arrowUpstringfalseApplied on div inside the table thead th element where the arrow up is draw.
arrowDownstringfalseApplied on div inside the table thead th element where the arrow down draws.
checkboxHeaderstringfalseApplied on the table thead checkbox element.
checkboxstringfalseApplied on the table tbody checkbox elements.
notFoundTrstringfalseApplied on the table tbody tr element when the data is empty.
notFoundTdstringfalseApplied on the table tbody td element when the data is empty.

Pagination Props

NameTypeRequiredDefaultDescription
totalItemsnumbertruenullTotal of items in your storage.
itemsPerPagenumberfalse10A number of items displayed per page.
pagenumberfalse1Current page index.
moveLastPagebooleanfalsetrueFlag to show or not the button to move to the last page.
moveFirstPagebooleanfalsetrueFlag to show or not the button to move to the first page.
moveNextPagebooleanfalsetrueFlag to show or not the button to move to the next page.
movePreviousPagebooleanfalsetrueFlag to show or not the button to move to the previous page.

Pagination Events

Event NameDescriptionParams
on-updateCalled every time the user clicks to change the page.Next page number
update-current-pageCalled 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

NameTypeRequiredDefaultDescription
listItemsPerPagearrayfalse[10, 20, 30]An array of numbers which the user will have the possibility to change how many items are displayed in the DataTable.
itemsPerPagenumberfalse10The current value of how many items are displayed on the DataTable.

ItemsPerPageDropdown Events

Event NameDescriptionParams
on-updateCalled every time the user changes the number of items per pageNext 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

    Leave a Reply

    Your email address will not be published. Required fields are marked *