React Resizable

If you want to enable live resize operations for a UI element, wrap that element into a Resizable widget. In this demo, you can resize the DataGrid. Try to drag the handles on the grid's edges.

Configure the following properties to specify resize operation constraints:

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

​x
 
import React, { useCallback, useState } from 'react';
import DataGrid, { Paging, Scrolling, Column } from 'devextreme-react/data-grid';import Resizable from 'devextreme-react/resizable';import CheckBox from 'devextreme-react/check-box';import TagBox from 'devextreme-react/tag-box';​import { orders, handleLabel } from './data.ts';​const handleValues = ['left', 'top', 'right', 'bottom'];​const App = () => {  const [keepAspectRatio, setKeepAspectRatio] = useState(true);  const [handles, setHandles] = useState(handleValues);  const [resizableClasses, setResizableClasses] = useState('');​  const keepAspectRatioValueChange = useCallback((value) => {    setKeepAspectRatio(value);  }, [setKeepAspectRatio]);​  const handlesValueChange = useCallback((value: string[]) => {    const classes = handleValues.reduce((acc, handle) => {      const newClass = value.includes(handle) ? '' : ` no-${handle}-handle`;      return acc + newClass;    }, '');​    setHandles(value);    setResizableClasses(classes);  }, [setHandles, setResizableClasses]);​  return (    <React.Fragment>      <div className='widget-container'>        <div className='dx-fieldset'>          <div className='dx-fieldset-header'>Resizable DataGrid</div>          <div className='dx-field'>            <Resizable              className={resizableClasses}              id='gridContainer'              minWidth={400}              minHeight={150}              maxHeight={370}              keepAspectRatio={keepAspectRatio}              handles={handles.join(' ')}              area='.widget-container .dx-field'            >              <DataGrid                id='grid'                dataSource={orders}                keyExpr='ID'                showBorders={true}                height='100%'              >                <Paging pageSize={8} />                <Scrolling mode='virtual' />                <Column allowGrouping={false} dataField='OrderNumber' width={130} caption='Invoice Number' />                <Column dataField='CustomerStoreCity' caption='City' />                <Column dataField='CustomerStoreState' caption='State' />                <Column dataField='Employee' />                <Column dataField='OrderDate' dataType='date' />                <Column dataField='SaleAmount' format='currency' />              </DataGrid>            </Resizable>          </div>        </div>      </div>      <div className='options'>        <div className='caption'>Resizable Options</div>        <div className='option'>          <div>Handles</div>          <TagBox            items={handleValues}            value={handles}            inputAttr={handleLabel}            onValueChange={handlesValueChange}          />        </div>        <div className='option'>          <CheckBox            text='Keep aspect ratio'            value={keepAspectRatio}            onValueChange={keepAspectRatioValueChange}          />        </div>      </div>    </React.Fragment>  );};​export default App;​

xxxxxxxxxx
 
import React, { useCallback, useState } from 'react';
import DataGrid, { Paging, Scrolling, Column } from 'devextreme-react/data-grid';import Resizable from 'devextreme-react/resizable';import CheckBox from 'devextreme-react/check-box';import TagBox from 'devextreme-react/tag-box';import { orders, handleLabel } from './data.js';​const handleValues = ['left', 'top', 'right', 'bottom'];const App = () => {  const [keepAspectRatio, setKeepAspectRatio] = useState(true);  const [handles, setHandles] = useState(handleValues);  const [resizableClasses, setResizableClasses] = useState('');  const keepAspectRatioValueChange = useCallback(    (value) => {      setKeepAspectRatio(value);    },    [setKeepAspectRatio],  );  const handlesValueChange = useCallback(    (value) => {      const classes = handleValues.reduce((acc, handle) => {        const newClass = value.includes(handle) ? '' : ` no-${handle}-handle`;        return acc + newClass;      }, '');      setHandles(value);      setResizableClasses(classes);    },    [setHandles, setResizableClasses],  );  return (    <React.Fragment>      <div className="widget-container">        <div className="dx-fieldset">          <div className="dx-fieldset-header">Resizable DataGrid</div>          <div className="dx-field">            <Resizable              className={resizableClasses}              id="gridContainer"              minWidth={400}              minHeight={150}              maxHeight={370}              keepAspectRatio={keepAspectRatio}              handles={handles.join(' ')}              area=".widget-container .dx-field"            >              <DataGrid                id="grid"                dataSource={orders}                keyExpr="ID"                showBorders={true}                height="100%"              >                <Paging pageSize={8} />                <Scrolling mode="virtual" />                <Column                  allowGrouping={false}                  dataField="OrderNumber"                  width={130}                  caption="Invoice Number"                />                <Column                  dataField="CustomerStoreCity"                  caption="City"                />                <Column                  dataField="CustomerStoreState"                  caption="State"                />                <Column dataField="Employee" />                <Column                  dataField="OrderDate"                  dataType="date"                />                <Column                  dataField="SaleAmount"                  format="currency"                />              </DataGrid>            </Resizable>          </div>        </div>      </div>      <div className="options">        <div className="caption">Resizable Options</div>        <div className="option">          <div>Handles</div>          <TagBox            items={handleValues}            value={handles}            inputAttr={handleLabel}            onValueChange={handlesValueChange}          />        </div>        <div className="option">          <CheckBox            text="Keep aspect ratio"            value={keepAspectRatio}            onValueChange={keepAspectRatioValueChange}          />        </div>      </div>    </React.Fragment>  );};export default App;​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';​import App from './App.tsx';​ReactDOM.render(  <App />,  document.getElementById('app'),);​

xxxxxxxxxx
 
export const orders = [{
  ID: 1,  OrderNumber: 35703,  OrderDate: '2014/04/10',  SaleAmount: 11800,  Terms: '15 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'Los Angeles',  Employee: 'Harv Mudd',}, {  ID: 4,  OrderNumber: 35711,  OrderDate: '2014/01/12',  SaleAmount: 16050,  Terms: '15 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'San Jose',  Employee: 'Jim Packard',}, {  ID: 5,  OrderNumber: 35714,  OrderDate: '2014/01/22',  SaleAmount: 14750,  Terms: '15 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Las Vegas',  Employee: 'Harv Mudd',}, {  ID: 7,  OrderNumber: 35983,  OrderDate: '2014/02/07',  SaleAmount: 3725,  Terms: '15 Days',  CustomerStoreState: 'Colorado',  CustomerStoreCity: 'Denver',  Employee: 'Todd Hoffman',}, {  ID: 9,  OrderNumber: 36987,  OrderDate: '2014/03/11',  SaleAmount: 14200,  Terms: '15 Days',  CustomerStoreState: 'Utah',  CustomerStoreCity: 'Salt Lake City',  Employee: 'Clark Morgan',}, {  ID: 11,  OrderNumber: 38466,  OrderDate: '2014/03/01',  SaleAmount: 7800,  Terms: '15 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'Los Angeles',  Employee: 'Harv Mudd',}, {  ID: 14,  OrderNumber: 39420,  OrderDate: '2014/02/15',  SaleAmount: 20500,  Terms: '15 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'San Jose',  Employee: 'Jim Packard',}, {  ID: 15,  OrderNumber: 39874,  OrderDate: '2014/02/04',  SaleAmount: 9050,  Terms: '30 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Las Vegas',  Employee: 'Harv Mudd',}, {  ID: 18,  OrderNumber: 42847,  OrderDate: '2014/02/15',  SaleAmount: 20400,  Terms: '30 Days',  CustomerStoreState: 'Wyoming',  CustomerStoreCity: 'Casper',  Employee: 'Todd Hoffman',}, {  ID: 19,  OrderNumber: 43982,  OrderDate: '2014/05/29',  SaleAmount: 6050,  Terms: '30 Days',  CustomerStoreState: 'Utah',  CustomerStoreCity: 'Salt Lake City',  Employee: 'Clark Morgan',}, {  ID: 29,  OrderNumber: 56272,  OrderDate: '2014/02/06',  SaleAmount: 15850,  Terms: '30 Days',  CustomerStoreState: 'Utah',  CustomerStoreCity: 'Salt Lake City',  Employee: 'Clark Morgan',}, {  ID: 30,  OrderNumber: 57429,  OrderDate: '2014/05/16',  SaleAmount: 11050,  Terms: '30 Days',  CustomerStoreState: 'Arizona',  CustomerStoreCity: 'Phoenix',  Employee: 'Clark Morgan',}, {  ID: 32,  OrderNumber: 58292,  OrderDate: '2014/05/13',  SaleAmount: 13500,  Terms: '15 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'Los Angeles',  Employee: 'Harv Mudd',}, {  ID: 36,  OrderNumber: 62427,  OrderDate: '2014/01/27',  SaleAmount: 23500,  Terms: '15 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Las Vegas',  Employee: 'Harv Mudd',}, {  ID: 39,  OrderNumber: 65977,  OrderDate: '2014/02/05',  SaleAmount: 2550,  Terms: '15 Days',  CustomerStoreState: 'Wyoming',  CustomerStoreCity: 'Casper',  Employee: 'Todd Hoffman',}, {  ID: 40,  OrderNumber: 66947,  OrderDate: '2014/03/23',  SaleAmount: 3500,  Terms: '15 Days',  CustomerStoreState: 'Utah',  CustomerStoreCity: 'Salt Lake City',  Employee: 'Clark Morgan',}, {  ID: 42,  OrderNumber: 68428,  OrderDate: '2014/04/10',  SaleAmount: 10500,  Terms: '15 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'Los Angeles',  Employee: 'Harv Mudd',}, {  ID: 43,  OrderNumber: 69477,  OrderDate: '2014/03/09',  SaleAmount: 14200,  Terms: '15 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'Anaheim',  Employee: 'Harv Mudd',}, {  ID: 46,  OrderNumber: 72947,  OrderDate: '2014/01/14',  SaleAmount: 13350,  Terms: '30 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Las Vegas',  Employee: 'Harv Mudd',}, {  ID: 47,  OrderNumber: 73088,  OrderDate: '2014/03/25',  SaleAmount: 8600,  Terms: '30 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Reno',  Employee: 'Clark Morgan',}, {  ID: 50,  OrderNumber: 76927,  OrderDate: '2014/04/27',  SaleAmount: 9800,  Terms: '30 Days',  CustomerStoreState: 'Utah',  CustomerStoreCity: 'Salt Lake City',  Employee: 'Clark Morgan',}, {  ID: 51,  OrderNumber: 77297,  OrderDate: '2014/04/30',  SaleAmount: 10850,  Terms: '30 Days',  CustomerStoreState: 'Arizona',  CustomerStoreCity: 'Phoenix',  Employee: 'Clark Morgan',}, {  ID: 56,  OrderNumber: 84744,  OrderDate: '2014/02/10',  SaleAmount: 4650,  Terms: '30 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Las Vegas',  Employee: 'Harv Mudd',}, {  ID: 57,  OrderNumber: 85028,  OrderDate: '2014/05/17',  SaleAmount: 2575,  Terms: '30 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Reno',  Employee: 'Clark Morgan',}, {  ID: 59,  OrderNumber: 87297,  OrderDate: '2014/04/21',  SaleAmount: 14200,  Terms: '30 Days',  CustomerStoreState: 'Wyoming',  CustomerStoreCity: 'Casper',  Employee: 'Todd Hoffman',}, {  ID: 60,  OrderNumber: 88027,  OrderDate: '2014/02/14',  SaleAmount: 13650,  Terms: '30 Days',  CustomerStoreState: 'Utah',  CustomerStoreCity: 'Salt Lake City',  Employee: 'Clark Morgan',}, {  ID: 65,  OrderNumber: 94726,  OrderDate: '2014/05/22',  SaleAmount: 20500,  Terms: '15 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'San Jose',  Employee: 'Jim Packard',}, {  ID: 66,  OrderNumber: 95266,  OrderDate: '2014/03/10',  SaleAmount: 9050,  Terms: '15 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Las Vegas',  Employee: 'Harv Mudd',}, {  ID: 69,  OrderNumber: 98477,  OrderDate: '2014/01/01',  SaleAmount: 23500,  Terms: '15 Days',  CustomerStoreState: 'Wyoming',  CustomerStoreCity: 'Casper',  Employee: 'Todd Hoffman',}, {  ID: 70,  OrderNumber: 99247,  OrderDate: '2014/02/08',  SaleAmount: 2100,  Terms: '15 Days',  CustomerStoreState: 'Utah',  CustomerStoreCity: 'Salt Lake City',  Employee: 'Clark Morgan',}, {  ID: 78,  OrderNumber: 174884,  OrderDate: '2014/04/10',  SaleAmount: 7200,  Terms: '30 Days',  CustomerStoreState: 'Colorado',  CustomerStoreCity: 'Denver',  Employee: 'Todd Hoffman',}, {  ID: 81,  OrderNumber: 188877,  OrderDate: '2014/02/11',  SaleAmount: 8750,  Terms: '30 Days',  CustomerStoreState: 'Arizona',  CustomerStoreCity: 'Phoenix',  Employee: 'Clark Morgan',}, {  ID: 82,  OrderNumber: 191883,  OrderDate: '2014/02/05',  SaleAmount: 9900,  Terms: '30 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'Los Angeles',  Employee: 'Harv Mudd',}, {  ID: 83,  OrderNumber: 192474,  OrderDate: '2014/01/21',  SaleAmount: 12800,  Terms: '30 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'Anaheim',  Employee: 'Harv Mudd',}, {  ID: 84,  OrderNumber: 193847,  OrderDate: '2014/03/21',  SaleAmount: 14100,  Terms: '30 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'San Diego',  Employee: 'Harv Mudd',}, {  ID: 85,  OrderNumber: 194877,  OrderDate: '2014/03/06',  SaleAmount: 4750,  Terms: '30 Days',  CustomerStoreState: 'California',  CustomerStoreCity: 'San Jose',  Employee: 'Jim Packard',}, {  ID: 86,  OrderNumber: 195746,  OrderDate: '2014/05/26',  SaleAmount: 9050,  Terms: '30 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Las Vegas',  Employee: 'Harv Mudd',}, {  ID: 87,  OrderNumber: 197474,  OrderDate: '2014/03/02',  SaleAmount: 6400,  Terms: '30 Days',  CustomerStoreState: 'Nevada',  CustomerStoreCity: 'Reno',  Employee: 'Clark Morgan',}, {  ID: 88,  OrderNumber: 198746,  OrderDate: '2014/05/09',  SaleAmount: 15700,  Terms: '30 Days',  CustomerStoreState: 'Colorado',  CustomerStoreCity: 'Denver',  Employee: 'Todd Hoffman',}, {  ID: 91,  OrderNumber: 214222,  OrderDate: '2014/02/08',  SaleAmount: 11050,  Terms: '30 Days',  CustomerStoreState: 'Arizona',  CustomerStoreCity: 'Phoenix',  Employee: 'Clark Morgan',}];​export const handleLabel = { 'aria-label': 'Handle' };​

xxxxxxxxxx
 
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,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.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/prop-types.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.6/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.6/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    '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/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/common/core/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.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,    react: true,  },};System.config(window.config);​

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';import App from './App.js';​ReactDOM.render(<App />, document.getElementById('app'));​

xxxxxxxxxx
 
export const orders = [
  {    ID: 1,    OrderNumber: 35703,    OrderDate: '2014/04/10',    SaleAmount: 11800,    Terms: '15 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'Los Angeles',    Employee: 'Harv Mudd',  },  {    ID: 4,    OrderNumber: 35711,    OrderDate: '2014/01/12',    SaleAmount: 16050,    Terms: '15 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'San Jose',    Employee: 'Jim Packard',  },  {    ID: 5,    OrderNumber: 35714,    OrderDate: '2014/01/22',    SaleAmount: 14750,    Terms: '15 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Las Vegas',    Employee: 'Harv Mudd',  },  {    ID: 7,    OrderNumber: 35983,    OrderDate: '2014/02/07',    SaleAmount: 3725,    Terms: '15 Days',    CustomerStoreState: 'Colorado',    CustomerStoreCity: 'Denver',    Employee: 'Todd Hoffman',  },  {    ID: 9,    OrderNumber: 36987,    OrderDate: '2014/03/11',    SaleAmount: 14200,    Terms: '15 Days',    CustomerStoreState: 'Utah',    CustomerStoreCity: 'Salt Lake City',    Employee: 'Clark Morgan',  },  {    ID: 11,    OrderNumber: 38466,    OrderDate: '2014/03/01',    SaleAmount: 7800,    Terms: '15 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'Los Angeles',    Employee: 'Harv Mudd',  },  {    ID: 14,    OrderNumber: 39420,    OrderDate: '2014/02/15',    SaleAmount: 20500,    Terms: '15 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'San Jose',    Employee: 'Jim Packard',  },  {    ID: 15,    OrderNumber: 39874,    OrderDate: '2014/02/04',    SaleAmount: 9050,    Terms: '30 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Las Vegas',    Employee: 'Harv Mudd',  },  {    ID: 18,    OrderNumber: 42847,    OrderDate: '2014/02/15',    SaleAmount: 20400,    Terms: '30 Days',    CustomerStoreState: 'Wyoming',    CustomerStoreCity: 'Casper',    Employee: 'Todd Hoffman',  },  {    ID: 19,    OrderNumber: 43982,    OrderDate: '2014/05/29',    SaleAmount: 6050,    Terms: '30 Days',    CustomerStoreState: 'Utah',    CustomerStoreCity: 'Salt Lake City',    Employee: 'Clark Morgan',  },  {    ID: 29,    OrderNumber: 56272,    OrderDate: '2014/02/06',    SaleAmount: 15850,    Terms: '30 Days',    CustomerStoreState: 'Utah',    CustomerStoreCity: 'Salt Lake City',    Employee: 'Clark Morgan',  },  {    ID: 30,    OrderNumber: 57429,    OrderDate: '2014/05/16',    SaleAmount: 11050,    Terms: '30 Days',    CustomerStoreState: 'Arizona',    CustomerStoreCity: 'Phoenix',    Employee: 'Clark Morgan',  },  {    ID: 32,    OrderNumber: 58292,    OrderDate: '2014/05/13',    SaleAmount: 13500,    Terms: '15 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'Los Angeles',    Employee: 'Harv Mudd',  },  {    ID: 36,    OrderNumber: 62427,    OrderDate: '2014/01/27',    SaleAmount: 23500,    Terms: '15 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Las Vegas',    Employee: 'Harv Mudd',  },  {    ID: 39,    OrderNumber: 65977,    OrderDate: '2014/02/05',    SaleAmount: 2550,    Terms: '15 Days',    CustomerStoreState: 'Wyoming',    CustomerStoreCity: 'Casper',    Employee: 'Todd Hoffman',  },  {    ID: 40,    OrderNumber: 66947,    OrderDate: '2014/03/23',    SaleAmount: 3500,    Terms: '15 Days',    CustomerStoreState: 'Utah',    CustomerStoreCity: 'Salt Lake City',    Employee: 'Clark Morgan',  },  {    ID: 42,    OrderNumber: 68428,    OrderDate: '2014/04/10',    SaleAmount: 10500,    Terms: '15 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'Los Angeles',    Employee: 'Harv Mudd',  },  {    ID: 43,    OrderNumber: 69477,    OrderDate: '2014/03/09',    SaleAmount: 14200,    Terms: '15 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'Anaheim',    Employee: 'Harv Mudd',  },  {    ID: 46,    OrderNumber: 72947,    OrderDate: '2014/01/14',    SaleAmount: 13350,    Terms: '30 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Las Vegas',    Employee: 'Harv Mudd',  },  {    ID: 47,    OrderNumber: 73088,    OrderDate: '2014/03/25',    SaleAmount: 8600,    Terms: '30 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Reno',    Employee: 'Clark Morgan',  },  {    ID: 50,    OrderNumber: 76927,    OrderDate: '2014/04/27',    SaleAmount: 9800,    Terms: '30 Days',    CustomerStoreState: 'Utah',    CustomerStoreCity: 'Salt Lake City',    Employee: 'Clark Morgan',  },  {    ID: 51,    OrderNumber: 77297,    OrderDate: '2014/04/30',    SaleAmount: 10850,    Terms: '30 Days',    CustomerStoreState: 'Arizona',    CustomerStoreCity: 'Phoenix',    Employee: 'Clark Morgan',  },  {    ID: 56,    OrderNumber: 84744,    OrderDate: '2014/02/10',    SaleAmount: 4650,    Terms: '30 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Las Vegas',    Employee: 'Harv Mudd',  },  {    ID: 57,    OrderNumber: 85028,    OrderDate: '2014/05/17',    SaleAmount: 2575,    Terms: '30 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Reno',    Employee: 'Clark Morgan',  },  {    ID: 59,    OrderNumber: 87297,    OrderDate: '2014/04/21',    SaleAmount: 14200,    Terms: '30 Days',    CustomerStoreState: 'Wyoming',    CustomerStoreCity: 'Casper',    Employee: 'Todd Hoffman',  },  {    ID: 60,    OrderNumber: 88027,    OrderDate: '2014/02/14',    SaleAmount: 13650,    Terms: '30 Days',    CustomerStoreState: 'Utah',    CustomerStoreCity: 'Salt Lake City',    Employee: 'Clark Morgan',  },  {    ID: 65,    OrderNumber: 94726,    OrderDate: '2014/05/22',    SaleAmount: 20500,    Terms: '15 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'San Jose',    Employee: 'Jim Packard',  },  {    ID: 66,    OrderNumber: 95266,    OrderDate: '2014/03/10',    SaleAmount: 9050,    Terms: '15 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Las Vegas',    Employee: 'Harv Mudd',  },  {    ID: 69,    OrderNumber: 98477,    OrderDate: '2014/01/01',    SaleAmount: 23500,    Terms: '15 Days',    CustomerStoreState: 'Wyoming',    CustomerStoreCity: 'Casper',    Employee: 'Todd Hoffman',  },  {    ID: 70,    OrderNumber: 99247,    OrderDate: '2014/02/08',    SaleAmount: 2100,    Terms: '15 Days',    CustomerStoreState: 'Utah',    CustomerStoreCity: 'Salt Lake City',    Employee: 'Clark Morgan',  },  {    ID: 78,    OrderNumber: 174884,    OrderDate: '2014/04/10',    SaleAmount: 7200,    Terms: '30 Days',    CustomerStoreState: 'Colorado',    CustomerStoreCity: 'Denver',    Employee: 'Todd Hoffman',  },  {    ID: 81,    OrderNumber: 188877,    OrderDate: '2014/02/11',    SaleAmount: 8750,    Terms: '30 Days',    CustomerStoreState: 'Arizona',    CustomerStoreCity: 'Phoenix',    Employee: 'Clark Morgan',  },  {    ID: 82,    OrderNumber: 191883,    OrderDate: '2014/02/05',    SaleAmount: 9900,    Terms: '30 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'Los Angeles',    Employee: 'Harv Mudd',  },  {    ID: 83,    OrderNumber: 192474,    OrderDate: '2014/01/21',    SaleAmount: 12800,    Terms: '30 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'Anaheim',    Employee: 'Harv Mudd',  },  {    ID: 84,    OrderNumber: 193847,    OrderDate: '2014/03/21',    SaleAmount: 14100,    Terms: '30 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'San Diego',    Employee: 'Harv Mudd',  },  {    ID: 85,    OrderNumber: 194877,    OrderDate: '2014/03/06',    SaleAmount: 4750,    Terms: '30 Days',    CustomerStoreState: 'California',    CustomerStoreCity: 'San Jose',    Employee: 'Jim Packard',  },  {    ID: 86,    OrderNumber: 195746,    OrderDate: '2014/05/26',    SaleAmount: 9050,    Terms: '30 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Las Vegas',    Employee: 'Harv Mudd',  },  {    ID: 87,    OrderNumber: 197474,    OrderDate: '2014/03/02',    SaleAmount: 6400,    Terms: '30 Days',    CustomerStoreState: 'Nevada',    CustomerStoreCity: 'Reno',    Employee: 'Clark Morgan',  },  {    ID: 88,    OrderNumber: 198746,    OrderDate: '2014/05/09',    SaleAmount: 15700,    Terms: '30 Days',    CustomerStoreState: 'Colorado',    CustomerStoreCity: 'Denver',    Employee: 'Todd Hoffman',  },  {    ID: 91,    OrderNumber: 214222,    OrderDate: '2014/02/08',    SaleAmount: 11050,    Terms: '30 Days',    CustomerStoreState: 'Arizona',    CustomerStoreCity: 'Phoenix',    Employee: 'Clark Morgan',  },];export const handleLabel = { 'aria-label': 'Handle' };​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx
 
.widget-container {
  width: calc(100% - 360px);  height: 100%;  margin-right: 320px;  position: absolute;  z-index: 1501;}​.dx-fieldset,.dx-field {  width: 100%;  height: calc(100% - 60px);}​.options {  padding: 20px;  background-color: rgba(191, 191, 191, 0.15);  position: absolute;  right: 0;  top: 0;  bottom: 0;  width: 260px;}​.caption {  font-weight: 500;  font-size: 18px;}​.option {  margin-top: 10px;}​#gridContainer {  padding: 10px;  height: 300px;}​#grid {  border: 1px solid black;}​.no-left-handle .dx-resizable-handle-top,.no-left-handle .dx-resizable-handle-bottom {  left: 10px;  width: calc(100% - 10px);}​.no-right-handle .dx-resizable-handle-top,.no-right-handle .dx-resizable-handle-bottom {  right: 10px;  width: calc(100% - 10px);}​.no-right-handle.no-left-handle .dx-resizable-handle-top,.no-right-handle.no-left-handle .dx-resizable-handle-bottom {  left: 10px;  width: calc(100% - 20px);}​.no-top-handle .dx-resizable-handle-right,.no-top-handle .dx-resizable-handle-left {  top: 10px;  height: calc(100% - 10px);}​.no-bottom-handle .dx-resizable-handle-right,.no-bottom-handle .dx-resizable-handle-left {  bottom: 10px;  height: calc(100% - 10px);}​.no-top-handle.no-bottom-handle .dx-resizable-handle-left,.no-top-handle.no-bottom-handle .dx-resizable-handle-right {  top: 10px;  height: calc(100% - 20px);}​.dx-resizable-handle-right {  border-right: 1px dotted #999;}​.dx-resizable-handle-top {  border-top: 1px dotted #999;}​.dx-resizable-handle-left {  border-left: 1px dotted #999;}​.dx-resizable-handle-bottom {  border-bottom: 1px dotted #999;}​.dx-resizable-handle::after {  content: "";  position: absolute;  width: 9px;  height: 9px;  border: none;  border-radius: 50%;  background-color: #fff;  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);}​.dx-resizable-handle-right::after {  top: 50%;  right: -5px;  transform: translateY(-50%);}​.dx-resizable-handle-left::after {  top: 50%;  left: -5px;  transform: translateY(-50%);}​.dx-resizable-handle-corner-top-left::after {  top: -4px;  left: -4px;}​.dx-resizable-handle-corner-top-right::after {  top: -4px;  right: -4px;}​.dx-resizable-handle-corner-bottom-left::after {  bottom: -4px;  left: -4px;}​.dx-resizable-handle-corner-bottom-right::after {  bottom: -4px;  right: -4px;}​.dx-resizable-handle-top::after {  top: -5px;  left: 50%;  transform: translateX(-50%);}​.dx-resizable-handle-bottom::after {  bottom: -5px;  left: 50%;  transform: translateX(-50%);}​

You can display resize handles on edges or corners. Use the following keywords to set up the handles property: top, bottom, left, and right. If you specify two adjacent sides (for example, "bottom right"), the control displays a handle in the corner.

The keepAspectRatio property specifies whether a corner handle resizes content proportionally. Set this property to false to allow free-form resize operations.