diff --git a/packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx b/packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx
index 2cfc36e44fb9..633b53c45c5f 100644
--- a/packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx
+++ b/packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx
@@ -1,48 +1,72 @@
 /* eslint-disable spellcheck/spell-checker */
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
-import type { Subscribable } from '@ts/core/reactive/index';
+import { combined } from '@ts/core/reactive/index';
 import { ColumnsChooserView } from '@ts/grids/new/grid_core/columns_chooser/view';
-import { View } from '@ts/grids/new/grid_core/core/view_old';
+import { View } from '@ts/grids/new/grid_core/core/view';
 import { FilterPanelView } from '@ts/grids/new/grid_core/filtering/filter_panel/filter_panel';
 import { PagerView } from '@ts/grids/new/grid_core/pager';
 import { ToolbarView } from '@ts/grids/new/grid_core/toolbar/view';
-import type { InfernoNode } from 'inferno';
+import type { ComponentType } from 'inferno';
 
 import { ContentView } from './content_view/view';
 import { HeaderPanelView } from './header_panel/view';
 
-export class MainView extends View {
-  public vdom: InfernoNode | Subscribable<InfernoNode>;
+interface MainViewProps {
+  Toolbar: ComponentType;
+  Content: ComponentType;
+  Pager: ComponentType;
+  HeaderPanel: ComponentType;
+  FilterPanel: ComponentType;
+  ColumnsChooser: ComponentType;
+}
+
+function MainViewComponent({
+  Toolbar, Content, Pager, HeaderPanel, FilterPanel, ColumnsChooser,
+}: MainViewProps): JSX.Element {
+  return (<>
+    {/* @ts-expect-error */}
+    <Toolbar/>
+    {/* @ts-expect-error */}
+    <HeaderPanel/>
+    {/* @ts-expect-error */}
+    <Content/>
+    {/* @ts-expect-error */}
+    <FilterPanel/>
+    {/* @ts-expect-error */}
+    <Pager/>
+    {/* @ts-expect-error */}
+    <ColumnsChooser/>
+  </>);
+}
+
+export class MainView extends View<MainViewProps> {
+  protected override component = MainViewComponent;
 
   public static dependencies = [
     ContentView, PagerView, ToolbarView, HeaderPanelView, FilterPanelView, ColumnsChooserView,
   ] as const;
 
   constructor(
-    _content: ContentView,
-    _pager: PagerView,
-    _toolbar: ToolbarView,
-    _headerPanel: HeaderPanelView,
-    _filterPanel: FilterPanelView,
-    _columnsChooser: ColumnsChooserView,
+    private readonly content: ContentView,
+    private readonly pager: PagerView,
+    private readonly toolbar: ToolbarView,
+    private readonly headerPanel: HeaderPanelView,
+    private readonly filterPanel: FilterPanelView,
+    private readonly columnsChooser: ColumnsChooserView,
   ) {
     super();
-    const Toolbar = _toolbar.asInferno();
-    const Content = _content.asInferno();
-    const Pager = _pager.asInferno();
-    const HeaderPanel = _headerPanel.asInferno();
-    const FilterPanel = _filterPanel.asInferno();
-    const ColumnsChooser = _columnsChooser.asInferno();
+  }
 
-    this.vdom = <>
-      <Toolbar/>
-      <HeaderPanel/>
-      {/* @ts-expect-error */}
-      <Content/>
-      <FilterPanel/>
-      <Pager/>
-      {/* @ts-expect-error */}
-      <ColumnsChooser/>
-    </>;
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+  protected override getProps() {
+    return combined({
+      Toolbar: this.toolbar.asInferno(),
+      Content: this.content.asInferno(),
+      Pager: this.pager.asInferno(),
+      HeaderPanel: this.headerPanel.asInferno(),
+      FilterPanel: this.filterPanel.asInferno(),
+      ColumnsChooser: this.columnsChooser.asInferno(),
+    });
   }
 }
diff --git a/packages/devextreme/js/__internal/grids/new/data_grid/widget_base.ts b/packages/devextreme/js/__internal/grids/new/data_grid/widget_base.ts
index b8bd690480a5..09966df20ac0 100644
--- a/packages/devextreme/js/__internal/grids/new/data_grid/widget_base.ts
+++ b/packages/devextreme/js/__internal/grids/new/data_grid/widget_base.ts
@@ -1,17 +1,17 @@
 /* eslint-disable spellcheck/spell-checker */
 import registerComponent from '@js/core/component_registrator';
-import { MainView as MainViewBase } from '@ts/grids/new/grid_core/main_view';
+// import { MainView as MainViewBase } from '@ts/grids/new/grid_core/main_view';
 import { OptionsController as OptionsControllerBase } from '@ts/grids/new/grid_core/options_controller/options_controller';
 import { GridCoreNewBase } from '@ts/grids/new/grid_core/widget_base';
 
-import { MainView } from './main_view';
+// import { MainView } from './main_view';
 import { OptionsController } from './options_controller';
 import type { Options } from './types';
 
 class DataGridNew extends GridCoreNewBase<Options> {
   protected _registerDIContext(): void {
     super._registerDIContext();
-    this.diContext.register(MainViewBase, MainView);
+    // this.diContext.register(MainViewBase, MainView);
 
     const optionsController = new OptionsController(this);
     this.diContext.registerInstance(OptionsController, optionsController);
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/main_view.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/main_view.tsx
index d29f283ad883..bd1c6ba4d326 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/main_view.tsx
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/main_view.tsx
@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable spellcheck/spell-checker */
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
 
-import { View } from './core/view_old';
+import { View } from './core/view';
 
-export abstract class MainView extends View {}
+export abstract class MainView<T extends {}> extends View<T> {}