Your search did not match any results.
Data Grid

Column Customization

Users can do the following to customize grid columns at runtime:

Reorder Columns
Drag the column's header to reorder the column.

Resize columns
Drag the edge of the column's header to resize the column.

Fix (pin) columns
Invoke a context menu in a column's header and specify whether to fix the column to the left or right. The fixed column remains visible when users scroll the view horizontally.

  • Widget option: columnFixing.enabled
  • Column option: columns[].fixed - if enabled, fixes a column to the left; columns[].fixedPosition - specifies whether to fix a column to the left or right

Show and hide columns
Click the Column Chooser button to access hidden columns. Drag the column's header between the Column Chooser and the grid to change the column's visibility.

  • Widget option: columnChooser.enabled
  • Column option: columns[].visible
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import DataGrid, { Column, ColumnChooser, ColumnFixing } from 'devextreme-react/data-grid'; import service from './data.js'; class App extends React.Component { constructor(props) { super(props); this.employees = service.getEmployees(); } calculateCellValue(data) { return [data.Title, data.FirstName, data.LastName].join(' '); } render() { return ( <DataGrid id="gridContainer" dataSource={this.employees} allowColumnReordering={true} allowColumnResizing={true} columnAutoWidth={true} showBorders={true} > <ColumnChooser enabled={true} /> <ColumnFixing enabled={true} /> <Column caption="Employee" width={230} fixed={true} calculateCellValue={this.calculateCellValue} /> <Column dataField="BirthDate" dataType="date" /> <Column dataField="HireDate" dataType="date" /> <Column dataField="Position" alignment="right" /> <Column dataField="Address" width={230} /> <Column dataField="City" /> <Column dataField="State" /> <Column dataField="Zipcode" visible={false} /> <Column dataField="HomePhone" /> <Column dataField="MobilePhone" /> <Column dataField="Skype" /> <Column dataField="Email" /> </DataGrid> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#gridContainer { height: 440px; }
const employees = [{ 'ID': 1, 'FirstName': 'John', 'LastName': 'Heart', 'Position': 'CEO', 'BirthDate': '1964/03/16', 'HireDate': '1995/01/15', 'Title': 'Mr.', 'Address': '351 S Hill St.', 'City': 'Los Angeles', 'State': 'California', 'Zipcode': 90013, 'Email': 'jheart@dx-email.com', 'Skype': 'jheartDXskype', 'HomePhone': '(213) 555-9208', 'DepartmentID': 6, 'MobilePhone': '(213) 555-9392' }, { 'ID': 2, 'FirstName': 'Olivia', 'LastName': 'Peyton', 'Position': 'Sales Assistant', 'BirthDate': '1981/06/03', 'HireDate': '2012/05/14', 'Title': 'Mrs.', 'Address': '807 W Paseo Del Mar', 'City': 'Los Angeles', 'State': 'California', 'Zipcode': 90036, 'Email': 'oliviap@dx-email.com', 'Skype': 'oliviapDXskype', 'HomePhone': '(310) 555-2728', 'DepartmentID': 5, 'MobilePhone': '(818) 555-2387' }, { 'ID': 3, 'FirstName': 'Robert', 'LastName': 'Reagan', 'Position': 'CMO', 'BirthDate': '1974/09/07', 'HireDate': '2002/11/08', 'Title': 'Mr.', 'Address': '4 Westmoreland Pl.', 'City': 'Bentonville', 'State': 'Arkansas', 'Zipcode': 91103, 'Email': 'robertr@dx-email.com', 'Skype': 'robertrDXskype', 'HomePhone': '(818) 555-2438', 'DepartmentID': 6, 'MobilePhone': '(818) 555-2387' }, { 'ID': 4, 'FirstName': 'Greta', 'LastName': 'Sims', 'Position': 'HR Manager', 'BirthDate': '1977/11/22', 'HireDate': '1998/04/23', 'Title': 'Ms.', 'Address': '1700 S Grandview Dr.', 'State': 'Georgia', 'City': 'Atlanta', 'Zipcode': 91803, 'Email': 'gretas@dx-email.com', 'Skype': 'gretasDXskype', 'HomePhone': '(818) 555-0976', 'DepartmentID': 5, 'MobilePhone': '(818) 555-6546' }, { 'ID': 5, 'FirstName': 'Brett', 'LastName': 'Wade', 'Position': 'IT Manager', 'BirthDate': '1968/12/01', 'HireDate': '2009/03/06', 'Title': 'Mr.', 'Address': '1120 Old Mill Rd.', 'State': 'Idaho', 'City': 'Boise', 'Zipcode': 91108, 'Email': 'brettw@dx-email.com', 'Skype': 'brettwDXskype', 'HomePhone': '(626) 555-5985', 'DepartmentID': 7, 'MobilePhone': '(626) 555-0358' }, { 'ID': 6, 'FirstName': 'Sandra', 'LastName': 'Johnson', 'Position': 'Controller', 'BirthDate': '1974/11/15', 'HireDate': '2005/05/11', 'Title': 'Mrs.', 'Address': '4600 N Virginia Rd.', 'State': 'Utah', 'City': 'Beaver', 'Zipcode': 90807, 'Email': 'sandraj@dx-email.com', 'Skype': 'sandrajDXskype', 'HomePhone': '(562) 555-8272', 'DepartmentID': 5, 'MobilePhone': '(562) 555-2082' }, { 'ID': 7, 'FirstName': 'Kevin', 'LastName': 'Carter', 'Position': 'Shipping Manager', 'BirthDate': '1978/01/09', 'HireDate': '2009/08/11', 'Title': 'Mr.', 'Address': '424 N Main St.', 'State': 'California', 'City': 'San Diego', 'Zipcode': 90012, 'Email': 'kevinc@dx-email.com', 'Skype': 'kevincDXskype', 'HomePhone': '(213) 555-8038', 'DepartmentID': 3, 'MobilePhone': '(213) 555-2840' }, { 'ID': 8, 'FirstName': 'Cynthia', 'LastName': 'Stanwick', 'Position': 'HR Assistant', 'BirthDate': '1985/06/05', 'HireDate': '2008/03/24', 'Title': 'Ms.', 'Address': '2211 Bonita Dr.', 'City': 'Little Rock', 'State': 'Arkansas', 'Zipcode': 90265, 'Email': 'cindys@dx-email.com', 'Skype': 'cindysDXskype', 'HomePhone': '(818) 555-6808', 'DepartmentID': 4, 'MobilePhone': '(818) 555-6655' }, { 'ID': 9, 'FirstName': 'Kent', 'LastName': 'Samuelson', 'Position': 'Ombudsman', 'BirthDate': '1972/09/11', 'HireDate': '2009/04/22', 'Title': 'Dr.', 'Address': '12100 Mora Dr', 'City': 'St. Louis', 'State': 'Missouri', 'Zipcode': 90272, 'Email': 'kents@dx-email.com', 'Skype': 'kentsDXskype', 'HomePhone': '(562) 555-1328', 'DepartmentID': 26, 'MobilePhone': '(562) 555-9282' }, { 'ID': 10, 'FirstName': 'Taylor', 'LastName': 'Riley', 'Position': 'Network Admin', 'BirthDate': '1982/08/14', 'HireDate': '2012/04/14', 'Title': 'Mr.', 'Address': '7776 Torreyson Dr', 'City': 'San Jose', 'State': 'California', 'Zipcode': 90012, 'Email': 'taylorr@dx-email.com', 'Skype': 'taylorrDXskype', 'HomePhone': '(310) 555-9712', 'DepartmentID': 5, 'MobilePhone': '(310) 555-7276' }]; export default { getEmployees() { return employees; } };
System.config({ transpiler: 'plugin-babel', meta: { }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.4', 'devextreme-react': 'npm:devextreme-react@20.2.4', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.8/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.7/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.js', // 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' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });