projection-grid-vue
v0.2.4
Published
```vue <template lang="pug"> .grid-example .filter-container .grid-container grid(config="gridConfig", grid-dataSource="gridDataSource") scroll(view-port={{window}} virtualized header.sticky={{ {offset => () => { // calculatin
Downloads
9
Readme
projection-grid-vue
Development
Workflow
- Fork the repository. Please refer to: https://help.github.com/articles/syncing-a-fork/
- Work on your own repository.
- Send out pull request.
- Reviewer review the change and approve/request change.
- Merge the pull request once travis ci check passes.
npm scripts
To build the library:
npm run build
To build the basic demo:
npm run demo
To start the dev page with hot reloading
npm run dev
To run all tests
npm test
To generate doc file based on jsdoc
npm run jsdoc
Coverage
coverage threashold is defined in the root package.json. Default test task will check the coverage.
API design draft
<template lang="pug">
.grid-example
.filter-container
.grid-container
grid(config="gridConfig", grid-dataSource="gridDataSource")
scroll(view-port={{window}} virtualized header.sticky={{ {offset => () => {
// calculating offset
}} }})
filter(v-bind:conditions="filters")
.pagination-control-container
</template>
<script>
import VueProjectionGrid, { ScrollingPlugin, FilterPlugin } from 'projection-grid-vue';
export default {
components: {
grid: VueProjectionGrid,
scroll: ScrollingPlugin,
filter: FilterPlugin,
},
data() {
return {
gridConfig: {
tableClasses: ['bingadsgrid'],
columns: [
// ...columns
],
},
gridDataSource: query => {
// ...fetching data
},
}
},
computed() {
filters() {
// get filters from external filter controls
}
}
}
</script>