Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stormpyro/vue-fantastic-table
Vue fantastic table with md and features like jquery datatables.
https://github.com/stormpyro/vue-fantastic-table
datatables fixed-header responsive table vue vue-table vue2
Last synced: about 7 hours ago
JSON representation
Vue fantastic table with md and features like jquery datatables.
- Host: GitHub
- URL: https://github.com/stormpyro/vue-fantastic-table
- Owner: stormpyro
- Created: 2022-01-18T18:32:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-01-21T01:32:40.000Z (over 2 years ago)
- Last Synced: 2024-04-25T05:02:59.684Z (5 months ago)
- Topics: datatables, fixed-header, responsive, table, vue, vue-table, vue2
- Language: Vue
- Homepage:
- Size: 179 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Fantastic Table
A great vue table with material design and all the power of
jquery datatables features.
### Install
```bash
npm i vue-fantastic-table
```
### Usage
```bash
import VueFantasticTable from "vue-fantastic-table"
Vue.component("vue-fantastic-table", VueFantasticTable)
```
### Features
---
#### Responsive mode
Similar to the responsive mode of jquery datatables. When
the screen is small VFT hide columns but when is large VFT
show columns.
To use it just add the prop "responsive".
```
```
#### Server mode
The rows prop has 2 modes. You can pass an array or a function. If
you pass a function VFT will take that as a promise that return an
array of objects.
```
...
callRequest: function () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(this.rows);
}, 1100);
});
},
```
While the data is being loaded VFT will show a default message "loading..."
You can customize this message with the slot "loading".
```
Your custom component or message
```
#### Dark Theme
You can use a dark theme of VFT using the prop "dark":
```
```
#### Custom slots
You can change the content that is displayed for each cell in the body. Only need to use slots
with the name of the field that you set in headers prop.
Example:
```
{{ name + " studies in " + university }}
...
headers: [
{ field: "name", label: "Name" },
{ field: "age", label: "Age" },
{ field: "sex", label: "Sex" },
{ field: "district", label: "District" },
{ field: "university", label: "University" },
{ field: "carrer", label: "Carrer" },
{ field: "job", label: "Job" },
{ field: "experience", label: "Experience" },
{ field: "investor", label: "Investor" },
],
rows: [
{
name: "Renatto",
age: 26,
sex: "M",
district: "La Perla",
university: "UNFV",
carrer: "Ing. Informatica",
job: "Software Developer",
experience: 2,
investor: "Yes",
},
],
...
```
#### Search
You can add the prop "search". That will add a search input at the top of VFT.
```
```
#### Header and Footer Search
You can add search inputs for each header and for each footer. Only need to add these props "headerSearch" and "footerSearch".
```
```
