diff --git a/samples/grids/pivot-grid/data-selector/src/index.tsx b/samples/grids/pivot-grid/data-selector/src/index.tsx
index 71a7baafb..3e7ce5e3d 100644
--- a/samples/grids/pivot-grid/data-selector/src/index.tsx
+++ b/samples/grids/pivot-grid/data-selector/src/index.tsx
@@ -2,17 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { SALES_DATA_NEW as pivotData } from './salesDataNew';
-import { IgrPivotConfiguration, IgrPivotDataSelector, IgrPivotDataSelectorModule,
-     IgrPivotGrid, IgrPivotGridModule } from 'igniteui-react-grids';
+import { IgrPivotConfiguration, IgrPivotDataSelector, IgrPivotDateDimension, IgrPivotGrid } from 'igniteui-react-grids';
 
 import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
 
-const mods: any[] = [
-    IgrPivotGridModule,
-    IgrPivotDataSelectorModule
-];
-mods.forEach((m) => m.register());
-
 export default function App() {
     let grid: IgrPivotGrid;
     const gridRef = (r: IgrPivotGrid) => {
@@ -23,10 +16,10 @@ export default function App() {
     }
     const pivotConfiguration: IgrPivotConfiguration = {
         rows: [
-            {
+            new IgrPivotDateDimension({
                 enabled: true,
                 memberName: "Date",
-            },
+            })
         ],
         columns: [
             {
@@ -66,7 +59,7 @@ export default function App() {
                 <div className="container fill">
                     <div className="pivot-container">
                         <div>
-                            <IgrPivotGrid data={pivotData} ref={gridRef} pivotConfiguration={pivotConfiguration}>
+                            <IgrPivotGrid data={pivotData} ref={gridRef} pivotConfiguration={pivotConfiguration} defaultExpandState={true} superCompactMode={true}>
                             </IgrPivotGrid>
                         </div>
                         <IgrPivotDataSelector ref={selector}></IgrPivotDataSelector>