w-aggrid-vue

w-aggrid-vue

A table wrapper for ag-grid-vue

Documentation

To view documentation or get support, visit docs.

Example

To view some examples for more understanding, visit examples:

simple: ex-simple.html [source code]

large: ex-large.html [source code]

Table size

Set width by css:

tableWidth: ex-tableWidth.html [source code]

tableWidthFull: ex-tableWidthFull.html [source code]

Set height by component props:: height

tableHeight: ex-tableHeight.html [source code]

Table control

Set options by component props:: opt

kpHead: ex-kpHead.html [source code]

kpHeadTooltip: ex-kpHeadTooltip.html [source code]

defHeadAlighH: ex-defHeadAlighH.html [source code]

kpHeadAlighH: ex-kpHeadAlighH.html [source code]

defHeadSort: ex-defHeadSort.html [source code]

kpHeadSort: ex-kpHeadSort.html [source code]

kpHeadFixLeft: ex-kpHeadFixLeft.html [source code]

defHeadFilter: ex-defHeadFilter.html [source code]

kpHeadFilter: ex-kpHeadFilter.html [source code]

defHeadDrag: ex-defHeadDrag.html [source code]

kpHeadDrag: ex-kpHeadDrag.html [source code]

kpRowStyle: ex-kpRowStyle.html [source code]

kpRowDrag: ex-kpRowDrag.html [source code]

defCellMinWidth: ex-defCellMinWidth.html [source code]

kpCellWidth: ex-kpCellWidth.html [source code]

kpCellRender: ex-kpCellRender.html [source code]

kpCellTooltip: ex-kpCellTooltip.html [source code]

defCellAlighH: ex-defCellAlighH.html [source code]

kpCellAlighH: ex-kpCellAlighH.html [source code]

defCellEditable: ex-defCellEditable.html [source code]

kpCellEditable: ex-kpCellEditable.html [source code]

rowClick: ex-rowClick.html [source code]

rowDbClick: ex-rowDbClick.html [source code]

rowChange: ex-rowChange.html [source code]

cellClick: ex-cellClick.html [source code]

cellDbClick: ex-cellDbClick.html [source code]

cellChange: ex-cellChange.html [source code]

operateData: ex-operateData.html [source code]

Set options by component props:: filterall

filterAllData: ex-filterAllData.html [source code]

Call functions by component methods:: call $refs.[function]

showKeys: ex-showKeys.html [source code]

setHeadFilter: ex-setHeadFilter.html [source code]

clearHeadFilter: ex-clearHeadFilter.html [source code]

clearHeadFilterAll: ex-clearHeadFilterAll.html [source code]

getDisplayData: ex-getDisplayData.html [source code]

Installation

Using npm(ES6 module):

Note: w-aggrid-vue depends on lodash, wsemi, ag-grid-community, ag-grid-vue

npm i w-aggrid-vue

In a browser(UMD module):

Note: umd file includes with lodash and wsemi, by using tree-shaking for dead-code elimination

[Optional] Add script with nomodule for IE11.

<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"></script>

[Necessary] Add script for vue.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

[Necessary] Add script for ag-grid-community.

<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/styles/ag-theme-balham.css">

[Necessary] Add script for ag-grid-vue.

<script src="https://cdn.jsdelivr.net/npm/ag-grid-vue/dist/ag-grid-vue.umd.js"></script>

[Necessary] Add script for w-aggrid-vue.

<script src="https://cdn.jsdelivr.net/npm/w-aggrid-vue@1.0.5/dist/w-aggrid-vue.umd.js"></script>