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
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columnMinWidth: 100,
        columns: [{
            dataField: "Title",
            width: 200
        }, {
            dataField: "Address",
            minWidth: 150
        }]
    });
});
Angular
HTML
TypeScript
<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
App.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
App.js
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
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columnAutoWidth: true
    });
});
Angular
HTML
TypeScript
<dx-data-grid ...
    [columnAutoWidth]="true">
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.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
App.js
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
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        allowColumnResizing: true,
        columnResizingMode: 'widget', // or 'nextColumn'
        columns: [{
            dataField: "Title",
            allowResizing: false
        }, 
        // ...
        ]
    });
});
Angular
HTML
TypeScript
<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
App.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
App.js
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;

View Demo

See Also