Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bhaveshpatel200/vue3-datatable
vue3-datatable is a powerful component for creating dynamic and customizable data tables. It supports large amounts of data, sorting, pagination, and filtering and highly customizable
https://github.com/bhaveshpatel200/vue3-datatable
datatable datatables datatables-plugin grid nuxt nuxtjs table vue vue3 vuejs
Last synced: about 20 hours ago
JSON representation
vue3-datatable is a powerful component for creating dynamic and customizable data tables. It supports large amounts of data, sorting, pagination, and filtering and highly customizable
- Host: GitHub
- URL: https://github.com/bhaveshpatel200/vue3-datatable
- Owner: bhaveshpatel200
- License: mit
- Created: 2022-11-12T11:08:40.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-28T08:05:32.000Z (about 2 months ago)
- Last Synced: 2024-10-14T22:18:41.376Z (about 1 month ago)
- Topics: datatable, datatables, datatables-plugin, grid, nuxt, nuxtjs, table, vue, vue3, vuejs
- Language: Vue
- Homepage:
- Size: 73.2 KB
- Stars: 125
- Watchers: 5
- Forks: 18
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# @bhplugin/vue3-datatable
## Example
[Document & Demos](https://vue3-datatable-document.vercel.app)
## Install
#### NPM
```bash
npm install @bhplugin/vue3-datatable --save
```
#### Yarn
```bash
yarn add @bhplugin/vue3-datatable
```
#### Bower
```bash
bower install @bhplugin/vue3-datatable --save
```
## Usage
```html
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: "[email protected]",
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,
},
.......
]);
```
## 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 | 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](http://opensource.org/licenses/MIT).
## **Our other plugins**
### Angular Datatable - [**@bhplugin/ng-datatable**](https://www.npmjs.com/package/@bhplugin/ng-datatable)
## Support
