DevExtreme jQuery - Column Sizing
If you do not explicitly specify certain columns' width, the DataGrid distributes the available space equally among columns at startup. As a result, cell values may appear truncated. Use the columnMinWidth option 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 widget's width.
jQuery
$(function() { $("#dataGridContainer").dxDataGrid({ // ... columnMinWidth: 100, columns: [{ dataField: "Title", width: 200 }, { dataField: "Address", minWidth: 150 }] }); });
Angular
<dx-data-grid ... [columnMinWidth]="100"> <dxi-column dataField="Title" [width]="200"></dxi-column> <dxi-column dataField="Address" [minWidth]="150"></dxi-column> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
Vue
<template> <DxDataGrid ... :column-min-width="100"> <DxColumn data-field="Title" :width="200" /> <DxColumn data-field="Address" :min-width="150" /> </DxDataGrid> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxDataGrid, { DxColumn } from 'devextreme-vue/data-grid'; export default { components: { DxDataGrid, DxColumn }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DataGrid, { Column } from 'devextreme-react/data-grid'; class App extends React.Component { render() { return ( <DataGrid ... columnMinWidth={100}"> <Column dataField="Title" width={200} /> <Column dataField="Address" minWidth={150} /> </DataGrid> ); } } export default App;
Set the columnAutoWidth option to true to make all columns adjust their widths to their content.
jQuery
$(function() { $("#dataGridContainer").dxDataGrid({ // ... columnAutoWidth: true }); });
Angular
<dx-data-grid ... [columnAutoWidth]="true"> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
Vue
<template> <DxDataGrid ... :column-auto-width="true"> </DxDataGrid> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxDataGrid from 'devextreme-vue/data-grid'; export default { components: { DxDataGrid }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DataGrid from 'devextreme-react/data-grid'; class App extends React.Component { render() { return ( <DataGrid ... columnAutoWidth={true}"> </DataGrid> ); } } export default App;
The widget allows a user to resize columns in two different modes: by changing the next column's width or the widget's width. To enable this functionality and set the mode, specify the allowColumnResizing and columnResizingMode options, respectively. Note that you can prevent a specific column from being resized by assigning false to its allowResizing option.
jQuery
$(function() { $("#dataGridContainer").dxDataGrid({ // ... allowColumnResizing: true, columnResizingMode: 'widget', // or 'nextColumn' columns: [{ dataField: "Title", allowResizing: false }, // ... ] }); });
Angular
<dx-data-grid ... [allowColumnResizing]="true" columnResizingMode="widget"> <!-- or 'nextColumn' --> <dxi-column dataField="Title" [allowResizing]="false"></dxi-column> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
Vue
<template> <DxDataGrid ... :allow-column-resizing="true" column-resizing-mode="widget"> <!-- or "nextColumn" --> <DxColumn data-field="Title" :allow-resizing="false" /> </DxDataGrid> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxDataGrid, { DxColumn } from 'devextreme-vue/data-grid'; export default { components: { DxDataGrid, DxColumn }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DataGrid, { Column } from 'devextreme-react/data-grid'; class App extends React.Component { render() { return ( <DataGrid ... allowColumnResizing={true} columnResizingMode="widget"> <!-- or 'nextColumn' --> <Column dataField="Title" allowResizing={false} /> </DataGrid> ); } } export default App;