Enables or disables the alternating rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :altrows="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

This property specifies the first alternating row.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :altrows="true"
    :altstart="2"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the alternating step

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :altrows="true"
    :altstart="0" :altstep="2"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether the loading image should be displayed until the Grid's data is loaded.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :autoshowloadelement="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Displays the filter icon only when the column is filtered. When the value of this property is set to false, all grid columns will display a filter icon when the filtering is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :autoshowfiltericon="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether the columns menu button will be displayed only when the mouse cursor is over a columns header or will be always displayed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :autoshowcolumnsmenubutton="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether the columns lines are displayed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showcolumnlines="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether the row lines are displayed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showrowlines="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether the column header lines are displayed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showcolumnheaderlines="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets whether adaptive mode is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :adaptive="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the Grid's breakpoint width when adaptive mode is actived.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :adaptive="true"
    :adaptivewidth="400"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the clipboard operations

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :clipboard="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When the value of this property is true, a close button is displayed in each grouping column.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groups=" ['City'] " :closeablegroups="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the columns menu width.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :autoshowcolumnsmenubutton="false" :columnsmenuwidth="40"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnmenuopening="columnmenuopening"
    :filterable="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      columnmenuopening: function (menu, datafield, height) {
        alert('Menu Opening');
      }
    }
  }
</script>

Callback called when a column menu is opening. You can use it for changing the size of the menu or cancelling the opening. Three params are passed - menu, datafield and menu's height. If you return false, the opening will be cancelled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnmenuclosing="columnmenuclosing"
    :filterable="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      columnmenuclosing: function (menu, datafield, height) {
        alert('Menu Closing');
      }
    }
  }
</script>

Callback called when a cell is hovered.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :cellhover="cellhover"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      cellhover: function (cellhtmlElement, x, y) {
        alert('Cell Hovered!');
      }
    }
  }
</script>

Enables or disables the delete of a cell/row values by using the "delete" key.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :editable="true"
    :enablekeyboarddelete="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether ellipsis will be displayed, if the cells or columns content overflows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :enableellipsis="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether mousewheel scrolling is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :enablemousewheel="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the grid animations.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :enableanimations="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the grid tooltips.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :enabletooltips="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the grid rows hover state.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :enablehover="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables the text selection of the browser.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :enablebrowserselection="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the position of the ever present row. Possible values: "top", "bottom", "topAboveFilterRow".

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
    :everpresentrowposition="'bottom'"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the height of the ever present row.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
    :everpresentrowheight="40"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the actions of the ever present row. Possible values: "add", "reset", "update", "delete". Instead of "add", you can also use "addBottom" which is the same as "add", but adds the new row to the bottom of the Grid.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
    :everpresentrowactions="'add update delete reset'"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the actions display mode. By default they are displayed in a popup. You can set the property to "columns" and define columns with datafields - addButtonColumn, resetButtonColumn, updateButtonColumn and deleteButtonColumn to display the actions in columns.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
       :everpresentrowactionsmode="'columns'" />
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' },
          { datafield: 'addButtonColumn', width: 50 },
          { datafield: 'resetButtonColumn', width: 50 }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the filter row's height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :showfilterrow="true" :filterrowheight="40"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

The property specifies the type of rendering of the Filter Menu. Possible values: "default" and "excel". In "excel" mode, the Filter Menu displays a ListBox with Checkboxes with all unique cell values.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :filtermode="'excel'"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

This function is called when a group is rendered. You can use it to customize the default group rendering.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupsrenderer="groupsrenderer"
    :groupable="true" :groups=" ['City'] "
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      groupsrenderer: function (text, group, expanded) {
        return 'City: ' + group;
      }
    }
  }
</script>

Sets or gets a custom renderer for the grouping columns displayed in the grouping header when the grouping feature is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupcolumnrenderer="groupcolumnrenderer"
    :groupable="true" :groups=" ['City'] "
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      groupcolumnrenderer: function (text) {
        return 'Grouped By: ' + text;
      }
    }
  }
</script>

Sets or gets the default state of the grouped rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groups=" ['ContactName'] " :groupsexpandedbydefault="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

The function is called when a key is pressed. If the result of the function is true, the default keyboard navigation will be overriden for the pressed key.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :handlekeyboardnavigation="handlekeyboardnavigation"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      handlekeyboardnavigation: function () {
        const key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
        alert(key);
      }
    }
  }
</script>

The function is called when the Grid Pager is rendered. This allows you to customize the default rendering of the pager.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :pagerrenderer="pagerrenderer"
    :pageable="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      pagerrenderer: function () {
        const element = document.createElement('div');
        element.innerHTML = 'Custom Render of the JqxGrid Pager!';
        return element;
      }
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :rtl="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether the Grid should display the built-in loading element or should use a DIV tag with class 'jqx-grid-load'

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showdefaultloadelement="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When this property is true, the Grid adds an additional visual style to the grid cells in the filter column(s).

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :showfiltercolumnbackground="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether to display the filtering items in the column's menu.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :showfiltermenuitems="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When this property is true, the Grid adds an additional visual style to the grid cells in the pinned column(s).

<template>
  <JqxGrid ref="myGrid"
       :width="500" :source="source" :columns="columns" :autoheight="true" :showpinnedcolumnbackground="false" />
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { pinned: 'true', text: 'Contact Name', datafield: 'ContactName', width: 150 },
          { text: 'Contact Title', datafield: 'Title', width: 150 },
          { text: 'City', datafield: 'City', width: 150 },
          { text: 'Country', datafield: 'Country', width: 150 },
          { text: 'Country1', width: 150 },
          { text: 'Country2', width: 150 },
          { text: 'Country3', width: 150 },
          { text: 'Country4', width: 150 },
          { text: 'Country5', width: 150 }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When this property is true, the Grid adds an additional visual style to the grid cells in the sort column.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :sortable="true"
    :showsortcolumnbackground="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether to display the sort menu items.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :sortable="true"
    :showsortmenuitems="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether to display the group menu items.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :showgroupmenuitems="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows an additional column with expand/collapse toggle buttons when the Row details feature is enabled.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :rowdetails="true"
    :showrowdetailscolumn="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the columns header.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showheader="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the groups header area.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :showgroupsheader="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the aggregates in the grid's statusbar.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" :showaggregates="true" :showstatusbar="true" :statusbarheight="50"/>
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          {
            text: 'Contact Title', datafield: 'Title', aggregates: ['count', {
              'Owners': function (aggregatedValue, currentValue) {
                if (currentValue == 'Owner') {
                  return aggregatedValue + 1;
                }
                return aggregatedValue;
              }
            }]
          },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country', aggregates: ['count'] }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the aggregates in Grid groups.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true" 
       :showaggregates="true" :showgroupaggregates="true" :showstatusbar="true" :statusbarheight="50" />
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          {
            text: 'Contact Title', datafield: 'Title', aggregates: ['count', {
              'Owners': function (aggregatedValue, currentValue) {
                if (currentValue == 'Owner') {
                  return aggregatedValue + 1;
                }
                return aggregatedValue;
              }
            }]
          },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country', aggregates: ['count'] }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides an additional row in jqxGrid which allows you to easily add new rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showeverpresentrow="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the filter row.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :showfilterrow="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the empty row label when the Grid has no records to display.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :columns="columns" :autoheight="true" :showemptyrow="false" />
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the grid's statusbar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showstatusbar="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the statusbar's height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showstatusbar="true"
    :statusbarheight="50"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Shows or hides the grid's toolbar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showtoolbar="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the selection mode.

Possible Values:

'none'-disables the selection

'singlerow'- full row selection

'multiplerows' - each click selects a new row. Click on a selected row unselects it

'multiplerowsextended' - multiple rows selection with drag and drop. The selection behavior resembles the selection of icons on your desktop

'singlecell' - single cell selection

'multiplecells' - each click selects a new cell. Click on a selected cell unselects it

'multiplecellsextended' - in this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of icons on your desktop

'multiplecellsadvanced' - this mode is the most advanced cells selection mode. In this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of cells in a spreadsheet

'checkbox' - multiple rows selection through a checkbox.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :selectionmode="'multiplerows'"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

<template>
  <JqxGrid ref="myGrid" 
       :width="800" :source="source" :autoheight="true" :columns="columns" 
       :filterable="true" :autoshowfiltericon="true" :ready="ready"
       :updatefilterconditions="updatefilterconditions" :updatefilterpanel="updatefilterpanel">
  </JqxGrid>
</template>
<script>
  import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      addfilter: function () {
        let filtergroup = new jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = 'Beate';
        let filtercondition = 'contains';
        let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtervalue = 'Andrew';
        filtercondition = 'contains';
        let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter1);
        filtergroup.addfilter(filter_or_operator, filter2);
        // add the filters.
        this.$refs.myGrid.addfilter('firstname', filtergroup);
        // apply the filters.
        this.$refs.myGrid.applyfilters();
      },
      updatefilterconditions: function (type, defaultconditions) {
        let stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
        let numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
        switch (type) {
          case 'stringfilter':
            return stringcomparisonoperators;
          case 'numericfilter':
            return numericcomparisonoperators;
          case 'datefilter':
            return datecomparisonoperators;
          case 'booleanfilter':
            return booleancomparisonoperators;
        }
      },
      updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1,
        filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {
        let index1 = 0;
        let index2 = 0;
        if (columnfilter != null) {
          let filter1 = columnfilter.getfilterat(0);
          let filter2 = columnfilter.getfilterat(1);
          if (filter1) {
            index1 = filterconditions.indexOf(filter1.comparisonoperator);
            let value1 = filter1.filtervalue;
            filterinputfield1.val(value1);
          }
          if (filter2) {
            index2 = filterconditions.indexOf(filter2.comparisonoperator);
            let value2 = filter2.filtervalue;
            filterinputfield2.val(value2);
          }
        }
        filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
        filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
      },
      ready: function () {
        this.addfilter();
        let localizationObject = {
          filterstringcomparisonoperators: ['contains', 'does not contain'],
          // filter numeric comparison operators.
          filternumericcomparisonoperators: ['less than', 'greater than'],
          // filter date comparison operators.
          filterdatecomparisonoperators: ['less than', 'greater than'],
          // filter bool comparison operators.
          filterbooleancomparisonoperators: ['equal', 'not equal']
        }
        this.$refs.myGrid.localizestrings(localizationObject);
      }
    }
  }
</script>

<template>
  <JqxGrid ref="myGrid" 
       :width="800" :source="source" :autoheight="true" :columns="columns" 
       :filterable="true" :autoshowfiltericon="true" :ready="ready"
       :updatefilterconditions="updatefilterconditions" :updatefilterpanel="updatefilterpanel">
  </JqxGrid>
</template>
<script>
  import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      addfilter: function () {
        let filtergroup = new jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = 'Beate';
        let filtercondition = 'contains';
        let filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtervalue = 'Andrew';
        filtercondition = 'contains';
        let filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter1);
        filtergroup.addfilter(filter_or_operator, filter2);
        // add the filters.
        this.$refs.myGrid.addfilter('firstname', filtergroup);
        // apply the filters.
        this.$refs.myGrid.applyfilters();
      },
      updatefilterconditions: function (type, defaultconditions) {
        let stringcomparisonoperators = ['CONTAINS', 'DOES_NOT_CONTAIN'];
        let numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
        let booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
        switch (type) {
          case 'stringfilter':
            return stringcomparisonoperators;
          case 'numericfilter':
            return numericcomparisonoperators;
          case 'datefilter':
            return datecomparisonoperators;
          case 'booleanfilter':
            return booleancomparisonoperators;
        }
      },
      updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1,
        filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {
        let index1 = 0;
        let index2 = 0;
        if (columnfilter != null) {
          let filter1 = columnfilter.getfilterat(0);
          let filter2 = columnfilter.getfilterat(1);
          if (filter1) {
            index1 = filterconditions.indexOf(filter1.comparisonoperator);
            let value1 = filter1.filtervalue;
            filterinputfield1.val(value1);
          }
          if (filter2) {
            index2 = filterconditions.indexOf(filter2.comparisonoperator);
            let value2 = filter2.filtervalue;
            filterinputfield2.val(value2);
          }
        }
        filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
        filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
      },
      ready: function () {
        this.addfilter();
        let localizationObject = {
          filterstringcomparisonoperators: ['contains', 'does not contain'],
          // filter numeric comparison operators.
          filternumericcomparisonoperators: ['less than', 'greater than'],
          // filter date comparison operators.
          filterdatecomparisonoperators: ['less than', 'greater than'],
          // filter bool comparison operators.
          filterbooleancomparisonoperators: ['equal', 'not equal']
        }
        this.$refs.myGrid.localizestrings(localizationObject);
      }
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :theme="'material'"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the toolbar's height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :showtoolbar="true"
    :toolbarheight="40"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the height of the grid to be equal to the summary height of the grid rows. This option should be set when the Grid is in paging mode.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

This property works along with the "autoheight" property. When it is set to true, the height of the Grid rows is dynamically changed depending on the cell values.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :autorowheight="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the columns height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnsheight="40"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines the cell values displayed in a tooltip next to the scrollbar when the "scrollmode" is set to "deferred".

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :scrollmode="'deferred'" :deferreddatafields=" ['ContactName'] "
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the height of the Grid Groups Header.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groupsheaderheight="60"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the group indent size. This size is used when the grid is grouped. This is the size of the columns with expand/collapse toggle buttons.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groupindentwidth="40"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the Grid's height.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="500"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the height of the Grid Pager.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :pageable="true"
    :pagerheight="50"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the height of the grid rows.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :rowsheight="30"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets or gets the scrollbars size.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :scrollbarsize="20"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines the scrolling mode.

Possible Values:

'default'

'logical'- the movement of the scrollbar thumb is by row, not by pixel

'deferred'-content is stationary when the user drags the Thumb of a ScrollBar

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :scrollmode="'logical'"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

When the "scrollmode" is set to "deferred", the "scrollfeedback" function may be used to display custom UI Tooltip next to the scrollbar.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="false" :height="100"
    :scrollmode="'deferred'" :scrollfeedback="scrollfeedback"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      scrollfeedback: function (row) {
        return 'row ' + row.uid;
      }
    }
  }
</script>

Sets or gets the Grid's width.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether the Grid automatically saves its current state.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :autoloadstate="true"
    :autosavestate="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Determines whether the Grid automatically loads its current state(if there's already saved one). The Grid's state is loaded when the page is refreshed.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :autoloadstate="true"
    :autosavestate="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Sets the Grid columns.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

• parentgroup - sets the column header's parent group name.
• name - sets the column header's name.
• align - sets the column header's alignment to 'left', 'center' or 'right'.

<template>
  <JqxGrid ref="myGrid"
       :width="850" :source="source" :columns="columns" :autoheight="true" :columngroups="columngroups" />
</template>
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName', columngroup: 'ContactInfo' },
          { text: 'Contact Title', datafield: 'Title', columngroup: 'ContactInfo' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ],
        columngroups: [{ text: 'Contact Info', name: 'ContactInfo', align: 'center' }]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
          ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
          ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico']
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the columns dropdown menu.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :sortable="true"
    :columnsmenu="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the columns resizing.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnsresize="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the columns resizing when the column's border is double-clicked and columnsresize is set to true.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnsresize="true"
    :columnsautoresize="false"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the columns reordering.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :columnsreorder="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Enables or disables the Grid's plugin.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :disabled="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

The editable property enables or disables the Grid editing feature.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :editable="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

The editmode property specifies the action that the end-user should make to open an editor.

Possible Values:

'click' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value

'selectedcell' - Marks the cell as selected. A second click on the selected cell shows the editor. The editor’s value is equal to the cell’s value

'selectedrow' - A second click on a selected row shows the row editors.

'dblclick' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value

'programmatic' - Cell editors are activated and deactivated only through the API(see begincelledit and endcelledit methods)

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :editable="true"
    :editmode="'dblclick'"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

Custom Filtering function. It overrides the built-in Filtering. When the user filters, the Grid calls this function, when it is implemented. The function is expected to return a boolean value or undefined.

• cellValue - current cell's value.
• rowData - JSON object which contains the current row's data.
• dataField - filter column's field.
• filterGroup - group of filters.
• defaultFilterResult - the default filter result.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
    :filter="filter"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    },
    methods: {
      filter: function (cellValue, rowData, dataField, filterGroup, defaultFilterResult) {
        // implements a custom filter for the "Contactname" field. 
        if (dataField === "ContactName") {
          var filters = filterGroup.getfilters();
          for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
            var filterValue = filter.value;
            var filterCondition = filter.condition;
            var filterType = filter.type;
            if (cellValue.indexOf("Ana") >= 0) {
              return true;
            }
          }
          return false;
        }
      }
    }
  }
</script>

Enables or disables the Grid Filtering feature. When the value of this property is true, the Grid displays a filtering panel in the columns popup menus.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :filterable="true"
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>

This property enables or disables the grouping feature.

<template>
  <JqxGrid ref="myGrid"
    :width="850" :source="source" :columns="columns" :autoheight="true" :groupable="true"
    :groups=" ['ContactName'] "
  />
</template>
 
<script>
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
 
  export default {
    components: {
      JqxGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.source),
        columns: [
          { text: 'Contact Name', datafield: 'ContactName' },
          { text: 'Contact Title', datafield: 'Title' },
          { text: 'City', datafield: 'City' },
          { text: 'Country', datafield: 'Country' }
        ]
      }
    },
    beforeCreate: function () {
      this.source = {
        localdata: [
          [ 'Maria Anders', 'Sales Representative', 'Berlin', 'Germany' ],
          [ 'Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico' ],
          [ 'Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico' ]
        ],
        datafields: [
          { name: 'ContactName', type: 'string', map: '0' },
          { name: 'Title', type: 'string', map: '1' },
          { name: 'City', type: 'string', map: '2' },
          { name: 'Country', type: 'string', map: '3' }
        ],
        datatype: 'array'
      };
    }
  }
</script>