React Data Grid - Fixed and Sticky Columns

A horizontal scrollbar appears when the total width of all grid columns exceeds the DevExtreme DataGrid’s overall width. To maintain column visibility when scrolling horizontally, set the columnFixing.enabled property to true.

To fix a column programmatically, set its fixed property to true and specify the desired fixedPosition:

'left' (default if fixed: true)
The column is fixed to the leftmost edge of the grid.
'right'
The column is fixed to the rightmost edge of the grid.
'sticky'
The column "sticks" to the left or rightmost edge when it reaches either side of the grid.

To fix (or unfix) a column, right-click a column header and select the desired operation using the DataGrid’s built-in context menu. To prevent users from fixing/unfixing a column, set its allowFixing property to false.

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 from 'react';
import DataGrid, { Column, 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"    columnAutoWidth={true}    showBorders={true}  >    <ColumnFixing enabled={true} />    <Column      caption="Employee"      fixed={true}      calculateCellValue={calculateCellValue}    />    <Column      dataField="Position"      alignment="right"    />    <Column      dataField="Address"      fixed={true}      fixedPosition="sticky"    />    <Column dataField="City" />    <Column dataField="Zipcode" />    <Column dataField="State" />    <Column      dataField="Department"      fixed={true}      fixedPosition="right"    />    <Column      dataField="BirthDate"      dataType="date"    />    <Column      dataField="HireDate"      dataType="date"    />    <Column dataField="HomePhone" />    <Column dataField="MobilePhone" />    <Column dataField="Email" />    <Column dataField="Skype" />  </DataGrid>);​export default App;​

xxxxxxxxxx
 
import React from 'react';
import DataGrid, { Column, 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"    columnAutoWidth={true}    showBorders={true}  >    <ColumnFixing enabled={true} />    <Column      caption="Employee"      fixed={true}      calculateCellValue={calculateCellValue}    />    <Column      dataField="Position"      alignment="right"    />    <Column      dataField="Address"      fixed={true}      fixedPosition="sticky"    />    <Column dataField="City" />    <Column dataField="Zipcode" />    <Column dataField="State" />    <Column      dataField="Department"      fixed={true}      fixedPosition="right"    />    <Column      dataField="BirthDate"      dataType="date"    />    <Column      dataField="HireDate"      dataType="date"    />    <Column dataField="HomePhone" />    <Column dataField="MobilePhone" />    <Column dataField="Email" />    <Column dataField="Skype" />  </DataGrid>);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 interface Employee {
  ID: number;  Head_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;  Department: string;  MobilePhone: string;}​export const employees: Employee[] = [{  ID: 1,  Head_ID: 0,  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,  Department: 'Management',  MobilePhone: '(213) 555-9392',}, {  ID: 2,  Head_ID: 1,  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,  Department: 'Human Resources',  MobilePhone: '(818) 555-2387',}, {  ID: 3,  Head_ID: 1,  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,  Department: 'Management',  MobilePhone: '(818) 555-2387',}, {  ID: 4,  Head_ID: 1,  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,  Department: 'Human Resources',  MobilePhone: '(818) 555-6546',}, {  ID: 5,  Head_ID: 1,  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,  Department: 'IT',  MobilePhone: '(626) 555-0358',}, {  ID: 6,  Head_ID: 3,  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,  Department: 'Human Resources',  MobilePhone: '(562) 555-2082',}, {  ID: 7,  Head_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,  Department: 'Shipping',  MobilePhone: '(213) 555-2840',}, {  ID: 8,  Head_ID: 4,  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,  Department: 'Engineering',  MobilePhone: '(818) 555-6655',}, {  ID: 9,  Head_ID: 3,  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,  Department: 'Human Resources',  MobilePhone: '(562) 555-9282',}, {  ID: 10,  Head_ID: 2,  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,  Department: 'Human Resources',  MobilePhone: '(310) 555-7276',}];​

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 employees = [
  {    ID: 1,    Head_ID: 0,    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,    Department: 'Management',    MobilePhone: '(213) 555-9392',  },  {    ID: 2,    Head_ID: 1,    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,    Department: 'Human Resources',    MobilePhone: '(818) 555-2387',  },  {    ID: 3,    Head_ID: 1,    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,    Department: 'Management',    MobilePhone: '(818) 555-2387',  },  {    ID: 4,    Head_ID: 1,    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,    Department: 'Human Resources',    MobilePhone: '(818) 555-6546',  },  {    ID: 5,    Head_ID: 1,    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,    Department: 'IT',    MobilePhone: '(626) 555-0358',  },  {    ID: 6,    Head_ID: 3,    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,    Department: 'Human Resources',    MobilePhone: '(562) 555-2082',  },  {    ID: 7,    Head_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,    Department: 'Shipping',    MobilePhone: '(213) 555-2840',  },  {    ID: 8,    Head_ID: 4,    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,    Department: 'Engineering',    MobilePhone: '(818) 555-6655',  },  {    ID: 9,    Head_ID: 3,    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,    Department: 'Human Resources',    MobilePhone: '(562) 555-9282',  },  {    ID: 10,    Head_ID: 2,    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,    Department: 'Human Resources',    MobilePhone: '(310) 555-7276',  },];​

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

xxxxxxxxxx
 
#gridContainer {
  height: 440px;}​