Package Exports
- vue3-easy-data-table
Readme
vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x.
vue3-easy-data-table has two modes: client mode and server side mode.
Client mode is for the case that all data has already been loaded from a server, In other words, your initial call is asking for all the pages from a server. And In server side mode, you need to request limited data from a server everytime you navigate to a new page.
Features:
- Buttons pagination
- Dense
- Item slot
- Multiple selecting
- Single field sorting
- Searching
- Server side paginate and sort
- Theme color
Props
Common props
common props can be used both in client mode and server side mode.
| Name | Required | Type | Default | Description |
|---|---|---|---|---|
| v-model: itemsSelected | false | Item[] (Item: Record<string, any>) |
undefined | Items selected |
| body-font-color | false | string | '#212121' | Font color of table body |
| body-font-size | false | number | 12 | Font size of table body, including foot pagination |
| border-color | false | string | '#e0e0e0' | Border color |
| buttons-pagination | false | boolean | false | By default, you can only use prev and next buttons to navigate. But if you set the value to true, Seven visible page buttons will be generated automatically to help you navigate more easily |
| dense | false | boolean | false | Set true to decrease the height of rows |
| empty-message | false | string | 'No Available Data' | Message to display when there is no data in table |
| fixed-header | false | boolean | true | Fixed header to top of table. NOTE: Does not work in IE11 |
| headers | true | Header[] Header: { text: string, value: string, sortable?: boolean, } |
[] | Table header items |
| header-background-color | false | string | '#fff' | Background color of table head |
| header-font-color | false | string | '#373737' | Font color of table head |
| items | true | Item[] (Item: Record<string, any>) |
[] | Table body items |
| loading | false | boolean | false | If true and no items are provided, then a loading bar and loading message will be shown |
| loading-message | false | string | 'Loading, please wait.' | Message shown when loading is true and no items are provided |
| max-height | false | number | 400 | Max height of table (table header and table body, not including footer pagination) |
| rows-items | false | number[] | [25, 50, 100] | A number array of rows-per-page, working as the options of rows per page selector |
| rows-per-page | false | number | 25 | Rows of items to display in per page |
| theme-color | false | string | '#42b883' | Fill color of checkbox, background color of active option of rows selector, color of loading bar and background color of active button of buttons pagination |
Props only available in client mode
| Name | Required | Type | Default | Description |
|---|---|---|---|---|
| search-field | false | string | '' | A specific field in which you search for information. (the value of search field should be a value of header item, not text of header item!). If you don't pass a specific field, the component will search in all fields. |
| search-value | false | string | '' | Search value |
| sort-by | false | string | '' | A specific field for sorting |
| sort-type | false | 'asc' | 'desc' | 'asc' | Order by 'asc' or 'desc' when sorting |
Props only available in server side mode
| Name | Required | Type | Default | Description |
|---|---|---|---|---|
| v-model:server-options | true | ServerOptions: { page?: number, rowsPerPage?: number, sortBy?: string, sortType?: 'asc' | 'desc', } |
{} | An object which can be used as values of parameters in a pagination REST API such as:http://localhost:8080/api?page=${ServerOptions.page}&limit=${ServerOptions.rowsPerPage}&sortBy=${ServerOptions.sortBy}&sortType=${ServerOptions.sortType} |
| server-items-length | true | number | undefined | Total amount of items available on server |