Vue TreeList - Column Sizing
If you do not explicitly specify certain columns' width, the TreeList distributes the available space equally among columns at startup. As a result, cell values may appear truncated. Use the columnMinWidth property to specify a minimum width for all columns and the minWidth for an individual column. Note that all these settings may cause horizontal scrolling if columns cannot fit into the UI component's width.
- <template>
- <DxTreeList ...
- :column-min-width="100">
- <DxColumn data-field="Title" :width="200" />
- <DxColumn data-field="Address" :min-width="150" />
- </DxTreeList>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxTreeList, {
- DxColumn
- } from 'devextreme-vue/tree-list';
- export default {
- components: {
- DxTreeList,
- DxColumn
- },
- // ...
- }
- </script>
Set the columnAutoWidth property to true to make all columns adjust their widths to their content.
- <template>
- <DxTreeList ...
- :column-auto-width="true">
- </DxTreeList>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxTreeList from 'devextreme-vue/tree-list';
- export default {
- components: {
- DxTreeList
- },
- // ...
- }
- </script>
The UI component allows a user to resize columns in two different modes: by changing the next column's width or the UI component's width. To enable this functionality and set the mode, specify the allowColumnResizing and columnResizingMode properties, respectively. Note that you can prevent a specific column from being resized by assigning false to its allowResizing property.
- <template>
- <DxTreeList ...
- :allow-column-resizing="true"
- column-resizing-mode="widget"> <!-- or "nextColumn" -->
- <DxColumn data-field="Title" :allow-resizing="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>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.