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 Customization

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

Backend API
import React from 'react'; import DataGrid, { Column, ColumnChooser, ColumnFixing } from 'devextreme-react/data-grid'; import { Employee, employees } from './data.ts'; const calculateCellValue = (data: Employee) => [data.Title, data.FirstName, data.LastName].join(' '); const App = () => ( <DataGrid id="gridContainer" dataSource={employees} keyExpr="ID" allowColumnReordering={true} allowColumnResizing={true} columnAutoWidth={true} showBorders={true} > <ColumnChooser enabled={true} /> <ColumnFixing enabled={true} /> <Column caption="Employee" width={230} fixed={true} calculateCellValue={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 DataGrid, { Column, ColumnChooser, ColumnFixing } from 'devextreme-react/data-grid'; import { employees } from './data.js'; const calculateCellValue = (data) => [data.Title, data.FirstName, data.LastName].join(' '); const App = () => ( <DataGrid id="gridContainer" dataSource={employees} keyExpr="ID" allowColumnReordering={true} allowColumnResizing={true} columnAutoWidth={true} showBorders={true} > <ColumnChooser enabled={true} /> <ColumnFixing enabled={true} /> <Column caption="Employee" width={230} fixed={true} calculateCellValue={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.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export interface Employee { ID: number; FirstName: string; LastName: string; Position: string; BirthDate: string; HireDate: string; Title: string; Address: string; City: string; State: string; Zipcode: number; Email: string; Skype: string; HomePhone: string; DepartmentID: number; MobilePhone: string; } export const employees: Employee[] = [{ 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', }];
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 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', }, ];
<!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>
#gridContainer { height: 440px; }

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.

  • Component property: columnFixing.enabled
  • Column property: 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.

  • Component property: columnChooser.enabled
  • Column property: columns[].visible