@bhplugin/vue3-datatable

Example

Document & Demos

Install

NPM

npm install @bhplugin/vue3-datatable --save

Yarn

yarn add @bhplugin/vue3-datatable

Bower

bower install @bhplugin/vue3-datatable --save

Usage

<template>
    <vue3-datatable :rows="rows" :columns="cols"> </vue3-datatable>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import Vue3Datatable from "@bhplugin/vue3-datatable";
    import "@bhplugin/vue3-datatable/dist/style.css";

    const cols = ref([
      { field: "id", title: "ID", width: "90px", filter: false },
      { field: "name", title: "Name" },
      { field: "username", title: "Username" },
      { field: "email", title: "Email" },
      { field: "phone", title: "Phone" },
      { field: "date", title: "Date", type: "date" },
      { field: "active", title: "Active", type: "bool" },
      { field: "age", title: "Age", type: "number" },
      { field: "address.city", title: "Address" },
      { field: "company.name", title: "Company" },
    ]);

    const rows = ref([
      {
        id: 1,
        name: "Leanne Graham",
        username: "Bret",
        email: "Sincere@april.biz",
        address: {
          street: "Kulas Light",
          suite: "Apt. 556",
          city: "Gwenborough",
          zipcode: "92998-3874",
          geo: {
            lat: "-37.3159",
            lng: "81.1496",
          },
        },
        phone: "1-770-736-8031 x56442",
        website: "hildegard.org",
        company: {
          name: "Romaguera-Crona",
          catchPhrase: "Multi-layered client-server neural-net",
          bs: "harness real-time e-markets",
        },
        date: "Tue Sep 27 2022 22:19:57",
        age: 10,
        active: true,
      },
      .......
    ]);
</script>

Props

Props	Type	Default	Description
columns (required)	array	[]	table columns
rows (required)	array	[]	table rows
isServerMode	boolean	false	set true if you need server side pagination.
totalRows	number	0	total number of rows. totalRows required when isServerMode is true
skin	string	"bh-table-striped bh-table-hover"	custom class for skin ('bh-table-striped' - for stripe row, 'bh-table-hover' - for hover row, 'bh-table-bordered' - for bordered row, 'bh-table-compact' - for compact table)
loading	boolean	false	enable loader
hasCheckbox	boolean	false	enable checkbox
search	string	""	enable global search
page	number	1	current page
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	"asc"	sort direction (asc or desc)
columnFilter	boolean	false	enable individual column filter
columnFilterLang	records<string,string>	null	columns filters translation (ex: {no_filter: 'Aucun', contain: 'Contiens', not_contain: 'Ne contiens pas', equal: 'Egale', not_equal: 'Différent', start_with: 'Commence par', end_with: 'Termine par', greater_than: 'Supérieur à', greater_than_equal: 'Sup. ou égale à', less_than: 'Inférieur à', less_than_equal: 'Inf. ou égale à', is_null: 'Est null', is_not_null: 'Non null'} )
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 first page arrow
lastArrow	string	default arrow	custom last page arrow
previousArrow	string	default arrow	custom previous page arrow
nextArrow	string	default arrow	custom next page arrow
paginationInfo	string	"Showing {0} to {1} of {2} entries"	custom pagination info
noDataContent	string	No data available	custom no data message
stickyHeader	boolean	false	enable fixed header
height	string	450px	only will be used when stickyHeader enabled
stickyFirstColumn	boolean	false	enable fixed first column
cloneHeaderInFooter	boolean	false	enable clone header in footer
selectRowOnClick	boolean	false	enable to select row(checkbox) on row click

Columns options

Props	Type	Default	Description
isUnique	boolean	false	db column is primary key or not
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
cellRenderer	function, string	true	custom cell rendering
headerClass	string	""	custom header cell class
cellClass	string	""	custom cell class

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
rowSelect	will trigger when row selected using checkbox
filterChange	will trigger when column filter changed
rowClick	will trigger when row clicked
rowDBClick	will trigger when row double clicked

Methods

Name	Description
reset	will reset all options like selected rows, filter, search, currennt page etc
getFilteredRows	will returns all filtered rows
getColumnFilters	will return all column filters
getSelectedRows	will returns all selected rows
clearSelectedRows	will unselect all selected rows
selectRow(index)	will select row with the given index (non-existent row will be ignored)
unselectRow(index)	will unselect row with the given index (non-existent row will be ignored)
isRowSelected(index)	will return true if the row with given index is selected

License

@bhplugin/vue3-datatable is open-sourced software licensed under the MIT license.

Our other plugins

Angular Datatable - @bhplugin/ng-datatable

Support