DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Data Grid - Column Resizing

The DataGrid sets the same width for all columns, but you can change column widths as described below.

Backend API
import React, { useCallback, useState } from 'react'; import { ColumnResizeMode } from 'devextreme-react/common/grids'; import { DataGrid } from 'devextreme-react/data-grid'; import { SelectBox, SelectBoxTypes } from 'devextreme-react/select-box'; import { orders } from './data.ts'; const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax']; const resizingModes: ColumnResizeMode[] = ['nextColumn', 'widget']; const columnResizingModeLabel = { 'aria-label': 'Column Resizing Mode' }; const App = () => { const [mode, setMode] = useState(resizingModes[0]); const changeResizingMode = useCallback((data: SelectBoxTypes.ValueChangedEvent) => { setMode(data.value); }, []); return ( <div> <DataGrid id="orders" dataSource={orders} keyExpr="ID" showBorders={true} allowColumnResizing={true} columnResizingMode={mode} columnMinWidth={50} columnAutoWidth={true} defaultColumns={columns} > </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Column resizing mode:&nbsp;</span> <SelectBox items={resizingModes} value={mode} inputAttr={columnResizingModeLabel} width={250} onValueChanged={changeResizingMode} /> </div> </div> </div> ); }; export default App;
import React, { useCallback, useState } from 'react'; import { DataGrid } from 'devextreme-react/data-grid'; import { SelectBox } from 'devextreme-react/select-box'; import { orders } from './data.js'; const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax']; const resizingModes = ['nextColumn', 'widget']; const columnResizingModeLabel = { 'aria-label': 'Column Resizing Mode' }; const App = () => { const [mode, setMode] = useState(resizingModes[0]); const changeResizingMode = useCallback((data) => { setMode(data.value); }, []); return ( <div> <DataGrid id="orders" dataSource={orders} keyExpr="ID" showBorders={true} allowColumnResizing={true} columnResizingMode={mode} columnMinWidth={50} columnAutoWidth={true} defaultColumns={columns} ></DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Column resizing mode:&nbsp;</span> <SelectBox items={resizingModes} value={mode} inputAttr={columnResizingModeLabel} width={250} onValueChanged={changeResizingMode} /> </div> </div> </div> ); }; export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export const orders = [{ ID: 1, CompanyName: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '(800) 555-2797', Fax: '(800) 555-2171', }, { ID: 2, CompanyName: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '(800) 595-3232', Fax: '(800) 595-3231', }, { ID: 3, CompanyName: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '(612) 304-6073', Fax: '(612) 304-6074', }, { ID: 4, CompanyName: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '(800) 955-2292', Fax: '(800) 955-2293', }, { ID: 5, CompanyName: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '(847) 286-2500', Fax: '(847) 286-2501', }, { ID: 6, CompanyName: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '(847) 940-2500', Fax: '(847) 940-2501', }, { ID: 7, CompanyName: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '(817) 820-0741', Fax: '(817) 820-0742', }, { ID: 8, CompanyName: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '(800) 955-2929', Fax: '(800) 955-9392', }, { ID: 9, CompanyName: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '(612) 291-1000', Fax: '(612) 291-2001', }, { ID: 10, CompanyName: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '(630) 438-7800', Fax: '(630) 438-7801', }, { ID: 11, CompanyName: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '(214) 854-3000', Fax: '(214) 854-3001', }, { ID: 12, CompanyName: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '(800) 445-6937', Fax: '(800) 445-6938', }];
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export const orders = [ { ID: 1, CompanyName: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '(800) 555-2797', Fax: '(800) 555-2171', }, { ID: 2, CompanyName: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '(800) 595-3232', Fax: '(800) 595-3231', }, { ID: 3, CompanyName: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '(612) 304-6073', Fax: '(612) 304-6074', }, { ID: 4, CompanyName: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '(800) 955-2292', Fax: '(800) 955-2293', }, { ID: 5, CompanyName: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '(847) 286-2500', Fax: '(847) 286-2501', }, { ID: 6, CompanyName: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '(847) 940-2500', Fax: '(847) 940-2501', }, { ID: 7, CompanyName: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '(817) 820-0741', Fax: '(817) 820-0742', }, { ID: 8, CompanyName: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '(800) 955-2929', Fax: '(800) 955-9392', }, { ID: 9, CompanyName: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '(612) 291-1000', Fax: '(612) 291-2001', }, { ID: 10, CompanyName: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '(630) 438-7800', Fax: '(630) 438-7801', }, { ID: 11, CompanyName: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '(214) 854-3000', Fax: '(214) 854-3001', }, { ID: 12, CompanyName: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '(800) 445-6937', Fax: '(800) 445-6938', }, ];
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#orders { max-height: 310px; } .options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-weight: 500; font-size: 18px; } .option { margin-top: 10px; } .option > span { position: relative; top: 2px; margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; }

Specify Custom Column Widths

You can set custom widths for all or individual columns. Individual settings override common settings. Use the following properties to specify the widths:

Auto-Adjust Column Widths to Content

In this demo, columns adjust their widths to the content. To enable this feature, set the columnAutoWidth property to true.

Allow Users to Resize Columns

Users can resize columns if the allowColumnResizing property is enabled. When a user resizes a column, the DataGrid's behavior depends on the columnResizingMode property value:

  • "nextColumn"
    The DataGrid resizes the adjacent column; the total component width does not change.

  • "widget"
    The total component width increases or decreases; all other columns maintain their widths.

Use the drop-down list below the DataGrid to try both values.

If you do not want users to resize a specific column, disable its allowResizing property.