geeklearners-vue-table v2.0.26
Vue JS Datatable component.
- Table Component for Vue js supporting server and client slide rendering with pagination and sorting
- If URL is supplied as a prop, then the data is fetched from the url. Receives data as props too.
Features
- Server side search
- Local In memory Searching (WIP)
- Sort the Columns
- Supports custom heading through custom function.
- Allows transformation of values through custom function.
- Pagination
- Allows selection of columns for display.
- Additional Column can be added on the fly, with custom transformer function
- Selection of columns which are rendered as html through props
html
- Allows Sorting of Columns
Props
The component accepts following props for further customization:
items: Array, //Items passed as prop for local side data
headingTransformer: Function, // the transformer function if data in the heading needs some transformation before rendering
valueTransformer: Function, // the transformer function if data needs some transformation before rendering
html: Array, //An array of columns which accept html content TOTO
additionalColumns: Array, //Additional columns which needs to be appended to the table
additionalColumnsTransformer: Function, //The function which transfoms values for additional columns
except: Array, // and array of columns excluded from displaying
url: String, // the url which is used for fetching data from the server
paginate: {
type:Object,
default:function(){
return {enable:false}
}
}, // Pagiantion option for local data //TODO
perPage: {
type: Number,
default: 10
},
columnSortOrder:Object,
http:Object, //Custom Axios instance can be passed to fetch data
sn: {
type: Boolean,
required: false,
default: () => true,
}, //Specify whether SN field (Serial Number in the first Column) is required
showPageDropdown: {
type: Boolean,
required: false,
default: () => true,
}, //pagination enabled as dropdown
Usage
import vue-table
from "geeklearners-vue-table";
register the component
components: { vTable }
Minimal Usage
<v-table :items="items">
</v-table>
Customizing the table through props :
Changing Columns Heading Label
By default, the column name is used as it is received from the server. Heading can be customized by proving a custom function headingTransformer
as prop to vue-table
. headingTransformer
passes the default heading to the call back provided as prop and the value can be customized as required.
e.g.
<template>
<v-table :items="items" :headingTransformer="headingTransformer"/>
</template>
<script>
import vTable from "geeklearners-vue-table";
export default {
components:{vTable},
data:function(){
return {
items:[{},{},{}], //the data that need to be placed in data-table
}
},
methods:{
headingTransformer(val){
return val.toUpperCase(); //returns value in uppercase
}
}
}
<script>
Adding Extra Columns
If some additional columns need to be added to the display, they can be added using the additionalColumns
and additionalColumnsTransformer
props.
additionalColumns
is just an array defining the columns to be added to the table.
additionalColumnsTransformer
is a function returning an Object containing column name as key and a callback function returning array of object as the value.
Sorting Column Order
columnSortOrder
Sorts the columns display positioning.
:columnSortOrder="{name:1,address:2}"
<template>
<v-table :items="items" :headingTransformer="headingTransformer" :html="html"/>
</template>
<script>
import vTable from "geeklearners-vue-table";
import { ToggleButton } from 'vue-js-toggle-button'
export default {
components:{vTable},
data:function(){
return {
items:[{},{},{}], //the data that need to be placed in data-table
additionalColumns:['Action',"is_checked"],
html:['Action']
}
},
methods:{
additionalColumnsTransformer(){
return {
Action:(row,val)=>{
return [{
item:'<a href=""></a>',
handler:()=>null
}]
},
//You could even pass custom vue component to be rendered in the additional column
is_checked:(row,val)=>{
return [
{
comp:ToggleButton, //component
prop:{'checked':true} //pass in the props required by the component
}
];
}
};
}
}
}
<script>
- Pls note that all the columns that need some sort of transformation need to be added to
html
prop's array.
Skipping some columns
if some columns need to be skipped during rendering, those could be specified using except
prop to the vue-table
<vue-table :items="items" :except="['id','updated_at','created_at']"/>
Transforming the value before rendering.
The columns which need to go through some sort of customization before rendering can be achieved using valueTransformer
props. its same like
additionalColumnsTransformer
but operates on the data and processes them before rendering.
This package fully supports server side pagination and searching integration. Just provide url
props a url
The data returned from the server is expected to return the data in following format:
Advance Usage
<v-table
:headingTransformer="headingTransformer"
:valueTransformer="valueTransformer"
:html="['name']" //todo
:additionalColumns="additionalColumns"
:additionalColumnsTransformer="additionalColumnsTransformer"
:except="except" //todo
:paginate="localPaginate"
:url="url"
>
</v-table>
Example Usage:
<template>
<div>
<v-table :items="data" :except="['states']"/>
</div>
</template>
<script>
import vTable from "geeklearners-vue-table";
export default {
components:{vTable},
data:function(){
return {
data:[]
}
},
mounted:function(){
fetch("https://raw.githubusercontent.com/stefanbinder/countries-states/master/countries.json")
.then(resp=>resp.json())
.then(data=>{this.data=data})
}
}
</script>
Online Demo
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago