@bhplugin/vue3-datatable

Example

Install

NPM

npm install @bhplugin/vue3-datatable --save

Yarn

yarn add @bhplugin/vue3-datatable

Bower

bower install @bhplugin/vue3-datatable --save

Development Setup

# install dependencies
npm install

# build dist files
npm run build

Usage

<template>
  <vue3-datatable>    
  </vue3-datatable>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  import vue3Datatable from "vue3-datatable";

  export default {
   
  }
</script>

Props

Props	Type	Default	Description
rows	array	[]	table rows
columns	array	[]	table columns
skin	string	"table-striped table-hover"	custom class for skin
loading	boolean	false	enable loader
totalRows	number	0	total number of rows
hasCheckbox	boolean	false	enable checkbox
search	string	""	enable global search
pageSize	number	10	number of rows per page
pageSizeOptions	array	[10, 20, 30, 50, 100]	pagesize options
showPageSize	boolean	true	enable pagesize options
rowClass	array, function	""	custom row class
cellClass	array, function	""	custom cell class
sortable	boolean	true	enable sorting
sortColumn	string	"id"	name of sort column
sortDirection	string	"desc"	sort direction (asc or desc)
columnFilter	boolean	false	enable individual column filter
pagination	boolean	true	enable pagination
showNumbers	boolean	true	enable numbers pagination
showNumbersCount	number	5	show numbers of count in pagination
showFirstPage	boolean	true	enable first page in pagination
showLastPage	boolean	true	enable last page in pagination
firstArrow	string	default arrow	custom arrow
lastArrow	string	default arrow	custom arrow
previousArrow	string	default arrow	custom arrow
nextArrow	string	default arrow	custom arrow
paginationInfo	string	"Showing {0} to {1} of {2} entries"	custom pagination info
noDataContent	string	No data available	custom no data message

columns options

Props	Type	Default	Description
field	string	""	db column name
title	string	""	display column name
value	string	""	filter value if filter enabled
condition	string	"contain"	default condition for column filter if filter enabled
type	string	""	column type (string, date, number, bool)
width	string	""	custom width of column
minWidth	string	""	custom minimum width of column
maxWidth	string	""	custom maximum width of column
hide	boolean	false	show/hide column
filter	boolean	true	enable column filter
search	boolean	true	enabled global search
sort	boolean	true	enable sorting
slotMode	boolean	false	enable slot for cell rendering
cellRenderer	function, string	true	custom cell rendering

Events

Name	Description
sortChange	will trigger when sorting changed
searchChange	will trigger when search changed
pageChange	will trigger when page changed
pageSizeChange	will trigger when pagesize changed
filterChange	will trigger when column filter changed

License

MIT