Vue TreeList - Column Reordering

User Interaction

Set the allowColumnReordering property to true to allow a user to reorder columns. If a specific column should not be moved, set its allowReordering property to false.

App.vue
  • <template>
  • <DxTreeList ...
  • :allow-column-reordering="true">
  • <DxColumn data-field="CompanyName" :allow-reordering="false" />
  • </DxTreeList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTreeList, {
  • DxColumn
  • } from 'devextreme-vue/tree-list';
  •  
  • export default {
  • components: {
  • DxTreeList,
  • DxColumn
  • },
  • // ...
  • }
  • </script>

View Demo

API

The columns array determines columns' order. You can reorder columns by moving their objects within the array or by changing the column's visibleIndex if you prefer to configure columns using the customizeColumns function.

App.vue
  • <template>
  • <DxTreeList ...
  • :customize-columns="customizeColumns">
  • </DxTreeList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  • import DxTreeList from 'devextreme-vue/tree-list';
  •  
  • export default {
  • components: {
  • DxTreeList
  • },
  • methods: {
  • customizeColumns(columns) {
  • columns[2].visibleIndex = 1;
  • }
  • }
  • }
  • </script>

The visibleIndex property can also be changed at runtime to reorder columns regardless of the way you configured them. For this, call the columnOption(id, optionName, optionValue) method. The following code swaps the second and first column:

App.vue
  • <template>
  • <DxTreeList ... >
  • <DxColumn ... />
  • <DxColumn ...
  • v-model:visible-index="secondColVisibleIndex"
  • />
  • </DxTreeList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  • import DxTreeList, {
  • DxColumn
  • } from 'devextreme-vue/tree-list';
  •  
  • export default {
  • components: {
  • DxTreeList,
  • DxColumn
  • },
  • data() {
  • return() {
  • secondColVisibleIndex: 1
  • }
  • },
  • methods: {
  • swapColumns() {
  • this.secondColVisibleIndex = 0;
  • }
  • }
  • }
  • </script>
See Also