React Data Grid - Column Resizing

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', }];

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/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </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; }