DataGrid: Add the 'Fixed and Sticky Columns' demo (#28266)

Co-authored-by: Alyar <>

apps/demos/Demos/DataGrid/FixedAndStickyColumns/Angular/app/app.component.css

@@ -0,0 +1,3 @@
+::ng-deep #gridContainer {
+  height: 440px;
+}

apps/demos/Demos/DataGrid/FixedAndStickyColumns/Angular/app/app.component.html

@@ -0,0 +1,34 @@
+<dx-data-grid
+  id="gridContainer"
+  [dataSource]="employees"
+  keyExpr="ID"
+  [columnAutoWidth]="true"
+  [showBorders]="true"
+>
+  <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
+  <dxi-column
+    caption="Employee"
+    [width]="230"
+    [fixed]="true"
+    [calculateCellValue]="calculateCellValue"
+  ></dxi-column>
+  <dxi-column dataField="BirthDate" dataType="date"></dxi-column>
+  <dxi-column dataField="HireDate" dataType="date"></dxi-column>
+  <dxi-column dataField="Position" alignment="right"></dxi-column>
+  <dxi-column
+    dataField="Address"
+    [width]="230"
+    [fixed]="true"
+    fixedPosition="sticky"
+  ></dxi-column>
+  <dxi-column dataField="City"></dxi-column>
+  <dxi-column
+    dataField="State"
+    [fixed]="true"
+    fixedPosition="right"
+  ></dxi-column>
+  <dxi-column dataField="HomePhone"></dxi-column>
+  <dxi-column dataField="MobilePhone"></dxi-column>
+  <dxi-column dataField="Skype"></dxi-column>
+  <dxi-column dataField="Email"></dxi-column>
+</dx-data-grid>

apps/demos/Demos/DataGrid/FixedAndStickyColumns/Angular/app/app.component.ts

@@ -0,0 +1,43 @@
+import { NgModule, Component, enableProdMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DxDataGridModule } from 'devextreme-angular';
+import { Service, Employee } from './app.service';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+let modulePrefix = '';
+// @ts-ignore
+if (window && window.config.packageConfigPaths) {
+  modulePrefix = '/app';
+}
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: `.${modulePrefix}/app.component.html`,
+  styleUrls: [`.${modulePrefix}/app.component.css`],
+  providers: [Service],
+})
+export class AppComponent {
+  employees: Employee[];
+
+  constructor(service: Service) {
+    this.employees = service.getEmployees();
+  }
+
+  calculateCellValue = ({ Title, FirstName, LastName }) => [Title, FirstName, LastName].join(' ');
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DxDataGridModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);

apps/demos/Demos/DataGrid/FixedAndStickyColumns/Angular/app/app.service.ts

@@ -0,0 +1,202 @@
+import { Injectable } from '@angular/core';
+
+export class Employee {
+  ID: number;
+
+  FirstName: string;
+
+  LastName: string;
+
+  Position: string;
+
+  BirthDate: string;
+
+  HireDate: string;
+
+  Title: string;
+
+  Address: string;
+
+  City: string;
+
+  State: string;
+
+  Email: string;
+
+  Skype: string;
+
+  HomePhone: string;
+
+  DepartmentID: number;
+
+  MobilePhone: string;
+}
+
+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',
+  Email: '[email protected]',
+  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',
+  Email: '[email protected]',
+  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',
+  Email: '[email protected]',
+  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',
+  Email: '[email protected]',
+  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',
+  Email: '[email protected]',
+  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',
+  Email: '[email protected]',
+  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',
+  Email: '[email protected]',
+  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',
+  Email: '[email protected]',
+  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',
+  Email: '[email protected]',
+  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',
+  Email: '[email protected]',
+  Skype: 'taylorrDXskype',
+  HomePhone: '(310) 555-9712',
+  DepartmentID: 5,
+  MobilePhone: '(310) 555-7276',
+}];
+
+@Injectable()
+export class Service {
+  getEmployees(): Employee[] {
+    return employees;
+  }
+}

apps/demos/Demos/DataGrid/FixedAndStickyColumns/Angular/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" 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="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+
+    <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
+    <script src="../../../../node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="../../../../node_modules/systemjs/dist/system.js"></script>
+
+    <script src="config.js"></script>
+    <script>
+      System.import("app").catch(console.error.bind(console));
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <demo-app>Loading...</demo-app>
+    </div>
+  </body>
+</html>

apps/demos/Demos/DataGrid/FixedAndStickyColumns/React/App.tsx

@@ -0,0 +1,54 @@
+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"
+      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}
+      fixed={true}
+      fixedPosition="sticky"
+    />
+    <Column dataField="City" />
+    <Column
+      dataField="State"
+      fixed={true}
+      fixedPosition="right"
+    />
+    <Column dataField="HomePhone" />
+    <Column dataField="MobilePhone" />
+    <Column dataField="Skype" />
+    <Column dataField="Email" />
+  </DataGrid>
+);
+
+export default App;