diff --git a/apps/demos/configs/Angular/config.js b/apps/demos/configs/Angular/config.js
index 60c4d7e1a4cc..af6ea6f9da5c 100644
--- a/apps/demos/configs/Angular/config.js
+++ b/apps/demos/configs/Angular/config.js
@@ -12,6 +12,7 @@ const componentNames = [
   'button-group',
   'button',
   'calendar',
+  'card-view',
   'chart',
   'chat',
   'check-box',
diff --git a/packages/devextreme-angular/src/index.ts b/packages/devextreme-angular/src/index.ts
index f6a3c60e1dc4..e0beea6c315d 100644
--- a/packages/devextreme-angular/src/index.ts
+++ b/packages/devextreme-angular/src/index.ts
@@ -12,6 +12,7 @@ export { DxBulletComponent, DxBulletModule } from 'devextreme-angular/ui/bullet'
 export { DxButtonComponent, DxButtonModule } from 'devextreme-angular/ui/button';
 export { DxButtonGroupComponent, DxButtonGroupModule } from 'devextreme-angular/ui/button-group';
 export { DxCalendarComponent, DxCalendarModule } from 'devextreme-angular/ui/calendar';
+export { DxCardViewComponent, DxCardViewModule } from 'devextreme-angular/ui/card-view';
 export { DxChartComponent, DxChartModule } from 'devextreme-angular/ui/chart';
 export { DxChatComponent, DxChatModule } from 'devextreme-angular/ui/chat';
 export { DxCheckBoxComponent, DxCheckBoxModule } from 'devextreme-angular/ui/check-box';
diff --git a/packages/devextreme-angular/src/server/render.ts b/packages/devextreme-angular/src/server/render.ts
index 04773ba08834..3027dd54b1af 100644
--- a/packages/devextreme-angular/src/server/render.ts
+++ b/packages/devextreme-angular/src/server/render.ts
@@ -37,6 +37,12 @@ export class DxServerModule {
 
           container.innerHTML = childString;
         },
+        renderIntoContainer: (
+          jsx,
+          container,
+        ) => {
+          container.innerHTML = renderToString(jsx);
+        },
       });
     }
   }
diff --git a/packages/devextreme-angular/src/ui/all.ts b/packages/devextreme-angular/src/ui/all.ts
index b877b2c65df4..716eee7e63e2 100644
--- a/packages/devextreme-angular/src/ui/all.ts
+++ b/packages/devextreme-angular/src/ui/all.ts
@@ -8,6 +8,7 @@ import { DxBulletModule } from 'devextreme-angular/ui/bullet';
 import { DxButtonModule } from 'devextreme-angular/ui/button';
 import { DxButtonGroupModule } from 'devextreme-angular/ui/button-group';
 import { DxCalendarModule } from 'devextreme-angular/ui/calendar';
+import { DxCardViewModule } from 'devextreme-angular/ui/card-view';
 import { DxChartModule } from 'devextreme-angular/ui/chart';
 import { DxChatModule } from 'devextreme-angular/ui/chat';
 import { DxCheckBoxModule } from 'devextreme-angular/ui/check-box';
@@ -94,6 +95,7 @@ import { DxTemplateModule } from 'devextreme-angular/core';
     DxButtonModule,
     DxButtonGroupModule,
     DxCalendarModule,
+    DxCardViewModule,
     DxChartModule,
     DxChatModule,
     DxCheckBoxModule,
@@ -179,6 +181,7 @@ import { DxTemplateModule } from 'devextreme-angular/core';
     DxButtonModule,
     DxButtonGroupModule,
     DxCalendarModule,
+    DxCardViewModule,
     DxChartModule,
     DxChatModule,
     DxCheckBoxModule,
diff --git a/packages/devextreme-angular/src/ui/card-view/index.ts b/packages/devextreme-angular/src/ui/card-view/index.ts
new file mode 100644
index 000000000000..fb58cd0681c9
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/index.ts
@@ -0,0 +1,815 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    TransferState,
+    Component,
+    NgModule,
+    ElementRef,
+    NgZone,
+    PLATFORM_ID,
+    Inject,
+
+    Input,
+    Output,
+    OnDestroy,
+    EventEmitter,
+    OnChanges,
+    DoCheck,
+    SimpleChanges,
+    ContentChildren,
+    QueryList
+} from '@angular/core';
+
+export { ExplicitTypes } from 'devextreme/ui/card_view';
+
+import DataSource from 'devextreme/data/data_source';
+import { CardCover, CardHeader, ColumnProperties, HeaderPanel, Paging, RemoteOperations, dxCardViewToolbar } from 'devextreme/ui/card_view';
+import { Mode } from 'devextreme/common';
+import { DataSourceOptions } from 'devextreme/data/data_source';
+import { Store } from 'devextreme/data/store';
+import { EventInfo } from 'devextreme/common/core/events';
+import { Pager } from 'devextreme/common/grids';
+
+import DxCardView from 'devextreme/ui/card_view';
+
+
+import {
+    DxComponent,
+    DxTemplateHost,
+    DxIntegrationModule,
+    DxTemplateModule,
+    NestedOptionHost,
+    IterableDifferHelper,
+    WatcherHelper
+} from 'devextreme-angular/core';
+
+import { DxoCardCoverModule } from 'devextreme-angular/ui/nested';
+import { DxoCardHeaderModule } from 'devextreme-angular/ui/nested';
+import { DxiColumnModule } from 'devextreme-angular/ui/nested';
+import { DxoHeaderPanelModule } from 'devextreme-angular/ui/nested';
+import { DxoPagerModule } from 'devextreme-angular/ui/nested';
+import { DxoPagingModule } from 'devextreme-angular/ui/nested';
+import { DxoRemoteOperationsModule } from 'devextreme-angular/ui/nested';
+import { DxoToolbarModule } from 'devextreme-angular/ui/nested';
+import { DxiItemModule } from 'devextreme-angular/ui/nested';
+
+import { DxoCardViewCardCoverModule } from 'devextreme-angular/ui/card-view/nested';
+import { DxoCardViewCardHeaderModule } from 'devextreme-angular/ui/card-view/nested';
+import { DxiCardViewColumnModule } from 'devextreme-angular/ui/card-view/nested';
+import { DxoCardViewHeaderPanelModule } from 'devextreme-angular/ui/card-view/nested';
+import { DxiCardViewItemModule } from 'devextreme-angular/ui/card-view/nested';
+import { DxoCardViewPagerModule } from 'devextreme-angular/ui/card-view/nested';
+import { DxoCardViewPagingModule } from 'devextreme-angular/ui/card-view/nested';
+import { DxoCardViewRemoteOperationsModule } from 'devextreme-angular/ui/card-view/nested';
+import { DxoCardViewToolbarModule } from 'devextreme-angular/ui/card-view/nested';
+
+import { DxiColumnComponent } from 'devextreme-angular/ui/nested';
+
+import { DxiCardViewColumnComponent } from 'devextreme-angular/ui/card-view/nested';
+
+
+/**
+ * [descr:dxCardView]
+
+ */
+@Component({
+    selector: 'dx-card-view',
+    template: '',
+    host: { ngSkipHydration: 'true' },
+    providers: [
+        DxTemplateHost,
+        WatcherHelper,
+        NestedOptionHost,
+        IterableDifferHelper
+    ]
+})
+export class DxCardViewComponent<TRowData = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
+    instance: DxCardView<TRowData, TKey> = null;
+
+    /**
+     * [descr:WidgetOptions.accessKey]
+    
+     */
+    @Input()
+    get accessKey(): string | undefined {
+        return this._getOption('accessKey');
+    }
+    set accessKey(value: string | undefined) {
+        this._setOption('accessKey', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.activeStateEnabled]
+    
+     */
+    @Input()
+    get activeStateEnabled(): boolean {
+        return this._getOption('activeStateEnabled');
+    }
+    set activeStateEnabled(value: boolean) {
+        this._setOption('activeStateEnabled', value);
+    }
+
+
+    /**
+     * [descr:ContentViewConfiguration.cardCover]
+    
+     */
+    @Input()
+    get cardCover(): CardCover {
+        return this._getOption('cardCover');
+    }
+    set cardCover(value: CardCover) {
+        this._setOption('cardCover', value);
+    }
+
+
+    /**
+     * [descr:ContentViewConfiguration.cardHeader]
+    
+     */
+    @Input()
+    get cardHeader(): CardHeader {
+        return this._getOption('cardHeader');
+    }
+    set cardHeader(value: CardHeader) {
+        this._setOption('cardHeader', value);
+    }
+
+
+    /**
+     * [descr:ContentViewConfiguration.cardMaxWidth]
+    
+     */
+    @Input()
+    get cardMaxWidth(): number {
+        return this._getOption('cardMaxWidth');
+    }
+    set cardMaxWidth(value: number) {
+        this._setOption('cardMaxWidth', value);
+    }
+
+
+    /**
+     * [descr:ContentViewConfiguration.cardMinWidth]
+    
+     */
+    @Input()
+    get cardMinWidth(): number {
+        return this._getOption('cardMinWidth');
+    }
+    set cardMinWidth(value: number) {
+        this._setOption('cardMinWidth', value);
+    }
+
+
+    /**
+     * [descr:ContentViewConfiguration.cardsPerRow]
+    
+     */
+    @Input()
+    get cardsPerRow(): Mode | number {
+        return this._getOption('cardsPerRow');
+    }
+    set cardsPerRow(value: Mode | number) {
+        this._setOption('cardsPerRow', value);
+    }
+
+
+    /**
+     * [descr:ContentViewConfiguration.cardTemplate]
+    
+     */
+    @Input()
+    get cardTemplate(): any {
+        return this._getOption('cardTemplate');
+    }
+    set cardTemplate(value: any) {
+        this._setOption('cardTemplate', value);
+    }
+
+
+    /**
+     * [descr:ColumnsControllerConfiguration.columns]
+    
+     */
+    @Input()
+    get columns(): Array<ColumnProperties | string> {
+        return this._getOption('columns');
+    }
+    set columns(value: Array<ColumnProperties | string>) {
+        this._setOption('columns', value);
+    }
+
+
+    /**
+     * [descr:DataControllerConfiguration.dataSource]
+    
+     */
+    @Input()
+    get dataSource(): Array<any> | DataSource | DataSourceOptions | Store | string {
+        return this._getOption('dataSource');
+    }
+    set dataSource(value: Array<any> | DataSource | DataSourceOptions | Store | string) {
+        this._setOption('dataSource', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.disabled]
+    
+     */
+    @Input()
+    get disabled(): boolean {
+        return this._getOption('disabled');
+    }
+    set disabled(value: boolean) {
+        this._setOption('disabled', value);
+    }
+
+
+    /**
+     * [descr:DOMComponentOptions.elementAttr]
+    
+     */
+    @Input()
+    get elementAttr(): Record<string, any> {
+        return this._getOption('elementAttr');
+    }
+    set elementAttr(value: Record<string, any>) {
+        this._setOption('elementAttr', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.focusStateEnabled]
+    
+     */
+    @Input()
+    get focusStateEnabled(): boolean {
+        return this._getOption('focusStateEnabled');
+    }
+    set focusStateEnabled(value: boolean) {
+        this._setOption('focusStateEnabled', value);
+    }
+
+
+    /**
+     * [descr:HeaderPanelConfiguration.headerPanel]
+    
+     */
+    @Input()
+    get headerPanel(): HeaderPanel {
+        return this._getOption('headerPanel');
+    }
+    set headerPanel(value: HeaderPanel) {
+        this._setOption('headerPanel', value);
+    }
+
+
+    /**
+     * [descr:DOMComponentOptions.height]
+    
+     */
+    @Input()
+    get height(): (() => number | string) | number | string | undefined {
+        return this._getOption('height');
+    }
+    set height(value: (() => number | string) | number | string | undefined) {
+        this._setOption('height', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.hint]
+    
+     */
+    @Input()
+    get hint(): string | undefined {
+        return this._getOption('hint');
+    }
+    set hint(value: string | undefined) {
+        this._setOption('hint', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.hoverStateEnabled]
+    
+     */
+    @Input()
+    get hoverStateEnabled(): boolean {
+        return this._getOption('hoverStateEnabled');
+    }
+    set hoverStateEnabled(value: boolean) {
+        this._setOption('hoverStateEnabled', value);
+    }
+
+
+    /**
+     * [descr:DataControllerConfiguration.keyExpr]
+    
+     */
+    @Input()
+    get keyExpr(): Array<string> | string {
+        return this._getOption('keyExpr');
+    }
+    set keyExpr(value: Array<string> | string) {
+        this._setOption('keyExpr', value);
+    }
+
+
+    /**
+     * [descr:PagerConfiguration.pager]
+    
+     */
+    @Input()
+    get pager(): Pager {
+        return this._getOption('pager');
+    }
+    set pager(value: Pager) {
+        this._setOption('pager', value);
+    }
+
+
+    /**
+     * [descr:DataControllerConfiguration.paging]
+    
+     */
+    @Input()
+    get paging(): Paging {
+        return this._getOption('paging');
+    }
+    set paging(value: Paging) {
+        this._setOption('paging', value);
+    }
+
+
+    /**
+     * [descr:DataControllerConfiguration.remoteOperations]
+    
+     */
+    @Input()
+    get remoteOperations(): boolean | Mode | RemoteOperations {
+        return this._getOption('remoteOperations');
+    }
+    set remoteOperations(value: boolean | Mode | RemoteOperations) {
+        this._setOption('remoteOperations', value);
+    }
+
+
+    /**
+     * [descr:DOMComponentOptions.rtlEnabled]
+    
+     */
+    @Input()
+    get rtlEnabled(): boolean {
+        return this._getOption('rtlEnabled');
+    }
+    set rtlEnabled(value: boolean) {
+        this._setOption('rtlEnabled', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.tabIndex]
+    
+     */
+    @Input()
+    get tabIndex(): number {
+        return this._getOption('tabIndex');
+    }
+    set tabIndex(value: number) {
+        this._setOption('tabIndex', value);
+    }
+
+
+    /**
+     * [descr:dxCardViewOptions.toolbar]
+    
+     */
+    @Input()
+    get toolbar(): dxCardViewToolbar | undefined {
+        return this._getOption('toolbar');
+    }
+    set toolbar(value: dxCardViewToolbar | undefined) {
+        this._setOption('toolbar', value);
+    }
+
+
+    /**
+     * [descr:WidgetOptions.visible]
+    
+     */
+    @Input()
+    get visible(): boolean {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean) {
+        this._setOption('visible', value);
+    }
+
+
+    /**
+     * [descr:DOMComponentOptions.width]
+    
+     */
+    @Input()
+    get width(): (() => number | string) | number | string | undefined {
+        return this._getOption('width');
+    }
+    set width(value: (() => number | string) | number | string | undefined) {
+        this._setOption('width', value);
+    }
+
+    /**
+    
+     * [descr:WidgetOptions.onContentReady]
+    
+    
+     */
+    @Output() onContentReady: EventEmitter<EventInfo<any>>;
+
+    /**
+    
+     * [descr:dxCardViewOptions.onDataErrorOccurred]
+    
+    
+     */
+    @Output() onDataErrorOccurred: EventEmitter<Object>;
+
+    /**
+    
+     * [descr:DOMComponentOptions.onDisposing]
+    
+    
+     */
+    @Output() onDisposing: EventEmitter<EventInfo<any>>;
+
+    /**
+    
+     * [descr:ComponentOptions.onInitialized]
+    
+    
+     */
+    @Output() onInitialized: EventEmitter<Object>;
+
+    /**
+    
+     * [descr:DOMComponentOptions.onOptionChanged]
+    
+    
+     */
+    @Output() onOptionChanged: EventEmitter<Object>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() accessKeyChange: EventEmitter<string | undefined>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() activeStateEnabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() cardCoverChange: EventEmitter<CardCover>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() cardHeaderChange: EventEmitter<CardHeader>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() cardMaxWidthChange: EventEmitter<number>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() cardMinWidthChange: EventEmitter<number>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() cardsPerRowChange: EventEmitter<Mode | number>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() cardTemplateChange: EventEmitter<any>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() columnsChange: EventEmitter<Array<ColumnProperties | string>>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() dataSourceChange: EventEmitter<Array<any> | DataSource | DataSourceOptions | Store | string>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() disabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() elementAttrChange: EventEmitter<Record<string, any>>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() focusStateEnabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() headerPanelChange: EventEmitter<HeaderPanel>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() heightChange: EventEmitter<(() => number | string) | number | string | undefined>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() hintChange: EventEmitter<string | undefined>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() hoverStateEnabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() keyExprChange: EventEmitter<Array<string> | string>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() pagerChange: EventEmitter<Pager>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() pagingChange: EventEmitter<Paging>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() remoteOperationsChange: EventEmitter<boolean | Mode | RemoteOperations>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() rtlEnabledChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() tabIndexChange: EventEmitter<number>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() toolbarChange: EventEmitter<dxCardViewToolbar | undefined>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() visibleChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() widthChange: EventEmitter<(() => number | string) | number | string | undefined>;
+
+
+
+
+    @ContentChildren(DxiCardViewColumnComponent)
+    get columnsChildren(): QueryList<DxiCardViewColumnComponent> {
+        return this._getOption('columns');
+    }
+    set columnsChildren(value) {
+        this._setChildren('columns', value, 'DxiCardViewColumnComponent');
+    }
+
+
+    @ContentChildren(DxiColumnComponent)
+    get columnsLegacyChildren(): QueryList<DxiColumnComponent> {
+        return this._getOption('columns');
+    }
+    set columnsLegacyChildren(value) {
+        this._setChildren('columns', value, 'DxiColumnComponent');
+    }
+
+
+
+
+    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,
+            private _watcherHelper: WatcherHelper,
+            private _idh: IterableDifferHelper,
+            optionHost: NestedOptionHost,
+            transferState: TransferState,
+            @Inject(PLATFORM_ID) platformId: any) {
+
+        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
+
+        this._createEventEmitters([
+            { subscribe: 'contentReady', emit: 'onContentReady' },
+            { subscribe: 'dataErrorOccurred', emit: 'onDataErrorOccurred' },
+            { subscribe: 'disposing', emit: 'onDisposing' },
+            { subscribe: 'initialized', emit: 'onInitialized' },
+            { subscribe: 'optionChanged', emit: 'onOptionChanged' },
+            { emit: 'accessKeyChange' },
+            { emit: 'activeStateEnabledChange' },
+            { emit: 'cardCoverChange' },
+            { emit: 'cardHeaderChange' },
+            { emit: 'cardMaxWidthChange' },
+            { emit: 'cardMinWidthChange' },
+            { emit: 'cardsPerRowChange' },
+            { emit: 'cardTemplateChange' },
+            { emit: 'columnsChange' },
+            { emit: 'dataSourceChange' },
+            { emit: 'disabledChange' },
+            { emit: 'elementAttrChange' },
+            { emit: 'focusStateEnabledChange' },
+            { emit: 'headerPanelChange' },
+            { emit: 'heightChange' },
+            { emit: 'hintChange' },
+            { emit: 'hoverStateEnabledChange' },
+            { emit: 'keyExprChange' },
+            { emit: 'pagerChange' },
+            { emit: 'pagingChange' },
+            { emit: 'remoteOperationsChange' },
+            { emit: 'rtlEnabledChange' },
+            { emit: 'tabIndexChange' },
+            { emit: 'toolbarChange' },
+            { emit: 'visibleChange' },
+            { emit: 'widthChange' }
+        ]);
+
+        this._idh.setHost(this);
+        optionHost.setHost(this);
+    }
+
+    protected _createInstance(element, options) {
+
+        return new DxCardView(element, options);
+    }
+
+
+    ngOnDestroy() {
+        this._destroyWidget();
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        super.ngOnChanges(changes);
+        this.setupChanges('columns', changes);
+        this.setupChanges('dataSource', changes);
+        this.setupChanges('keyExpr', changes);
+    }
+
+    setupChanges(prop: string, changes: SimpleChanges) {
+        if (!(prop in this._optionsToUpdate)) {
+            this._idh.setup(prop, changes);
+        }
+    }
+
+    ngDoCheck() {
+        this._idh.doCheck('columns');
+        this._idh.doCheck('dataSource');
+        this._idh.doCheck('keyExpr');
+        this._watcherHelper.checkWatchers();
+        super.ngDoCheck();
+        super.clearChangedOptions();
+    }
+
+    _setOption(name: string, value: any) {
+        let isSetup = this._idh.setupSingle(name, value);
+        let isChanged = this._idh.getChanges(name, value) !== null;
+
+        if (isSetup || isChanged) {
+            super._setOption(name, value);
+        }
+    }
+}
+
+@NgModule({
+  imports: [
+    DxoCardCoverModule,
+    DxoCardHeaderModule,
+    DxiColumnModule,
+    DxoHeaderPanelModule,
+    DxoPagerModule,
+    DxoPagingModule,
+    DxoRemoteOperationsModule,
+    DxoToolbarModule,
+    DxiItemModule,
+    DxoCardViewCardCoverModule,
+    DxoCardViewCardHeaderModule,
+    DxiCardViewColumnModule,
+    DxoCardViewHeaderPanelModule,
+    DxiCardViewItemModule,
+    DxoCardViewPagerModule,
+    DxoCardViewPagingModule,
+    DxoCardViewRemoteOperationsModule,
+    DxoCardViewToolbarModule,
+    DxIntegrationModule,
+    DxTemplateModule
+  ],
+  declarations: [
+    DxCardViewComponent
+  ],
+  exports: [
+    DxCardViewComponent,
+    DxoCardCoverModule,
+    DxoCardHeaderModule,
+    DxiColumnModule,
+    DxoHeaderPanelModule,
+    DxoPagerModule,
+    DxoPagingModule,
+    DxoRemoteOperationsModule,
+    DxoToolbarModule,
+    DxiItemModule,
+    DxoCardViewCardCoverModule,
+    DxoCardViewCardHeaderModule,
+    DxiCardViewColumnModule,
+    DxoCardViewHeaderPanelModule,
+    DxiCardViewItemModule,
+    DxoCardViewPagerModule,
+    DxoCardViewPagingModule,
+    DxoCardViewRemoteOperationsModule,
+    DxoCardViewToolbarModule,
+    DxTemplateModule
+  ]
+})
+export class DxCardViewModule { }
+
+import type * as DxCardViewTypes from "devextreme/ui/card_view_types";
+export { DxCardViewTypes };
+
+
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/card-cover.ts b/packages/devextreme-angular/src/ui/card-view/nested/card-cover.ts
new file mode 100644
index 000000000000..2e528065ea1b
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/card-cover.ts
@@ -0,0 +1,80 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-card-view-card-cover',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost]
+})
+export class DxoCardViewCardCoverComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get altExpr(): ((data: any) => string) | string {
+        return this._getOption('altExpr');
+    }
+    set altExpr(value: ((data: any) => string) | string) {
+        this._setOption('altExpr', value);
+    }
+
+    @Input()
+    get imageExpr(): ((data: any) => string) | string {
+        return this._getOption('imageExpr');
+    }
+    set imageExpr(value: ((data: any) => string) | string) {
+        this._setOption('imageExpr', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'cardCover';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoCardViewCardCoverComponent
+  ],
+  exports: [
+    DxoCardViewCardCoverComponent
+  ],
+})
+export class DxoCardViewCardCoverModule { }
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/card-header.ts b/packages/devextreme-angular/src/ui/card-view/nested/card-header.ts
new file mode 100644
index 000000000000..f79ad3dc4cf5
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/card-header.ts
@@ -0,0 +1,80 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-card-view-card-header',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost]
+})
+export class DxoCardViewCardHeaderComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get captionExpr(): ((data: any) => string) | string {
+        return this._getOption('captionExpr');
+    }
+    set captionExpr(value: ((data: any) => string) | string) {
+        this._setOption('captionExpr', value);
+    }
+
+    @Input()
+    get visible(): boolean {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean) {
+        this._setOption('visible', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'cardHeader';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoCardViewCardHeaderComponent
+  ],
+  exports: [
+    DxoCardViewCardHeaderComponent
+  ],
+})
+export class DxoCardViewCardHeaderModule { }
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/column-dxi.ts b/packages/devextreme-angular/src/ui/card-view/nested/column-dxi.ts
new file mode 100644
index 000000000000..1461ef81a741
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/column-dxi.ts
@@ -0,0 +1,98 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { CollectionNestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxi-card-view-column',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost]
+})
+export class DxiCardViewColumnComponent extends CollectionNestedOption {
+    @Input()
+    get fieldCaptionTemplate(): any {
+        return this._getOption('fieldCaptionTemplate');
+    }
+    set fieldCaptionTemplate(value: any) {
+        this._setOption('fieldCaptionTemplate', value);
+    }
+
+    @Input()
+    get fieldTemplate(): any {
+        return this._getOption('fieldTemplate');
+    }
+    set fieldTemplate(value: any) {
+        this._setOption('fieldTemplate', value);
+    }
+
+    @Input()
+    get fieldValueTemplate(): any {
+        return this._getOption('fieldValueTemplate');
+    }
+    set fieldValueTemplate(value: any) {
+        this._setOption('fieldValueTemplate', value);
+    }
+
+    @Input()
+    get headerItemCssClass(): string {
+        return this._getOption('headerItemCssClass');
+    }
+    set headerItemCssClass(value: string) {
+        this._setOption('headerItemCssClass', value);
+    }
+
+    @Input()
+    get headerItemTemplate(): any {
+        return this._getOption('headerItemTemplate');
+    }
+    set headerItemTemplate(value: any) {
+        this._setOption('headerItemTemplate', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'columns';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+
+    ngOnDestroy() {
+        this._deleteRemovedOptions(this._fullOptionPath());
+    }
+
+}
+
+@NgModule({
+  declarations: [
+    DxiCardViewColumnComponent
+  ],
+  exports: [
+    DxiCardViewColumnComponent
+  ],
+})
+export class DxiCardViewColumnModule { }
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/header-panel.ts b/packages/devextreme-angular/src/ui/card-view/nested/header-panel.ts
new file mode 100644
index 000000000000..dadf8bc39bcd
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/header-panel.ts
@@ -0,0 +1,96 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-card-view-header-panel',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost]
+})
+export class DxoCardViewHeaderPanelComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get dragging(): Record<string, any> {
+        return this._getOption('dragging');
+    }
+    set dragging(value: Record<string, any>) {
+        this._setOption('dragging', value);
+    }
+
+    @Input()
+    get itemCssClass(): string {
+        return this._getOption('itemCssClass');
+    }
+    set itemCssClass(value: string) {
+        this._setOption('itemCssClass', value);
+    }
+
+    @Input()
+    get itemTemplate(): any {
+        return this._getOption('itemTemplate');
+    }
+    set itemTemplate(value: any) {
+        this._setOption('itemTemplate', value);
+    }
+
+    @Input()
+    get visible(): boolean {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean) {
+        this._setOption('visible', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'headerPanel';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoCardViewHeaderPanelComponent
+  ],
+  exports: [
+    DxoCardViewHeaderPanelComponent
+  ],
+})
+export class DxoCardViewHeaderPanelModule { }
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/index.ts b/packages/devextreme-angular/src/ui/card-view/nested/index.ts
new file mode 100644
index 000000000000..e4d1829db8fc
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/index.ts
@@ -0,0 +1,10 @@
+export * from './card-cover';
+export * from './card-header';
+export * from './column-dxi';
+export * from './header-panel';
+export * from './item-dxi';
+export * from './pager';
+export * from './paging';
+export * from './remote-operations';
+export * from './toolbar';
+
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/card-view/nested/item-dxi.ts
new file mode 100644
index 000000000000..93c136a21c3c
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/item-dxi.ts
@@ -0,0 +1,186 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    NgModule,
+    Host,
+    ElementRef,
+    Renderer2,
+    Inject,
+    AfterViewInit,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+import { DOCUMENT } from '@angular/common';
+
+
+import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar';
+import { ToolbarItemLocation, ToolbarItemComponent } from 'devextreme/common';
+import { PredefinedToolbarItem } from 'devextreme/ui/card_view';
+
+import {
+    NestedOptionHost,
+    extractTemplate,
+    DxTemplateDirective,
+    IDxTemplateHost,
+    DxTemplateHost
+} from 'devextreme-angular/core';
+import { CollectionNestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxi-card-view-item',
+    template: '<ng-content></ng-content>',
+    styles: [':host { display: block; }'],
+    providers: [NestedOptionHost, DxTemplateHost]
+})
+export class DxiCardViewItemComponent extends CollectionNestedOption implements AfterViewInit,
+    IDxTemplateHost {
+    @Input()
+    get cssClass(): string | undefined {
+        return this._getOption('cssClass');
+    }
+    set cssClass(value: string | undefined) {
+        this._setOption('cssClass', value);
+    }
+
+    @Input()
+    get disabled(): boolean {
+        return this._getOption('disabled');
+    }
+    set disabled(value: boolean) {
+        this._setOption('disabled', value);
+    }
+
+    @Input()
+    get html(): string {
+        return this._getOption('html');
+    }
+    set html(value: string) {
+        this._setOption('html', value);
+    }
+
+    @Input()
+    get locateInMenu(): LocateInMenuMode {
+        return this._getOption('locateInMenu');
+    }
+    set locateInMenu(value: LocateInMenuMode) {
+        this._setOption('locateInMenu', value);
+    }
+
+    @Input()
+    get location(): ToolbarItemLocation {
+        return this._getOption('location');
+    }
+    set location(value: ToolbarItemLocation) {
+        this._setOption('location', value);
+    }
+
+    @Input()
+    get menuItemTemplate(): any {
+        return this._getOption('menuItemTemplate');
+    }
+    set menuItemTemplate(value: any) {
+        this._setOption('menuItemTemplate', value);
+    }
+
+    @Input()
+    get name(): PredefinedToolbarItem | string {
+        return this._getOption('name');
+    }
+    set name(value: PredefinedToolbarItem | string) {
+        this._setOption('name', value);
+    }
+
+    @Input()
+    get options(): any {
+        return this._getOption('options');
+    }
+    set options(value: any) {
+        this._setOption('options', value);
+    }
+
+    @Input()
+    get showText(): ShowTextMode {
+        return this._getOption('showText');
+    }
+    set showText(value: ShowTextMode) {
+        this._setOption('showText', value);
+    }
+
+    @Input()
+    get template(): any {
+        return this._getOption('template');
+    }
+    set template(value: any) {
+        this._setOption('template', value);
+    }
+
+    @Input()
+    get text(): string {
+        return this._getOption('text');
+    }
+    set text(value: string) {
+        this._setOption('text', value);
+    }
+
+    @Input()
+    get visible(): boolean {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean) {
+        this._setOption('visible', value);
+    }
+
+    @Input()
+    get widget(): ToolbarItemComponent {
+        return this._getOption('widget');
+    }
+    set widget(value: ToolbarItemComponent) {
+        this._setOption('widget', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'items';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost,
+            private renderer: Renderer2,
+            @Inject(DOCUMENT) private document: any,
+            @Host() templateHost: DxTemplateHost,
+            private element: ElementRef) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+        templateHost.setHost(this);
+    }
+
+    setTemplate(template: DxTemplateDirective) {
+        this.template = template;
+    }
+    ngAfterViewInit() {
+        extractTemplate(this, this.element, this.renderer, this.document);
+    }
+
+
+
+    ngOnDestroy() {
+        this._deleteRemovedOptions(this._fullOptionPath());
+    }
+
+}
+
+@NgModule({
+  declarations: [
+    DxiCardViewItemComponent
+  ],
+  exports: [
+    DxiCardViewItemComponent
+  ],
+})
+export class DxiCardViewItemModule { }
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/ng-package.json b/packages/devextreme-angular/src/ui/card-view/nested/ng-package.json
new file mode 100644
index 000000000000..3360c83b3395
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}
\ No newline at end of file
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/pager.ts b/packages/devextreme-angular/src/ui/card-view/nested/pager.ts
new file mode 100644
index 000000000000..d24455716cf5
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/pager.ts
@@ -0,0 +1,130 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+import { PagerPageSize } from 'devextreme/common/grids';
+import { Mode, DisplayMode } from 'devextreme/common';
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-card-view-pager',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost]
+})
+export class DxoCardViewPagerComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get allowedPageSizes(): Array<number | PagerPageSize> | Mode {
+        return this._getOption('allowedPageSizes');
+    }
+    set allowedPageSizes(value: Array<number | PagerPageSize> | Mode) {
+        this._setOption('allowedPageSizes', value);
+    }
+
+    @Input()
+    get displayMode(): DisplayMode {
+        return this._getOption('displayMode');
+    }
+    set displayMode(value: DisplayMode) {
+        this._setOption('displayMode', value);
+    }
+
+    @Input()
+    get infoText(): string {
+        return this._getOption('infoText');
+    }
+    set infoText(value: string) {
+        this._setOption('infoText', value);
+    }
+
+    @Input()
+    get label(): string {
+        return this._getOption('label');
+    }
+    set label(value: string) {
+        this._setOption('label', value);
+    }
+
+    @Input()
+    get showInfo(): boolean {
+        return this._getOption('showInfo');
+    }
+    set showInfo(value: boolean) {
+        this._setOption('showInfo', value);
+    }
+
+    @Input()
+    get showNavigationButtons(): boolean {
+        return this._getOption('showNavigationButtons');
+    }
+    set showNavigationButtons(value: boolean) {
+        this._setOption('showNavigationButtons', value);
+    }
+
+    @Input()
+    get showPageSizeSelector(): boolean {
+        return this._getOption('showPageSizeSelector');
+    }
+    set showPageSizeSelector(value: boolean) {
+        this._setOption('showPageSizeSelector', value);
+    }
+
+    @Input()
+    get visible(): boolean | Mode {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean | Mode) {
+        this._setOption('visible', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'pager';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoCardViewPagerComponent
+  ],
+  exports: [
+    DxoCardViewPagerComponent
+  ],
+})
+export class DxoCardViewPagerModule { }
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/paging.ts b/packages/devextreme-angular/src/ui/card-view/nested/paging.ts
new file mode 100644
index 000000000000..767181e3c1ed
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/paging.ts
@@ -0,0 +1,109 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input,
+    Output,
+    EventEmitter
+} from '@angular/core';
+
+
+
+
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-card-view-paging',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost]
+})
+export class DxoCardViewPagingComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get enabled(): boolean {
+        return this._getOption('enabled');
+    }
+    set enabled(value: boolean) {
+        this._setOption('enabled', value);
+    }
+
+    @Input()
+    get pageIndex(): number {
+        return this._getOption('pageIndex');
+    }
+    set pageIndex(value: number) {
+        this._setOption('pageIndex', value);
+    }
+
+    @Input()
+    get pageSize(): number {
+        return this._getOption('pageSize');
+    }
+    set pageSize(value: number) {
+        this._setOption('pageSize', value);
+    }
+
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() pageIndexChange: EventEmitter<number>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() pageSizeChange: EventEmitter<number>;
+    protected get _optionPath() {
+        return 'paging';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+
+        this._createEventEmitters([
+            { emit: 'pageIndexChange' },
+            { emit: 'pageSizeChange' }
+        ]);
+
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoCardViewPagingComponent
+  ],
+  exports: [
+    DxoCardViewPagingComponent
+  ],
+})
+export class DxoCardViewPagingModule { }
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/remote-operations.ts b/packages/devextreme-angular/src/ui/card-view/nested/remote-operations.ts
new file mode 100644
index 000000000000..2a091e46a620
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/remote-operations.ts
@@ -0,0 +1,96 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+
+
+@Component({
+    selector: 'dxo-card-view-remote-operations',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost]
+})
+export class DxoCardViewRemoteOperationsComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get filtering(): boolean {
+        return this._getOption('filtering');
+    }
+    set filtering(value: boolean) {
+        this._setOption('filtering', value);
+    }
+
+    @Input()
+    get paging(): boolean {
+        return this._getOption('paging');
+    }
+    set paging(value: boolean) {
+        this._setOption('paging', value);
+    }
+
+    @Input()
+    get sorting(): boolean {
+        return this._getOption('sorting');
+    }
+    set sorting(value: boolean) {
+        this._setOption('sorting', value);
+    }
+
+    @Input()
+    get summary(): boolean {
+        return this._getOption('summary');
+    }
+    set summary(value: boolean) {
+        this._setOption('summary', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'remoteOperations';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoCardViewRemoteOperationsComponent
+  ],
+  exports: [
+    DxoCardViewRemoteOperationsComponent
+  ],
+})
+export class DxoCardViewRemoteOperationsModule { }
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/toolbar.ts b/packages/devextreme-angular/src/ui/card-view/nested/toolbar.ts
new file mode 100644
index 000000000000..26b452c46098
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/nested/toolbar.ts
@@ -0,0 +1,101 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input,
+    ContentChildren,
+    forwardRef,
+    QueryList
+} from '@angular/core';
+
+
+
+
+import { dxCardViewToolbarItem, PredefinedToolbarItem } from 'devextreme/ui/card_view';
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { NestedOption } from 'devextreme-angular/core';
+import { DxiCardViewItemComponent } from './item-dxi';
+
+
+@Component({
+    selector: 'dxo-card-view-toolbar',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost]
+})
+export class DxoCardViewToolbarComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get disabled(): boolean {
+        return this._getOption('disabled');
+    }
+    set disabled(value: boolean) {
+        this._setOption('disabled', value);
+    }
+
+    @Input()
+    get items(): Array<dxCardViewToolbarItem | PredefinedToolbarItem> {
+        return this._getOption('items');
+    }
+    set items(value: Array<dxCardViewToolbarItem | PredefinedToolbarItem>) {
+        this._setOption('items', value);
+    }
+
+    @Input()
+    get visible(): boolean | undefined {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean | undefined) {
+        this._setOption('visible', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'toolbar';
+    }
+
+
+    @ContentChildren(forwardRef(() => DxiCardViewItemComponent))
+    get itemsChildren(): QueryList<DxiCardViewItemComponent> {
+        return this._getOption('items');
+    }
+    set itemsChildren(value) {
+        this.setChildren('items', value);
+    }
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoCardViewToolbarComponent
+  ],
+  exports: [
+    DxoCardViewToolbarComponent
+  ],
+})
+export class DxoCardViewToolbarModule { }
diff --git a/packages/devextreme-angular/src/ui/card-view/ng-package.json b/packages/devextreme-angular/src/ui/card-view/ng-package.json
new file mode 100644
index 000000000000..3360c83b3395
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/card-view/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}
\ No newline at end of file
diff --git a/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts b/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts
index 40eeb038ca34..a402bf625ab3 100644
--- a/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts
@@ -8,6 +8,7 @@ import {
 import { AsyncRule, ButtonStyle, ButtonType, CompareRule, CustomRule, EmailRule, HorizontalAlignment, NumericRule, PatternRule, RangeRule, RequiredRule, StringLengthRule, ToolbarItemComponent, ToolbarItemLocation, VerticalAlignment } from 'devextreme/common';
 import { Properties as dxBoxOptions } from 'devextreme/ui/box';
 import { Properties as dxButtonOptions } from 'devextreme/ui/button';
+import { PredefinedToolbarItem } from 'devextreme/ui/card_view';
 import { User } from 'devextreme/ui/chat';
 import { dxContextMenuItem } from 'devextreme/ui/context_menu';
 import { DataGridPredefinedToolbarItem } from 'devextreme/ui/data_grid';
@@ -147,6 +148,62 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('hint', value);
     }
 
+    get cssClass(): string | undefined {
+        return this._getOption('cssClass');
+    }
+    set cssClass(value: string | undefined) {
+        this._setOption('cssClass', value);
+    }
+
+    get locateInMenu(): LocateInMenuMode {
+        return this._getOption('locateInMenu');
+    }
+    set locateInMenu(value: LocateInMenuMode) {
+        this._setOption('locateInMenu', value);
+    }
+
+    get location(): ToolbarItemLocation | Array<any | { col?: number, colspan?: number | undefined, row?: number, rowspan?: number | undefined, screen?: string | undefined }> {
+        return this._getOption('location');
+    }
+    set location(value: ToolbarItemLocation | Array<any | { col?: number, colspan?: number | undefined, row?: number, rowspan?: number | undefined, screen?: string | undefined }>) {
+        this._setOption('location', value);
+    }
+
+    get menuItemTemplate(): any {
+        return this._getOption('menuItemTemplate');
+    }
+    set menuItemTemplate(value: any) {
+        this._setOption('menuItemTemplate', value);
+    }
+
+    get name(): PredefinedToolbarItem | string | undefined | DataGridPredefinedToolbarItem | Command | FileManagerPredefinedContextMenuItem | FileManagerPredefinedToolbarItem | GanttPredefinedContextMenuItem | GanttPredefinedToolbarItem | HtmlEditorPredefinedContextMenuItem | HtmlEditorPredefinedToolbarItem | TreeListPredefinedToolbarItem {
+        return this._getOption('name');
+    }
+    set name(value: PredefinedToolbarItem | string | undefined | DataGridPredefinedToolbarItem | Command | FileManagerPredefinedContextMenuItem | FileManagerPredefinedToolbarItem | GanttPredefinedContextMenuItem | GanttPredefinedToolbarItem | HtmlEditorPredefinedContextMenuItem | HtmlEditorPredefinedToolbarItem | TreeListPredefinedToolbarItem) {
+        this._setOption('name', value);
+    }
+
+    get options(): any {
+        return this._getOption('options');
+    }
+    set options(value: any) {
+        this._setOption('options', value);
+    }
+
+    get showText(): ShowTextMode {
+        return this._getOption('showText');
+    }
+    set showText(value: ShowTextMode) {
+        this._setOption('showText', value);
+    }
+
+    get widget(): ToolbarItemComponent {
+        return this._getOption('widget');
+    }
+    set widget(value: ToolbarItemComponent) {
+        this._setOption('widget', value);
+    }
+
     get author(): User {
         return this._getOption('author');
     }
@@ -210,13 +267,6 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('colSpan', value);
     }
 
-    get cssClass(): string | undefined {
-        return this._getOption('cssClass');
-    }
-    set cssClass(value: string | undefined) {
-        this._setOption('cssClass', value);
-    }
-
     get dataField(): string | undefined {
         return this._getOption('dataField');
     }
@@ -266,13 +316,6 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('label', value);
     }
 
-    get name(): string | undefined | DataGridPredefinedToolbarItem | Command | FileManagerPredefinedContextMenuItem | FileManagerPredefinedToolbarItem | GanttPredefinedContextMenuItem | GanttPredefinedToolbarItem | HtmlEditorPredefinedContextMenuItem | HtmlEditorPredefinedToolbarItem | TreeListPredefinedToolbarItem {
-        return this._getOption('name');
-    }
-    set name(value: string | undefined | DataGridPredefinedToolbarItem | Command | FileManagerPredefinedContextMenuItem | FileManagerPredefinedToolbarItem | GanttPredefinedContextMenuItem | GanttPredefinedToolbarItem | HtmlEditorPredefinedContextMenuItem | HtmlEditorPredefinedToolbarItem | TreeListPredefinedToolbarItem) {
-        this._setOption('name', value);
-    }
-
     get validationRules(): Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule> {
         return this._getOption('validationRules');
     }
@@ -371,48 +414,6 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('verticalAlignment', value);
     }
 
-    get locateInMenu(): LocateInMenuMode {
-        return this._getOption('locateInMenu');
-    }
-    set locateInMenu(value: LocateInMenuMode) {
-        this._setOption('locateInMenu', value);
-    }
-
-    get location(): ToolbarItemLocation | Array<any | { col?: number, colspan?: number | undefined, row?: number, rowspan?: number | undefined, screen?: string | undefined }> {
-        return this._getOption('location');
-    }
-    set location(value: ToolbarItemLocation | Array<any | { col?: number, colspan?: number | undefined, row?: number, rowspan?: number | undefined, screen?: string | undefined }>) {
-        this._setOption('location', value);
-    }
-
-    get menuItemTemplate(): any {
-        return this._getOption('menuItemTemplate');
-    }
-    set menuItemTemplate(value: any) {
-        this._setOption('menuItemTemplate', value);
-    }
-
-    get options(): any {
-        return this._getOption('options');
-    }
-    set options(value: any) {
-        this._setOption('options', value);
-    }
-
-    get showText(): ShowTextMode {
-        return this._getOption('showText');
-    }
-    set showText(value: ShowTextMode) {
-        this._setOption('showText', value);
-    }
-
-    get widget(): ToolbarItemComponent {
-        return this._getOption('widget');
-    }
-    set widget(value: ToolbarItemComponent) {
-        this._setOption('widget', value);
-    }
-
     get height(): number {
         return this._getOption('height');
     }
diff --git a/packages/devextreme-angular/src/ui/nested/base/card-cover.ts b/packages/devextreme-angular/src/ui/nested/base/card-cover.ts
new file mode 100644
index 000000000000..0ac47fbb0549
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/nested/base/card-cover.ts
@@ -0,0 +1,26 @@
+/* tslint:disable:max-line-length */
+
+import { NestedOption } from 'devextreme-angular/core';
+import {
+    Component,
+} from '@angular/core';
+
+
+@Component({
+    template: ''
+})
+export abstract class DxoCardCover extends NestedOption {
+    get altExpr(): Function | string {
+        return this._getOption('altExpr');
+    }
+    set altExpr(value: Function | string) {
+        this._setOption('altExpr', value);
+    }
+
+    get imageExpr(): Function | string {
+        return this._getOption('imageExpr');
+    }
+    set imageExpr(value: Function | string) {
+        this._setOption('imageExpr', value);
+    }
+}
diff --git a/packages/devextreme-angular/src/ui/nested/base/card-header.ts b/packages/devextreme-angular/src/ui/nested/base/card-header.ts
new file mode 100644
index 000000000000..77e747e6aa72
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/nested/base/card-header.ts
@@ -0,0 +1,26 @@
+/* tslint:disable:max-line-length */
+
+import { NestedOption } from 'devextreme-angular/core';
+import {
+    Component,
+} from '@angular/core';
+
+
+@Component({
+    template: ''
+})
+export abstract class DxoCardHeader extends NestedOption {
+    get captionExpr(): Function | string {
+        return this._getOption('captionExpr');
+    }
+    set captionExpr(value: Function | string) {
+        this._setOption('captionExpr', value);
+    }
+
+    get visible(): boolean {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean) {
+        this._setOption('visible', value);
+    }
+}
diff --git a/packages/devextreme-angular/src/ui/nested/base/data-grid-toolbar.ts b/packages/devextreme-angular/src/ui/nested/base/card-view-toolbar.ts
similarity index 53%
rename from packages/devextreme-angular/src/ui/nested/base/data-grid-toolbar.ts
rename to packages/devextreme-angular/src/ui/nested/base/card-view-toolbar.ts
index 9731be2b793d..4356ac1b0789 100644
--- a/packages/devextreme-angular/src/ui/nested/base/data-grid-toolbar.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/card-view-toolbar.ts
@@ -5,17 +5,20 @@ import {
     Component,
 } from '@angular/core';
 
+import { ToolbarItemComponent, ToolbarItemLocation } from 'devextreme/common';
 import { UserDefinedElement } from 'devextreme/core/element';
+import { PredefinedToolbarItem } from 'devextreme/ui/card_view';
 import { DataGridPredefinedToolbarItem, dxDataGridToolbarItem } from 'devextreme/ui/data_grid';
 import { dxFileManagerToolbarItem, FileManagerPredefinedToolbarItem } from 'devextreme/ui/file_manager';
 import { dxGanttToolbarItem, GanttPredefinedToolbarItem } from 'devextreme/ui/gantt';
 import { dxHtmlEditorToolbarItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
+import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar';
 import { dxTreeListToolbarItem, TreeListPredefinedToolbarItem } from 'devextreme/ui/tree_list';
 
 @Component({
     template: ''
 })
-export abstract class DxoDataGridToolbar extends NestedOption {
+export abstract class DxoCardViewToolbar extends NestedOption {
     get disabled(): boolean {
         return this._getOption('disabled');
     }
@@ -23,10 +26,10 @@ export abstract class DxoDataGridToolbar extends NestedOption {
         this._setOption('disabled', value);
     }
 
-    get items(): Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | dxTreeListToolbarItem | TreeListPredefinedToolbarItem> {
+    get items(): Array<PredefinedToolbarItem | any | { cssClass?: string | undefined, disabled?: boolean, html?: string, locateInMenu?: LocateInMenuMode, location?: ToolbarItemLocation, menuItemTemplate?: any, name?: PredefinedToolbarItem | string, options?: any, showText?: ShowTextMode, template?: any, text?: string, visible?: boolean, widget?: ToolbarItemComponent } | dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | dxTreeListToolbarItem | TreeListPredefinedToolbarItem> {
         return this._getOption('items');
     }
-    set items(value: Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | dxTreeListToolbarItem | TreeListPredefinedToolbarItem>) {
+    set items(value: Array<PredefinedToolbarItem | any | { cssClass?: string | undefined, disabled?: boolean, html?: string, locateInMenu?: LocateInMenuMode, location?: ToolbarItemLocation, menuItemTemplate?: any, name?: PredefinedToolbarItem | string, options?: any, showText?: ShowTextMode, template?: any, text?: string, visible?: boolean, widget?: ToolbarItemComponent } | dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | dxTreeListToolbarItem | TreeListPredefinedToolbarItem>) {
         this._setOption('items', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/base/data-grid-column-dxi.ts b/packages/devextreme-angular/src/ui/nested/base/column-properties-dxi.ts
similarity index 93%
rename from packages/devextreme-angular/src/ui/nested/base/data-grid-column-dxi.ts
rename to packages/devextreme-angular/src/ui/nested/base/column-properties-dxi.ts
index ef55b211cdb5..ab431b139cc5 100644
--- a/packages/devextreme-angular/src/ui/nested/base/data-grid-column-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/column-properties-dxi.ts
@@ -17,7 +17,42 @@ import { dxTreeListColumn, dxTreeListColumnButton, TreeListCommandColumnType, Tr
 @Component({
     template: ''
 })
-export abstract class DxiDataGridColumn extends CollectionNestedOption {
+export abstract class DxiColumnProperties extends CollectionNestedOption {
+    get fieldCaptionTemplate(): any {
+        return this._getOption('fieldCaptionTemplate');
+    }
+    set fieldCaptionTemplate(value: any) {
+        this._setOption('fieldCaptionTemplate', value);
+    }
+
+    get fieldTemplate(): any {
+        return this._getOption('fieldTemplate');
+    }
+    set fieldTemplate(value: any) {
+        this._setOption('fieldTemplate', value);
+    }
+
+    get fieldValueTemplate(): any {
+        return this._getOption('fieldValueTemplate');
+    }
+    set fieldValueTemplate(value: any) {
+        this._setOption('fieldValueTemplate', value);
+    }
+
+    get headerItemCssClass(): string {
+        return this._getOption('headerItemCssClass');
+    }
+    set headerItemCssClass(value: string) {
+        this._setOption('headerItemCssClass', value);
+    }
+
+    get headerItemTemplate(): any {
+        return this._getOption('headerItemTemplate');
+    }
+    set headerItemTemplate(value: any) {
+        this._setOption('headerItemTemplate', value);
+    }
+
     get alignment(): HorizontalAlignment | string | undefined {
         return this._getOption('alignment');
     }
diff --git a/packages/devextreme-angular/src/ui/nested/base/header-panel.ts b/packages/devextreme-angular/src/ui/nested/base/header-panel.ts
new file mode 100644
index 000000000000..810d518eaa34
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/nested/base/header-panel.ts
@@ -0,0 +1,40 @@
+/* tslint:disable:max-line-length */
+
+import { NestedOption } from 'devextreme-angular/core';
+import {
+    Component,
+} from '@angular/core';
+
+
+@Component({
+    template: ''
+})
+export abstract class DxoHeaderPanel extends NestedOption {
+    get dragging(): any {
+        return this._getOption('dragging');
+    }
+    set dragging(value: any) {
+        this._setOption('dragging', value);
+    }
+
+    get itemCssClass(): string {
+        return this._getOption('itemCssClass');
+    }
+    set itemCssClass(value: string) {
+        this._setOption('itemCssClass', value);
+    }
+
+    get itemTemplate(): any {
+        return this._getOption('itemTemplate');
+    }
+    set itemTemplate(value: any) {
+        this._setOption('itemTemplate', value);
+    }
+
+    get visible(): boolean {
+        return this._getOption('visible');
+    }
+    set visible(value: boolean) {
+        this._setOption('visible', value);
+    }
+}
diff --git a/packages/devextreme-angular/src/ui/nested/base/index.ts b/packages/devextreme-angular/src/ui/nested/base/index.ts
index 0f0a3b1e3d89..dc4e7fe33cb3 100644
--- a/packages/devextreme-angular/src/ui/nested/base/index.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/index.ts
@@ -5,6 +5,9 @@ export * from './box-options';
 export * from './button-group-item-dxi';
 export * from './button-options';
 export * from './calendar-options';
+export * from './card-cover';
+export * from './card-header';
+export * from './card-view-toolbar';
 export * from './chart-annotation-config-dxi';
 export * from './chart-common-annotation-config';
 export * from './chart-common-series-settings';
@@ -12,10 +15,9 @@ export * from './chart-series-dxi';
 export * from './charts-color';
 export * from './column-chooser-search-config';
 export * from './column-chooser-selection-config';
+export * from './column-properties-dxi';
 export * from './converter';
 export * from './data-change-dxi';
-export * from './data-grid-column-dxi';
-export * from './data-grid-toolbar';
 export * from './diagram-custom-command-dxi';
 export * from './file-manager-context-menu';
 export * from './file-manager-toolbar-item-dxi';
@@ -33,6 +35,7 @@ export * from './gantt-header-filter';
 export * from './gantt-sorting';
 export * from './gantt-strip-line-dxi';
 export * from './gauge-indicator';
+export * from './header-panel';
 export * from './html-editor-image-upload-tab-item-dxi';
 export * from './html-editor-image-upload';
 export * from './html-editor-media-resizing';
@@ -41,8 +44,10 @@ export * from './html-editor-table-context-menu';
 export * from './html-editor-table-resizing';
 export * from './html-editor-variables';
 export * from './pager';
+export * from './paging';
 export * from './popup-options';
 export * from './position-config';
+export * from './remote-operations';
 export * from './scheduler-scrolling';
 export * from './sortable-options';
 export * from './splitter-options';
diff --git a/packages/devextreme-angular/src/ui/nested/base/paging.ts b/packages/devextreme-angular/src/ui/nested/base/paging.ts
new file mode 100644
index 000000000000..73498c05499f
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/nested/base/paging.ts
@@ -0,0 +1,33 @@
+/* tslint:disable:max-line-length */
+
+import { NestedOption } from 'devextreme-angular/core';
+import {
+    Component,
+} from '@angular/core';
+
+
+@Component({
+    template: ''
+})
+export abstract class DxoPaging extends NestedOption {
+    get enabled(): boolean {
+        return this._getOption('enabled');
+    }
+    set enabled(value: boolean) {
+        this._setOption('enabled', value);
+    }
+
+    get pageIndex(): number {
+        return this._getOption('pageIndex');
+    }
+    set pageIndex(value: number) {
+        this._setOption('pageIndex', value);
+    }
+
+    get pageSize(): number {
+        return this._getOption('pageSize');
+    }
+    set pageSize(value: number) {
+        this._setOption('pageSize', value);
+    }
+}
diff --git a/packages/devextreme-angular/src/ui/nested/base/remote-operations.ts b/packages/devextreme-angular/src/ui/nested/base/remote-operations.ts
new file mode 100644
index 000000000000..e9adbce2da1f
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/nested/base/remote-operations.ts
@@ -0,0 +1,54 @@
+/* tslint:disable:max-line-length */
+
+import { NestedOption } from 'devextreme-angular/core';
+import {
+    Component,
+} from '@angular/core';
+
+
+@Component({
+    template: ''
+})
+export abstract class DxoRemoteOperations extends NestedOption {
+    get filtering(): boolean {
+        return this._getOption('filtering');
+    }
+    set filtering(value: boolean) {
+        this._setOption('filtering', value);
+    }
+
+    get paging(): boolean {
+        return this._getOption('paging');
+    }
+    set paging(value: boolean) {
+        this._setOption('paging', value);
+    }
+
+    get sorting(): boolean {
+        return this._getOption('sorting');
+    }
+    set sorting(value: boolean) {
+        this._setOption('sorting', value);
+    }
+
+    get summary(): boolean {
+        return this._getOption('summary');
+    }
+    set summary(value: boolean) {
+        this._setOption('summary', value);
+    }
+
+    get grouping(): boolean {
+        return this._getOption('grouping');
+    }
+    set grouping(value: boolean) {
+        this._setOption('grouping', value);
+    }
+
+    get groupPaging(): boolean {
+        return this._getOption('groupPaging');
+    }
+    set groupPaging(value: boolean) {
+        this._setOption('groupPaging', value);
+    }
+}
diff --git a/packages/devextreme-angular/src/ui/nested/card-cover.ts b/packages/devextreme-angular/src/ui/nested/card-cover.ts
new file mode 100644
index 000000000000..c46e49477abf
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/nested/card-cover.ts
@@ -0,0 +1,68 @@
+/* tslint:disable:max-line-length */
+
+/* tslint:disable:use-input-property-decorator */
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf
+} from '@angular/core';
+
+
+
+
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { DxoCardCover } from './base/card-cover';
+
+
+@Component({
+    selector: 'dxo-card-cover',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost],
+    inputs: [
+        'altExpr',
+        'imageExpr'
+    ]
+})
+export class DxoCardCoverComponent extends DxoCardCover implements OnDestroy, OnInit  {
+
+    protected get _optionPath() {
+        return 'cardCover';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoCardCoverComponent
+  ],
+  exports: [
+    DxoCardCoverComponent
+  ],
+})
+export class DxoCardCoverModule { }
diff --git a/packages/devextreme-angular/src/ui/nested/card-header.ts b/packages/devextreme-angular/src/ui/nested/card-header.ts
new file mode 100644
index 000000000000..825e09a116fe
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/nested/card-header.ts
@@ -0,0 +1,68 @@
+/* tslint:disable:max-line-length */
+
+/* tslint:disable:use-input-property-decorator */
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf
+} from '@angular/core';
+
+
+
+
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { DxoCardHeader } from './base/card-header';
+
+
+@Component({
+    selector: 'dxo-card-header',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost],
+    inputs: [
+        'captionExpr',
+        'visible'
+    ]
+})
+export class DxoCardHeaderComponent extends DxoCardHeader implements OnDestroy, OnInit  {
+
+    protected get _optionPath() {
+        return 'cardHeader';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoCardHeaderComponent
+  ],
+  exports: [
+    DxoCardHeaderComponent
+  ],
+})
+export class DxoCardHeaderModule { }
diff --git a/packages/devextreme-angular/src/ui/nested/column-dxi.ts b/packages/devextreme-angular/src/ui/nested/column-dxi.ts
index ad2ec1c22001..e3712facf346 100644
--- a/packages/devextreme-angular/src/ui/nested/column-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/column-dxi.ts
@@ -23,7 +23,7 @@ import { SelectedFilterOperation } from 'devextreme/common/grids';
 import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
-import { DxiDataGridColumn } from './base/data-grid-column-dxi';
+import { DxiColumnProperties } from './base/column-properties-dxi';
 import { DxiButtonComponent } from './button-dxi';
 import { DxiValidationRuleComponent } from './validation-rule-dxi';
 
@@ -34,6 +34,11 @@ import { DxiValidationRuleComponent } from './validation-rule-dxi';
     styles: [''],
     providers: [NestedOptionHost],
     inputs: [
+        'fieldCaptionTemplate',
+        'fieldTemplate',
+        'fieldValueTemplate',
+        'headerItemCssClass',
+        'headerItemTemplate',
         'alignment',
         'allowEditing',
         'allowExporting',
@@ -99,7 +104,7 @@ import { DxiValidationRuleComponent } from './validation-rule-dxi';
         'width'
     ]
 })
-export class DxiColumnComponent extends DxiDataGridColumn {
+export class DxiColumnComponent extends DxiColumnProperties {
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/nested/header-panel.ts b/packages/devextreme-angular/src/ui/nested/header-panel.ts
new file mode 100644
index 000000000000..83578ab82417
--- /dev/null
+++ b/packages/devextreme-angular/src/ui/nested/header-panel.ts
@@ -0,0 +1,70 @@
+/* tslint:disable:max-line-length */
+
+/* tslint:disable:use-input-property-decorator */
+
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    NgModule,
+    Host,
+    SkipSelf
+} from '@angular/core';
+
+
+
+
+
+import {
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { DxoHeaderPanel } from './base/header-panel';
+
+
+@Component({
+    selector: 'dxo-header-panel',
+    template: '',
+    styles: [''],
+    providers: [NestedOptionHost],
+    inputs: [
+        'dragging',
+        'itemCssClass',
+        'itemTemplate',
+        'visible'
+    ]
+})
+export class DxoHeaderPanelComponent extends DxoHeaderPanel implements OnDestroy, OnInit  {
+
+    protected get _optionPath() {
+        return 'headerPanel';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+    ngOnInit() {
+        this._addRecreatedComponent();
+    }
+
+    ngOnDestroy() {
+        this._addRemovedOption(this._getOptionPath());
+    }
+
+
+}
+
+@NgModule({
+  declarations: [
+    DxoHeaderPanelComponent
+  ],
+  exports: [
+    DxoHeaderPanelComponent
+  ],
+})
+export class DxoHeaderPanelModule { }
diff --git a/packages/devextreme-angular/src/ui/nested/index.ts b/packages/devextreme-angular/src/ui/nested/index.ts
index 7c291f7dc04e..b3a455a34ed1 100644
--- a/packages/devextreme-angular/src/ui/nested/index.ts
+++ b/packages/devextreme-angular/src/ui/nested/index.ts
@@ -27,6 +27,8 @@ export * from './button-dxi';
 export * from './button-options';
 export * from './calendar-options';
 export * from './candlestick';
+export * from './card-cover';
+export * from './card-header';
 export * from './center-dxi';
 export * from './change-dxi';
 export * from './chart';
@@ -98,6 +100,7 @@ export * from './group';
 export * from './grouping';
 export * from './hatching';
 export * from './header-filter';
+export * from './header-panel';
 export * from './height';
 export * from './hide-event';
 export * from './hide';
diff --git a/packages/devextreme-angular/src/ui/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/nested/item-dxi.ts
index 9fb38347ef50..7c219bdae536 100644
--- a/packages/devextreme-angular/src/ui/nested/item-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/item-dxi.ts
@@ -56,6 +56,14 @@ import { DxiLocationComponent } from './location-dxi';
         'shrink',
         'elementAttr',
         'hint',
+        'cssClass',
+        'locateInMenu',
+        'location',
+        'menuItemTemplate',
+        'name',
+        'options',
+        'showText',
+        'widget',
         'author',
         'id',
         'timestamp',
@@ -65,7 +73,6 @@ import { DxiLocationComponent } from './location-dxi';
         'selectable',
         'selected',
         'colSpan',
-        'cssClass',
         'dataField',
         'editorOptions',
         'editorType',
@@ -73,7 +80,6 @@ import { DxiLocationComponent } from './location-dxi';
         'isRequired',
         'itemType',
         'label',
-        'name',
         'validationRules',
         'visibleIndex',
         'alignItemLabels',
@@ -88,12 +94,6 @@ import { DxiLocationComponent } from './location-dxi';
         'buttonOptions',
         'horizontalAlignment',
         'verticalAlignment',
-        'locateInMenu',
-        'location',
-        'menuItemTemplate',
-        'options',
-        'showText',
-        'widget',
         'height',
         'width',
         'imageAlt',
diff --git a/packages/devextreme-angular/src/ui/nested/paging.ts b/packages/devextreme-angular/src/ui/nested/paging.ts
index 60c34267d7de..2bd4d2055c47 100644
--- a/packages/devextreme-angular/src/ui/nested/paging.ts
+++ b/packages/devextreme-angular/src/ui/nested/paging.ts
@@ -1,5 +1,6 @@
 /* tslint:disable:max-line-length */
 
+/* tslint:disable:use-input-property-decorator */
 
 import {
     Component,
@@ -8,7 +9,6 @@ import {
     NgModule,
     Host,
     SkipSelf,
-    Input,
     Output,
     EventEmitter
 } from '@angular/core';
@@ -20,40 +20,21 @@ import {
 import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
-import { NestedOption } from 'devextreme-angular/core';
+import { DxoPaging } from './base/paging';
 
 
 @Component({
     selector: 'dxo-paging',
     template: '',
     styles: [''],
-    providers: [NestedOptionHost]
+    providers: [NestedOptionHost],
+    inputs: [
+        'enabled',
+        'pageIndex',
+        'pageSize'
+    ]
 })
-export class DxoPagingComponent extends NestedOption implements OnDestroy, OnInit  {
-    @Input()
-    get enabled(): boolean {
-        return this._getOption('enabled');
-    }
-    set enabled(value: boolean) {
-        this._setOption('enabled', value);
-    }
-
-    @Input()
-    get pageIndex(): number {
-        return this._getOption('pageIndex');
-    }
-    set pageIndex(value: number) {
-        this._setOption('pageIndex', value);
-    }
-
-    @Input()
-    get pageSize(): number {
-        return this._getOption('pageSize');
-    }
-    set pageSize(value: number) {
-        this._setOption('pageSize', value);
-    }
-
+export class DxoPagingComponent extends DxoPaging implements OnDestroy, OnInit  {
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/nested/remote-operations.ts b/packages/devextreme-angular/src/ui/nested/remote-operations.ts
index b123cd472c8e..c3cd0511d4c9 100644
--- a/packages/devextreme-angular/src/ui/nested/remote-operations.ts
+++ b/packages/devextreme-angular/src/ui/nested/remote-operations.ts
@@ -1,5 +1,6 @@
 /* tslint:disable:max-line-length */
 
+/* tslint:disable:use-input-property-decorator */
 
 import {
     Component,
@@ -7,8 +8,7 @@ import {
     OnDestroy,
     NgModule,
     Host,
-    SkipSelf,
-    Input
+    SkipSelf
 } from '@angular/core';
 
 
@@ -18,64 +18,24 @@ import {
 import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
-import { NestedOption } from 'devextreme-angular/core';
+import { DxoRemoteOperations } from './base/remote-operations';
 
 
 @Component({
     selector: 'dxo-remote-operations',
     template: '',
     styles: [''],
-    providers: [NestedOptionHost]
+    providers: [NestedOptionHost],
+    inputs: [
+        'filtering',
+        'paging',
+        'sorting',
+        'summary',
+        'grouping',
+        'groupPaging'
+    ]
 })
-export class DxoRemoteOperationsComponent extends NestedOption implements OnDestroy, OnInit  {
-    @Input()
-    get filtering(): boolean {
-        return this._getOption('filtering');
-    }
-    set filtering(value: boolean) {
-        this._setOption('filtering', value);
-    }
-
-    @Input()
-    get grouping(): boolean {
-        return this._getOption('grouping');
-    }
-    set grouping(value: boolean) {
-        this._setOption('grouping', value);
-    }
-
-    @Input()
-    get groupPaging(): boolean {
-        return this._getOption('groupPaging');
-    }
-    set groupPaging(value: boolean) {
-        this._setOption('groupPaging', value);
-    }
-
-    @Input()
-    get paging(): boolean {
-        return this._getOption('paging');
-    }
-    set paging(value: boolean) {
-        this._setOption('paging', value);
-    }
-
-    @Input()
-    get sorting(): boolean {
-        return this._getOption('sorting');
-    }
-    set sorting(value: boolean) {
-        this._setOption('sorting', value);
-    }
-
-    @Input()
-    get summary(): boolean {
-        return this._getOption('summary');
-    }
-    set summary(value: boolean) {
-        this._setOption('summary', value);
-    }
-
+export class DxoRemoteOperationsComponent extends DxoRemoteOperations implements OnDestroy, OnInit  {
 
     protected get _optionPath() {
         return 'remoteOperations';
diff --git a/packages/devextreme-angular/src/ui/nested/toolbar.ts b/packages/devextreme-angular/src/ui/nested/toolbar.ts
index 687c36cef2e3..9a7babb07049 100644
--- a/packages/devextreme-angular/src/ui/nested/toolbar.ts
+++ b/packages/devextreme-angular/src/ui/nested/toolbar.ts
@@ -21,7 +21,7 @@ import {
 import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
-import { DxoDataGridToolbar } from './base/data-grid-toolbar';
+import { DxoCardViewToolbar } from './base/card-view-toolbar';
 import { DxiItemComponent } from './item-dxi';
 import { DxiFileSelectionItemComponent } from './file-selection-item-dxi';
 
@@ -40,7 +40,7 @@ import { DxiFileSelectionItemComponent } from './file-selection-item-dxi';
         'multiline'
     ]
 })
-export class DxoToolbarComponent extends DxoDataGridToolbar implements OnDestroy, OnInit  {
+export class DxoToolbarComponent extends DxoCardViewToolbar implements OnDestroy, OnInit  {
 
     protected get _optionPath() {
         return 'toolbar';
diff --git a/packages/devextreme-angular/tests/src/server/component-names.ts b/packages/devextreme-angular/tests/src/server/component-names.ts
index d5914606f2ba..baed4ebe863c 100644
--- a/packages/devextreme-angular/tests/src/server/component-names.ts
+++ b/packages/devextreme-angular/tests/src/server/component-names.ts
@@ -7,6 +7,7 @@ export const componentNames = [
     'bullet',
     'button',
     'calendar',
+    'card-view',
     'chart',
     'chat',
     'check-box',
diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts
new file mode 100644
index 000000000000..1f8bee8d4c09
--- /dev/null
+++ b/packages/devextreme-react/src/card-view.ts
@@ -0,0 +1,358 @@
+"use client"
+export { ExplicitTypes } from "devextreme/ui/card_view";
+import * as React from "react";
+import { memo, forwardRef, useImperativeHandle, useRef, useMemo, ForwardedRef, Ref, ReactElement } from "react";
+import dxCardView, {
+    Properties
+} from "devextreme/ui/card_view";
+
+import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
+import NestedOption from "./core/nested-option";
+
+import type { DataRow, Column as CardViewColumn, PredefinedToolbarItem, dxCardViewToolbarItem } from "devextreme/ui/card_view";
+import type { template, ToolbarItemLocation, ToolbarItemComponent, Mode, DisplayMode } from "devextreme/common";
+import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar";
+import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base";
+import type { PagerPageSize } from "devextreme/common/grids";
+
+type ICardViewOptions<TRowData = any, TKey = any> = React.PropsWithChildren<Properties<TRowData, TKey> & IHtmlOptions & {
+  dataSource?: Properties<TRowData, TKey>["dataSource"];
+  cardRender?: (...params: any) => React.ReactNode;
+  cardComponent?: React.ComponentType<any>;
+}>
+
+interface CardViewRef<TRowData = any, TKey = any> {
+  instance: () => dxCardView<TRowData, TKey>;
+}
+
+const CardView = memo(
+  forwardRef(
+    <TRowData = any, TKey = any>(props: React.PropsWithChildren<ICardViewOptions<TRowData, TKey>>, ref: ForwardedRef<CardViewRef<TRowData, TKey>>) => {
+      const baseRef = useRef<ComponentRef>(null);
+
+      useImperativeHandle(ref, () => (
+        {
+          instance() {
+            return baseRef.current?.getInstance();
+          }
+        }
+      ), [baseRef.current]);
+
+      const independentEvents = useMemo(() => (["onContentReady","onDataErrorOccurred","onDisposing","onInitialized"]), []);
+
+      const expectedChildren = useMemo(() => ({
+        cardCover: { optionName: "cardCover", isCollectionItem: false },
+        cardHeader: { optionName: "cardHeader", isCollectionItem: false },
+        column: { optionName: "columns", isCollectionItem: true },
+        headerPanel: { optionName: "headerPanel", isCollectionItem: false },
+        pager: { optionName: "pager", isCollectionItem: false },
+        paging: { optionName: "paging", isCollectionItem: false },
+        remoteOperations: { optionName: "remoteOperations", isCollectionItem: false },
+        toolbar: { optionName: "toolbar", isCollectionItem: false }
+      }), []);
+
+      const templateProps = useMemo(() => ([
+        {
+          tmplOption: "cardTemplate",
+          render: "cardRender",
+          component: "cardComponent"
+        },
+      ]), []);
+
+      return (
+        React.createElement(BaseComponent<React.PropsWithChildren<ICardViewOptions<TRowData, TKey>>>, {
+          WidgetClass: dxCardView,
+          ref: baseRef,
+          independentEvents,
+          expectedChildren,
+          templateProps,
+          ...props,
+        })
+      );
+    },
+  ),
+) as <TRowData = any, TKey = any>(props: React.PropsWithChildren<ICardViewOptions<TRowData, TKey>> & { ref?: Ref<CardViewRef<TRowData, TKey>> }) => ReactElement | null;
+
+
+// owners:
+// CardView
+type ICardCoverProps = React.PropsWithChildren<{
+  altExpr?: ((data: any) => string) | string;
+  imageExpr?: ((data: any) => string) | string;
+}>
+const _componentCardCover = (props: ICardCoverProps) => {
+  return React.createElement(NestedOption<ICardCoverProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "cardCover",
+    },
+  });
+};
+
+const CardCover = Object.assign<typeof _componentCardCover, NestedComponentMeta>(_componentCardCover, {
+  componentType: "option",
+});
+
+// owners:
+// CardView
+type ICardHeaderProps = React.PropsWithChildren<{
+  captionExpr?: ((data: any) => string) | string;
+  visible?: boolean;
+}>
+const _componentCardHeader = (props: ICardHeaderProps) => {
+  return React.createElement(NestedOption<ICardHeaderProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "cardHeader",
+    },
+  });
+};
+
+const CardHeader = Object.assign<typeof _componentCardHeader, NestedComponentMeta>(_componentCardHeader, {
+  componentType: "option",
+});
+
+// owners:
+// CardView
+type IColumnProps = React.PropsWithChildren<{
+  fieldCaptionTemplate?: ((dataRow: DataRow) => string | any) | template;
+  fieldTemplate?: ((dataRow: DataRow) => string | any) | template;
+  fieldValueTemplate?: ((dataRow: DataRow) => string | any) | template;
+  headerItemCssClass?: string;
+  headerItemTemplate?: ((column: CardViewColumn) => string | any) | template;
+  fieldCaptionRender?: (...params: any) => React.ReactNode;
+  fieldCaptionComponent?: React.ComponentType<any>;
+  fieldRender?: (...params: any) => React.ReactNode;
+  fieldComponent?: React.ComponentType<any>;
+  fieldValueRender?: (...params: any) => React.ReactNode;
+  fieldValueComponent?: React.ComponentType<any>;
+  headerItemRender?: (...params: any) => React.ReactNode;
+  headerItemComponent?: React.ComponentType<any>;
+}>
+const _componentColumn = (props: IColumnProps) => {
+  return React.createElement(NestedOption<IColumnProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "columns",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "fieldCaptionTemplate",
+        render: "fieldCaptionRender",
+        component: "fieldCaptionComponent"
+      }, {
+        tmplOption: "fieldTemplate",
+        render: "fieldRender",
+        component: "fieldComponent"
+      }, {
+        tmplOption: "fieldValueTemplate",
+        render: "fieldValueRender",
+        component: "fieldValueComponent"
+      }, {
+        tmplOption: "headerItemTemplate",
+        render: "headerItemRender",
+        component: "headerItemComponent"
+      }],
+    },
+  });
+};
+
+const Column = Object.assign<typeof _componentColumn, NestedComponentMeta>(_componentColumn, {
+  componentType: "option",
+});
+
+// owners:
+// CardView
+type IHeaderPanelProps = React.PropsWithChildren<{
+  dragging?: Record<string, any>;
+  itemCssClass?: string;
+  itemTemplate?: ((e: { column: CardViewColumn }) => string | any) | template;
+  visible?: boolean;
+  itemRender?: (...params: any) => React.ReactNode;
+  itemComponent?: React.ComponentType<any>;
+}>
+const _componentHeaderPanel = (props: IHeaderPanelProps) => {
+  return React.createElement(NestedOption<IHeaderPanelProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "headerPanel",
+      TemplateProps: [{
+        tmplOption: "itemTemplate",
+        render: "itemRender",
+        component: "itemComponent"
+      }],
+    },
+  });
+};
+
+const HeaderPanel = Object.assign<typeof _componentHeaderPanel, NestedComponentMeta>(_componentHeaderPanel, {
+  componentType: "option",
+});
+
+// owners:
+// Toolbar
+type IItemProps = React.PropsWithChildren<{
+  cssClass?: string | undefined;
+  disabled?: boolean;
+  html?: string;
+  locateInMenu?: LocateInMenuMode;
+  location?: ToolbarItemLocation;
+  menuItemTemplate?: (() => string | any) | template;
+  name?: PredefinedToolbarItem | string;
+  options?: any;
+  showText?: ShowTextMode;
+  template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template;
+  text?: string;
+  visible?: boolean;
+  widget?: ToolbarItemComponent;
+  menuItemRender?: (...params: any) => React.ReactNode;
+  menuItemComponent?: React.ComponentType<any>;
+  render?: (...params: any) => React.ReactNode;
+  component?: React.ComponentType<any>;
+}>
+const _componentItem = (props: IItemProps) => {
+  return React.createElement(NestedOption<IItemProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "items",
+      IsCollectionItem: true,
+      TemplateProps: [{
+        tmplOption: "menuItemTemplate",
+        render: "menuItemRender",
+        component: "menuItemComponent"
+      }, {
+        tmplOption: "template",
+        render: "render",
+        component: "component"
+      }],
+    },
+  });
+};
+
+const Item = Object.assign<typeof _componentItem, NestedComponentMeta>(_componentItem, {
+  componentType: "option",
+});
+
+// owners:
+// CardView
+type IPagerProps = React.PropsWithChildren<{
+  allowedPageSizes?: Array<number | PagerPageSize> | Mode;
+  displayMode?: DisplayMode;
+  infoText?: string;
+  label?: string;
+  showInfo?: boolean;
+  showNavigationButtons?: boolean;
+  showPageSizeSelector?: boolean;
+  visible?: boolean | Mode;
+}>
+const _componentPager = (props: IPagerProps) => {
+  return React.createElement(NestedOption<IPagerProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "pager",
+    },
+  });
+};
+
+const Pager = Object.assign<typeof _componentPager, NestedComponentMeta>(_componentPager, {
+  componentType: "option",
+});
+
+// owners:
+// CardView
+type IPagingProps = React.PropsWithChildren<{
+  enabled?: boolean;
+  pageIndex?: number;
+  pageSize?: number;
+  defaultPageIndex?: number;
+  onPageIndexChange?: (value: number) => void;
+  defaultPageSize?: number;
+  onPageSizeChange?: (value: number) => void;
+}>
+const _componentPaging = (props: IPagingProps) => {
+  return React.createElement(NestedOption<IPagingProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "paging",
+      DefaultsProps: {
+        defaultPageIndex: "pageIndex",
+        defaultPageSize: "pageSize"
+      },
+    },
+  });
+};
+
+const Paging = Object.assign<typeof _componentPaging, NestedComponentMeta>(_componentPaging, {
+  componentType: "option",
+});
+
+// owners:
+// CardView
+type IRemoteOperationsProps = React.PropsWithChildren<{
+  filtering?: boolean;
+  paging?: boolean;
+  sorting?: boolean;
+  summary?: boolean;
+}>
+const _componentRemoteOperations = (props: IRemoteOperationsProps) => {
+  return React.createElement(NestedOption<IRemoteOperationsProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "remoteOperations",
+    },
+  });
+};
+
+const RemoteOperations = Object.assign<typeof _componentRemoteOperations, NestedComponentMeta>(_componentRemoteOperations, {
+  componentType: "option",
+});
+
+// owners:
+// CardView
+type IToolbarProps = React.PropsWithChildren<{
+  disabled?: boolean;
+  items?: Array<dxCardViewToolbarItem | PredefinedToolbarItem>;
+  visible?: boolean | undefined;
+}>
+const _componentToolbar = (props: IToolbarProps) => {
+  return React.createElement(NestedOption<IToolbarProps>, {
+    ...props,
+    elementDescriptor: {
+      OptionName: "toolbar",
+      ExpectedChildren: {
+        item: { optionName: "items", isCollectionItem: true }
+      },
+    },
+  });
+};
+
+const Toolbar = Object.assign<typeof _componentToolbar, NestedComponentMeta>(_componentToolbar, {
+  componentType: "option",
+});
+
+export default CardView;
+export {
+  CardView,
+  ICardViewOptions,
+  CardViewRef,
+  CardCover,
+  ICardCoverProps,
+  CardHeader,
+  ICardHeaderProps,
+  Column,
+  IColumnProps,
+  HeaderPanel,
+  IHeaderPanelProps,
+  Item,
+  IItemProps,
+  Pager,
+  IPagerProps,
+  Paging,
+  IPagingProps,
+  RemoteOperations,
+  IRemoteOperationsProps,
+  Toolbar,
+  IToolbarProps
+};
+import type * as CardViewTypes from 'devextreme/ui/card_view_types';
+export { CardViewTypes };
+
diff --git a/packages/devextreme-react/src/index.ts b/packages/devextreme-react/src/index.ts
index 1c6d1512eb5c..85bc87fdbdcb 100644
--- a/packages/devextreme-react/src/index.ts
+++ b/packages/devextreme-react/src/index.ts
@@ -8,6 +8,7 @@ export { Bullet } from "./bullet";
 export { Button } from "./button";
 export { ButtonGroup } from "./button-group";
 export { Calendar } from "./calendar";
+export { CardView } from "./card-view";
 export { Chart } from "./chart";
 export { Chat } from "./chat";
 export { CheckBox } from "./check-box";
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss
new file mode 100644
index 000000000000..479e1b081f12
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss
@@ -0,0 +1,14 @@
+@use './content_view';
+@use './header_panel';
+@use './variables' as *;
+
+// adduse
+
+.dx-cardview {
+  display: flex;
+  flex-direction: column;
+  gap: $cardview-gap;
+  padding: $cardview-padding;
+  background-color: $cardview-background-color;
+  border-radius: $cardview-border-radius;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/_variables.scss
new file mode 100644
index 000000000000..893760ad1f6e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/_variables.scss
@@ -0,0 +1,4 @@
+$cardview-gap: null !default;
+$cardview-padding: null !default;
+$cardview-background-color: null !default;
+$cardview-border-radius: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/_index.scss
new file mode 100644
index 000000000000..a7575792f397
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/_index.scss
@@ -0,0 +1,7 @@
+@use '../variables' as *;
+@use './content';
+
+.dx-cardview-contentview {
+  overflow: hidden;
+  flex-grow: 1;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/_index.scss
new file mode 100644
index 000000000000..b220687c03b8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/_index.scss
@@ -0,0 +1,10 @@
+@use './variables' as *;
+@use './card';
+
+.dx-cardview-content {
+  display: grid;
+  justify-items: center;
+  column-gap: $cardview-content-column-gap;
+  row-gap: $cardview-content-row-gap;
+  grid-template-columns: repeat(var(--dx-cardview-cardsperrow), 1fr);
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/_variables.scss
new file mode 100644
index 000000000000..19754837130c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/_variables.scss
@@ -0,0 +1,2 @@
+$cardview-content-column-gap: null !default;
+$cardview-content-row-gap: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss
new file mode 100644
index 000000000000..c425dc3f79f5
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss
@@ -0,0 +1,13 @@
+@use './header';
+@use './content';
+@use './cover';
+@use './variables' as *;
+
+.dx-cardview-card {
+  width: 100%;
+  min-width: var(--dx-cardview-card-min-width, $cardview-card-min-width);
+  max-width: var(--dx-cardview-card-max-width);
+  border: $cardview-card-border-size solid $cardview-card-border-color;
+  border-radius: $cardview-card-border-radius;
+  background-color: $cardview-card-background-color;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_variables.scss
new file mode 100644
index 000000000000..6ed020add8f6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_variables.scss
@@ -0,0 +1,6 @@
+$cardview-card-border-color: null !default;
+
+$cardview-card-border-size: null !default;
+$cardview-card-min-width: null !default;
+$cardview-card-border-radius: null !default;
+$cardview-card-background-color: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss
new file mode 100644
index 000000000000..f93a891a3e8f
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss
@@ -0,0 +1,26 @@
+@use './variables' as *;
+@use '../variables' as *;
+
+.dx-cardview-card-content {
+  padding: ($cardview-card-content-padding-vertical - $cardview-card-content-field-gap) $cardview-card-content-padding-horizontal;
+  display: table;
+  border-spacing: $cardview-card-content-field-gap;
+  width: 100%;
+}
+
+.dx-cardview-field {
+  display: table-row;
+}
+
+.dx-cardview-field-name,
+.dx-cardview-field-value {
+  display: table-cell;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: $cardview-card-content-cell-padding-vertical $cardview-card-content-cell-padding-horizontal;
+}
+
+.dx-cardview-field-name {
+  font-weight: bold;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_variables.scss
new file mode 100644
index 000000000000..b11ad4f18872
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_variables.scss
@@ -0,0 +1,5 @@
+$cardview-card-content-padding-vertical: null !default;
+$cardview-card-content-padding-horizontal: null !default;
+$cardview-card-content-field-gap: null !default;
+$cardview-card-content-cell-padding-vertical: null !default;
+$cardview-card-content-cell-padding-horizontal: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss
new file mode 100644
index 000000000000..fada7426d0d1
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss
@@ -0,0 +1,16 @@
+@use '../variables' as *;
+
+.dx-card-cover {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  border-top: $cardview-card-border-size solid $cardview-card-border-color;
+  border-bottom: $cardview-card-border-size solid $cardview-card-border-color;
+  max-height: var(--dx-cardview-card-cover-max-height);
+  aspect-ratio: var(--dx-cardview-card-cover-ratio);
+}
+
+.dx-card-cover-image {
+  object-fit: contain;
+  width: 100%;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss
new file mode 100644
index 000000000000..3cc44c0919c0
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss
@@ -0,0 +1,13 @@
+@use './variables' as *;
+
+.dx-cardview-card-header {
+  .dx-toolbar {
+    padding: 0 12px;
+    border-radius: $cardview-card-header-border-radius;
+
+
+    .dx-toolbar-label {
+      font-size: $cardview-card-header-text-size;
+    }
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_variables.scss
new file mode 100644
index 000000000000..814471d72bd7
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_variables.scss
@@ -0,0 +1,2 @@
+$cardview-card-header-text-size: null !default;
+$cardview-card-header-border-radius: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
new file mode 100644
index 000000000000..87cbb14463a6
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss
@@ -0,0 +1,8 @@
+
+@use './item';
+@use './variables' as *;
+
+.dx-cardview-headerpanel-content {
+  display: flex;
+  gap: $cardview-headerpanel-content-gap;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_variables.scss
new file mode 100644
index 000000000000..6ab96b987436
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_variables.scss
@@ -0,0 +1 @@
+$cardview-headerpanel-content-gap: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss
new file mode 100644
index 000000000000..9a145974f853
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss
@@ -0,0 +1,14 @@
+@use './variables' as *;
+
+.dx-cardview-header-item {
+  background-color: $cardview-header-item-background-color;
+  border: solid $cardview-header-item-border-width $cardview-header-item-border-color;
+  border-radius: $cardview-header-item-border-radius;
+  padding: ($cardview-header-item-padding-vertical - $cardview-header-item-border-width) $cardview-header-item-padding-horizontal;
+  min-width: fit-content;
+
+  &:hover {
+    background-color: $cardview-header-item-hovered-background-color;
+    border: solid $cardview-header-item-border-width $cardview-header-item-hovered-border-color;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss
new file mode 100644
index 000000000000..8dfadf79f82e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss
@@ -0,0 +1,10 @@
+$cardview-header-item-background-color: null !default;
+$cardview-header-item-border-color: null !default;
+
+$cardview-header-item-hovered-background-color: null !default;
+$cardview-header-item-hovered-border-color: null !default;
+
+$cardview-header-item-border-width: null !default;
+$cardview-header-item-border-radius: null !default;
+$cardview-header-item-padding-horizontal: 12px !default;
+$cardview-header-item-padding-vertical: 6px !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/_index.scss
index e9d6526025ba..ff95df79b8ec 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/_index.scss
@@ -61,3 +61,4 @@
 @use "./sortable";
 @use "./deferRendering";
 @use "./map";
+@use "./cardView";
diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss
new file mode 100644
index 000000000000..54780b425eb8
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss
@@ -0,0 +1,20 @@
+@use '../colors' as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+
+// adduse
+
+$cardview-background-color: $base-typography-bg !default;
+
+$cardview-header-item-background-color: #F0F0F0 !default;
+$cardview-header-item-border-color: #E0E0E0 !default;
+$cardview-header-item-hovered-background-color: #EBEBEB !default;
+$cardview-header-item-hovered-border-color: #BDBDBD !default;
+
+$cardview-card-border-color: $base-border-color !default;
+$cardview-card-background-color: $base-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_index.scss
new file mode 100644
index 000000000000..29f2262bbe3e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_index.scss
@@ -0,0 +1,5 @@
+@use 'colors';
+@use 'sizes';
+@use '../../base/cardView/index' as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss
new file mode 100644
index 000000000000..2f6c2ca6b355
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss
@@ -0,0 +1,63 @@
+@use "../sizes" as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+
+// adduse
+
+$cardview-fluent-paddings-24: null;
+$cardview-fluent-paddings-12: null;
+$cardview-fluent-paddings-6: null;
+$cardview-fluent-text-size-16: null;
+$cardview-fluent-border-radius-8: null;
+$cardview-fluent-gaps-16: null;
+$cardview-fluent-gaps-24: null;
+
+@if $size == "default" {
+  $cardview-fluent-paddings-24: 24px;
+  $cardview-fluent-paddings-12: 12px;
+  $cardview-fluent-paddings-6: 6px;
+  $cardview-fluent-text-size-16: 16px;
+  $cardview-fluent-border-radius-8: 8px;
+  $cardview-fluent-gaps-16: 16px;
+  $cardview-fluent-gaps-24: 24px;
+}
+@else if $size == "compact" {
+  $cardview-fluent-paddings-24: 16px;
+  $cardview-fluent-paddings-12: 8px;
+  $cardview-fluent-paddings-6: 4px;
+  $cardview-fluent-text-size-16: 14px;
+  $cardview-fluent-border-radius-8: 6px;
+  $cardview-fluent-gaps-16: 12px;
+  $cardview-fluent-gaps-24: 16px;
+}
+
+$cardview-border-radius: 16px !default;
+$cardview-gap: $cardview-fluent-gaps-24 !default;
+$cardview-padding: $cardview-fluent-paddings-24 !default;
+
+$cardview-headerpanel-content-gap: 8px !default;
+
+$cardview-header-item-border-width: 1px !default;
+$cardview-header-item-border-radius: 6px !default;
+
+$cardview-content-column-gap: $cardview-fluent-gaps-16 !default;
+$cardview-content-row-gap: $cardview-fluent-gaps-16 !default;
+
+$cardview-card-border-size: 1px !default;
+$cardview-card-min-width: 250px !default;
+$cardview-card-border-radius: $cardview-fluent-border-radius-8 !default;
+
+$cardview-card-content-padding-vertical: $cardview-fluent-paddings-12 !default;
+$cardview-card-content-padding-horizontal: $cardview-fluent-paddings-12 !default;
+$cardview-card-content-field-gap: 5px !default;
+$cardview-card-content-cell-padding-vertical: $cardview-fluent-paddings-6 !default;
+$cardview-card-content-cell-padding-horizontal: $cardview-fluent-paddings-12 !default;
+
+$cardview-card-header-text-size: $cardview-fluent-text-size-16 !default;
+$cardview-card-header-border-radius: 8px !default;
+
diff --git a/packages/devextreme-scss/scss/widgets/generic/_index.scss b/packages/devextreme-scss/scss/widgets/generic/_index.scss
index aac2ff330556..ff95df79b8ec 100644
--- a/packages/devextreme-scss/scss/widgets/generic/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/_index.scss
@@ -61,4 +61,4 @@
 @use "./sortable";
 @use "./deferRendering";
 @use "./map";
-
+@use "./cardView";
diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss
new file mode 100644
index 000000000000..7b8ea9381c6c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss
@@ -0,0 +1,20 @@
+@use '../colors' as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+
+// adduse
+
+$cardview-background-color: $typography-bg !default;
+
+$cardview-header-item-background-color: #F0F0F0 !default;
+$cardview-header-item-border-color: #E0E0E0 !default;
+$cardview-header-item-hovered-background-color: #EBEBEB !default;
+$cardview-header-item-hovered-border-color: #BDBDBD !default;
+
+$cardview-card-border-color: $base-border-color !default;
+$cardview-card-background-color: $base-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_index.scss
new file mode 100644
index 000000000000..29f2262bbe3e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_index.scss
@@ -0,0 +1,5 @@
+@use 'colors';
+@use 'sizes';
+@use '../../base/cardView/index' as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss
new file mode 100644
index 000000000000..b22cd0209b8e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss
@@ -0,0 +1,62 @@
+@use "../sizes" as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+
+$cardview-fluent-paddings-24: null;
+$cardview-fluent-paddings-12: null;
+$cardview-fluent-paddings-6: null;
+$cardview-fluent-text-size-16: null;
+$cardview-fluent-border-radius-8: null;
+$cardview-fluent-gaps-16: null;
+$cardview-fluent-gaps-24: null;
+
+@if $size == "default" {
+  $cardview-fluent-paddings-24: 24px;
+  $cardview-fluent-paddings-12: 12px;
+  $cardview-fluent-paddings-6: 6px;
+  $cardview-fluent-text-size-16: 16px;
+  $cardview-fluent-border-radius-8: 8px;
+  $cardview-fluent-gaps-16: 16px;
+  $cardview-fluent-gaps-24: 24px;
+}
+@else if $size == "compact" {
+  $cardview-fluent-paddings-24: 16px;
+  $cardview-fluent-paddings-12: 8px;
+  $cardview-fluent-paddings-6: 4px;
+  $cardview-fluent-text-size-16: 14px;
+  $cardview-fluent-border-radius-8: 6px;
+  $cardview-fluent-gaps-16: 12px;
+  $cardview-fluent-gaps-24: 16px;
+}
+
+$cardview-border-radius: 16px !default;
+$cardview-gap: $cardview-fluent-gaps-24 !default;
+$cardview-padding: $cardview-fluent-paddings-24 !default;
+
+$cardview-headerpanel-content-gap: 8px !default;
+
+$cardview-header-item-border-width: 1px !default;
+$cardview-header-item-border-radius: 6px !default;
+
+$cardview-content-column-gap: $cardview-fluent-gaps-16 !default;
+$cardview-content-row-gap: $cardview-fluent-gaps-16 !default;
+
+$cardview-card-border-size: 1px !default;
+$cardview-card-min-width: 250px !default;
+$cardview-card-border-radius: $cardview-fluent-border-radius-8 !default;
+
+$cardview-card-content-padding-vertical: $cardview-fluent-paddings-12 !default;
+$cardview-card-content-padding-horizontal: $cardview-fluent-paddings-12 !default;
+$cardview-card-content-field-gap: 5px !default;
+$cardview-card-content-cell-padding-vertical: $cardview-fluent-paddings-6 !default;
+$cardview-card-content-cell-padding-horizontal: $cardview-fluent-paddings-12 !default;
+
+$cardview-card-header-text-size: $cardview-fluent-text-size-16 !default;
+$cardview-card-header-border-radius: 8px !default;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/material/_index.scss b/packages/devextreme-scss/scss/widgets/material/_index.scss
index e9d6526025ba..ff95df79b8ec 100644
--- a/packages/devextreme-scss/scss/widgets/material/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/_index.scss
@@ -61,3 +61,4 @@
 @use "./sortable";
 @use "./deferRendering";
 @use "./map";
+@use "./cardView";
diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss
new file mode 100644
index 000000000000..7b8ea9381c6c
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss
@@ -0,0 +1,20 @@
+@use '../colors' as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+
+// adduse
+
+$cardview-background-color: $typography-bg !default;
+
+$cardview-header-item-background-color: #F0F0F0 !default;
+$cardview-header-item-border-color: #E0E0E0 !default;
+$cardview-header-item-hovered-background-color: #EBEBEB !default;
+$cardview-header-item-hovered-border-color: #BDBDBD !default;
+
+$cardview-card-border-color: $base-border-color !default;
+$cardview-card-background-color: $base-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_index.scss
new file mode 100644
index 000000000000..29f2262bbe3e
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/material/cardView/_index.scss
@@ -0,0 +1,5 @@
+@use 'colors';
+@use 'sizes';
+@use '../../base/cardView/index' as *;
+
+// adduse
diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss
new file mode 100644
index 000000000000..0524c5d6ca62
--- /dev/null
+++ b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss
@@ -0,0 +1,62 @@
+@use "../sizes" as *;
+@use '../../base/cardView/variables' as *;
+@use '../../base/cardView/header_panel/variables' as *;
+@use '../../base/cardView/header_panel/item/variables' as *;
+@use '../../base/cardView/content_view/content/card/variables' as *;
+@use '../../base/cardView/content_view/content/card/header/variables' as *;
+@use '../../base/cardView/content_view/content/card/content/variables' as *;
+@use '../../base/cardView/content_view/content/variables' as *;
+
+// adduse
+
+$cardview-fluent-paddings-24: null;
+$cardview-fluent-paddings-12: null;
+$cardview-fluent-paddings-6: null;
+$cardview-fluent-text-size-16: null;
+$cardview-fluent-border-radius-8: null;
+$cardview-fluent-gaps-16: null;
+$cardview-fluent-gaps-24: null;
+
+@if $size == "default" {
+  $cardview-fluent-paddings-24: 24px;
+  $cardview-fluent-paddings-12: 12px;
+  $cardview-fluent-paddings-6: 6px;
+  $cardview-fluent-text-size-16: 16px;
+  $cardview-fluent-border-radius-8: 8px;
+  $cardview-fluent-gaps-16: 16px;
+  $cardview-fluent-gaps-24: 24px;
+}
+@else if $size == "compact" {
+  $cardview-fluent-paddings-24: 16px;
+  $cardview-fluent-paddings-12: 8px;
+  $cardview-fluent-paddings-6: 4px;
+  $cardview-fluent-text-size-16: 14px;
+  $cardview-fluent-border-radius-8: 6px;
+  $cardview-fluent-gaps-16: 12px;
+  $cardview-fluent-gaps-24: 16px;
+}
+
+$cardview-border-radius: 16px !default;
+$cardview-gap: $cardview-fluent-gaps-24 !default;
+$cardview-padding: $cardview-fluent-paddings-24 !default;
+
+$cardview-headerpanel-content-gap: 8px !default;
+
+$cardview-header-item-border-width: 1px !default;
+$cardview-header-item-border-radius: 6px !default;
+
+$cardview-content-column-gap: $cardview-fluent-gaps-16 !default;
+$cardview-content-row-gap: $cardview-fluent-gaps-16 !default;
+
+$cardview-card-border-size: 1px !default;
+$cardview-card-min-width: 250px !default;
+$cardview-card-border-radius: $cardview-fluent-border-radius-8 !default;
+
+$cardview-card-content-padding-vertical: $cardview-fluent-paddings-12 !default;
+$cardview-card-content-padding-horizontal: $cardview-fluent-paddings-12 !default;
+$cardview-card-content-field-gap: 5px !default;
+$cardview-card-content-cell-padding-vertical: $cardview-fluent-paddings-6 !default;
+$cardview-card-content-cell-padding-horizontal: $cardview-fluent-paddings-12 !default;
+
+$cardview-card-header-text-size: $cardview-fluent-text-size-16 !default;
+$cardview-card-header-border-radius: 8px !default;
diff --git a/packages/devextreme-themebuilder/tests/data/dependencies.ts b/packages/devextreme-themebuilder/tests/data/dependencies.ts
index 27ffe61a73de..0297c842bab5 100644
--- a/packages/devextreme-themebuilder/tests/data/dependencies.ts
+++ b/packages/devextreme-themebuilder/tests/data/dependencies.ts
@@ -16,6 +16,7 @@ export const dependencies: FlatStylesDependencies = {
   buttongroup: ['validation', 'button'],
   dropdownbutton: ['validation', 'button', 'buttongroup', 'popup', 'loadindicator', 'loadpanel', 'scrollview', 'list'],
   calendar: ['validation', 'button'],
+  cardview: ['button', 'checkbox', 'list', 'loadindicator', 'loadpanel', 'numberbox', 'popup', 'scrollview', 'selectbox', 'sortable', 'textbox', 'toast', 'toolbar', 'validation'],
   chat: ['button', 'loadindicator', 'loadpanel', 'scrollview', 'textbox', 'validation'],
   checkbox: ['validation'],
   numberbox: ['validation', 'button', 'loadindicator'],
diff --git a/packages/devextreme-vue/src/card-view.ts b/packages/devextreme-vue/src/card-view.ts
new file mode 100644
index 000000000000..b1b8f8136df4
--- /dev/null
+++ b/packages/devextreme-vue/src/card-view.ts
@@ -0,0 +1,425 @@
+export { ExplicitTypes } from "devextreme/ui/card_view";
+import { PropType } from "vue";
+import { defineComponent } from "vue";
+import { prepareComponentConfig } from "./core/index";
+import CardView, { Properties } from "devextreme/ui/card_view";
+import  DataSource from "devextreme/data/data_source";
+import  DOMComponent from "devextreme/core/dom_component";
+import {
+ CardCover,
+ CardHeader,
+ ColumnProperties,
+ HeaderPanel,
+ Paging,
+ RemoteOperations,
+ dxCardViewToolbar,
+ PredefinedToolbarItem,
+ dxCardViewToolbarItem,
+} from "devextreme/ui/card_view";
+import {
+ Mode,
+ ToolbarItemLocation,
+ ToolbarItemComponent,
+ DisplayMode,
+} from "devextreme/common";
+import {
+ DataSourceOptions,
+} from "devextreme/common/data";
+import {
+ Store,
+} from "devextreme/data/store";
+import {
+ EventInfo,
+} from "devextreme/common/core/events";
+import {
+ Component,
+} from "devextreme/core/component";
+import {
+ Pager,
+ PagerPageSize,
+} from "devextreme/common/grids";
+import {
+ PagerBase,
+} from "devextreme/ui/pagination";
+import {
+ LocateInMenuMode,
+ ShowTextMode,
+} from "devextreme/ui/toolbar";
+import { prepareConfigurationComponentConfig } from "./core/index";
+
+type AccessibleOptions = Pick<Properties,
+  "accessKey" |
+  "activeStateEnabled" |
+  "cardCover" |
+  "cardHeader" |
+  "cardMaxWidth" |
+  "cardMinWidth" |
+  "cardsPerRow" |
+  "cardTemplate" |
+  "columns" |
+  "dataSource" |
+  "disabled" |
+  "elementAttr" |
+  "focusStateEnabled" |
+  "headerPanel" |
+  "height" |
+  "hint" |
+  "hoverStateEnabled" |
+  "keyExpr" |
+  "onContentReady" |
+  "onDataErrorOccurred" |
+  "onDisposing" |
+  "onInitialized" |
+  "onOptionChanged" |
+  "pager" |
+  "paging" |
+  "remoteOperations" |
+  "rtlEnabled" |
+  "tabIndex" |
+  "toolbar" |
+  "visible" |
+  "width"
+>;
+
+interface DxCardView extends AccessibleOptions {
+  readonly instance?: CardView;
+}
+
+const componentConfig = {
+  props: {
+    accessKey: String,
+    activeStateEnabled: Boolean,
+    cardCover: Object as PropType<CardCover>,
+    cardHeader: Object as PropType<CardHeader>,
+    cardMaxWidth: Number,
+    cardMinWidth: Number,
+    cardsPerRow: [String, Number] as PropType<Mode | number>,
+    cardTemplate: {},
+    columns: Array as PropType<Array<ColumnProperties | string>>,
+    dataSource: [Array, Object, String] as PropType<Array<any> | DataSource | DataSourceOptions | Store | string | Record<string, any>>,
+    disabled: Boolean,
+    elementAttr: Object as PropType<Record<string, any>>,
+    focusStateEnabled: Boolean,
+    headerPanel: Object as PropType<HeaderPanel | Record<string, any>>,
+    height: [Function, Number, String] as PropType<((() => number | string)) | number | string>,
+    hint: String,
+    hoverStateEnabled: Boolean,
+    keyExpr: [Array, String] as PropType<Array<string> | string>,
+    onContentReady: Function as PropType<((e: EventInfo<any>) => void)>,
+    onDataErrorOccurred: Function as PropType<((e: { component: Object, element: any, error: any, model: any }) => void)>,
+    onDisposing: Function as PropType<((e: EventInfo<any>) => void)>,
+    onInitialized: Function as PropType<((e: { component: Component<any>, element: any }) => void)>,
+    onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>,
+    pager: Object as PropType<Pager | Record<string, any> | PagerBase>,
+    paging: Object as PropType<Paging>,
+    remoteOperations: [Boolean, String, Object] as PropType<boolean | Mode | RemoteOperations>,
+    rtlEnabled: Boolean,
+    tabIndex: Number,
+    toolbar: Object as PropType<dxCardViewToolbar | Record<string, any>>,
+    visible: Boolean,
+    width: [Function, Number, String] as PropType<((() => number | string)) | number | string>
+  },
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:accessKey": null,
+    "update:activeStateEnabled": null,
+    "update:cardCover": null,
+    "update:cardHeader": null,
+    "update:cardMaxWidth": null,
+    "update:cardMinWidth": null,
+    "update:cardsPerRow": null,
+    "update:cardTemplate": null,
+    "update:columns": null,
+    "update:dataSource": null,
+    "update:disabled": null,
+    "update:elementAttr": null,
+    "update:focusStateEnabled": null,
+    "update:headerPanel": null,
+    "update:height": null,
+    "update:hint": null,
+    "update:hoverStateEnabled": null,
+    "update:keyExpr": null,
+    "update:onContentReady": null,
+    "update:onDataErrorOccurred": null,
+    "update:onDisposing": null,
+    "update:onInitialized": null,
+    "update:onOptionChanged": null,
+    "update:pager": null,
+    "update:paging": null,
+    "update:remoteOperations": null,
+    "update:rtlEnabled": null,
+    "update:tabIndex": null,
+    "update:toolbar": null,
+    "update:visible": null,
+    "update:width": null,
+  },
+  computed: {
+    instance(): CardView {
+      return (this as any).$_instance;
+    }
+  },
+  beforeCreate() {
+    (this as any).$_WidgetClass = CardView;
+    (this as any).$_hasAsyncTemplate = true;
+    (this as any).$_expectedChildren = {
+      cardCover: { isCollectionItem: false, optionName: "cardCover" },
+      cardHeader: { isCollectionItem: false, optionName: "cardHeader" },
+      column: { isCollectionItem: true, optionName: "columns" },
+      headerPanel: { isCollectionItem: false, optionName: "headerPanel" },
+      pager: { isCollectionItem: false, optionName: "pager" },
+      paging: { isCollectionItem: false, optionName: "paging" },
+      remoteOperations: { isCollectionItem: false, optionName: "remoteOperations" },
+      toolbar: { isCollectionItem: false, optionName: "toolbar" }
+    };
+  }
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxCardView = defineComponent(componentConfig);
+
+
+const DxCardCoverConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:altExpr": null,
+    "update:imageExpr": null,
+  },
+  props: {
+    altExpr: [Function, String] as PropType<(((data: any) => string)) | string>,
+    imageExpr: [Function, String] as PropType<(((data: any) => string)) | string>
+  }
+};
+
+prepareConfigurationComponentConfig(DxCardCoverConfig);
+
+const DxCardCover = defineComponent(DxCardCoverConfig);
+
+(DxCardCover as any).$_optionName = "cardCover";
+
+const DxCardHeaderConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:captionExpr": null,
+    "update:visible": null,
+  },
+  props: {
+    captionExpr: [Function, String] as PropType<(((data: any) => string)) | string>,
+    visible: Boolean
+  }
+};
+
+prepareConfigurationComponentConfig(DxCardHeaderConfig);
+
+const DxCardHeader = defineComponent(DxCardHeaderConfig);
+
+(DxCardHeader as any).$_optionName = "cardHeader";
+
+const DxColumnConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:fieldCaptionTemplate": null,
+    "update:fieldTemplate": null,
+    "update:fieldValueTemplate": null,
+    "update:headerItemCssClass": null,
+    "update:headerItemTemplate": null,
+  },
+  props: {
+    fieldCaptionTemplate: {},
+    fieldTemplate: {},
+    fieldValueTemplate: {},
+    headerItemCssClass: String,
+    headerItemTemplate: {}
+  }
+};
+
+prepareConfigurationComponentConfig(DxColumnConfig);
+
+const DxColumn = defineComponent(DxColumnConfig);
+
+(DxColumn as any).$_optionName = "columns";
+(DxColumn as any).$_isCollectionItem = true;
+
+const DxHeaderPanelConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:dragging": null,
+    "update:itemCssClass": null,
+    "update:itemTemplate": null,
+    "update:visible": null,
+  },
+  props: {
+    dragging: Object as PropType<Record<string, any>>,
+    itemCssClass: String,
+    itemTemplate: {},
+    visible: Boolean
+  }
+};
+
+prepareConfigurationComponentConfig(DxHeaderPanelConfig);
+
+const DxHeaderPanel = defineComponent(DxHeaderPanelConfig);
+
+(DxHeaderPanel as any).$_optionName = "headerPanel";
+
+const DxItemConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:cssClass": null,
+    "update:disabled": null,
+    "update:html": null,
+    "update:locateInMenu": null,
+    "update:location": null,
+    "update:menuItemTemplate": null,
+    "update:name": null,
+    "update:options": null,
+    "update:showText": null,
+    "update:template": null,
+    "update:text": null,
+    "update:visible": null,
+    "update:widget": null,
+  },
+  props: {
+    cssClass: String,
+    disabled: Boolean,
+    html: String,
+    locateInMenu: String as PropType<LocateInMenuMode>,
+    location: String as PropType<ToolbarItemLocation>,
+    menuItemTemplate: {},
+    name: String as PropType<PredefinedToolbarItem | string>,
+    options: {},
+    showText: String as PropType<ShowTextMode>,
+    template: {},
+    text: String,
+    visible: Boolean,
+    widget: String as PropType<ToolbarItemComponent>
+  }
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
+(DxItem as any).$_optionName = "items";
+(DxItem as any).$_isCollectionItem = true;
+
+const DxPagerConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:allowedPageSizes": null,
+    "update:displayMode": null,
+    "update:infoText": null,
+    "update:label": null,
+    "update:showInfo": null,
+    "update:showNavigationButtons": null,
+    "update:showPageSizeSelector": null,
+    "update:visible": null,
+  },
+  props: {
+    allowedPageSizes: [Array, String] as PropType<(Array<number | PagerPageSize>) | Mode>,
+    displayMode: String as PropType<DisplayMode>,
+    infoText: String,
+    label: String,
+    showInfo: Boolean,
+    showNavigationButtons: Boolean,
+    showPageSizeSelector: Boolean,
+    visible: [Boolean, String] as PropType<boolean | Mode>
+  }
+};
+
+prepareConfigurationComponentConfig(DxPagerConfig);
+
+const DxPager = defineComponent(DxPagerConfig);
+
+(DxPager as any).$_optionName = "pager";
+
+const DxPagingConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:enabled": null,
+    "update:pageIndex": null,
+    "update:pageSize": null,
+  },
+  props: {
+    enabled: Boolean,
+    pageIndex: Number,
+    pageSize: Number
+  }
+};
+
+prepareConfigurationComponentConfig(DxPagingConfig);
+
+const DxPaging = defineComponent(DxPagingConfig);
+
+(DxPaging as any).$_optionName = "paging";
+
+const DxRemoteOperationsConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:filtering": null,
+    "update:paging": null,
+    "update:sorting": null,
+    "update:summary": null,
+  },
+  props: {
+    filtering: Boolean,
+    paging: Boolean,
+    sorting: Boolean,
+    summary: Boolean
+  }
+};
+
+prepareConfigurationComponentConfig(DxRemoteOperationsConfig);
+
+const DxRemoteOperations = defineComponent(DxRemoteOperationsConfig);
+
+(DxRemoteOperations as any).$_optionName = "remoteOperations";
+
+const DxToolbarConfig = {
+  emits: {
+    "update:isActive": null,
+    "update:hoveredElement": null,
+    "update:disabled": null,
+    "update:items": null,
+    "update:visible": null,
+  },
+  props: {
+    disabled: Boolean,
+    items: Array as PropType<Array<dxCardViewToolbarItem | PredefinedToolbarItem>>,
+    visible: Boolean
+  }
+};
+
+prepareConfigurationComponentConfig(DxToolbarConfig);
+
+const DxToolbar = defineComponent(DxToolbarConfig);
+
+(DxToolbar as any).$_optionName = "toolbar";
+(DxToolbar as any).$_expectedChildren = {
+  item: { isCollectionItem: true, optionName: "items" }
+};
+
+export default DxCardView;
+export {
+  DxCardView,
+  DxCardCover,
+  DxCardHeader,
+  DxColumn,
+  DxHeaderPanel,
+  DxItem,
+  DxPager,
+  DxPaging,
+  DxRemoteOperations,
+  DxToolbar
+};
+import type * as DxCardViewTypes from "devextreme/ui/card_view_types";
+export { DxCardViewTypes };
diff --git a/packages/devextreme-vue/src/index.ts b/packages/devextreme-vue/src/index.ts
index 9943299699ec..fa67f744a20e 100644
--- a/packages/devextreme-vue/src/index.ts
+++ b/packages/devextreme-vue/src/index.ts
@@ -7,6 +7,7 @@ export { DxBullet } from "./bullet";
 export { DxButton } from "./button";
 export { DxButtonGroup } from "./button-group";
 export { DxCalendar } from "./calendar";
+export { DxCardView } from "./card-view";
 export { DxChart } from "./chart";
 export { DxChat } from "./chat";
 export { DxCheckBox } from "./check-box";
diff --git a/packages/devextreme/js/__internal/core/di/index.test.ts b/packages/devextreme/js/__internal/core/di/index.test.ts
new file mode 100644
index 000000000000..4e5ece50a074
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/di/index.test.ts
@@ -0,0 +1,186 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/init-declarations */
+/* eslint-disable max-classes-per-file */
+/* eslint-disable class-methods-use-this */
+import { describe, expect, it } from '@jest/globals';
+
+import { DIContext } from './index';
+
+describe('basic', () => {
+  describe('register', () => {
+    class MyClass {
+      static dependencies = [] as const;
+
+      getNumber(): number {
+        return 1;
+      }
+    }
+
+    it('should return registered class', () => {
+      const ctx = new DIContext();
+      ctx.register(MyClass);
+
+      expect(ctx.get(MyClass)).toBeInstanceOf(MyClass);
+      expect(ctx.get(MyClass).getNumber()).toBe(1);
+    });
+
+    it('should return registered class with tryGet', () => {
+      const ctx = new DIContext();
+      ctx.register(MyClass);
+
+      expect(ctx.tryGet(MyClass)).toBeInstanceOf(MyClass);
+      expect(ctx.tryGet(MyClass)?.getNumber()).toBe(1);
+    });
+
+    it('should return same instance each time', () => {
+      const ctx = new DIContext();
+      ctx.register(MyClass);
+
+      expect(ctx.get(MyClass)).toBe(ctx.get(MyClass));
+    });
+  });
+
+  describe('registerInstance', () => {
+    class MyClass {
+      static dependencies = [] as const;
+
+      getNumber(): number {
+        return 1;
+      }
+    }
+
+    const ctx = new DIContext();
+    const instance = new MyClass();
+    ctx.registerInstance(MyClass, instance);
+
+    it('should work', () => {
+      expect(ctx.get(MyClass)).toBe(instance);
+    });
+  });
+
+  describe('non registered items', () => {
+    const ctx = new DIContext();
+    class MyClass {
+      static dependencies = [] as const;
+
+      getNumber(): number {
+        return 1;
+      }
+    }
+    it('should throw', () => {
+      expect(() => ctx.get(MyClass)).toThrow();
+    });
+    it('should not throw if tryGet', () => {
+      expect(ctx.tryGet(MyClass)).toBe(null);
+    });
+  });
+});
+
+describe('dependencies', () => {
+  class MyUtilityClass {
+    static dependencies = [] as const;
+
+    getNumber(): number {
+      return 2;
+    }
+  }
+
+  class MyClass {
+    static dependencies = [MyUtilityClass] as const;
+
+    constructor(private readonly utility: MyUtilityClass) {}
+
+    getSuperNumber(): number {
+      return this.utility.getNumber() * 2;
+    }
+  }
+
+  const ctx = new DIContext();
+  ctx.register(MyUtilityClass);
+  ctx.register(MyClass);
+
+  it('should return registered class', () => {
+    expect(ctx.get(MyClass)).toBeInstanceOf(MyClass);
+    expect(ctx.get(MyUtilityClass)).toBeInstanceOf(MyUtilityClass);
+  });
+
+  it('dependecies should work', () => {
+    expect(ctx.get(MyClass).getSuperNumber()).toBe(4);
+  });
+});
+
+describe('mocks', () => {
+  class MyClass {
+    static dependencies = [] as const;
+
+    getNumber(): number {
+      return 1;
+    }
+  }
+
+  class MyClassMock implements MyClass {
+    static dependencies = [] as const;
+
+    getNumber(): number {
+      return 2;
+    }
+  }
+
+  const ctx = new DIContext();
+  ctx.register(MyClass, MyClassMock);
+
+  it('should return mock class when they are registered', () => {
+    expect(ctx.get(MyClass)).toBeInstanceOf(MyClassMock);
+    expect(ctx.get(MyClass).getNumber()).toBe(2);
+  });
+});
+
+it('should work regardless of registration order', () => {
+  class MyClass {
+    static dependencies = [] as const;
+
+    getNumber(): number {
+      return 1;
+    }
+  }
+
+  class MyDependentClass {
+    static dependencies = [MyClass] as const;
+
+    constructor(private readonly myClass: MyClass) {}
+
+    getSuperNumber(): number {
+      return this.myClass.getNumber() * 2;
+    }
+  }
+
+  const ctx = new DIContext();
+  ctx.register(MyDependentClass);
+  ctx.register(MyClass);
+  expect(ctx.get(MyDependentClass).getSuperNumber()).toBe(2);
+});
+
+describe('dependency cycle', () => {
+  class MyClass1 {
+    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    static dependencies = [MyClass2] as const;
+
+    constructor(private readonly myClass2: MyClass2) {}
+  }
+  class MyClass2 {
+    static dependencies = [MyClass1] as const;
+
+    constructor(private readonly myClass1: MyClass1) {}
+  }
+
+  const ctx = new DIContext();
+  ctx.register(MyClass1);
+  ctx.register(MyClass2);
+
+  it('should throw', () => {
+    expect(() => ctx.get(MyClass1)).toThrow();
+    expect(() => ctx.get(MyClass2)).toThrow();
+  });
+});
diff --git a/packages/devextreme/js/__internal/core/di/index.ts b/packages/devextreme/js/__internal/core/di/index.ts
new file mode 100644
index 000000000000..51a22bb7227d
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/di/index.ts
@@ -0,0 +1,88 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+interface AbstractType<T> extends Function {
+  prototype: T;
+}
+
+type Constructor<T, TDeps extends readonly any[]> = new(...deps: TDeps) => T;
+
+interface DIItem<T, TDeps extends readonly any[]> extends Constructor<T, TDeps> {
+  dependencies: readonly [...{ [P in keyof TDeps]: AbstractType<TDeps[P]> }];
+}
+
+export class DIContext {
+  private readonly instances: Map<unknown, unknown> = new Map();
+
+  private readonly fabrics: Map<unknown, unknown> = new Map();
+
+  private readonly antiRecursionSet = new Set();
+
+  public register<TId, TFabric extends TId, TDeps extends readonly any[]>(
+    id: AbstractType<TId>,
+    fabric: DIItem<TFabric, TDeps>,
+  ): void;
+  public register<T, TDeps extends readonly any[]>(
+    idAndFabric: DIItem<T, TDeps>,
+  ): void;
+  public register<T, TDeps extends readonly any[]>(
+    id: DIItem<T, TDeps>,
+    fabric?: DIItem<T, TDeps>,
+  ): void {
+    // eslint-disable-next-line no-param-reassign
+    fabric ??= id;
+    this.fabrics.set(id, fabric);
+  }
+
+  public registerInstance<T>(
+    id: AbstractType<T>,
+    instance: T,
+  ): void {
+    this.instances.set(id, instance);
+  }
+
+  public get<T>(
+    id: AbstractType<T>,
+  ): T {
+    const instance = this.tryGet(id);
+
+    if (instance) {
+      return instance;
+    }
+
+    throw new Error('DI item is not registered');
+  }
+
+  public tryGet<T>(
+    id: AbstractType<T>,
+  ): T | null {
+    if (this.instances.get(id)) {
+      return this.instances.get(id) as T;
+    }
+
+    const fabric = this.fabrics.get(id);
+    if (fabric) {
+      const res: T = this.create(fabric as any);
+      this.instances.set(id, res);
+      this.instances.set(fabric, res);
+      return res;
+    }
+
+    return null;
+  }
+
+  private create<T, TDeps extends readonly any[]>(fabric: DIItem<T, TDeps>): T {
+    if (this.antiRecursionSet.has(fabric)) {
+      throw new Error('dependency cycle in DI');
+    }
+
+    this.antiRecursionSet.add(fabric);
+
+    const args = fabric.dependencies.map((dependency) => this.get(dependency));
+
+    this.antiRecursionSet.delete(fabric);
+
+    // eslint-disable-next-line new-cap
+    return new fabric(...args as any);
+  }
+}
diff --git a/packages/devextreme/js/__internal/core/m_inferno_renderer.ts b/packages/devextreme/js/__internal/core/m_inferno_renderer.ts
index 2a1e550457a0..06ee5e06927b 100644
--- a/packages/devextreme/js/__internal/core/m_inferno_renderer.ts
+++ b/packages/devextreme/js/__internal/core/m_inferno_renderer.ts
@@ -1,9 +1,9 @@
+/* eslint-disable spellcheck/spell-checker */
 import domAdapter from '@js/core/dom_adapter';
 import { cleanDataRecursive } from '@js/core/element_data';
 import injector from '@js/core/utils/dependency_injector';
 import { hydrate, InfernoEffectHost } from '@ts/core/r1/runtime/inferno/index';
 import { render } from 'inferno';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { createElement } from 'inferno-create-element';
 
 const remove = (element) => {
@@ -59,6 +59,14 @@ const infernoRenderer = injector({
       render(createElement(component, props), container);
     }
   },
+
+  renderIntoContainer: (jsx, container, replace) => {
+    if (!replace) {
+      hydrate(jsx, container);
+    } else {
+      render(jsx, container);
+    }
+  },
 });
 
 export { infernoRenderer };
diff --git a/packages/devextreme/js/__internal/core/r1/runtime/inferno/create_context.ts b/packages/devextreme/js/__internal/core/r1/runtime/inferno/create_context.ts
index 94cda0c2ce25..ddf7e068703d 100644
--- a/packages/devextreme/js/__internal/core/r1/runtime/inferno/create_context.ts
+++ b/packages/devextreme/js/__internal/core/r1/runtime/inferno/create_context.ts
@@ -1,13 +1,13 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable func-names */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable no-plusplus */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { Component } from 'inferno';
 
 let contextId = 0;
-export const createContext = function<T>(defaultValue: T): { id: number;
-  Provider: any;
-  defaultValue: unknown; } {
+export const createContext = function<T>(defaultValue: T) {
   const id = contextId++;
 
   return {
diff --git a/packages/devextreme/js/__internal/core/reactive/core.ts b/packages/devextreme/js/__internal/core/reactive/core.ts
new file mode 100644
index 000000000000..e0874385e623
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/reactive/core.ts
@@ -0,0 +1,88 @@
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable max-classes-per-file */
+
+import { type Subscription, SubscriptionBag } from './subscription';
+import type {
+  Callback, Gettable, Subscribable, Updatable,
+} from './types';
+
+export class Observable<T> implements Subscribable<T>, Updatable<T>, Gettable<T> {
+  private readonly callbacks: Set<Callback<T>> = new Set();
+
+  constructor(private value: T) {}
+
+  update(value: T): void {
+    if (this.value === value) {
+      return;
+    }
+    this.value = value;
+
+    this.callbacks.forEach((c) => {
+      c(value);
+    });
+  }
+
+  updateFunc(func: (oldValue: T) => T): void {
+    this.update(func(this.value));
+  }
+
+  subscribe(callback: Callback<T>): Subscription {
+    this.callbacks.add(callback);
+    callback(this.value);
+
+    return {
+      unsubscribe: () => this.callbacks.delete(callback),
+    };
+  }
+
+  unreactive_get(): T {
+    return this.value;
+  }
+
+  dispose(): void {
+    this.callbacks.clear();
+  }
+}
+
+export class InterruptableComputed<
+  TArgs extends readonly any[], TValue,
+> extends Observable<TValue> {
+  private readonly depValues: [...TArgs];
+
+  private readonly depInitialized: boolean[];
+
+  private isInitialized = false;
+
+  private readonly subscriptions = new SubscriptionBag();
+
+  constructor(
+    compute: (...args: TArgs) => TValue,
+    deps: { [I in keyof TArgs]: Subscribable<TArgs[I]> },
+  ) {
+    super(undefined as any);
+
+    this.depValues = deps.map(() => undefined) as any;
+    this.depInitialized = deps.map(() => false);
+
+    deps.forEach((dep, i) => {
+      this.subscriptions.add(dep.subscribe((v) => {
+        this.depValues[i] = v;
+
+        if (!this.isInitialized) {
+          this.depInitialized[i] = true;
+          this.isInitialized = this.depInitialized.every((e) => e);
+        }
+
+        if (this.isInitialized) {
+          this.update(compute(...this.depValues));
+        }
+      }));
+    });
+  }
+
+  dispose(): void {
+    super.dispose();
+    this.subscriptions.unsubscribe();
+  }
+}
diff --git a/packages/devextreme/js/__internal/core/reactive/index.ts b/packages/devextreme/js/__internal/core/reactive/index.ts
new file mode 100644
index 000000000000..e2e8474530df
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/reactive/index.ts
@@ -0,0 +1,3 @@
+export * from './subscription';
+export * from './types';
+export * from './utilities';
diff --git a/packages/devextreme/js/__internal/core/reactive/subscription.ts b/packages/devextreme/js/__internal/core/reactive/subscription.ts
new file mode 100644
index 000000000000..d3bc303311df
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/reactive/subscription.ts
@@ -0,0 +1,17 @@
+export interface Subscription {
+  unsubscribe: () => void;
+}
+
+export class SubscriptionBag implements Subscription {
+  private readonly subscriptions: Subscription[] = [];
+
+  add(subscription: Subscription): void {
+    this.subscriptions.push(subscription);
+  }
+
+  unsubscribe(): void {
+    this.subscriptions.forEach((subscription) => {
+      subscription.unsubscribe();
+    });
+  }
+}
diff --git a/packages/devextreme/js/__internal/core/reactive/types.ts b/packages/devextreme/js/__internal/core/reactive/types.ts
new file mode 100644
index 000000000000..176361809ac4
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/reactive/types.ts
@@ -0,0 +1,28 @@
+/* eslint-disable spellcheck/spell-checker */
+import type { Subscription } from './subscription';
+
+export interface Subscribable<T> {
+  subscribe: (callback: Callback<T>) => Subscription;
+}
+
+export type MaybeSubscribable<T> = T | Subscribable<T>;
+
+export type MapMaybeSubscribable<T> = { [K in keyof T]: MaybeSubscribable<T[K]> };
+
+export function isSubscribable<T>(value: unknown): value is Subscribable<T> {
+  return typeof value === 'object' && !!value && 'subscribe' in value;
+}
+
+export type Callback<T> = (value: T) => void;
+
+export interface Updatable<T> {
+  update: (value: T) => void;
+  updateFunc: (func: (oldValue: T) => T) => void;
+}
+
+export interface Gettable<T> {
+  unreactive_get: () => T;
+}
+
+export type SubsGets<T> = Subscribable<T> & Gettable<T>;
+export type SubsGetsUpd<T> = Subscribable<T> & Gettable<T> & Updatable<T>;
diff --git a/packages/devextreme/js/__internal/core/reactive/utilities.test.ts b/packages/devextreme/js/__internal/core/reactive/utilities.test.ts
new file mode 100644
index 000000000000..c2faab3d23c4
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/reactive/utilities.test.ts
@@ -0,0 +1,217 @@
+/* eslint-disable spellcheck/spell-checker */
+import {
+  beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+
+import {
+  computed, interruptableComputed, state, toSubscribable,
+} from './utilities';
+
+describe('state', () => {
+  let myState = state('some value');
+
+  beforeEach(() => {
+    myState = state('some value');
+  });
+
+  describe('unreactive_get', () => {
+    it('should return value', () => {
+      expect(myState.unreactive_get()).toBe('some value');
+    });
+
+    it('should return current value if it was updated', () => {
+      myState.update('new value');
+      expect(myState.unreactive_get()).toBe('new value');
+    });
+  });
+
+  describe('subscribe', () => {
+    it('should call callback on initial set', () => {
+      const callback = jest.fn();
+      myState.subscribe(callback);
+
+      expect(callback).toBeCalledTimes(1);
+      expect(callback).toBeCalledWith('some value');
+    });
+
+    it('should call callback on update', () => {
+      const callback = jest.fn();
+      myState.subscribe(callback);
+
+      myState.update('new value');
+
+      expect(callback).toBeCalledTimes(2);
+      expect(callback).toHaveBeenNthCalledWith(1, 'some value');
+      expect(callback).toHaveBeenNthCalledWith(2, 'new value');
+    });
+
+    it('should not trigger update if value is not changed', () => {
+      const callback = jest.fn();
+      myState.subscribe(callback);
+
+      expect(callback).toBeCalledTimes(1);
+
+      myState.update('some value');
+
+      expect(callback).toBeCalledTimes(1);
+    });
+  });
+
+  describe('dispose', () => {
+    it('should prevent all updates', () => {
+      const callback = jest.fn();
+      myState.subscribe(callback);
+
+      expect(callback).toBeCalledTimes(1);
+      expect(callback).toBeCalledWith('some value');
+
+      // @ts-expect-error
+      myState.dispose();
+      myState.update('new value');
+
+      expect(callback).toBeCalledTimes(1);
+    });
+  });
+});
+
+describe('computed', () => {
+  let myState1 = state('some value');
+  let myState2 = state('other value');
+  let myComputed = computed(
+    (v1, v2) => `${v1} ${v2}`,
+    [myState1, myState2],
+  );
+
+  beforeEach(() => {
+    myState1 = state('some value');
+    myState2 = state('other value');
+    myComputed = computed(
+      (v1, v2) => `${v1} ${v2}`,
+      [myState1, myState2],
+    );
+  });
+
+  describe('unreactive_get', () => {
+    it('should calculate initial value', () => {
+      expect(myComputed.unreactive_get()).toBe('some value other value');
+    });
+
+    it('should return current value if it dependency is updated', () => {
+      myState1.update('new value');
+      expect(myComputed.unreactive_get()).toBe('new value other value');
+    });
+  });
+
+  describe('subscribe', () => {
+    it('should call callback on initial set', () => {
+      const callback = jest.fn();
+      myComputed.subscribe(callback);
+
+      expect(callback).toBeCalledTimes(1);
+      expect(callback).toBeCalledWith('some value other value');
+    });
+
+    it('should call callback on update of dependency', () => {
+      const callback = jest.fn();
+      myComputed.subscribe(callback);
+
+      myState1.update('new value');
+
+      expect(callback).toBeCalledTimes(2);
+      expect(callback).toHaveBeenNthCalledWith(1, 'some value other value');
+      expect(callback).toHaveBeenNthCalledWith(2, 'new value other value');
+    });
+  });
+});
+
+describe('interruptableComputed', () => {
+  let myState1 = state('some value');
+  let myState2 = state('other value');
+  let myComputed = interruptableComputed(
+    (v1, v2) => `${v1} ${v2}`,
+    [myState1, myState2],
+  );
+
+  beforeEach(() => {
+    myState1 = state('some value');
+    myState2 = state('other value');
+    myComputed = interruptableComputed(
+      (v1, v2) => `${v1} ${v2}`,
+      [myState1, myState2],
+    );
+  });
+
+  describe('unreactive_get', () => {
+    it('should calculate initial value', () => {
+      expect(myComputed.unreactive_get()).toBe('some value other value');
+    });
+
+    it('should return current value if it was updated', () => {
+      myComputed.update('new value');
+      expect(myComputed.unreactive_get()).toBe('new value');
+    });
+
+    it('should return current value if it dependency is updated', () => {
+      myState1.update('new value');
+      expect(myComputed.unreactive_get()).toBe('new value other value');
+    });
+  });
+
+  describe('subscribe', () => {
+    it('should call callback on initial set', () => {
+      const callback = jest.fn();
+      myComputed.subscribe(callback);
+
+      expect(callback).toBeCalledTimes(1);
+      expect(callback).toBeCalledWith('some value other value');
+    });
+
+    it('should call callback on update', () => {
+      const callback = jest.fn();
+      myComputed.subscribe(callback);
+
+      myComputed.update('new value');
+
+      expect(callback).toBeCalledTimes(2);
+      expect(callback).toHaveBeenNthCalledWith(1, 'some value other value');
+      expect(callback).toHaveBeenNthCalledWith(2, 'new value');
+    });
+
+    it('should call callback on update of dependency', () => {
+      const callback = jest.fn();
+      myComputed.subscribe(callback);
+
+      myState1.update('new value');
+
+      expect(callback).toBeCalledTimes(2);
+      expect(callback).toHaveBeenNthCalledWith(1, 'some value other value');
+      expect(callback).toHaveBeenNthCalledWith(2, 'new value other value');
+    });
+
+    it('should not trigger update if value is not changed', () => {
+      const callback = jest.fn();
+      myComputed.subscribe(callback);
+
+      expect(callback).toBeCalledTimes(1);
+
+      myComputed.update('some value other value');
+
+      expect(callback).toBeCalledTimes(1);
+    });
+  });
+});
+
+describe('toSubscribable', () => {
+  it('should wrap value if it is not subscribable', () => {
+    const callback = jest.fn();
+    toSubscribable('some value').subscribe(callback);
+
+    expect(callback).toBeCalledTimes(1);
+    expect(callback).toBeCalledWith('some value');
+  });
+
+  it('should return value as is if subscribable', () => {
+    const myState = state(1);
+    expect(toSubscribable(myState)).toBe(myState);
+  });
+});
diff --git a/packages/devextreme/js/__internal/core/reactive/utilities.ts b/packages/devextreme/js/__internal/core/reactive/utilities.ts
new file mode 100644
index 000000000000..bb1ba91d29a3
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/reactive/utilities.ts
@@ -0,0 +1,222 @@
+/* eslint-disable @typescript-eslint/no-invalid-void-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable spellcheck/spell-checker */
+import { InterruptableComputed, Observable } from './core';
+import { type Subscription, SubscriptionBag } from './subscription';
+import type {
+  Gettable, MapMaybeSubscribable, MaybeSubscribable, Subscribable, SubsGets, SubsGetsUpd, Updatable,
+} from './types';
+import { isSubscribable } from './types';
+
+/**
+ * Creates new reactive state atom.
+ * @example
+ * ```
+ * const myState = state(0);
+ * myState.update(1);
+ * ```
+ * @param value initial value of state
+ */
+export function state<T>(value: T): Subscribable<T> & Updatable<T> & Gettable<T> {
+  return new Observable<T>(value);
+}
+
+/**
+ * Creates computed atom based on other atoms.
+ * @example
+ * ```
+ * const myState = state(0);
+ * const myComputed = computed(
+ *  (value) => value + 1,
+ *  [myState]
+ * );
+ * ```
+ * @param compute computation func
+ * @param deps dependency atoms
+ */
+export function computed<T1, TValue>(
+  compute: (t1: T1) => TValue,
+  deps: [Subscribable<T1>]
+): SubsGets<TValue>;
+export function computed<T1, T2, TValue>(
+  compute: (t1: T1, t2: T2) => TValue,
+  deps: [Subscribable<T1>, Subscribable<T2>]
+): SubsGets<TValue>;
+export function computed<T1, T2, T3, TValue>(
+  compute: (t1: T1, t2: T2, t3: T3,) => TValue,
+  deps: [Subscribable<T1>, Subscribable<T2>, Subscribable<T3>]
+): SubsGets<TValue>;
+export function computed<T1, T2, T3, T4, TValue>(
+  compute: (t1: T1, t2: T2, t3: T3, t4: T4) => TValue,
+  deps: [Subscribable<T1>, Subscribable<T2>, Subscribable<T3>, Subscribable<T4>]
+): SubsGets<TValue>;
+export function computed<T1, T2, T3, T4, T5, TValue>(
+  compute: (t1: T1, t2: T2, t3: T3, t4: T4, t5: T5) => TValue,
+  deps: [Subscribable<T1>, Subscribable<T2>, Subscribable<T3>, Subscribable<T4>, Subscribable<T5>]
+): SubsGets<TValue>;
+export function computed<T1, T2, T3, T4, T5, T6, TValue>(
+  compute: (t1: T1, t2: T2, t3: T3, t4: T4, t5: T5, t6: T6) => TValue,
+  // eslint-disable-next-line @stylistic/max-len
+  deps: [Subscribable<T1>, Subscribable<T2>, Subscribable<T3>, Subscribable<T4>, Subscribable<T5>, Subscribable<T6>]
+): SubsGets<TValue>;
+export function computed<TArgs extends readonly any[], TValue>(
+  compute: (...args: TArgs) => TValue,
+  deps: { [I in keyof TArgs]: Subscribable<TArgs[I]> },
+): SubsGets<TValue>;
+export function computed<TArgs extends readonly any[], TValue>(
+  compute: (...args: TArgs) => TValue,
+  deps: { [I in keyof TArgs]: Subscribable<TArgs[I]> },
+): SubsGets<TValue> {
+  return new InterruptableComputed(compute, deps);
+}
+
+/**
+ * Computed, with ability to override value using `.update(...)` method.
+ * @see {@link computed}
+ */
+export function interruptableComputed<T1, TValue>(
+  compute: (t1: T1) => TValue,
+  deps: [Subscribable<T1>]
+): SubsGetsUpd<TValue>;
+export function interruptableComputed<T1, T2, TValue>(
+  compute: (t1: T1, t2: T2) => TValue,
+  deps: [Subscribable<T1>, Subscribable<T2>]
+): SubsGetsUpd<TValue>;
+export function interruptableComputed<T1, T2, T3, TValue>(
+  compute: (t1: T1, t2: T2, t3: T3,) => TValue,
+  deps: [Subscribable<T1>, Subscribable<T2>, Subscribable<T3>]
+): SubsGetsUpd<TValue>;
+export function interruptableComputed<T1, T2, T3, T4, TValue>(
+  compute: (t1: T1, t2: T2, t3: T3, t4: T4) => TValue,
+  deps: [Subscribable<T1>, Subscribable<T2>, Subscribable<T3>, Subscribable<T4>]
+): SubsGetsUpd<TValue>;
+export function interruptableComputed<TArgs extends readonly any[], TValue>(
+  compute: (...args: TArgs) => TValue,
+  deps: { [I in keyof TArgs]: Subscribable<TArgs[I]> },
+): SubsGetsUpd<TValue> {
+  return new InterruptableComputed(compute, deps);
+}
+
+/**
+ * Allows to subscribe function with some side effects to changes of dependency atoms.
+ * @param callback function which is executed each time any dependency is updated
+ * @param deps dependencies
+ */
+export function effect<T1>(
+  callback: (t1: T1) => ((() => void) | void),
+  deps: [Subscribable<T1>]
+): Subscription;
+export function effect<T1, T2>(
+  callback: (t1: T1, t2: T2) => ((() => void) | void),
+  deps: [Subscribable<T1>, Subscribable<T2>]
+): Subscription;
+export function effect<T1, T2, T3>(
+  callback: (t1: T1, t2: T2, t3: T3,) => ((() => void) | void),
+  deps: [Subscribable<T1>, Subscribable<T2>, Subscribable<T3>]
+): Subscription;
+export function effect<T1, T2, T3, T4>(
+  callback: (t1: T1, t2: T2, t3: T3, t4: T4) => ((() => void) | void),
+  deps: [Subscribable<T1>, Subscribable<T2>, Subscribable<T3>, Subscribable<T4>]
+): Subscription;
+export function effect<T1, T2, T3, T4, T5>(
+  callback: (t1: T1, t2: T2, t3: T3, t4: T4, t5: T5) => ((() => void) | void),
+  deps: [Subscribable<T1>, Subscribable<T2>, Subscribable<T3>, Subscribable<T4>, Subscribable<T5>]
+): Subscription;
+export function effect<T1, T2, T3, T4, T5, T6>(
+  callback: (t1: T1, t2: T2, t3: T3, t4: T4, t5: T5, t6: T6) => ((() => void) | void),
+  deps: [
+    Subscribable<T1>,
+    Subscribable<T2>,
+    Subscribable<T3>,
+    Subscribable<T4>,
+    Subscribable<T5>,
+    Subscribable<T6>,
+  ]
+): Subscription;
+export function effect<TArgs extends readonly any[]>(
+  callback: (...args: TArgs) => ((() => void) | void),
+  deps: { [I in keyof TArgs]: Subscribable<TArgs[I]> },
+): Subscription {
+  const depValues: [...TArgs] = deps.map(() => undefined) as any;
+  const depInitialized = deps.map(() => false);
+  let isInitialized = false;
+
+  const subscription = new SubscriptionBag();
+
+  deps.forEach((dep, i) => {
+    subscription.add(dep.subscribe((v) => {
+      depValues[i] = v;
+
+      if (!isInitialized) {
+        depInitialized[i] = true;
+        isInitialized = depInitialized.every((e) => e);
+      }
+
+      if (isInitialized) {
+        callback(...depValues);
+      }
+    }));
+  });
+
+  return subscription;
+}
+
+export function toSubscribable<T>(v: MaybeSubscribable<T>): Subscribable<T> {
+  if (isSubscribable(v)) {
+    return v;
+  }
+
+  return new Observable(v);
+}
+
+/**
+ * Condition atom, basing whether `cond` is true or false,
+ * returns value of `ifTrue` or `ifFalse` param.
+ * @param cond
+ * @param ifTrue
+ * @param ifFalse
+ */
+export function iif<T>(
+  cond: MaybeSubscribable<boolean>,
+  ifTrue: MaybeSubscribable<T>,
+  ifFalse: MaybeSubscribable<T>,
+): Subscribable<T> {
+  const obs = state<T>(undefined as any);
+  // eslint-disable-next-line @typescript-eslint/init-declarations
+  let subscription: Subscription | undefined;
+
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  toSubscribable(cond).subscribe((cond) => {
+    subscription?.unsubscribe();
+    const newSource = cond ? ifTrue : ifFalse;
+    subscription = toSubscribable(newSource).subscribe(obs.update.bind(obs));
+  });
+
+  return obs;
+}
+
+/**
+ * Combines object of Subscribables to Subscribable of object.
+ * @example
+ * ```
+ * const myValueA = state(0);
+ * const myValueB = state(1);
+ * const obj = combine({
+ *  myValueA, myValueB
+ * });
+ *
+ * obj.unreactive_get(); // {myValueA: 0, myValueB: 1}
+ * @returns
+ */
+export function combined<T>(
+  obj: MapMaybeSubscribable<T>,
+): SubsGets<T> {
+  const entries = Object.entries(obj) as any as [string, Subscribable<unknown>][];
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return computed(
+    (...args) => Object.fromEntries(
+      args.map((v, i) => [entries[i][0], v]),
+    ),
+    entries.map(([, v]) => toSubscribable(v)),
+  ) as any;
+}
diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts b/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts
index c4682b9c663d..57b5dd0307ec 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts
@@ -2,12 +2,12 @@
 import messageLocalization from '@js/common/core/localization/message';
 import $ from '@js/core/renderer';
 import { getPathParts } from '@js/core/utils/data';
-import { extend } from '@js/core/utils/extend';
-import { isDefined, isString } from '@js/core/utils/type';
+import { isDefined } from '@js/core/utils/type';
 import type { Properties as ToolbarProperties } from '@js/ui/toolbar';
 import Toolbar from '@js/ui/toolbar';
 import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
 import type { HeaderFilterController } from '@ts/grids/grid_core/header_filter/m_header_filter';
+import { normalizeToolbarItems } from '@ts/grids/new/grid_core/toolbar/utils';
 
 import type { ModuleType } from '../m_types';
 import { ColumnsView } from '../views/m_columns_view';
@@ -72,7 +72,11 @@ export class HeaderPanel extends ColumnsView {
     };
 
     const userItems = userToolbarOptions?.items;
-    options.toolbarOptions.items = this._normalizeToolbarItems(options.toolbarOptions.items, userItems);
+    options.toolbarOptions.items = normalizeToolbarItems(
+      options.toolbarOptions.items,
+      userItems,
+      DEFAULT_TOOLBAR_ITEM_NAMES,
+    );
 
     this.executeAction('onToolbarPreparing', options);
 
@@ -84,51 +88,6 @@ export class HeaderPanel extends ColumnsView {
     return options.toolbarOptions;
   }
 
-  private _normalizeToolbarItems(defaultItems, userItems) {
-    defaultItems.forEach((button) => {
-      if (!DEFAULT_TOOLBAR_ITEM_NAMES.includes(button.name)) {
-        throw new Error(`Default toolbar item '${button.name}' is not added to DEFAULT_TOOLBAR_ITEM_NAMES`);
-      }
-    });
-
-    const defaultProps = {
-      location: 'after',
-    };
-
-    const isArray = Array.isArray(userItems);
-
-    if (!isDefined(userItems)) {
-      return defaultItems;
-    }
-
-    if (!isArray) {
-      userItems = [userItems];
-    }
-
-    const defaultButtonsByNames = {};
-    defaultItems.forEach((button) => {
-      defaultButtonsByNames[button.name] = button;
-    });
-
-    const normalizedItems = userItems.map((button) => {
-      if (isString(button)) {
-        button = { name: button };
-      }
-
-      if (isDefined(button.name)) {
-        if (isDefined(defaultButtonsByNames[button.name])) {
-          button = extend(true, {}, defaultButtonsByNames[button.name], button);
-        } else if (DEFAULT_TOOLBAR_ITEM_NAMES.includes(button.name)) {
-          button = { ...button, visible: false };
-        }
-      }
-
-      return extend(true, {}, defaultProps, button);
-    });
-
-    return isArray ? normalizedItems : normalizedItems[0];
-  }
-
   protected _renderCore() {
     if (!this._toolbar) {
       const $headerPanel = this.element();
@@ -217,7 +176,11 @@ export class HeaderPanel extends ColumnsView {
           this._invalidate();
         } else if (parts.length === 3) {
           // `toolbar.items[i]` case
-          const normalizedItem = this._normalizeToolbarItems(this._getToolbarItems(), args.value);
+          const normalizedItem = normalizeToolbarItems(
+            this._getToolbarItems(),
+            [args.value],
+            DEFAULT_TOOLBAR_ITEM_NAMES,
+          )[0];
           this._toolbar?.option(optionName, normalizedItem);
         } else if (parts.length >= 4) {
           // `toolbar.items[i].prop` case
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap b/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap
new file mode 100644
index 000000000000..c27b9f04d5ae
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`common initial render should be successfull 1`] = `
+<div
+  class="dx-widget dx-cardview"
+>
+  
+  <div
+    class="dx-cardview-headers"
+  >
+    <div
+      class="dx-scrollable dx-visibility-change-handler dx-scrollable-horizontal dx-scrollable-simulated"
+    >
+      <div
+        class="dx-scrollable-wrapper"
+      >
+        <div
+          class="dx-scrollable-container"
+          tabindex="0"
+        >
+          <div
+            class="dx-scrollable-content"
+            style="left: 0px; top: 0px; transform: none;"
+          />
+          <div
+            class="dx-scrollable-scrollbar dx-widget dx-scrollbar-horizontal"
+            style="display: none;"
+          >
+            <div
+              class="dx-scrollable-scroll dx-state-invisible"
+            >
+              <div
+                class="dx-scrollable-scroll-content"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="dx-gridcore-contentview"
+  >
+    <div
+      class="dx-overlay dx-widget dx-state-invisible dx-visibility-change-handler dx-loadpanel"
+    >
+      <div
+        class="dx-overlay-content"
+        style="width: 222px; height: 90px;"
+      />
+    </div>
+    <div
+      class="dx-scrollable dx-visibility-change-handler dx-scrollable-both dx-scrollable-simulated"
+    >
+      <div
+        class="dx-scrollable-wrapper"
+      >
+        <div
+          class="dx-scrollable-container"
+          tabindex="0"
+        >
+          <div
+            class="dx-scrollable-content"
+            style="left: 0px; top: 0px; transform: none;"
+          />
+          <div
+            class="dx-scrollable-scrollbar dx-widget dx-scrollbar-horizontal"
+          >
+            <div
+              class="dx-scrollable-scroll dx-state-invisible"
+              style="width: 15px; transform: translate(0px, 0px);"
+            >
+              <div
+                class="dx-scrollable-scroll-content"
+              />
+            </div>
+          </div>
+          <div
+            class="dx-scrollable-scrollbar dx-widget dx-scrollbar-vertical"
+          >
+            <div
+              class="dx-scrollable-scroll dx-state-invisible"
+              style="height: 15px; transform: translate(0px, 0px);"
+            >
+              <div
+                class="dx-scrollable-scroll-content"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="dx-gridcore-error-row"
+    />
+  </div>
+  <div>
+    
+  </div>
+</div>
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/card.test.tsx.snap b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/card.test.tsx.snap
new file mode 100644
index 000000000000..ffaddb53d48e
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/card.test.tsx.snap
@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rendering should be rendered correctly 1`] = `
+<div>
+  <div
+    class="dx-cardview-card"
+    tabindex="0"
+  >
+    <div
+      class="dx-cardview-card-header"
+    >
+      <div
+        class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection"
+        role="toolbar"
+      >
+        <div
+          class="dx-toolbar-items-container"
+        >
+          <div
+            class="dx-toolbar-before"
+            role="presentation"
+          >
+            <div
+              class="dx-item dx-toolbar-item dx-toolbar-button"
+            >
+              <div
+                class="dx-item-content dx-toolbar-item-content"
+              >
+                <div
+                  aria-checked="false"
+                  aria-invalid="false"
+                  aria-readonly="false"
+                  class="dx-widget dx-checkbox"
+                  role="checkbox"
+                  tabindex="0"
+                >
+                  <input
+                    type="hidden"
+                    value="false"
+                  />
+                  <div
+                    class="dx-checkbox-container"
+                  >
+                    <span
+                      class="dx-checkbox-icon"
+                    />
+                    
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="dx-item dx-toolbar-item dx-toolbar-label"
+            >
+              <div
+                class="dx-item-content dx-toolbar-item-content"
+              >
+                <div>
+                  Card Header
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="dx-toolbar-center"
+            role="presentation"
+          />
+          <div
+            class="dx-toolbar-after"
+            role="presentation"
+          >
+            <div
+              class="dx-item dx-toolbar-item dx-toolbar-button"
+            >
+              <div
+                class="dx-item-content dx-toolbar-item-content"
+              >
+                <div
+                  aria-label="edit"
+                  class="dx-widget dx-button dx-button-mode-text dx-button-normal dx-button-has-icon"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="dx-button-content"
+                  >
+                    <i
+                      class="dx-icon dx-icon-edit"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="dx-item dx-toolbar-item dx-toolbar-button"
+            >
+              <div
+                class="dx-item-content dx-toolbar-item-content"
+              >
+                <div
+                  aria-label="trash"
+                  class="dx-widget dx-button dx-button-mode-text dx-button-normal dx-button-has-icon"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="dx-button-content"
+                  >
+                    <i
+                      class="dx-icon dx-icon-trash"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="dx-card-cover"
+    >
+      <img
+        alt="Card Cover"
+        class="dx-card-cover-image"
+        src="https://www.devexpress.com/support/demos/i/demo-thumbs/aspnetcore-grid.png"
+      />
+    </div>
+    <div
+      class="dx-cardview-card-content"
+    >
+      <div
+        class="dx-cardview-field"
+        tabindex="0"
+      >
+        <span
+          class="dx-cardview-field-name"
+        >
+          Field
+          :
+        </span>
+        <span
+          class="dx-cardview-field-value"
+        >
+          devextreme
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.events.test.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.events.test.tsx
new file mode 100644
index 000000000000..d91b4b2c49ae
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.events.test.tsx
@@ -0,0 +1,163 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+
+/* eslint-disable @typescript-eslint/init-declarations */
+
+import { describe, expect, it } from '@jest/globals';
+import { render } from 'inferno';
+
+import { Card } from './card';
+
+const mockOnDblClick = {
+  called: false,
+  call() {
+    this.called = true;
+  },
+};
+
+const mockOnClick = {
+  called: false,
+  call() {
+    this.called = true;
+  },
+};
+
+const props = {
+  row: {
+    cells: [
+      {
+        column: {
+          dataField: 'Name',
+          name: 'Field',
+        },
+        value: 'devextreme',
+        text: 'devextreme',
+      },
+    ],
+    key: 0,
+  },
+  toolbar: [
+    {
+      location: 'before',
+      widget: 'dxCheckBox',
+    },
+    {
+      location: 'before',
+      text: 'Card Header',
+    },
+    {
+      location: 'after',
+      widget: 'dxButton',
+      options: {
+        icon: 'edit',
+        stylingMode: 'text',
+      },
+    },
+    {
+      location: 'after',
+      widget: 'dxButton',
+      options: {
+        icon: 'trash',
+        stylingMode: 'text',
+      },
+    },
+  ],
+  cover: {
+    src: 'https://www.devexpress.com/support/demos/i/demo-thumbs/aspnetcore-grid.png',
+    alt: 'Card Cover',
+    className: 'card-cover',
+  },
+  hoverStateEnabled: true,
+  maxWidth: 300,
+  width: 300,
+  minWidth: 300,
+  onDblClick: mockOnDblClick.call(),
+  onClick: mockOnClick.call(),
+};
+
+const CLASSES = {
+  card: 'dx-cardview-card',
+};
+
+describe('Events', () => {
+  let container: HTMLDivElement;
+  // @ts-expect-error
+  beforeEach(() => {
+    container = document.createElement('div');
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+  });
+
+  it('should trigger onClick event', () => {
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+
+    const cardElement = container.querySelector(`.${CLASSES.card}`);
+    cardElement?.dispatchEvent(new MouseEvent('click'));
+
+    expect(mockOnClick.called).toBe(true);
+  });
+
+  it('should trigger onDblClick event', () => {
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+
+    const cardElement = container.querySelector(`.${CLASSES.card}`);
+    cardElement?.dispatchEvent(new MouseEvent('dblclick'));
+
+    expect(mockOnDblClick.called).toBe(true);
+  });
+
+  it('should trigger onHoverChanged event on mouse enter', () => {
+    const mockHover: { called: boolean; fn: ({ isHovered }: { isHovered: boolean }) => void } = {
+      called: false,
+      fn: ({ isHovered }: { isHovered: boolean }) => {
+        mockHover.called = true;
+        expect(isHovered).toBe(true);
+      },
+    };
+
+    const newProps = { ...props, hoverStateEnabled: true, onHoverChanged: mockHover.fn };
+    // @ts-expect-error
+    render(<Card {...newProps} />, container);
+
+    const cardElement = container.querySelector(`.${CLASSES.card}`);
+    cardElement?.dispatchEvent(new MouseEvent('mouseenter'));
+
+    expect(mockHover.called).toBe(true);
+  });
+
+  it('should trigger onHoverChanged event on mouse leave', () => {
+    const mockHover: { called: boolean; fn: ({ isHovered }: { isHovered: boolean }) => void } = {
+      called: false,
+      fn: ({ isHovered }: { isHovered: boolean }) => {
+        mockHover.called = true;
+        expect(isHovered).toBe(false);
+      },
+    };
+
+    const newProps = { ...props, hoverStateEnabled: true, onHoverChanged: mockHover.fn };
+    // @ts-expect-error
+    render(<Card {...newProps} />, container);
+
+    const cardElement = container.querySelector(`.${CLASSES.card}`);
+    cardElement?.dispatchEvent(new MouseEvent('mouseleave'));
+
+    expect(mockHover.called).toBe(true);
+  });
+
+  it('should handle hoverStateEnabled prop correctly', () => {
+    const cardElement = container.querySelector('.dx-cardview-card');
+    cardElement?.dispatchEvent(new MouseEvent('mouseenter'));
+
+    const classList = cardElement?.getAttribute('class') || '';
+    expect(classList).toContain('dx-cardview-card-hover');
+  });
+
+  it('should render field template correctly', () => {
+    const fieldName = container.querySelector('.dx-cardview-field-name');
+    const fieldValue = container.querySelector('.dx-cardview-field-value');
+
+    expect(fieldName?.textContent).toBe('Field:');
+    expect(fieldValue?.textContent).toBe('devextreme');
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.test.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.test.tsx
new file mode 100644
index 000000000000..3b060f83f28d
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.test.tsx
@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { describe, expect, it } from '@jest/globals';
+import { compileGetter } from '@js/common/data';
+import { render } from 'inferno';
+
+import { Card } from './card';
+
+const props = {
+  row: {
+    cells: [
+      {
+        column: {
+          dataField: 'Name',
+          name: 'Field',
+        },
+        value: 'devextreme',
+        text: 'devextreme',
+      },
+    ],
+    key: 0,
+    data: {
+      Field: 'Name',
+      img: 'https://www.devexpress.com/support/demos/i/demo-thumbs/aspnetcore-grid.png',
+      alt: 'Card Cover',
+    },
+  },
+  toolbar: [
+    {
+      location: 'before',
+      widget: 'dxCheckBox',
+    },
+    {
+      location: 'before',
+      text: 'Card Header',
+    },
+    {
+      location: 'after',
+      widget: 'dxButton',
+      options: {
+        icon: 'edit',
+        stylingMode: 'text',
+      },
+    },
+    {
+      location: 'after',
+      widget: 'dxButton',
+      options: {
+        icon: 'trash',
+        stylingMode: 'text',
+      },
+    },
+  ],
+  cover: {
+    imageExpr: compileGetter('img'),
+    altExpr: compileGetter('alt'),
+  },
+};
+
+describe('Rendering', () => {
+  it('should be rendered correctly', () => {
+    const container = document.createElement('div');
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render content correctly', () => {
+    const container = document.createElement('div');
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+
+    const fieldValue = container.querySelector('.dx-cardview-field-value');
+    expect(fieldValue?.textContent).toEqual('devextreme');
+  });
+});
+
+describe('Card Header', () => {
+  it('should render the card header components correctly', () => {
+    const container = document.createElement('div');
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+
+    const cardHeaderText = container.querySelector('.dx-toolbar-label .dx-toolbar-item-content > div');
+    expect(cardHeaderText?.textContent).toBe('Card Header');
+
+    const checkbox = container.querySelectorAll('.dx-checkbox');
+    expect(checkbox).toHaveLength(1);
+
+    const editButton = container.querySelectorAll('.dx-icon-edit');
+    expect(editButton).toHaveLength(1);
+
+    const trashButton = container.querySelectorAll('.dx-icon-trash');
+    expect(trashButton).toHaveLength(1);
+  });
+});
+
+describe('Image', () => {
+  it('should render the image correctly', () => {
+    const container = document.createElement('div');
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+
+    const image = container.querySelector('img');
+    expect(image).not.toBeNull();
+  });
+});
+
+describe('Field Template', () => {
+  it('should render field template correctly', () => {
+    const container = document.createElement('div');
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+
+    const fieldName = container.querySelector('.dx-cardview-field-name');
+    const fieldValue = container.querySelector('.dx-cardview-field-value');
+
+    expect(fieldName?.textContent).toBe('Field:');
+    expect(fieldValue?.textContent).toBe('devextreme');
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.tsx
new file mode 100644
index 000000000000..2caaae89e1ae
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.tsx
@@ -0,0 +1,152 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+
+import type { DataRow } from '@ts/grids/new/grid_core/columns_controller/types';
+import type { DataObject } from '@ts/grids/new/grid_core/data_controller/types';
+import type { InfernoNode, RefObject } from 'inferno';
+import { Component, createRef } from 'inferno';
+
+import { Cover } from './cover';
+import { Field } from './field';
+import type { CardHeaderItem } from './header';
+import { CardHeader } from './header';
+
+export const CLASSES = {
+  card: 'dx-cardview-card',
+  cardHover: 'dx-cardview-card-hoverable',
+  content: 'dx-cardview-card-content',
+};
+
+export interface CardClickEvent {
+  event: MouseEvent;
+  row: DataRow;
+}
+
+export interface CardHoverEvent {
+  isHovered: boolean;
+  row: DataRow;
+}
+
+export interface CardPreparedEvent {
+  instance: Card;
+}
+
+export interface CardProps {
+  row: DataRow;
+
+  cover?: {
+    imageExpr?: (data: DataObject) => string;
+
+    altExpr?: (data: DataObject) => string;
+  };
+
+  elementRef?: RefObject<HTMLDivElement>;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fieldTemplate?: any;
+
+  hoverStateEnabled?: boolean;
+
+  toolbar?: CardHeaderItem[];
+
+  template?: (row: DataRow) => JSX.Element;
+
+  onClick?: (e: CardClickEvent) => void;
+
+  onDblClick?: (e: CardClickEvent) => void;
+
+  onHoverChanged?: (e: CardHoverEvent) => void;
+
+  onPrepared?: (e: CardPreparedEvent) => void;
+}
+
+export class Card extends Component<CardProps> {
+  private containerRef = createRef<HTMLDivElement>();
+
+  private fieldRefs: RefObject<HTMLDivElement>[] = [];
+
+  render(): InfernoNode {
+    if (this.props.elementRef) {
+      this.containerRef = this.props.elementRef;
+    }
+
+    this.fieldRefs = new Array(this.props.row.cells.length).fill(undefined).map(() => createRef());
+
+    const {
+      fieldTemplate: FieldTemplate = Field,
+      hoverStateEnabled,
+      cover,
+    } = this.props;
+
+    const className = [
+      CLASSES.card,
+      hoverStateEnabled ? CLASSES.cardHover : '',
+    ].filter(Boolean).join(' ');
+
+    // @ts-expect-error
+    const imageSrc = cover?.imageExpr?.(this.props.row.data);
+    // @ts-expect-error
+    const alt = cover?.altExpr?.(this.props.row.data);
+
+    return (
+      <div
+        className={className}
+        tabIndex={0}
+        ref={this.props.elementRef}
+        onClick={this.handleClick}
+        onDblClick={this.handleDoubleClick}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        <CardHeader
+          items={this.props.toolbar || []}
+        />
+        {imageSrc && (
+          <Cover
+            imageSrc={imageSrc}
+            alt={alt}
+          />
+        )}
+        <div className={CLASSES.content}>
+          {this.props.row.cells.map((cell, index) => (
+            <FieldTemplate
+              elementRef={this.fieldRefs[index]}
+
+              alignment={cell.column.alignment}
+              title={cell.column.caption || cell.column.name}
+              value={cell.text}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  componentDidMount(): void {
+    const { onPrepared } = this.props;
+    if (onPrepared) {
+      onPrepared({ instance: this });
+    }
+  }
+
+  handleMouseEnter = (): void => {
+    const { onHoverChanged, row } = this.props;
+
+    onHoverChanged?.({ isHovered: true, row });
+  };
+
+  handleMouseLeave = (): void => {
+    const { onHoverChanged, row } = this.props;
+
+    onHoverChanged?.({ isHovered: false, row });
+  };
+
+  handleClick = (event: MouseEvent): void => {
+    const { onClick, row } = this.props;
+    onClick?.({ event, row });
+  };
+
+  handleDoubleClick = (event: MouseEvent): void => {
+    const { onDblClick, row } = this.props;
+    onDblClick?.({ event, row });
+  };
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.test.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.test.tsx
new file mode 100644
index 000000000000..a080c3238937
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.test.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { describe, expect, it } from '@jest/globals';
+import { render } from 'inferno';
+
+import { Cover } from './cover';
+
+describe('Cover', () => {
+  it('should render the image correctly', () => {
+    const container = document.createElement('div');
+    const props = {
+      imageSrc: 'https://www.devexpress.com/support/demos/i/demo-thumbs/aspnetcore-grid.png',
+      alt: 'Card Cover',
+      className: 'cover-image',
+    };
+
+    render(<Cover {...props} />, container);
+
+    const image = container.querySelector('img');
+    expect(image).not.toBeNull();
+    expect(image?.src).toBe(props.imageSrc);
+    expect(image?.alt).toBe(props.alt);
+    expect(image?.className).toContain(props.className);
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.tsx
new file mode 100644
index 000000000000..d191bdaace20
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/cover.tsx
@@ -0,0 +1,39 @@
+import { Component } from 'inferno';
+
+const CLASSES = {
+  cover: 'dx-card-cover',
+  image: 'dx-card-cover-image',
+};
+
+export interface CoverProps {
+  imageSrc?: string;
+  alt?: string;
+  template?: (src: string, alt: string | undefined, className: string) => JSX.Element;
+}
+
+export class Cover extends Component<CoverProps> {
+  render(): JSX.Element {
+    const {
+      imageSrc, alt, template,
+    } = this.props;
+    const src = imageSrc;
+
+    if (!src) {
+      // @ts-expect-error
+      return null;
+    }
+
+    if (template) {
+      return template(src, alt, CLASSES.image);
+    }
+    return (
+      <div className={CLASSES.cover}>
+        <img
+          src={src}
+          alt={alt}
+          className={CLASSES.image}
+        />
+      </div>
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/field.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/field.tsx
new file mode 100644
index 000000000000..f775fef55388
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/field.tsx
@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+import type { RefObject } from 'inferno';
+import { Component, createRef } from 'inferno';
+
+export const CLASSES = {
+  field: 'dx-cardview-field',
+  fieldName: 'dx-cardview-field-name',
+  fieldValue: 'dx-cardview-field-value',
+  overflowHint: 'dx-cardview-overflow-hint',
+};
+
+export interface FieldProps {
+  title: string | undefined;
+  value: unknown;
+  alignment: 'right' | 'center' | 'left';
+  wordWrapEnabled?: boolean;
+  cellHintEnabled?: boolean;
+  elementRef?: RefObject<HTMLDivElement>;
+  captionTemplate?: (title: string) => JSX.Element;
+  valueTemplate?: (value: unknown) => JSX.Element;
+
+  onClick?: (e: MouseEvent) => void;
+  onDblClick?: (e: MouseEvent) => void;
+  onHoverChanged?: (hovered: boolean) => void;
+  onPrepared?: (element: HTMLElement) => void;
+}
+
+export class Field extends Component<FieldProps> {
+  private readonly containerRef: RefObject<HTMLDivElement>;
+
+  constructor(props: FieldProps) {
+    super(props);
+    this.containerRef = this.props.elementRef || createRef<HTMLDivElement>();
+  }
+
+  componentDidMount(): void {
+    this.props.onPrepared?.(this.containerRef.current!);
+  }
+
+  renderCaption(): JSX.Element {
+    const { title, captionTemplate } = this.props;
+    if (captionTemplate && title) {
+      return captionTemplate(title);
+    }
+    return <span className={CLASSES.fieldName}>{title}:</span>;
+  }
+
+  renderValue(): JSX.Element {
+    const {
+      value, valueTemplate, wordWrapEnabled, alignment, cellHintEnabled,
+    } = this.props;
+
+    if (valueTemplate && value) {
+      return valueTemplate(value);
+    }
+
+    const valueStyle = {
+      textAlign: alignment,
+      whiteSpace: wordWrapEnabled ? 'normal' : 'nowrap',
+    };
+
+    return (
+      <span
+        className={CLASSES.fieldValue}
+        style={valueStyle}
+        title={cellHintEnabled && typeof value === 'string' ? value : undefined}
+      >
+        {value}
+      </span>
+    );
+  }
+
+  render(): JSX.Element {
+    return (
+      <div
+        onMouseEnter={(): void => this.props.onHoverChanged?.(true)}
+        onMouseLeave={(): void => this.props.onHoverChanged?.(false)}
+        onClick={this.props.onClick}
+        onDblClick={this.props.onDblClick}
+        ref={this.containerRef}
+        tabIndex={0}
+        className={CLASSES.field}
+      >
+        {this.renderCaption()}
+        {this.renderValue()}
+      </div>
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/header.test.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/header.test.tsx
new file mode 100644
index 000000000000..7b11faed033a
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/header.test.tsx
@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-extraneous-dependencies */
+import { describe, expect, it } from '@jest/globals';
+import { render } from 'inferno';
+
+import { CardHeader, CLASSES } from './header';
+
+describe('CardHeader', () => {
+  it('should render with default properties', () => {
+    const container = document.createElement('div');
+    render(<CardHeader visible items={[{ location: 'before', text: 'Test Header' }]} />, container);
+
+    // Verify the rendered element
+    const header = container.querySelector(`.${CLASSES.cardHeader}`);
+    expect(header).not.toBeNull();
+
+    // Verify the item text
+    const headerItem = container.querySelector('.dx-toolbar-item');
+    expect(headerItem).not.toBeNull();
+    expect(headerItem?.textContent).toBe('Test Header');
+  });
+
+  it('should not render when visible is false', () => {
+    const container = document.createElement('div');
+    render(<CardHeader visible={false} />, container);
+
+    // Verify the header is not rendered
+    const header = container.querySelector(CLASSES.cardHeader);
+    expect(header).toBeNull();
+  });
+
+  it('should render with caption from captionExpr', () => {
+    const container = document.createElement('div');
+    render(
+      <CardHeader
+        visible
+        captionExpr="name"
+        // @ts-expect-error
+        row={{ name: 'Card Title' }}
+      />,
+      container,
+    );
+
+    // Verify the caption text
+    const captionItem = container.querySelector('.dx-toolbar-item');
+    expect(captionItem).not.toBeNull();
+    expect(captionItem?.textContent).toBe('Card Title');
+  });
+
+  it('should render with a custom template', () => {
+    const container = document.createElement('div');
+    const CustomTemplate = (items: any[]) => (
+      <div className="custom-header">{items[0].text}</div>
+    );
+
+    render(
+      <CardHeader
+        visible
+        template={CustomTemplate}
+        items={[{ location: 'before', text: 'Custom Header' }]}
+      />,
+      container,
+    );
+
+    // Verify the custom template
+    const customHeader = container.querySelector('.custom-header');
+    expect(customHeader).not.toBeNull();
+    expect(customHeader?.textContent).toBe('Custom Header');
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/header.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/header.tsx
new file mode 100644
index 000000000000..7cce7a366b11
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/header.tsx
@@ -0,0 +1,56 @@
+import type { dxToolbarItem } from '@js/ui/toolbar';
+import type { DataRow } from '@ts/grids/new/grid_core/columns_controller/types';
+import { Toolbar } from '@ts/grids/new/grid_core/inferno_wrappers/toolbar';
+import { Component } from 'inferno';
+
+export const CLASSES = {
+  cardHeader: 'dx-cardview-card-header',
+};
+
+export interface CardHeaderItem {
+  location: 'before' | 'after';
+  widget?: string;
+  text?: string;
+  options?: dxToolbarItem;
+}
+
+export interface CardHeaderProps {
+  items?: CardHeaderItem[];
+  visible?: boolean;
+  captionExpr?: string;
+  template?: (items: CardHeaderItem[]) => JSX.Element;
+  row?: DataRow;
+}
+
+export class CardHeader extends Component<CardHeaderProps> {
+  render(): JSX.Element | null {
+    const {
+      visible = true,
+      items = [],
+      captionExpr,
+      template,
+      row,
+    } = this.props;
+
+    if (!visible) {
+      return null;
+    }
+
+    const captionItem: CardHeaderItem | null = captionExpr && row?.[captionExpr]
+      ? { location: 'before', text: row[captionExpr] }
+      : null;
+
+    const finalItems = captionItem ? [captionItem, ...items] : items;
+
+    if (template) {
+      return template(finalItems);
+    }
+
+    return (
+      <div className={CLASSES.cardHeader}>
+        {/* @ts-expect-error */}
+        <Toolbar items={finalItems} />
+      </div>
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/content.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/content.tsx
new file mode 100644
index 000000000000..016acae38842
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/content.tsx
@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { DataRow } from '@ts/grids/new/grid_core/columns_controller/types';
+import type { RefObject } from 'inferno';
+import { Component, createRef } from 'inferno';
+
+import { Card } from './card/card';
+import type { CardHeaderItem } from './card/header';
+
+export interface ContentProps {
+  items: DataRow[];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fieldTemplate?: any;
+
+  onRowHeightChange?: (value: number) => void;
+
+  cardsPerRow?: number;
+
+  cardProps?: {
+    toolbar?: CardHeaderItem[];
+    minWidth?: number;
+    maxWidth?: number;
+  };
+}
+
+export const CLASSES = {
+  content: 'dx-cardview-content',
+  grid: 'dx-cardview-content-grid',
+};
+
+function getInfernoCardKey(card: DataRow): undefined | string | number {
+  if (typeof card.key === 'string' || typeof card.key === 'number') {
+    return card.key;
+  }
+
+  return undefined;
+}
+
+export class Content extends Component<ContentProps> {
+  private readonly containerRef = createRef<HTMLDivElement>();
+
+  private cardRefs: RefObject<HTMLDivElement>[] = [];
+
+  private getCssVariables(): Record<string, unknown> {
+    const variables = {};
+
+    if (this.props.cardsPerRow) {
+      variables['--dx-cardview-cardsperrow'] = this.props.cardsPerRow;
+    }
+
+    if (this.props.cardProps?.minWidth) {
+      variables['--dx-cardview-card-min-width'] = `${this.props.cardProps?.minWidth}px`;
+    }
+
+    if (this.props.cardProps?.maxWidth) {
+      variables['--dx-cardview-card-max-width'] = `${this.props.cardProps?.maxWidth}px`;
+    }
+
+    // @ts-expect-error
+    if (this.props.cardProps?.cover?.maxHeight) {
+      // @ts-expect-error
+      variables['--dx-cardview-card-cover-max-height'] = `${this.props.cardProps?.cover?.maxHeight}px`;
+    }
+
+    // @ts-expect-error
+    if (this.props.cardProps?.cover?.ratio) {
+      // @ts-expect-error
+      variables['--dx-cardview-card-cover-ratio'] = `${this.props.cardProps?.cover?.ratio}`;
+    }
+
+    return variables;
+  }
+
+  render(): JSX.Element {
+    this.cardRefs = new Array(this.props.items.length).fill(undefined).map(() => createRef());
+    return (
+      <div
+        tabIndex={0}
+        className={`${CLASSES.content} ${CLASSES.grid}`}
+        style={this.getCssVariables()}
+        ref={this.containerRef}
+      >
+        {this.props.items.map((item, i) => (
+          <Card
+            {...this.props.cardProps}
+            key={getInfernoCardKey(item)}
+            elementRef={this.cardRefs[i]}
+            row={item}
+            fieldTemplate={this.props.fieldTemplate}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  updateSizesInfo(): void {
+    const firstCard = this.cardRefs[0];
+    if (!firstCard) {
+      return;
+    }
+    const cardHeight = firstCard.current!.offsetHeight;
+    const gapHeight = parseFloat(getComputedStyle(this.containerRef.current!).rowGap);
+    const rowHeight = cardHeight + gapHeight;
+    this.props.onRowHeightChange?.(rowHeight);
+  }
+
+  componentDidMount(): void {
+    this.updateSizesInfo();
+  }
+
+  componentDidUpdate(): void {
+    this.updateSizesInfo();
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content_view.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content_view.tsx
new file mode 100644
index 000000000000..cec5c649603a
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content_view.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { ContentViewProps as ContentViewBaseProps } from '@ts/grids/new/grid_core/content_view/content_view';
+import { ContentView as ContentViewBase } from '@ts/grids/new/grid_core/content_view/content_view';
+import type { InfernoNode } from 'inferno';
+import { Component } from 'inferno';
+
+import type { ContentProps } from './content/content';
+import { Content } from './content/content';
+
+export interface ContentViewProps extends ContentViewBaseProps {
+  contentProps: ContentProps;
+}
+
+export class ContentView extends Component<ContentViewProps> {
+  render(): InfernoNode {
+    return (
+      <ContentViewBase {...this.props}>
+        <Content {...this.props.contentProps} />
+      </ContentViewBase>
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/index.ts b/packages/devextreme/js/__internal/grids/new/card_view/content_view/index.ts
new file mode 100644
index 000000000000..89edfeb2d9f6
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/index.ts
@@ -0,0 +1,3 @@
+export * from './options';
+export * from './public_methods';
+export { ContentView as View } from './view';
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/options.ts b/packages/devextreme/js/__internal/grids/new/card_view/content_view/options.ts
new file mode 100644
index 000000000000..2d2efcd32242
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/options.ts
@@ -0,0 +1,22 @@
+import * as Base from '../../grid_core/content_view/options';
+import type { DataObject } from '../../grid_core/data_controller/types';
+
+export interface Options extends Base.Options {
+  cardsPerRow?: number | 'auto';
+  cardMinWidth?: number;
+  cardMaxWidth?: number;
+  cardCover?: {
+    imageExpr?: string | ((data: DataObject) => string);
+    altExpr?: string | ((data: DataObject) => string);
+    maxHeight?: number;
+    ratio?: string;
+  };
+}
+
+export const defaultOptions = {
+  cardsPerRow: 3,
+  cardCover: {
+    ratio: '1 / 1',
+  },
+  ...Base.defaultOptions,
+} satisfies Options;
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/public_methods.ts b/packages/devextreme/js/__internal/grids/new/card_view/content_view/public_methods.ts
new file mode 100644
index 000000000000..316555f210b8
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/public_methods.ts
@@ -0,0 +1,40 @@
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import type { DxElement } from '@js/core/element';
+import { getPublicElement } from '@js/core/element';
+import $ from '@js/core/renderer';
+import type { DataRow } from '@ts/grids/new/grid_core/columns_controller/types';
+import type { Constructor } from '@ts/grids/new/grid_core/types';
+
+import * as Base from '../../grid_core/content_view/public_methods';
+import type { Key } from '../../grid_core/data_controller/types';
+import { ItemsController } from '../../grid_core/items_controller/items_controller';
+import type { CardViewBase } from '../widget';
+import * as cardModule from './content/card/card';
+
+export function PublicMethods<T extends Constructor<CardViewBase>>(GridCore: T) {
+  return class CardViewWithContentView extends Base.PublicMethods(GridCore) {
+    public getCardElement(cardIndex: number): DxElement {
+      const card = $(this.element()).find(cardModule.CLASSES.card).eq(cardIndex);
+
+      return getPublicElement(card);
+    }
+
+    public getVisibleCards(): DataRow[] {
+      const itemsController = this.diContext.get(ItemsController);
+      return itemsController.items.unreactive_get();
+    }
+
+    public getCardIndexByKey(key: Key): number {
+      const itemsController = this.diContext.get(ItemsController);
+      const cards = itemsController.items.unreactive_get();
+
+      return cards.findIndex((card) => card.key === key);
+    }
+
+    public getKeyByCardIndex(cardIndex: number): Key {
+      return this.getVisibleCards()[cardIndex]?.key;
+    }
+  };
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/utils.test.ts b/packages/devextreme/js/__internal/grids/new/card_view/content_view/utils.test.ts
new file mode 100644
index 000000000000..367c1d215476
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/utils.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { factors } from './utils';
+
+describe('factors', () => {
+  it('should return all factors of given number', () => {
+    expect(factors(1)).toEqual([1]);
+    expect(factors(2)).toEqual([1, 2]);
+    expect(factors(7)).toEqual([1, 7]);
+    expect(factors(6)).toEqual([1, 2, 3, 6]);
+    expect(factors(8)).toEqual([1, 2, 4, 8]);
+    expect(factors(12)).toEqual([1, 2, 3, 4, 6, 12]);
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/utils.ts b/packages/devextreme/js/__internal/grids/new/card_view/content_view/utils.ts
new file mode 100644
index 000000000000..1a23a1034c6a
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/utils.ts
@@ -0,0 +1,9 @@
+export function factors(n: number): number[] {
+  const res: number[] = [];
+  for (let i = 1; i <= n; i += 1) {
+    if (n % i === 0) {
+      res.push(i);
+    }
+  }
+  return res;
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/view.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/view.tsx
new file mode 100644
index 000000000000..ac12d5ee4440
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/view.tsx
@@ -0,0 +1,85 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { compileGetter } from '@js/core/utils/data';
+import { isDefined } from '@js/core/utils/type';
+import { combined, computed, state } from '@ts/core/reactive/index';
+import type { OptionsController } from '@ts/grids/new/card_view/options_controller';
+
+import { ContentView as ContentViewBase } from '../../grid_core/content_view/view';
+import type { DataObject } from '../../grid_core/data_controller/types';
+import type { ContentViewProps } from './content_view';
+import { ContentView as ContentViewComponent } from './content_view';
+import { factors } from './utils';
+
+export class ContentView extends ContentViewBase<ContentViewProps> {
+  // @ts-expect-error
+  protected options: OptionsController;
+
+  private readonly cardMinWidth = this.options.oneWay('cardMinWidth');
+
+  private readonly rowHeight = state(0);
+
+  private readonly cardsPerRow = computed(
+    (width, cardMinWidth, pageSize, cardsPerRowProp) => {
+      if (cardsPerRowProp !== 'auto') {
+        return cardsPerRowProp;
+      }
+
+      const result = factors(pageSize).reverse().find((cardsPerRow) => {
+        const cardWidth = (width - 6 * (cardsPerRow - 1)) / cardsPerRow;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return cardMinWidth! <= cardWidth;
+      });
+
+      return result ?? 1;
+    },
+    [this.width, this.cardMinWidth, this.dataController.pageSize, this.options.oneWay('cardsPerRow')],
+  );
+
+  protected override component = ContentViewComponent;
+
+  protected override getProps() {
+    return combined({
+      ...this.getBaseProps(),
+      contentProps: combined({
+        items: this.itemsController.items,
+        // items: computed((virtualState) => virtualState.virtualItems, [this.virtualState]),
+        fieldTemplate: this.options.template('fieldTemplate'),
+        cardsPerRow: this.cardsPerRow,
+        onRowHeightChange: this.rowHeight.update.bind(this.rowHeight),
+        cardProps: combined({
+          minWidth: this.cardMinWidth,
+          maxWidth: this.options.oneWay('cardMaxWidth'),
+          onClick: this.options.action('onCardClick'),
+          onDblClick: this.options.action('onCardDblClick'),
+          onHoverChanged: this.options.action('onCardHoverChanged'),
+          onPrepared: this.options.action('onCardPrepared'),
+          cover: combined({
+            imageExpr: computed(
+              (imageExpr) => this.processExpr(imageExpr),
+              [this.options.oneWay('cardCover.imageExpr')],
+            ),
+            altExpr: computed(
+              (altExpr) => this.processExpr(altExpr),
+              [this.options.oneWay('cardCover.altExpr')],
+            ),
+            maxHeight: this.options.oneWay('cardCover.maxHeight'),
+            ratio: this.options.oneWay('cardCover.ratio'),
+          }),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          toolbar: this.options.oneWay('cardHeader.items') as any,
+        }),
+      }),
+    });
+  }
+
+  private processExpr<T>(
+    expr: T | ((data: DataObject) => T) | undefined,
+  ): ((data: DataObject) => T) | undefined {
+    if (!isDefined(expr)) {
+      return undefined;
+    }
+    // @ts-expect-error
+    return compileGetter(expr);
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/item.test.tsx.snap b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/item.test.tsx.snap
new file mode 100644
index 000000000000..ac76d2654bdb
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/item.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Item should render sort icons 1`] = `
+<div>
+  <div
+    class="dx-cardview-header-item  "
+    tabindex="0"
+  >
+    Column 1
+    <span
+      class="dx-cardview-header-item-sorting"
+    >
+      <i
+        class="dx-icon dx-icon-sortup"
+      />
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Item should use column caption as text 1`] = `
+<div>
+  <div
+    class="dx-cardview-header-item  "
+    tabindex="0"
+  >
+    my column caption
+  </div>
+</div>
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/options.test.ts.snap b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/options.test.ts.snap
new file mode 100644
index 000000000000..efd060095c9e
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/__snapshots__/options.test.ts.snap
@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColumnProperties headerItemCssClass should override content of headerPanel item 1`] = `
+<div
+  class="test-container"
+>
+  <div
+    class="dx-cardview-headers"
+  >
+    <div
+      class="dx-scrollable dx-visibility-change-handler dx-scrollable-horizontal dx-scrollable-simulated"
+    >
+      <div
+        class="dx-scrollable-wrapper"
+      >
+        <div
+          class="dx-scrollable-container"
+          tabindex="0"
+        >
+          <div
+            class="dx-scrollable-content"
+            style="left: 0px; top: 0px; transform: none;"
+          >
+            <div
+              class="dx-cardview-headerpanel-content"
+            >
+              <div
+                class="dx-cardview-header-item my-css-class "
+                tabindex="0"
+              >
+                Column 1
+              </div>
+            </div>
+          </div>
+          <div
+            class="dx-scrollable-scrollbar dx-widget dx-scrollbar-horizontal"
+            style="display: none;"
+          >
+            <div
+              class="dx-scrollable-scroll dx-state-invisible"
+            >
+              <div
+                class="dx-scrollable-scroll-content"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
+
+exports[`Options headerPanel itemCssClass should add css class to headerPanel item 1`] = `
+<div
+  class="dx-scrollable dx-visibility-change-handler dx-scrollable-horizontal dx-scrollable-simulated"
+>
+  <div
+    class="dx-scrollable-wrapper"
+  >
+    <div
+      class="dx-scrollable-container"
+      tabindex="0"
+    >
+      <div
+        class="dx-scrollable-content"
+        style="left: 0px; top: 0px; transform: none;"
+      >
+        <div
+          class="dx-cardview-headerpanel-content"
+        >
+          <div
+            class="dx-cardview-header-item  my-class"
+            tabindex="0"
+          >
+            Column 1
+          </div>
+        </div>
+      </div>
+      <div
+        class="dx-scrollable-scrollbar dx-widget dx-scrollbar-horizontal"
+        style="display: none;"
+      >
+        <div
+          class="dx-scrollable-scroll dx-state-invisible"
+        >
+          <div
+            class="dx-scrollable-scroll-content"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Options headerPanel visible when it is false should hide headerPanel 1`] = `
+<div
+  class="test-container"
+>
+  
+</div>
+`;
+
+exports[`Options headerPanel visible when it is true should show headerPanel 1`] = `
+<div
+  class="test-container"
+>
+  <div
+    class="dx-cardview-headers"
+  >
+    <div
+      class="dx-scrollable dx-visibility-change-handler dx-scrollable-horizontal dx-scrollable-simulated"
+    >
+      <div
+        class="dx-scrollable-wrapper"
+      >
+        <div
+          class="dx-scrollable-container"
+          tabindex="0"
+        >
+          <div
+            class="dx-scrollable-content"
+            style="left: 0px; top: 0px; transform: none;"
+          >
+            <div
+              class="dx-cardview-headerpanel-content"
+            >
+              <div
+                class="dx-cardview-header-item  "
+                tabindex="0"
+              >
+                Column 1
+              </div>
+            </div>
+          </div>
+          <div
+            class="dx-scrollable-scrollbar dx-widget dx-scrollbar-horizontal"
+            style="display: none;"
+          >
+            <div
+              class="dx-scrollable-scroll dx-state-invisible"
+            >
+              <div
+                class="dx-scrollable-scroll-content"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/column_sortable.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/column_sortable.tsx
new file mode 100644
index 000000000000..0ba637d4c77f
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/column_sortable.tsx
@@ -0,0 +1,143 @@
+import $ from '@js/core/renderer';
+import type * as SortableTypes from '@js/ui/sortable_types';
+import type { ComponentType, InfernoNode } from 'inferno';
+import { Component, render } from 'inferno';
+
+import type { Column } from '../../grid_core/columns_controller/types';
+import type { Props as SortableProps } from '../../grid_core/inferno_wrappers/sortable';
+import { Sortable } from '../../grid_core/inferno_wrappers/sortable';
+
+export type Status = 'forbid' | 'show' | 'moving' | 'none';
+
+const ALLOWED_DRAGGING_DISTANCE = 64;
+
+export interface Props extends Omit<SortableProps, 'onAdd' | 'onReorder' | 'dragTemplate'> {
+  source: string;
+
+  visibleColumns: Column[];
+
+  allowColumnReordering: boolean;
+
+  onMove: (column: Column, toIndex: number, source: string) => void;
+
+  dragTemplate?: ComponentType<{ column: Column; status: Status }>;
+}
+
+interface State {
+  status: Status;
+}
+
+export class ColumnSortable extends Component<Props, State> {
+  status: Status = 'moving';
+
+  dragItemProps?: {
+    container: HTMLElement;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    props: any;
+  };
+
+  private readonly onDragStart = (e: SortableTypes.DragStartEvent): void => {
+    const column = this.props.visibleColumns[e.fromIndex];
+
+    if (!column.allowReordering) {
+      e.cancel = true;
+      return;
+    }
+
+    e.itemData = {
+      column,
+      source: this.props.source,
+    };
+  };
+
+  private readonly onDragMove = (e: SortableTypes.DragMoveEvent): void => {
+    const containerCoords = $(e.element).get(0).getBoundingClientRect();
+    const dragCoords = {
+      // @ts-expect-error
+      x: e.event.clientX,
+      // @ts-expect-error
+      y: e.event.clientY,
+    };
+
+    const yDistance = Math.min(
+      Math.abs(dragCoords.y - containerCoords.y),
+      Math.abs(dragCoords.y - containerCoords.y + containerCoords.height),
+    );
+
+    this.status = yDistance <= ALLOWED_DRAGGING_DISTANCE
+      ? 'moving'
+      : 'forbid';
+
+    this.renderDragTemplate();
+  };
+
+  private readonly onDragChange = (e: SortableTypes.DragChangeEvent): void => {
+    if (this.status === 'forbid') {
+      e.cancel = true;
+    }
+  };
+
+  private readonly onMove = (e: SortableTypes.AddEvent | SortableTypes.ReorderEvent): void => {
+    this.props.onMove(
+      e.itemData.column,
+      e.toIndex,
+      e.itemData.source,
+    );
+  };
+
+  // TODO: move all none-native approaches to sortable wrapper
+  private readonly renderDragTemplate = (): void => {
+    if (!this.dragItemProps) {
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const DragTemplate = this.props.dragTemplate!;
+    render(
+        <DragTemplate
+          column={this.dragItemProps.props.itemData.column}
+          status={this.status}
+        />,
+        this.dragItemProps.container,
+    );
+  };
+
+  render(): InfernoNode {
+    if (!this.props.allowColumnReordering) {
+      return this.props.children;
+    }
+
+    const {
+      source,
+      visibleColumns,
+      dragTemplate,
+      dropFeedbackMode,
+      ...restProps
+    } = this.props;
+
+    const sortableDragTemplate = dragTemplate ? (e, container): void => {
+      this.dragItemProps = {
+        props: e,
+        // @ts-expect-error
+        container: $(container).get(0),
+      };
+      this.renderDragTemplate();
+    } : undefined;
+
+    return (
+      <Sortable
+        {...restProps}
+        dropFeedbackMode={dropFeedbackMode ?? 'indicate'}
+        onDragStart={this.onDragStart}
+        group='dx-cardview-columns'
+        onAdd={this.onMove}
+        onReorder={this.onMove}
+        onDragMove={this.onDragMove}
+        onDragChange={this.onDragChange}
+        dragTemplate={sortableDragTemplate}
+      >
+      {this.props.children}
+    </Sortable>
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx
new file mode 100644
index 000000000000..ba3efebeafd8
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx
@@ -0,0 +1,77 @@
+/* eslint-disable max-len */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { Column } from '@ts/grids/new/grid_core/columns_controller/types';
+import { Scrollable } from '@ts/grids/new/grid_core/inferno_wrappers/scrollable';
+import type { ComponentType } from 'inferno';
+import { Component } from 'inferno';
+
+import { ColumnSortable } from './column_sortable';
+import { CLASSES as itemClasses, Item } from './item';
+import type { DraggingOptions } from './options';
+
+export const CLASSES = {
+  headers: 'dx-cardview-headers',
+  content: 'dx-cardview-headerpanel-content',
+};
+
+export interface HeaderPanelProps {
+  columns: Column[];
+
+  onMove: (column: Column, toIndex: number) => void;
+
+  allowColumnReordering: boolean;
+
+  showSortIndexes: boolean;
+
+  onSortClick: (column: Column) => void;
+
+  itemTemplate?: ComponentType<{ column: Column }>;
+
+  itemCssClass?: string;
+
+  visible: boolean;
+
+  draggingOptions?: DraggingOptions;
+}
+
+export class HeaderPanel extends Component<HeaderPanelProps> {
+  public render(): JSX.Element {
+    if (!this.props.visible) {
+      return <></>;
+    }
+
+    return (
+      <div className={CLASSES.headers}>
+        <ColumnSortable
+          {...this.props.draggingOptions}
+          allowColumnReordering={this.props.allowColumnReordering}
+          source="header-panel-main"
+          visibleColumns={this.props.columns}
+          itemOrientation="horizontal"
+          onMove={(column, index): void => this.props.onMove?.(column, index)}
+          filter={`.${itemClasses.item}`}
+          dragTemplate={Item}
+        >
+          <Scrollable
+            direction='horizontal'
+            showScrollbar='never'
+            useNative={false}
+            scrollByContent={true}
+          >
+            <div className={CLASSES.content}>
+              {this.props.columns.map((column) => (
+                <Item
+                  showSortIndexes={this.props.showSortIndexes}
+                  column={column}
+                  onSortClick={(): void => { this.props.onSortClick(column); }}
+                  template={this.props.itemTemplate}
+                  cssClass={this.props.itemCssClass}
+                />
+              ))}
+            </div>
+          </Scrollable>
+        </ColumnSortable>
+      </div>
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/index.ts b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/index.ts
new file mode 100644
index 000000000000..66aec0658fc2
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/index.ts
@@ -0,0 +1,2 @@
+export * from './options';
+export { HeaderPanelView as View } from './view';
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.test.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.test.tsx
new file mode 100644
index 000000000000..c629938c7f5c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.test.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { describe, expect, it } from '@jest/globals';
+import { render } from 'inferno';
+
+import { normalizeColumn } from '../../grid_core/columns_controller/columns_controller.mock';
+import type { ItemProps } from './item';
+import { Item } from './item';
+
+const setup = (props: ItemProps) => {
+  const rootElement = document.createElement('div');
+  render(
+    <Item {...props} />,
+    rootElement,
+  );
+
+  return rootElement;
+};
+
+describe('Item', () => {
+  it('should use column caption as text', () => {
+    const el = setup({
+      column: normalizeColumn({
+        dataField: 'my column data field',
+        caption: 'my column caption',
+      }),
+    });
+
+    expect(el).toMatchSnapshot();
+  });
+
+  it('should render sort icons', () => {
+    const el = setup({
+      column: normalizeColumn({
+        dataField: 'column1',
+        sortIndex: 0,
+        sortOrder: 'asc',
+      }),
+    });
+
+    expect(el).toMatchSnapshot();
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx
new file mode 100644
index 000000000000..8ad719adc970
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx
@@ -0,0 +1,85 @@
+import type { Column } from '@ts/grids/new/grid_core/columns_controller/types';
+import type { ComponentType } from 'inferno';
+
+import type { Status } from './column_sortable';
+
+export const CLASSES = {
+  item: 'dx-cardview-header-item',
+  button: 'dx-cardview-header-item-button',
+  sorting: {
+    container: 'dx-cardview-header-item-sorting',
+    order: 'dx-cardview-header-item-sorting-order',
+  },
+};
+
+// TODO: extract icons to separate component
+const ICONS = {
+  // TODO: move to dx-icon once they are updated
+  forbid: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM15 8C15 6.24696 14.3556 4.64442 13.2907 3.41636L3.41636 13.2907C4.64442 14.3556 6.24696 15 8 15C11.866 15 15 11.866 15 8ZM2.70925 12.5836L12.5836 2.70925C11.3556 1.6444 9.75303 1 8 1C4.13401 1 1 4.13401 1 8C1 9.75303 1.6444 11.3556 2.70925 12.5836Z" fill="#242424"/>
+    </svg>
+  ),
+  // TODO: move to dx-icon once they are updated
+  moving: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M8.35355 0.146447C8.25978 0.0526784 8.13261 0 8 0C7.86739 0 7.74021 0.0526784 7.64645 0.146447L5.14645 2.64645C4.95118 2.84171 4.95118 3.15829 5.14645 3.35355C5.34171 3.54882 5.65829 3.54882 5.85355 3.35355L7.5 1.70711V5.5C7.5 5.77614 7.72386 6 8 6C8.27614 6 8.5 5.77614 8.5 5.5V1.70711L10.1464 3.35355C10.3417 3.54882 10.6583 3.54882 10.8536 3.35355C11.0488 3.15829 11.0488 2.84171 10.8536 2.64645L8.35355 0.146447ZM0.146447 7.64645C0.0526784 7.74021 0 7.86739 0 8C0 8.13261 0.0526784 8.25979 0.146447 8.35355L2.64645 10.8536C2.84171 11.0488 3.15829 11.0488 3.35355 10.8536C3.54882 10.6583 3.54882 10.3417 3.35355 10.1464L1.70711 8.5H5.5C5.77614 8.5 6 8.27614 6 8C6 7.72386 5.77614 7.5 5.5 7.5H1.70711L3.35355 5.85355C3.54882 5.65829 3.54882 5.34171 3.35355 5.14645C3.15829 4.95118 2.84171 4.95118 2.64645 5.14645L0.146447 7.64645ZM8 16C7.86739 16 7.74021 15.9473 7.64645 15.8536L5.14645 13.3536C4.95118 13.1583 4.95118 12.8417 5.14645 12.6464C5.34171 12.4512 5.65829 12.4512 5.85355 12.6464L7.5 14.2929L7.5 10.5C7.5 10.2239 7.72386 10 8 10C8.27614 10 8.5 10.2239 8.5 10.5V14.2929L10.1464 12.6464C10.3417 12.4512 10.6583 12.4512 10.8536 12.6464C11.0488 12.8417 11.0488 13.1583 10.8536 13.3536L8.35355 15.8536C8.25979 15.9473 8.13261 16 8 16ZM15.8536 8.35355C15.9473 8.25978 16 8.13261 16 8C16 7.86739 15.9473 7.74021 15.8536 7.64645L13.3536 5.14645C13.1583 4.95118 12.8417 4.95118 12.6464 5.14645C12.4512 5.34171 12.4512 5.65829 12.6464 5.85355L14.2929 7.5L10.5 7.5C10.2239 7.5 10 7.72386 10 8C10 8.27614 10.2239 8.5 10.5 8.5L14.2929 8.5L12.6464 10.1464C12.4512 10.3417 12.4512 10.6583 12.6464 10.8536C12.8417 11.0488 13.1583 11.0488 13.3536 10.8536L15.8536 8.35355Z" fill="#242424"/>
+    </svg>
+  ),
+  sortUp: <i className='dx-icon dx-icon-sortup'/>,
+  sortDown: <i className='dx-icon dx-icon-sortdown'/>,
+};
+
+interface SortIconProps {
+  sortOrder: 'asc' | 'desc';
+  sortIndex: number;
+  showSortIndex: boolean;
+}
+
+function SortIcon(props: SortIconProps): JSX.Element {
+  return (
+    <span className={CLASSES.sorting.container}>
+      {props.sortOrder === 'asc' && ICONS.sortUp}
+      {props.sortOrder === 'desc' && ICONS.sortDown}
+      {
+        props.showSortIndex && (
+          <span className={CLASSES.sorting.order}>
+            {props.sortIndex}
+          </span>
+        )
+      }
+    </span>
+  );
+}
+
+export interface ItemProps {
+  column: Column;
+  status?: Status;
+  showSortIndexes?: boolean;
+  onSortClick?: () => void;
+  template?: ComponentType<{ column: Column }>;
+  cssClass?: string;
+}
+
+export function Item(props: ItemProps): JSX.Element {
+  const Template = props.column.headerItemTemplate ?? props.template;
+  const cssClass = `${CLASSES.item} ${props.column.headerItemCssClass ?? ''} ${props.cssClass ?? ''}`;
+
+  return (
+    <div className={cssClass} tabIndex={0} onClick={props.onSortClick}>
+      { props.status && ICONS[props.status]}
+      { Template && <Template column={props.column}/>}
+      { !Template && props.column.caption }
+      {
+        props.column.sortOrder !== undefined && (
+          <SortIcon
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            sortIndex={props.column.sortIndex!}
+            sortOrder={props.column.sortOrder}
+            showSortIndex={props.showSortIndexes ?? false}
+          />
+        )
+      }
+    </div>
+  );
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.test.ts b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.test.ts
new file mode 100644
index 000000000000..671021173c3c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.test.ts
@@ -0,0 +1,150 @@
+/* eslint-disable spellcheck/spell-checker */
+import {
+  describe, expect, it, jest,
+} from '@jest/globals';
+import { rerender } from 'inferno';
+
+import { ColumnsController } from '../../grid_core/columns_controller';
+import { DataController } from '../../grid_core/data_controller';
+import { Sortable } from '../../grid_core/inferno_wrappers/sortable';
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller.mock';
+import { HeaderPanelView } from './view';
+
+const setup = (options: Options) => {
+  const rootElement = document.createElement('div');
+  rootElement.classList.add('test-container');
+
+  const optionsController = new OptionsControllerMock(options);
+  const dataController = new DataController(optionsController);
+  const columnsController = new ColumnsController(optionsController);
+  const headerPanelView = new HeaderPanelView(columnsController, optionsController);
+
+  headerPanelView.render(rootElement);
+  rerender();
+
+  return {
+    optionsController,
+    dataController,
+    columnsController,
+    headerPanelView,
+    rootElement,
+  };
+};
+
+describe('Options', () => {
+  describe('headerPanel', () => {
+    describe('dragging', () => {
+      it('should pass options to inner Sortable', () => {
+        const renderSpy = jest.spyOn(Sortable.prototype, 'render');
+
+        setup({
+          columns: ['column1'],
+          allowColumnReordering: true,
+          headerPanel: {
+            dragging: {
+              dropFeedbackMode: 'push',
+              scrollSpeed: 555,
+              scrollSensitivity: 111,
+            },
+          },
+        });
+
+        // @ts-expect-error
+        expect(renderSpy.mock.calls[0][0]).toMatchObject({
+          dropFeedbackMode: 'push',
+          scrollSpeed: 555,
+          scrollSensitivity: 111,
+        });
+      });
+    });
+
+    describe('visible', () => {
+      describe('when it is false', () => {
+        it('should hide headerPanel', () => {
+          const { rootElement } = setup({
+            columns: ['column1'],
+            headerPanel: {
+              visible: false,
+            },
+          });
+
+          expect(rootElement).toMatchSnapshot();
+        });
+      });
+      describe('when it is true', () => {
+        it('should show headerPanel', () => {
+          const { rootElement } = setup({
+            columns: ['column1'],
+            headerPanel: {
+              visible: true,
+            },
+          });
+
+          expect(rootElement).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('itemTemplate', () => {
+      // TODO: fix option controller to enable test
+      it.skip('should override content of headerPanel item', () => {
+        const { rootElement } = setup({
+          columns: ['column1'],
+          headerPanel: {
+            // @ts-expect-error
+            itemTemplate: ({ column }) => $('<div>')
+              .addClass('my-class')
+              .text(column.caption),
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('itemCssClass', () => {
+      it('should add css class to headerPanel item', () => {
+        const { rootElement } = setup({
+          columns: ['column1'],
+          headerPanel: {
+            itemCssClass: 'my-class',
+          },
+        });
+
+        expect(rootElement.querySelector('.dx-scrollable')).toMatchSnapshot();
+      });
+    });
+  });
+});
+
+// TODO: update after related column props are extracted from columns_controller
+describe('ColumnProperties', () => {
+  describe('headerItemTemplate', () => {
+    it.skip('should override content of headerPanel item', () => {
+      const { rootElement } = setup({
+        columns: [{
+          dataField: 'column1',
+          // @ts-expect-error
+          headerItemTemplate: ({ column }) => $('<div>')
+            .addClass('my-class')
+            .text(column.caption),
+        }],
+      });
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+  describe('headerItemCssClass', () => {
+    it('should override content of headerPanel item', () => {
+      const { rootElement } = setup({
+        columns: [{
+          dataField: 'column1',
+          headerItemCssClass: 'my-css-class',
+        }],
+      });
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.ts b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.ts
new file mode 100644
index 000000000000..fe7d7cd87192
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.ts
@@ -0,0 +1,22 @@
+import type * as Sortable from '@js/ui/sortable';
+
+import type { Column } from '../../grid_core/columns_controller/types';
+import type { Template } from '../../grid_core/types';
+
+type SortableProperties = 'dropFeedbackMode' | 'scrollSpeed' | 'scrollSensitivity' | 'onDragChange' | 'onDragEnd' | 'onDragMove' | 'onDragStart' | 'onRemove' | 'onReorder';
+
+export type DraggingOptions = Pick<Sortable.Properties, SortableProperties>;
+export interface Options {
+  headerPanel?: {
+    dragging?: DraggingOptions;
+    visible?: boolean;
+    itemTemplate?: Template<{ column: Column }>;
+    itemCssClass?: string;
+  };
+}
+
+export const defaultOptions = {
+  headerPanel: {
+    visible: true,
+  },
+} satisfies Options;
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/header_panel/view.tsx b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/view.tsx
new file mode 100644
index 000000000000..02163da19adc
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/header_panel/view.tsx
@@ -0,0 +1,61 @@
+import type { SubsGets } from '@ts/core/reactive/index';
+import { combined, computed } from '@ts/core/reactive/index';
+import { ColumnsController } from '@ts/grids/new/grid_core/columns_controller/columns_controller';
+import { View } from '@ts/grids/new/grid_core/core/view';
+
+import type { Column } from '../../grid_core/columns_controller/types';
+import { OptionsController } from '../options_controller';
+import type { HeaderPanelProps } from './header_panel';
+import { HeaderPanel } from './header_panel';
+
+export class HeaderPanelView extends View<HeaderPanelProps> {
+  protected component = HeaderPanel;
+
+  public static dependencies = [ColumnsController, OptionsController] as const;
+
+  constructor(
+    private readonly columnsController: ColumnsController,
+    private readonly options: OptionsController,
+  ) {
+    super();
+  }
+
+  protected override getProps(): SubsGets<HeaderPanelProps> {
+    return combined({
+      columns: computed(
+        (columns) => [...columns].sort((a, b) => a.visibleIndex - b.visibleIndex),
+        [this.columnsController.columns],
+      ),
+      onMove: this.onMove.bind(this),
+      onRemove: this.onRemove.bind(this),
+      allowColumnReordering: this.columnsController.allowColumnReordering,
+      showSortIndexes: computed(
+        (columns) => columns
+          .filter(
+            (column) => column.sortOrder !== undefined,
+          )
+          .length > 1,
+        [this.columnsController.columns],
+      ),
+      onSortClick: this.onSortClick.bind(this),
+      itemTemplate: this.options.template('headerPanel.itemTemplate'),
+      itemCssClass: this.options.oneWay('headerPanel.itemCssClass'),
+      visible: this.options.oneWay('headerPanel.visible'),
+      draggingOptions: this.options.oneWay('headerPanel.dragging'),
+    });
+  }
+
+  public onRemove(column: Column): void {
+    this.columnsController.columnOption(column, 'visible', !column.visible);
+  }
+
+  public onMove(column: Column, toIndex: number): void {
+    this.columnsController.columnOption(column, 'visible', true);
+    this.columnsController.columnOption(column, 'visibleIndex', toIndex);
+  }
+
+  public onSortClick(column: Column): void {
+    this.columnsController.columnOption(column, 'sortOrder', 'asc');
+    this.columnsController.columnOption(column, 'sortIndex', 0);
+  }
+}
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
new file mode 100644
index 000000000000..33386038c9e4
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/main_view.tsx
@@ -0,0 +1,75 @@
+import { combined } from '@ts/core/reactive/index';
+import { View } from '@ts/grids/new/grid_core/core/view';
+import { PagerView } from '@ts/grids/new/grid_core/pager/view';
+import { ToolbarView } from '@ts/grids/new/grid_core/toolbar/view';
+import type { ComponentType } from 'inferno';
+
+import type { Config } from '../grid_core/core/config_context';
+import { ConfigContext } from '../grid_core/core/config_context';
+import { ContentView } from './content_view/view';
+import { HeaderPanelView } from './header_panel/view';
+import { OptionsController } from './options_controller';
+
+interface MainViewProps {
+  Toolbar: ComponentType;
+  Content: ComponentType;
+  Pager: ComponentType;
+  HeaderPanel: ComponentType;
+  config: Config;
+}
+
+function MainViewComponent({
+  Toolbar, Content, Pager, HeaderPanel, config,
+}: MainViewProps): JSX.Element {
+  return (<>
+    <ConfigContext.Provider value={config}>
+      <Toolbar/>
+      <HeaderPanel/>
+      <Content/>
+      <div>
+        {/*
+          Pager, as renovated component, has strange disposing.
+          See `inferno_renderer.remove` method.
+          It somehow mutates $V prop of parent element.
+          Without this div, CardView would be parent of Pager.
+          In this case all `componentWillUnmount`s aren't called
+        */}
+        <Pager/>
+      </div>
+    </ConfigContext.Provider>
+  </>);
+}
+
+export class MainView extends View<MainViewProps> {
+  protected override component = MainViewComponent;
+
+  public static dependencies = [
+    ContentView, PagerView, ToolbarView, HeaderPanelView, OptionsController,
+  ] as const;
+
+  constructor(
+    private readonly content: ContentView,
+    private readonly pager: PagerView,
+    private readonly toolbar: ToolbarView,
+    private readonly headerPanel: HeaderPanelView,
+    private readonly options: OptionsController,
+  ) {
+    super();
+  }
+
+  // eslint-disable-next-line @stylistic/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(),
+      config: combined({
+        rtlEnabled: this.options.oneWay('rtlEnabled'),
+        disabled: this.options.oneWay('disabled'),
+        templatesRenderAsynchronously: this.options.oneWay('templatesRenderAsynchronously'),
+      }),
+    });
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/options.ts b/packages/devextreme/js/__internal/grids/new/card_view/options.ts
new file mode 100644
index 000000000000..592f6d4c5262
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/options.ts
@@ -0,0 +1,18 @@
+import * as GridCore from '@ts/grids/new/grid_core/options';
+
+import * as ContentView from './content_view/index';
+import * as HeaderPanel from './header_panel/index';
+
+/**
+ * @interface
+ */
+export type Options =
+  & GridCore.Options
+  & ContentView.Options
+  & HeaderPanel.Options;
+
+export const defaultOptions = {
+  ...GridCore.defaultOptions,
+  ...ContentView.defaultOptions,
+  ...HeaderPanel.defaultOptions,
+} satisfies Options;
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/options_controller.mock.ts b/packages/devextreme/js/__internal/grids/new/card_view/options_controller.mock.ts
new file mode 100644
index 000000000000..d66ec5d1e7c9
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/options_controller.mock.ts
@@ -0,0 +1,14 @@
+import {
+  OptionsControllerMock as OptionsControllerBaseMock,
+} from '@ts/grids/new/grid_core/options_controller/options_controller_base.mock';
+
+import type { Options } from './options';
+import { defaultOptions } from './options';
+
+export class OptionsControllerMock extends OptionsControllerBaseMock<
+Options, typeof defaultOptions
+> {
+  constructor(options: Options) {
+    super(options, defaultOptions);
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/options_controller.ts b/packages/devextreme/js/__internal/grids/new/card_view/options_controller.ts
new file mode 100644
index 000000000000..2e3c4cb2bcf2
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/options_controller.ts
@@ -0,0 +1,7 @@
+import { OptionsController } from '@ts/grids/new/grid_core/options_controller/options_controller_base';
+
+import type { defaultOptions, Options } from './options';
+
+class CardViewOptionsController extends OptionsController<Options, typeof defaultOptions> {}
+
+export { CardViewOptionsController as OptionsController };
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/widget.test.ts b/packages/devextreme/js/__internal/grids/new/card_view/widget.test.ts
new file mode 100644
index 000000000000..02e83a2e7fa0
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/widget.test.ts
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { describe, expect, it } from '@jest/globals';
+import $ from '@js/core/renderer';
+
+import { CardView } from './widget';
+
+describe('common', () => {
+  describe('initial render', () => {
+    it('should be successfull', () => {
+      const container = document.createElement('div');
+      const cardView = new CardView(container, {});
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});
+
+describe('options', () => {
+  describe('rtlEnabled', () => {
+    const container = document.createElement('div');
+    const cardView = new CardView(container, {
+      rtlEnabled: true,
+      pager: {
+        visible: true,
+      },
+    });
+
+    it('should add dx-rtl class to container div', () => {
+      expect(container.classList).toContain('dx-rtl');
+    });
+
+    it('should pass rtlEnabled options to nested components', () => {
+      expect(
+        $(container).find('.dx-pagination')
+          // @ts-expect-error
+          .dxPagination('instance').option('rtlEnabled'),
+      ).toBe(true);
+    });
+  });
+});
+
+describe('regressions', () => {
+  it('should not have leaks to defaultOptions after changing option', () => {
+    const container = document.createElement('div');
+    let cardView = new CardView(container, {
+      keyExpr: 'a',
+      dataSource: [{ a: 'a' }],
+    });
+
+    expect(cardView.option('pager.showPageSizeSelector')).toBe(false);
+
+    cardView.option('pager.showPageSizeSelector', true);
+    expect(cardView.option('pager.showPageSizeSelector')).toBe(true);
+
+    cardView.dispose();
+
+    cardView = new CardView(container, {
+      keyExpr: 'a',
+      dataSource: [{ a: 'a' }],
+    });
+    expect(cardView.option('pager.showPageSizeSelector')).toBe(false);
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/widget.ts b/packages/devextreme/js/__internal/grids/new/card_view/widget.ts
new file mode 100644
index 000000000000..21e4ebbc7258
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/card_view/widget.ts
@@ -0,0 +1,60 @@
+/* eslint-disable max-classes-per-file */
+/* eslint-disable spellcheck/spell-checker */
+import registerComponent from '@js/core/component_registrator';
+import $ from '@js/core/renderer';
+import { extend } from '@js/core/utils/extend';
+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 { GridCoreNew } from '@ts/grids/new/grid_core/widget';
+
+import * as ContentViewModule from './content_view/index';
+import { HeaderPanelView } from './header_panel/view';
+import { MainView } from './main_view';
+import { defaultOptions } from './options';
+import { OptionsController } from './options_controller';
+
+export class CardViewBase extends GridCoreNew {
+  contentView!: ContentViewModule.View;
+
+  headerPanel!: HeaderPanelView;
+
+  protected _registerDIContext(): void {
+    super._registerDIContext();
+
+    this.diContext.register(ContentViewModule.View);
+    this.diContext.register(HeaderPanelView);
+    this.diContext.register(MainViewBase, MainView);
+
+    const optionsController = new OptionsController(this);
+    this.diContext.registerInstance(OptionsController, optionsController);
+    // @ts-expect-error
+    this.diContext.registerInstance(OptionsControllerBase, optionsController);
+  }
+
+  protected _initMarkup(): void {
+    super._initMarkup();
+    $(this.$element()).addClass('dx-cardview');
+  }
+
+  protected _initDIContext(): void {
+    super._initDIContext();
+    this.contentView = this.diContext.get(ContentViewModule.View);
+    this.headerPanel = this.diContext.get(HeaderPanelView);
+  }
+
+  // eslint-disable-next-line @stylistic/max-len
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
+  protected _getDefaultOptions() {
+    return {
+      ...super._getDefaultOptions(),
+      ...extend(true, {}, defaultOptions) as typeof defaultOptions,
+    };
+  }
+}
+
+export class CardView extends ContentViewModule.PublicMethods(CardViewBase) {}
+
+// @ts-expect-error
+registerComponent('dxCardView', CardView);
+
+export default CardView;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/__snapshots__/columns_controller.test.ts.snap b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/__snapshots__/columns_controller.test.ts.snap
new file mode 100644
index 000000000000..d90b9047cb73
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/__snapshots__/columns_controller.test.ts.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColumnsController columns should contain processed column configs 1`] = `
+[
+  {
+    "alignment": "left",
+    "allowReordering": true,
+    "calculateCellValue": [Function],
+    "calculateDisplayValue": [Function],
+    "caption": "A",
+    "dataField": "a",
+    "dataType": "string",
+    "falseText": "false",
+    "headerItemTemplate": undefined,
+    "name": "a",
+    "trueText": "true",
+    "visible": true,
+    "visibleIndex": 0,
+  },
+  {
+    "alignment": "left",
+    "allowReordering": true,
+    "calculateCellValue": [Function],
+    "calculateDisplayValue": [Function],
+    "caption": "B",
+    "dataField": "b",
+    "dataType": "string",
+    "falseText": "false",
+    "headerItemTemplate": undefined,
+    "name": "b",
+    "trueText": "true",
+    "visible": true,
+    "visibleIndex": 1,
+  },
+  {
+    "alignment": "left",
+    "allowReordering": true,
+    "calculateCellValue": [Function],
+    "calculateDisplayValue": [Function],
+    "caption": "C",
+    "dataField": "c",
+    "dataType": "string",
+    "falseText": "false",
+    "headerItemTemplate": undefined,
+    "name": "c",
+    "trueText": "true",
+    "visible": false,
+    "visibleIndex": 2,
+  },
+]
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/__snapshots__/options.test.ts.snap b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/__snapshots__/options.test.ts.snap
new file mode 100644
index 000000000000..246e1703fee6
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/__snapshots__/options.test.ts.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Options columns when given as object should be normalized 1`] = `
+[
+  {
+    "alignment": "left",
+    "allowReordering": true,
+    "calculateCellValue": [Function],
+    "calculateDisplayValue": [Function],
+    "caption": "A",
+    "dataField": "a",
+    "dataType": "string",
+    "falseText": "false",
+    "headerItemTemplate": undefined,
+    "name": "a",
+    "trueText": "true",
+    "visible": true,
+    "visibleIndex": 0,
+  },
+  {
+    "alignment": "left",
+    "allowReordering": true,
+    "calculateCellValue": [Function],
+    "calculateDisplayValue": [Function],
+    "caption": "B",
+    "dataField": "b",
+    "dataType": "string",
+    "falseText": "false",
+    "headerItemTemplate": undefined,
+    "name": "b",
+    "trueText": "true",
+    "visible": true,
+    "visibleIndex": 1,
+  },
+  {
+    "alignment": "left",
+    "allowReordering": true,
+    "calculateCellValue": [Function],
+    "calculateDisplayValue": [Function],
+    "caption": "C",
+    "dataField": "c",
+    "dataType": "string",
+    "falseText": "false",
+    "headerItemTemplate": undefined,
+    "name": "c",
+    "trueText": "true",
+    "visible": true,
+    "visibleIndex": 2,
+  },
+]
+`;
+
+exports[`Options columns when given as string should be normalized 1`] = `
+[
+  {
+    "alignment": "left",
+    "allowReordering": true,
+    "calculateCellValue": [Function],
+    "calculateDisplayValue": [Function],
+    "caption": "A",
+    "dataField": "a",
+    "dataType": "string",
+    "falseText": "false",
+    "headerItemTemplate": undefined,
+    "name": "a",
+    "trueText": "true",
+    "visible": true,
+    "visibleIndex": 0,
+  },
+  {
+    "alignment": "left",
+    "allowReordering": true,
+    "calculateCellValue": [Function],
+    "calculateDisplayValue": [Function],
+    "caption": "B",
+    "dataField": "b",
+    "dataType": "string",
+    "falseText": "false",
+    "headerItemTemplate": undefined,
+    "name": "b",
+    "trueText": "true",
+    "visible": true,
+    "visibleIndex": 1,
+  },
+  {
+    "alignment": "left",
+    "allowReordering": true,
+    "calculateCellValue": [Function],
+    "calculateDisplayValue": [Function],
+    "caption": "C",
+    "dataField": "c",
+    "dataType": "string",
+    "falseText": "false",
+    "headerItemTemplate": undefined,
+    "name": "c",
+    "trueText": "true",
+    "visible": true,
+    "visibleIndex": 2,
+  },
+]
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.mock.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.mock.ts
new file mode 100644
index 000000000000..e0886af86594
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.mock.ts
@@ -0,0 +1,11 @@
+import type { ColumnProperties } from './options';
+import type { Column } from './types';
+import { normalizeColumns, preNormalizeColumns } from './utils';
+
+export function normalizeColumn(column: ColumnProperties): Column {
+  return normalizeColumns(
+    preNormalizeColumns([column]),
+    // @ts-expect-error
+    (v) => v,
+  )[0];
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.test.ts
new file mode 100644
index 000000000000..a7a658371fba
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.test.ts
@@ -0,0 +1,163 @@
+/* eslint-disable spellcheck/spell-checker */
+import { describe, expect, it } from '@jest/globals';
+
+import { DataController } from '../data_controller';
+import { ItemsController } from '../items_controller/items_controller';
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { ColumnsController } from './columns_controller';
+
+const setup = (config: Options = {}) => {
+  const options = new OptionsControllerMock(config);
+
+  const columnsController = new ColumnsController(options);
+  const dataController = new DataController(options);
+  const itemsController = new ItemsController(dataController, columnsController);
+
+  return {
+    options,
+    columnsController,
+    dataController,
+    itemsController,
+  };
+};
+
+describe('ColumnsController', () => {
+  describe('columns', () => {
+    it('should contain processed column configs', () => {
+      const { columnsController } = setup({
+        columns: [
+          'a',
+          { dataField: 'b' },
+          { dataField: 'c', visible: false },
+        ],
+      });
+
+      const columns = columnsController.columns.unreactive_get();
+      expect(columns).toMatchSnapshot();
+    });
+  });
+  describe('visibleColumns', () => {
+    it('should contain visible columns', () => {
+      const { columnsController } = setup({
+        columns: [
+          'a',
+          { dataField: 'b' },
+          { dataField: 'c', visible: false },
+        ],
+      });
+
+      const visibleColumns = columnsController.visibleColumns.unreactive_get();
+      expect(visibleColumns).toHaveLength(2);
+      expect(visibleColumns[0].name).toBe('a');
+      expect(visibleColumns[1].name).toBe('b');
+    });
+  });
+  describe('nonVisibleColumns', () => {
+    it('should contain non visible columns', () => {
+      const { columnsController } = setup({
+        columns: [
+          'a',
+          { dataField: 'b' },
+          { dataField: 'c', visible: false },
+        ],
+      });
+
+      const nonVisibleColumns = columnsController.nonVisibleColumns.unreactive_get();
+      expect(nonVisibleColumns).toHaveLength(1);
+      expect(nonVisibleColumns[0].name).toBe('c');
+    });
+  });
+
+  describe('addColumn', () => {
+    it('should add new column to columns', () => {
+      const { columnsController } = setup(
+        { columns: ['a', 'b'] },
+      );
+
+      let columns = columnsController.columns.unreactive_get();
+      expect(columns).toHaveLength(2);
+      expect(columns).toMatchObject([
+        { dataField: 'a' },
+        { dataField: 'b' },
+      ]);
+
+      columnsController.addColumn('c');
+
+      columns = columnsController.columns.unreactive_get();
+      expect(columns).toHaveLength(3);
+      expect(columns).toMatchObject([
+        { dataField: 'a' },
+        { dataField: 'b' },
+        { dataField: 'c' },
+      ]);
+    });
+  });
+
+  describe('deleteColumn', () => {
+    it('should remove given column from columns', () => {
+      const { columnsController } = setup(
+        { columns: ['a', 'b'] },
+      );
+
+      let columns = columnsController.columns.unreactive_get();
+      expect(columns).toHaveLength(2);
+      expect(columns).toMatchObject([
+        { dataField: 'a' },
+        { dataField: 'b' },
+      ]);
+
+      columnsController.deleteColumn(columns[1]);
+
+      columns = columnsController.columns.unreactive_get();
+      expect(columns).toHaveLength(1);
+      expect(columns).toMatchObject([
+        { dataField: 'a' },
+      ]);
+    });
+  });
+
+  describe('columnOption', () => {
+    it('should update option of given column', () => {
+      const { columnsController } = setup(
+        { columns: ['a', 'b'] },
+      );
+
+      let columns = columnsController.columns.unreactive_get();
+      expect(columns).toMatchObject([
+        { dataField: 'a', visible: true },
+        { dataField: 'b', visible: true },
+      ]);
+
+      columnsController.columnOption(columns[1], 'visible', false);
+
+      columns = columnsController.columns.unreactive_get();
+      expect(columns).toMatchObject([
+        { dataField: 'a', visible: true },
+        { dataField: 'b', visible: false },
+      ]);
+    });
+
+    it('should correctly update visibleIndex option for all columns', () => {
+      const { columnsController } = setup(
+        { columns: ['a', 'b', 'c'] },
+      );
+
+      let columns = columnsController.columns.unreactive_get();
+      expect(columns).toMatchObject([
+        { dataField: 'a', visibleIndex: 0 },
+        { dataField: 'b', visibleIndex: 1 },
+        { dataField: 'c', visibleIndex: 2 },
+      ]);
+
+      columnsController.columnOption(columns[2], 'visibleIndex', 0);
+
+      columns = columnsController.columns.unreactive_get();
+      expect(columns).toMatchObject([
+        { dataField: 'a', visibleIndex: 1 },
+        { dataField: 'b', visibleIndex: 2 },
+        { dataField: 'c', visibleIndex: 0 },
+      ]);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.ts
new file mode 100644
index 000000000000..92ca26d9bcc6
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.ts
@@ -0,0 +1,114 @@
+/* eslint-disable spellcheck/spell-checker */
+import type { Subscribable, SubsGets, SubsGetsUpd } from '@ts/core/reactive/index';
+import {
+  computed, interruptableComputed,
+} from '@ts/core/reactive/index';
+
+import { OptionsController } from '../options_controller/options_controller';
+import type { ColumnProperties, ColumnSettings, PreNormalizedColumn } from './options';
+import type { Column, VisibleColumn } from './types';
+import {
+  getColumnIndexByName, normalizeColumns, normalizeVisibleIndexes, preNormalizeColumns,
+} from './utils';
+
+export class ColumnsController {
+  private readonly columnsConfiguration: Subscribable<ColumnProperties[] | undefined>;
+
+  private readonly columnsSettings: SubsGetsUpd<PreNormalizedColumn[]>;
+
+  public readonly columns: SubsGets<Column[]>;
+
+  public readonly visibleColumns: SubsGets<Column[]>;
+
+  public readonly nonVisibleColumns: SubsGets<Column[]>;
+
+  public readonly allowColumnReordering: Subscribable<boolean>;
+
+  public static dependencies = [OptionsController] as const;
+
+  constructor(
+    private readonly options: OptionsController,
+  ) {
+    this.columnsConfiguration = this.options.oneWay('columns');
+
+    this.columnsSettings = interruptableComputed(
+      (columnsConfiguration) => preNormalizeColumns(columnsConfiguration ?? []),
+      [
+        this.columnsConfiguration,
+      ],
+    );
+
+    this.columns = computed(
+      (columnsSettings) => normalizeColumns(
+        columnsSettings ?? [],
+        this.options.normalizeTemplate.bind(this.options),
+      ),
+      [
+        this.columnsSettings,
+      ],
+    );
+
+    this.visibleColumns = computed(
+      (columns) => columns
+        .filter((column): column is VisibleColumn => column.visible)
+        .sort((a, b) => a.visibleIndex - b.visibleIndex),
+      [this.columns],
+    );
+
+    this.nonVisibleColumns = computed(
+      (columns) => columns.filter((column) => !column.visible),
+      [this.columns],
+    );
+
+    this.allowColumnReordering = this.options.oneWay('allowColumnReordering');
+  }
+
+  public addColumn(columnProps: ColumnProperties): void {
+    this.columnsSettings.updateFunc((columns) => preNormalizeColumns([
+      ...columns,
+      columnProps,
+    ]));
+  }
+
+  public deleteColumn(column: Column): void {
+    this.columnsSettings.updateFunc(
+      (columns) => columns.filter((c) => c.name !== column.name),
+    );
+  }
+
+  public columnOption<TProp extends keyof ColumnSettings>(
+    column: Column,
+    option: TProp,
+    value: ColumnSettings[TProp],
+  ): void {
+    this.columnsSettings.updateFunc((columns) => {
+      const index = getColumnIndexByName(columns, column.name);
+      const newColumns = [...columns];
+
+      if (columns[index][option] === value) {
+        return columns;
+      }
+
+      newColumns[index] = {
+        ...newColumns[index],
+        [option]: value,
+      };
+
+      const visibleIndexes = normalizeVisibleIndexes(
+        newColumns.map((c) => c.visibleIndex),
+        index,
+      );
+
+      visibleIndexes.forEach((visibleIndex, i) => {
+        if (newColumns[i].visibleIndex !== visibleIndex) {
+          newColumns[i] = {
+            ...newColumns[i],
+            visibleIndex,
+          };
+        }
+      });
+
+      return newColumns;
+    });
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/index.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/index.ts
new file mode 100644
index 000000000000..45601c054834
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/index.ts
@@ -0,0 +1,3 @@
+export { ColumnsController } from './columns_controller';
+export { defaultOptions, type Options } from './options';
+export { PublicMethods } from './public_methods';
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.test.ts
new file mode 100644
index 000000000000..cf14d6c0442c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.test.ts
@@ -0,0 +1,277 @@
+/* eslint-disable spellcheck/spell-checker */
+import { describe, expect, it } from '@jest/globals';
+
+import { DataController } from '../data_controller';
+import { ItemsController } from '../items_controller/items_controller';
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { ColumnsController } from './columns_controller';
+
+const setup = (config: Options) => {
+  const options = new OptionsControllerMock(config);
+
+  const columnsController = new ColumnsController(options);
+  const dataController = new DataController(options);
+  const itemsController = new ItemsController(dataController, columnsController);
+
+  return {
+    options,
+    dataController,
+    columnsController,
+    itemsController,
+  };
+};
+
+describe('Options', () => {
+  describe('columns', () => {
+    describe('when given as string', () => {
+      it('should be normalized', () => {
+        const { columnsController } = setup({ columns: ['a', 'b', 'c'] });
+        const columns = columnsController.columns.unreactive_get();
+
+        expect(columns).toMatchSnapshot();
+      });
+      it('should use given string as dataField', () => {
+        const { columnsController } = setup({ columns: ['a', 'b', 'c'] });
+        const columns = columnsController.columns.unreactive_get();
+
+        expect(columns[0].dataField).toBe('a');
+        expect(columns[1].dataField).toBe('b');
+        expect(columns[2].dataField).toBe('c');
+      });
+      it('should be the same as if we passed objects with dataField only', () => {
+        const { columnsController: columnsController1 } = setup({
+          columns: ['a', 'b', 'c'],
+        });
+        const columns1 = columnsController1.columns.unreactive_get();
+
+        const { columnsController: columnsController2 } = setup({
+          columns: [
+            { dataField: 'a' },
+            { dataField: 'b' },
+            { dataField: 'c' },
+          ],
+        });
+        const columns2 = columnsController2.columns.unreactive_get();
+
+        expect(columns1).toEqual(columns2);
+      });
+    });
+    describe('when given as object', () => {
+      it('should be normalized', () => {
+        const { columnsController } = setup({
+          columns: [
+            { dataField: 'a' },
+            { dataField: 'b' },
+            { dataField: 'c' },
+          ],
+        });
+        const columns = columnsController.columns.unreactive_get();
+        expect(columns).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('columns[].visible', () => {
+    describe('when it is true', () => {
+      it('should include column to visibleColumns', () => {
+        const { columnsController } = setup({
+          columns: [
+            { dataField: 'a', visible: true },
+            { dataField: 'b', visible: true },
+          ],
+        });
+
+        const visibleColumns = columnsController.visibleColumns.unreactive_get();
+        expect(visibleColumns).toHaveLength(2);
+        expect(visibleColumns[0].name).toBe('a');
+        expect(visibleColumns[1].name).toBe('b');
+      });
+    });
+
+    describe('when it is false', () => {
+      it('should exclude column from visibleColumns', () => {
+        const { columnsController } = setup({
+          columns: [
+            { dataField: 'a', visible: true },
+            { dataField: 'b', visible: false },
+          ],
+        });
+
+        const visibleColumns = columnsController.visibleColumns.unreactive_get();
+        expect(visibleColumns).toHaveLength(1);
+        expect(visibleColumns[0].name).toBe('a');
+      });
+    });
+  });
+
+  describe('columns[].visibleIndex', () => {
+    it('should affect order in visibleColumns', () => {
+      const { columnsController } = setup({
+        columns: [
+          { dataField: 'a', visibleIndex: 1 },
+          { dataField: 'b' },
+        ],
+      });
+      const visibleColumns = columnsController.visibleColumns.unreactive_get();
+
+      expect(visibleColumns).toHaveLength(2);
+      expect(visibleColumns[0]).toMatchObject({
+        name: 'b',
+        visibleIndex: 0,
+      });
+      expect(visibleColumns[1]).toMatchObject({
+        name: 'a',
+        visibleIndex: 1,
+      });
+    });
+  });
+
+  describe('column[].calculateCellValue', () => {
+    it('should override value in DataRow', () => {
+      const { columnsController, itemsController } = setup({
+        columns: [
+          { calculateCellValue: (data: any) => `${data.a} ${data.b}` },
+        ],
+      });
+
+      const dataObject = { a: 'a', b: 'b' };
+      const columns = columnsController.columns.unreactive_get();
+      const dataRow = itemsController.createDataRow(dataObject, columns, 0);
+
+      expect(dataRow.cells).toHaveLength(1);
+      expect(dataRow.cells[0].value).toBe('a b');
+    });
+
+    it('should take priority over dataField', () => {
+      const { columnsController, itemsController } = setup({
+        columns: [
+          {
+            calculateCellValue: (data: any) => `${data.a} ${data.b}`,
+            dataField: 'a',
+          },
+        ],
+      });
+
+      const dataObject = { a: 'a', b: 'b' };
+      const columns = columnsController.columns.unreactive_get();
+      const dataRow = itemsController.createDataRow(dataObject, columns, 0);
+
+      expect(dataRow.cells).toHaveLength(1);
+      expect(dataRow.cells[0].value).toBe('a b');
+    });
+  });
+
+  describe('column[].calculateDisplayValue', () => {
+    it('should override displayValue in DataRow', () => {
+      const { columnsController, itemsController } = setup({
+        columns: [
+          { calculateDisplayValue: (data: any) => `${data.a} ${data.b}` },
+        ],
+      });
+
+      const dataObject = { a: 'a', b: 'b' };
+      const columns = columnsController.columns.unreactive_get();
+      const dataRow = itemsController.createDataRow(dataObject, columns, 0);
+
+      expect(dataRow.cells).toHaveLength(1);
+      expect(dataRow.cells[0].displayValue).toBe('a b');
+    });
+  });
+
+  describe('column[].customizeText', () => {
+    it('should override text in DataRow', () => {
+      const { columnsController, itemsController } = setup({
+        columns: [
+          {
+            dataField: 'a',
+            customizeText: ({ valueText }) => `aa ${valueText} aa`,
+          },
+        ],
+      });
+
+      const dataObject = { a: 'a', b: 'b' };
+      const columns = columnsController.columns.unreactive_get();
+      const dataRow = itemsController.createDataRow(dataObject, columns, 0);
+
+      expect(dataRow.cells).toHaveLength(1);
+      expect(dataRow.cells[0].text).toBe('aa a aa');
+    });
+  });
+
+  describe('column[].dataField', () => {
+    it('should determine which value from data will be used', () => {
+      const { columnsController, itemsController } = setup({
+        columns: [{ dataField: 'a' }, { dataField: 'b' }],
+      });
+
+      const dataObject = { a: 'a text', b: 'b text' };
+      const columns = columnsController.columns.unreactive_get();
+      const dataRow = itemsController.createDataRow(dataObject, columns, 0);
+
+      expect(dataRow.cells).toHaveLength(2);
+      expect(dataRow.cells[0].text).toBe('a text');
+      expect(dataRow.cells[1].text).toBe('b text');
+    });
+  });
+
+  describe('column[].dataType', () => {
+    it('should affect column default settings', () => {
+      const { columnsController } = setup({
+        columns: [
+          { dataField: 'a', dataType: 'number' },
+          { dataField: 'b', dataType: 'boolean' },
+        ],
+      });
+
+      const columns = columnsController.columns.unreactive_get();
+
+      expect(columns).toHaveLength(2);
+      expect(columns[0].alignment).toMatchInlineSnapshot('"right"');
+      expect(columns[1].alignment).toMatchInlineSnapshot('"center"');
+    });
+  });
+
+  (['falseText', 'trueText'] as const).forEach((propName) => {
+    describe(`column[].${propName}`, () => {
+      it('should be used as text for boolean column', () => {
+        const { columnsController, itemsController } = setup({
+          columns: [
+            {
+              dataField: 'a',
+              dataType: 'boolean',
+              [propName]: `my ${propName} text`,
+            },
+          ],
+        });
+
+        const dataObject = { a: propName === 'trueText' };
+        const columns = columnsController.columns.unreactive_get();
+        const dataRow = itemsController.createDataRow(dataObject, columns, 0);
+
+        expect(dataRow.cells).toHaveLength(1);
+        expect(dataRow.cells[0].text).toBe(`my ${propName} text`);
+      });
+    });
+  });
+
+  describe('column[].format', () => {
+    it('should affect dataRow text', () => {
+      const { columnsController, itemsController } = setup({
+        columns: [
+          {
+            dataField: 'a',
+            format: 'currency',
+          },
+        ],
+      });
+
+      const dataObject = { a: 123 };
+      const columns = columnsController.columns.unreactive_get();
+      const dataRow = itemsController.createDataRow(dataObject, columns, 0);
+
+      expect(dataRow.cells).toHaveLength(1);
+      expect(dataRow.cells[0].text).toBe('$123');
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.ts
new file mode 100644
index 000000000000..fd14576c8b0e
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.ts
@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { DataType } from '@js/common';
+import messageLocalization from '@js/localization/message';
+
+import type { Template, WithRequired } from '../types';
+import type { Column } from './types';
+
+interface NonNormalizedColumnOptions {
+  calculateDisplayValue: string | ((this: Column, data: unknown) => unknown);
+  headerItemTemplate?: Template<{ column: Column }>;
+}
+
+export type ColumnSettings = Partial<
+Omit<Column, keyof NonNormalizedColumnOptions>
+& NonNormalizedColumnOptions
+>;
+
+export type PreNormalizedColumn = WithRequired<ColumnSettings, 'name' | 'visibleIndex'>;
+
+export type ColumnProperties = ColumnSettings | string;
+
+export const defaultColumnProperties = {
+  dataType: 'string',
+  calculateCellValue(data): unknown {
+    // @ts-expect-error
+    return data[this.dataField!];
+  },
+  calculateDisplayValue(data): unknown {
+    return this.calculateCellValue(data);
+  },
+  alignment: 'left',
+  visible: true,
+  allowReordering: true,
+  trueText: messageLocalization.format('dxDataGrid-trueText'),
+  falseText: messageLocalization.format('dxDataGrid-falseText'),
+} satisfies Partial<Column>;
+
+export const defaultColumnPropertiesByDataType: Record<
+DataType,
+Exclude<ColumnProperties, string>
+> = {
+  boolean: {
+    alignment: 'center',
+    customizeText({ value }): string {
+      return value
+        ? this.trueText
+        : this.falseText;
+    },
+  },
+  string: {
+
+  },
+  date: {
+
+  },
+  datetime: {
+
+  },
+  number: {
+    alignment: 'right',
+  },
+  object: {
+
+  },
+};
+
+export interface Options {
+  columns?: ColumnProperties[];
+
+  allowColumnReordering?: boolean;
+}
+
+export const defaultOptions = {
+  allowColumnReordering: false,
+} satisfies Options;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/public_methods.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/public_methods.test.ts
new file mode 100644
index 000000000000..9ef479fdc33d
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/public_methods.test.ts
@@ -0,0 +1,65 @@
+/* eslint-disable spellcheck/spell-checker */
+import { describe, expect, it } from '@jest/globals';
+
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { ColumnsController } from './columns_controller';
+import type { Options } from './options';
+import { PublicMethods } from './public_methods';
+
+const setup = (config: Options = {}) => {
+  const options = new OptionsControllerMock(config);
+  const columnsController = new ColumnsController(options);
+
+  // @ts-expect-error
+  const gridCore = new (PublicMethods(class {
+    protected columnsController = columnsController;
+  }))();
+
+  return {
+    options,
+    columnsController,
+    gridCore,
+  };
+};
+
+describe('PublicMethods', () => {
+  describe('getVisibleColumns', () => {
+    it('should return visible columns', () => {
+      const { gridCore } = setup({
+        columns: ['a', 'b', { dataField: 'c', visible: false }],
+      });
+
+      expect(gridCore.getVisibleColumns()).toMatchObject([
+        { name: 'a' },
+        { name: 'b' },
+      ]);
+    });
+  });
+
+  describe('addColumn', () => {
+    // tested in columns_controller.test.ts
+  });
+
+  describe('getVisibleColumnIndex', () => {
+    const { gridCore } = setup({
+      columns: [{ dataField: 'a', visible: false }, 'b', 'c'],
+    });
+
+    it('should return visible index of visible column', () => {
+      expect(gridCore.getVisibleColumnIndex('b')).toBe(0);
+      expect(gridCore.getVisibleColumnIndex('c')).toBe(1);
+    });
+
+    it('should return -1 for non-visible colunm', () => {
+      expect(gridCore.getVisibleColumnIndex('a')).toBe(-1);
+    });
+  });
+
+  describe('deleteColumn', () => {
+    // tested in columns_controller.test.ts
+  });
+
+  describe('columnOption', () => {
+    // tested in columns_controller.test.ts
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/public_methods.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/public_methods.ts
new file mode 100644
index 000000000000..043bddfc20b0
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/public_methods.ts
@@ -0,0 +1,109 @@
+/* eslint-disable max-classes-per-file */
+/* eslint-disable consistent-return */
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+import { isObject } from '@js/core/utils/type';
+
+import type { Constructor } from '../types';
+import type { GridCoreNewBase } from '../widget';
+import type { ColumnProperties, ColumnSettings } from './options';
+import type { Column } from './types';
+import { getColumnByIndexOrName } from './utils';
+
+export function PublicMethods<TBase extends Constructor<GridCoreNewBase>>(GridCore: TBase) {
+  return class GridCoreWithColumnsController extends GridCore {
+    public getVisibleColumns(): Column[] {
+      return this.columnsController.visibleColumns.unreactive_get();
+    }
+
+    public addColumn(column: ColumnProperties): void {
+      this.columnsController.addColumn(column);
+    }
+
+    public getVisibleColumnIndex(columnNameOrIndex: string | number): number {
+      const column = getColumnByIndexOrName(
+        this.columnsController.columns.unreactive_get(),
+        columnNameOrIndex,
+      );
+
+      return this.columnsController.visibleColumns.unreactive_get()
+        .findIndex(
+          (c) => c.name === column?.name,
+        );
+    }
+
+    public deleteColumn(columnNameOrIndex: string | number): void {
+      const column = getColumnByIndexOrName(
+        this.columnsController.columns.unreactive_get(),
+        columnNameOrIndex,
+      );
+
+      if (!column) {
+        return;
+      }
+
+      this.columnsController.deleteColumn(column);
+    }
+
+    public columnOption(
+      columnNameOrIndex: string | number,
+    ): Column;
+    public columnOption(
+      columnNameOrIndex: string | number,
+      options: ColumnSettings,
+    ): void;
+    public columnOption<T extends keyof ColumnSettings>(
+      columnNameOrIndex: string | number,
+      option: T,
+      value: ColumnSettings[T]
+    ): void;
+    public columnOption<T extends keyof ColumnSettings>(
+      columnNameOrIndex: string | number,
+      option: T,
+      value: ColumnSettings[T]
+    ): void;
+    public columnOption<T extends keyof ColumnSettings>(
+      columnNameOrIndex: string | number,
+      option: T
+    ): Column[T];
+    public columnOption<T extends keyof ColumnSettings>(
+      columnNameOrIndex: string | number,
+      option?: T | ColumnSettings,
+      value?: ColumnSettings[T],
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+    ): Column | Column[T] | void {
+      const column = getColumnByIndexOrName(
+        this.columnsController.columns.unreactive_get(),
+        columnNameOrIndex,
+      );
+
+      if (!column) {
+        return;
+      }
+
+      if (arguments.length === 1) {
+        return column;
+      }
+
+      if (arguments.length === 2) {
+        if (isObject(option)) {
+          Object.entries(option).forEach(([optionName, optionValue]) => {
+            this.columnsController.columnOption(
+              column,
+              optionName as keyof Column,
+              optionValue,
+            );
+          });
+        } else {
+          return column[option as T];
+        }
+      }
+
+      if (arguments.length === 3) {
+        this.columnsController.columnOption(column, option as keyof Column, value);
+      }
+    }
+  };
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/types.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/types.ts
new file mode 100644
index 000000000000..5b7b623f8e34
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/types.ts
@@ -0,0 +1,64 @@
+import type { Format, SortOrder } from '@js/common';
+import type { ColumnBase } from '@js/common/grids';
+import type { ComponentType } from 'inferno';
+
+type InheritedColumnProps =
+  | 'alignment'
+  | 'dataType'
+  | 'visible'
+  | 'visibleIndex'
+  | 'allowReordering'
+  | 'trueText'
+  | 'falseText'
+  | 'caption';
+
+export type Column = Pick<Required<ColumnBase>, InheritedColumnProps> & {
+  dataField?: string;
+
+  sortOrder?: SortOrder; // todo: move to sorting module
+  sortIndex?: number; // todo: move to sorting module
+
+  name: string;
+
+  calculateCellValue: (this: Column, data: unknown) => unknown;
+
+  calculateDisplayValue: (this: Column, data: unknown) => unknown;
+
+  format?: Format;
+
+  customizeText?: (this: Column, info: {
+    value: unknown;
+    valueText: string;
+  }) => string;
+
+  editorTemplate?: unknown;
+
+  fieldTemplate?: unknown;
+
+  // TODO: move to cardview/headerpanel
+  headerItemTemplate?: ComponentType<{ column: Column }>;
+
+  headerItemCssClass?: string;
+};
+
+export type VisibleColumn = Column & { visible: true };
+
+export interface Cell {
+  value: unknown;
+
+  displayValue: unknown;
+
+  text: string;
+
+  column: Column;
+}
+
+export interface DataRow {
+  cells: Cell[];
+
+  key: unknown;
+
+  data: unknown;
+
+  index: number;
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/utils.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/utils.test.ts
new file mode 100644
index 000000000000..46bf9087e6cb
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/utils.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { getVisibleIndexes } from './utils';
+
+describe('getVisibleIndexes', () => {
+  it('should create visible indexes if not present', () => {
+    expect(getVisibleIndexes([
+      undefined, undefined, undefined, undefined,
+    ])).toEqual([
+      0, 1, 2, 3,
+    ]);
+  });
+
+  it('should preserve visible indexes if present', () => {
+    expect(getVisibleIndexes([
+      3, 1, 0, 2,
+    ])).toEqual([
+      3, 1, 0, 2,
+    ]);
+  });
+
+  it('should fill in missing indexes', () => {
+    expect(getVisibleIndexes([
+      3, undefined, 0, undefined,
+    ])).toEqual([
+      3, 1, 0, 2,
+    ]);
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/utils.ts b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/utils.ts
new file mode 100644
index 000000000000..afc2ec9db176
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/utils.ts
@@ -0,0 +1,153 @@
+import { compileGetter } from '@js/core/utils/data';
+import { captionize } from '@js/core/utils/inflector';
+import { isDefined, isString } from '@js/core/utils/type';
+import type { ComponentType } from 'inferno';
+
+import type { Template } from '../types';
+import type { ColumnProperties, ColumnSettings, PreNormalizedColumn } from './options';
+import { defaultColumnProperties, defaultColumnPropertiesByDataType } from './options';
+import type { Column } from './types';
+
+type TemplateNormalizationFunc = <T>(template: Template<T>) => ComponentType<T>;
+
+function normalizeColumn(
+  column: PreNormalizedColumn,
+  templateNormalizationFunc: TemplateNormalizationFunc,
+): Column {
+  const dataTypeDefault = defaultColumnPropertiesByDataType[
+    column.dataType ?? defaultColumnProperties.dataType
+  ];
+
+  const caption = captionize(column.name);
+
+  const colWithDefaults = {
+    ...defaultColumnProperties,
+    ...dataTypeDefault,
+    caption,
+    ...column,
+  };
+
+  return {
+    ...colWithDefaults,
+    calculateDisplayValue: isString(colWithDefaults.calculateDisplayValue)
+      ? compileGetter(colWithDefaults.calculateDisplayValue) as (data: unknown) => string
+      : colWithDefaults.calculateDisplayValue,
+    headerItemTemplate: colWithDefaults.headerItemTemplate
+      ? templateNormalizationFunc(colWithDefaults.headerItemTemplate)
+      : undefined,
+  };
+}
+
+export function getVisibleIndexes(
+  indexes: (number | undefined)[],
+): number[] {
+  const newIndexes = [...indexes];
+  let minNonExistingIndex = 0;
+
+  indexes.forEach((visibleIndex, index) => {
+    while (newIndexes.includes(minNonExistingIndex)) {
+      minNonExistingIndex += 1;
+    }
+
+    newIndexes[index] = visibleIndex ?? minNonExistingIndex;
+  });
+
+  return newIndexes as number[];
+}
+
+export function normalizeVisibleIndexes(
+  indexes: number[],
+  forceIndex?: number,
+): number[] {
+  const indexMap = indexes.map(
+    (visibleIndex, index) => [index, visibleIndex],
+  );
+
+  const sortedIndexMap = new Array<number>(indexes.length);
+  if (isDefined(forceIndex)) {
+    sortedIndexMap[indexes[forceIndex]] = forceIndex;
+  }
+
+  let j = 0;
+  indexMap
+    .sort((a, b) => a[1] - b[1])
+    .forEach(([index]) => {
+      if (index === forceIndex) {
+        return;
+      }
+
+      if (isDefined(sortedIndexMap[j])) {
+        j += 1;
+      }
+
+      sortedIndexMap[j] = index;
+      j += 1;
+    });
+
+  const returnIndexes = new Array<number>(indexes.length);
+  sortedIndexMap.forEach((index, visibleIndex) => {
+    returnIndexes[index] = visibleIndex;
+  });
+  return returnIndexes;
+}
+
+export function normalizeColumns(
+  columns: PreNormalizedColumn[],
+  templateNormalizationFunc: TemplateNormalizationFunc,
+): Column[] {
+  const normalizedColumns = columns.map((c) => normalizeColumn(c, templateNormalizationFunc));
+  return normalizedColumns;
+}
+
+export function preNormalizeColumns(columns: ColumnProperties[]): PreNormalizedColumn[] {
+  const normalizedColumns = columns
+    .map((column): ColumnSettings => {
+      if (typeof column === 'string') {
+        return {
+          dataField: column,
+        };
+      }
+
+      return column;
+    })
+    .map((column, index) => ({
+      ...column,
+      name: column.name ?? column.dataField ?? `column-${index}`,
+    }));
+
+  const visibleIndexes = getVisibleIndexes(
+    normalizedColumns.map((c) => c.visibleIndex),
+  );
+
+  normalizedColumns.forEach((_, i) => {
+    normalizedColumns[i].visibleIndex = visibleIndexes[i];
+  });
+
+  return normalizedColumns as PreNormalizedColumn[];
+}
+
+export function normalizeStringColumn(column: ColumnProperties): ColumnSettings {
+  if (typeof column === 'string') {
+    return { dataField: column };
+  }
+
+  return column;
+}
+
+export function getColumnIndexByName(columns: PreNormalizedColumn[], name: string): number {
+  return columns.findIndex((c) => c.name === name);
+}
+
+export function getColumnByIndexOrName(
+  columns: Column[],
+  columnNameOrIndex: string | number,
+): Column | undefined {
+  const column = columns.find((c, i) => {
+    if (isString(columnNameOrIndex)) {
+      return c.name === columnNameOrIndex;
+    }
+    return i === columnNameOrIndex;
+  });
+
+  return column;
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/content_view/content_view.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/content_view.tsx
new file mode 100644
index 000000000000..245479a6a7a0
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/content_view.tsx
@@ -0,0 +1,88 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type dxScrollable from '@js/ui/scroll_view/ui.scrollable';
+import { resizeObserverSingleton } from '@ts/core/m_resize_observer';
+import type { ErrorRowProperties } from '@ts/grids/new/grid_core/content_view/error_row';
+import { ErrorRow } from '@ts/grids/new/grid_core/content_view/error_row';
+import type { NoDataTextProperties } from '@ts/grids/new/grid_core/content_view/no_data_text';
+import { NoDataText } from '@ts/grids/new/grid_core/content_view/no_data_text';
+import { LoadPanel, type LoadPanelProperties } from '@ts/grids/new/grid_core/inferno_wrappers/load_panel';
+import type { Props as ScrollableProps } from '@ts/grids/new/grid_core/inferno_wrappers/scrollable';
+import { Scrollable } from '@ts/grids/new/grid_core/inferno_wrappers/scrollable';
+import type { RefObject } from 'inferno';
+import { Component, createRef } from 'inferno';
+
+export const CLASSES = {
+  contentView: 'dx-gridcore-contentview',
+};
+
+export interface ContentViewProps {
+  errorRowProps: ErrorRowProperties;
+  loadPanelProps: LoadPanelProperties & { visible: boolean };
+  noDataTextProps: NoDataTextProperties & { visible: boolean };
+
+  scrollableProps: ScrollableProps;
+
+  virtualScrollingProps?: {
+    heightUp?: number;
+    heightDown?: number;
+  };
+
+  onViewportHeightChange?: (value: number) => void;
+
+  scrollTop?: number;
+
+  onScroll?: (scrollTop: number) => void;
+
+  onWidthChange?: (value: number) => void;
+
+  scrollableRef?: RefObject<dxScrollable>;
+}
+
+export class ContentView extends Component<ContentViewProps> {
+  private readonly scrollableRef = createRef<Scrollable>();
+
+  private readonly containerRef = createRef<HTMLDivElement>();
+
+  public render(): JSX.Element {
+    return (
+      <div className={CLASSES.contentView} ref={this.containerRef}>
+        <LoadPanel {...this.props.loadPanelProps} />
+        <Scrollable
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ref={this.scrollableRef as any}
+          componentRef={this.props.scrollableRef}
+          {...this.props.scrollableProps}
+        >
+          {this.props.noDataTextProps.visible && <NoDataText {...this.props.noDataTextProps} />}
+          {this.props.children!}
+        </Scrollable>
+        <ErrorRow {...this.props.errorRowProps} />
+      </div>
+    );
+  }
+
+  private updateSizesInfo(): void {
+    const clientHeight = this.scrollableRef.current!.clientHeight();
+    this.props?.onViewportHeightChange?.(clientHeight);
+  }
+
+  public componentDidMount(): void {
+    this.updateSizesInfo();
+    resizeObserverSingleton.observe(
+      this.containerRef.current!,
+      (entry: ResizeObserverEntry) => {
+        this.props.onWidthChange?.(entry.contentRect.width);
+      },
+    );
+  }
+
+  public componentDidUpdate(): void {
+    this.updateSizesInfo();
+  }
+
+  public componentWillUnmount(): void {
+    resizeObserverSingleton.unobserve(
+      this.containerRef.current!,
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/content_view/error_row.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/error_row.tsx
new file mode 100644
index 000000000000..dd2b1279644f
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/error_row.tsx
@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type dxToast from '@js/ui/toast';
+import { Toast } from '@ts/grids/new/grid_core/inferno_wrappers/toast';
+import { Component, createRef } from 'inferno';
+
+import type { GridError } from '../error_controller/error_controller';
+
+export const CLASSES = {
+  errorRow: 'dx-gridcore-error-row',
+};
+
+export interface ErrorRowProperties {
+  errors: GridError[];
+
+  enabled: boolean;
+
+  onRemoveButtonClicked?: (index: number) => void;
+}
+
+export class ErrorRow extends Component<ErrorRowProperties> {
+  private readonly ref = createRef<HTMLDivElement>();
+
+  private readonly toastRef = createRef<dxToast>();
+
+  public render(): JSX.Element {
+    const lastError = this.props.errors.at(-1);
+
+    return (
+      <div ref={this.ref} className={CLASSES.errorRow}>
+        {this.props.enabled && lastError && (
+          <Toast
+            componentRef={this.toastRef}
+            key={lastError.id}
+            visible={true}
+            message={lastError.text}
+            type={'error'}
+          />
+        )}
+      </div>
+    );
+  }
+
+  public componentDidUpdate(): void {
+    this.toastRef.current?.option('position', {
+      my: 'bottom',
+      at: 'bottom',
+      of: this.ref.current!,
+    });
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/content_view/index.ts b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/index.ts
new file mode 100644
index 000000000000..5f30ef383a5c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/index.ts
@@ -0,0 +1 @@
+export * from './options';
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/content_view/load_panel.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/load_panel.tsx
new file mode 100644
index 000000000000..3482d4037a45
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/load_panel.tsx
@@ -0,0 +1 @@
+export { LoadPanel } from '../inferno_wrappers/load_panel';
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/content_view/no_data_text.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/no_data_text.tsx
new file mode 100644
index 000000000000..bff81cfb478b
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/no_data_text.tsx
@@ -0,0 +1,26 @@
+import type { ComponentType, InfernoNode } from 'inferno';
+import { Component } from 'inferno';
+
+export interface NoDataTextProperties {
+  text: string;
+  template?: ComponentType<{ text: string }>;
+}
+
+export const CLASSES = {
+  noData: 'dx-gridcore-nodata',
+};
+
+export class NoDataText extends Component<NoDataTextProperties> {
+  public render(): InfernoNode {
+    if (this.props.template) {
+      const Template = this.props.template;
+      return <Template text={this.props.text} />;
+    }
+
+    return (
+      <span className={CLASSES.noData}>
+        { this.props.text }
+      </span>
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/content_view/options.ts b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/options.ts
new file mode 100644
index 000000000000..a87283aea307
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/options.ts
@@ -0,0 +1,21 @@
+import type { ScrollingBase } from '@js/common/grids';
+import messageLocalization from '@js/localization/message';
+import type { Properties as LoadPanelProps } from '@js/ui/load_panel';
+import type { Template } from '@ts/grids/new/grid_core/types';
+
+export interface Options {
+  scrolling?: Pick<ScrollingBase, 'scrollByContent' | 'scrollByThumb' | 'showScrollbar' | 'useNative'>;
+
+  errorRowEnabled?: boolean;
+
+  loadPanel?: LoadPanelProps;
+
+  noDataText?: string;
+
+  noDataTemplate?: Template<{ text: string }>;
+}
+
+export const defaultOptions = {
+  errorRowEnabled: true,
+  noDataText: messageLocalization.format('dxDataGrid-noDataText'),
+} satisfies Options;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/content_view/public_methods.ts b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/public_methods.ts
new file mode 100644
index 000000000000..4fa8771dd646
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/public_methods.ts
@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import type dxScrollable from '@js/ui/scroll_view/ui.scrollable';
+import { DataController } from '@ts/grids/new/grid_core/data_controller/index';
+import type { Constructor } from '@ts/grids/new/grid_core/types';
+
+import type { GridCoreNewBase } from '../widget';
+import { ContentView } from './view';
+
+export function PublicMethods<T extends Constructor<GridCoreNewBase>>(GridCore: T) {
+  return class GridCoreWithContentView extends GridCore {
+    public getScrollable(): dxScrollable {
+      return this.diContext.get(ContentView).scrollableRef.current!;
+    }
+
+    public beginCustomLoading(text?: string): void {
+      const contentView = this.diContext.get(ContentView);
+      const dataController = this.diContext.get(DataController);
+
+      if (text) {
+        contentView.loadingText.update(text);
+      }
+
+      dataController.isLoading.update(true);
+    }
+
+    public endCustomLoading(): void {
+      const dataController = this.diContext.get(DataController);
+
+      dataController.isLoading.update(false);
+    }
+  };
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/content_view/view.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/view.tsx
new file mode 100644
index 000000000000..388830a55fea
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/content_view/view.tsx
@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import type dxScrollable from '@js/ui/scroll_view/ui.scrollable';
+import type { ScrollEventInfo } from '@js/ui/scroll_view/ui.scrollable';
+import { combined, computed, state } from '@ts/core/reactive/index';
+import { ColumnsController } from '@ts/grids/new/grid_core/columns_controller/columns_controller';
+import { View } from '@ts/grids/new/grid_core/core/view';
+import { DataController } from '@ts/grids/new/grid_core/data_controller/index';
+import { ErrorController } from '@ts/grids/new/grid_core/error_controller/error_controller';
+import { createRef } from 'inferno';
+
+import { ItemsController } from '../items_controller/items_controller';
+import { OptionsController } from '../options_controller/options_controller';
+
+export abstract class ContentView<TProps extends {}> extends View<TProps> {
+  private readonly isNoData = computed(
+    (isLoading, items) => !isLoading && items.length === 0,
+    [this.dataController.isLoading, this.dataController.items],
+  );
+
+  public readonly scrollableRef = createRef<dxScrollable>();
+
+  public loadingText = this.options.twoWay('loadPanel.message');
+
+  protected readonly viewportHeight = state(0);
+
+  protected readonly scrollTop = state(0);
+
+  protected readonly width = state(0);
+
+  public static dependencies = [
+    DataController,
+    OptionsController,
+    ErrorController,
+    ColumnsController,
+    ItemsController,
+  ] as const;
+
+  constructor(
+    protected readonly dataController: DataController,
+    protected readonly options: OptionsController,
+    protected readonly errorController: ErrorController,
+    protected readonly columnsController: ColumnsController,
+    protected readonly itemsController: ItemsController,
+  ) {
+    super();
+  }
+
+  protected getBaseProps() {
+    return {
+      loadPanelProps: computed(
+        (visible, loadPanel) => ({
+          ...loadPanel,
+          visible,
+        }),
+        [
+          this.dataController.isLoading,
+          this.options.oneWay('loadPanel'),
+        ],
+      ),
+      noDataTextProps: combined({
+        text: this.options.oneWay('noDataText'),
+        template: this.options.template('noDataTemplate'),
+        visible: this.isNoData,
+      }),
+      errorRowProps: combined({
+        enabled: this.options.oneWay('errorRowEnabled'),
+        errors: this.errorController.errors,
+      }),
+      onWidthChange: this.width.update.bind(this.width),
+      virtualScrollingProps: combined({
+        heightUp: 0,
+        heightDown: 0,
+        // heightUp: computed((virtualState) => virtualState.virtualTop, [this.virtualState]),
+        // heightDown: computed((virtualState) => virtualState.virtualBottom, [this.virtualState]),
+      }),
+      onViewportHeightChange: this.viewportHeight.update.bind(this.viewportHeight),
+      scrollableRef: this.scrollableRef,
+      scrollableProps: combined({
+        onScroll: this.onScroll.bind(this),
+        direction: 'both' as const,
+        scrollTop: this.scrollTop,
+        scrollByContent: this.options.oneWay('scrolling.scrollByContent'),
+        scrollByThumb: this.options.oneWay('scrolling.scrollByThumb'),
+        showScrollbar: this.options.oneWay('scrolling.showScrollbar'),
+        useNative: computed(
+          (useNative) => (useNative === 'auto' ? undefined : useNative),
+          [this.options.oneWay('scrolling.useNative')],
+        ),
+      }),
+    };
+  }
+
+  private onScroll(e: ScrollEventInfo<unknown>): void {
+    this.scrollTop.update(e.scrollOffset.top);
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/core/config_context.ts b/packages/devextreme/js/__internal/grids/new/grid_core/core/config_context.ts
new file mode 100644
index 000000000000..76bb01034b20
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/core/config_context.ts
@@ -0,0 +1,14 @@
+import { createContext } from '@ts/core/r1/runtime/inferno/index';
+import type { Properties } from '@ts/core/widget/widget';
+
+export interface Config {
+  rtlEnabled: Properties['rtlEnabled'];
+  disabled: Properties['disabled'];
+  templatesRenderAsynchronously: unknown; // TODO: Properties['templatesRenderAsynchronously'];
+}
+
+export const ConfigContext = createContext<Config>({
+  rtlEnabled: undefined,
+  disabled: undefined,
+  templatesRenderAsynchronously: undefined,
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/core/view.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/core/view.tsx
new file mode 100644
index 000000000000..6cd0ae17ddf6
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/core/view.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-this-alias */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable max-classes-per-file */
+/* eslint-disable spellcheck/spell-checker */
+import { infernoRenderer } from '@ts/core/m_inferno_renderer';
+import type { Subscription, SubsGets } from '@ts/core/reactive/index';
+import { toSubscribable } from '@ts/core/reactive/index';
+import { Component, type ComponentType } from 'inferno';
+
+export abstract class View<T extends {}> {
+  private inferno: undefined | ComponentType;
+
+  private props?: T;
+
+  private readonly firstRender = true;
+
+  protected abstract component: ComponentType<T>;
+
+  protected abstract getProps(): SubsGets<T>;
+
+  public render(root: Element): Subscription {
+    const ViewComponent = this.component;
+    return toSubscribable(this.getProps()).subscribe((props: T) => {
+      this.props = props;
+      const content = (
+        <ViewComponent {...props}/>
+      );
+
+      infernoRenderer.renderIntoContainer(content, root, !this.firstRender);
+    });
+  }
+
+  public asInferno(): ComponentType {
+    // eslint-disable-next-line no-return-assign
+    return this.inferno ??= this._asInferno();
+  }
+
+  private _asInferno() {
+    const view = this;
+
+    interface State {
+      props: T;
+    }
+
+    return class InfernoView extends Component<{}, State> {
+      private readonly subscription: Subscription;
+
+      constructor() {
+        super();
+        this.subscription = toSubscribable(view.getProps()).subscribe((props) => {
+          this.state ??= {
+            props,
+          };
+
+          if (this.state.props !== props) {
+            this.setState({ props });
+          }
+        });
+      }
+
+      public render(): JSX.Element | undefined {
+        const ViewComponent = view.component;
+        return <ViewComponent {...this.state!.props}/>;
+      }
+    };
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/__snapshots__/options.test.ts.snap b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/__snapshots__/options.test.ts.snap
new file mode 100644
index 000000000000..bdab937fa145
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/__snapshots__/options.test.ts.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Options onDataErrorOccurred should be called when load error happens 1`] = `
+[
+  {
+    "component": Any<Object>,
+    "error": [Error: my error],
+  },
+]
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/data_controller.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/data_controller.ts
new file mode 100644
index 000000000000..f9ff6fafd34c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/data_controller.ts
@@ -0,0 +1,213 @@
+/* eslint-disable @typescript-eslint/no-invalid-void-type */
+/* eslint-disable no-param-reassign */
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { DataSource } from '@js/common/data';
+import ArrayStore from '@js/common/data/array_store';
+import type { SubsGets } from '@ts/core/reactive/index';
+import {
+  computed, effect, state,
+} from '@ts/core/reactive/index';
+import { createPromise } from '@ts/core/utils/promise';
+
+import { OptionsController } from '../options_controller/options_controller';
+import type { DataObject, Key } from './types';
+import {
+  getLocalLoadOptions,
+  getStoreLoadOptions,
+  isCustomStore,
+  isLocalStore,
+  normalizeDataSource,
+  normalizeLocalOptions,
+  normalizeRemoteOptions,
+  updateItemsImmutable,
+} from './utils';
+
+export class DataController {
+  private readonly pendingLocalOperations = {};
+
+  private readonly loadedPromise = createPromise<void>();
+
+  private readonly dataSourceConfiguration = this.options.oneWay('dataSource');
+
+  private readonly keyExpr = this.options.oneWay('keyExpr');
+
+  public readonly dataSource = computed(
+    (dataSourceLike, keyExpr) => normalizeDataSource(dataSourceLike, keyExpr),
+    [this.dataSourceConfiguration, this.keyExpr],
+  );
+
+  // TODO
+  private readonly cacheEnabled = this.options.oneWay('cacheEnabled');
+
+  private readonly pagingEnabled = this.options.twoWay('paging.enabled');
+
+  public readonly pageIndex = this.options.twoWay('paging.pageIndex');
+
+  public readonly pageSize = this.options.twoWay('paging.pageSize');
+
+  private readonly remoteOperations = this.options.oneWay('remoteOperations');
+
+  private readonly onDataErrorOccurred = this.options.action('onDataErrorOccurred');
+
+  private readonly _items = state<DataObject[]>([]);
+
+  public readonly items: SubsGets<DataObject[]> = this._items;
+
+  private readonly _totalCount = state(0);
+
+  public readonly totalCount: SubsGets<number> = this._totalCount;
+
+  public readonly isLoading = state(false);
+
+  public readonly pageCount = computed(
+    (totalCount, pageSize) => Math.ceil(totalCount / pageSize),
+    [this.totalCount, this.pageSize],
+  );
+
+  private readonly normalizedRemoteOptions = computed(
+    (remoteOperations, dataSource) => {
+      const store = dataSource.store();
+      return normalizeRemoteOptions(remoteOperations, isLocalStore(store), isCustomStore(store));
+    },
+    [this.remoteOperations, this.dataSource],
+  );
+
+  private readonly normalizedLocalOperations = computed(
+    (normalizedRemoteOperations) => normalizeLocalOptions(normalizedRemoteOperations),
+    [this.normalizedRemoteOptions],
+  );
+
+  public static dependencies = [OptionsController] as const;
+
+  constructor(
+    private readonly options: OptionsController,
+  ) {
+    effect(
+      (dataSource) => {
+        const changedCallback = (e?): void => {
+          this.onChanged(dataSource, e);
+        };
+        const loadingChangedCallback = (): void => {
+          this.isLoading.update(dataSource.isLoading());
+        };
+        const loadErrorCallback = (error: string): void => {
+          const callback = this.onDataErrorOccurred.unreactive_get();
+          callback({ error });
+          changedCallback();
+        };
+        const customizeStoreLoadOptionsCallback = (e): void => {
+          const localOptions = this.normalizedLocalOperations.unreactive_get();
+          this.pendingLocalOperations[e.operationId] = getLocalLoadOptions(
+            e.storeLoadOptions,
+            localOptions,
+          );
+          e.storeLoadOptions = getStoreLoadOptions(
+            e.storeLoadOptions,
+            localOptions,
+          );
+        };
+
+        const dataLoadedCallback = (e): void => {
+          /*
+            We use Deffered here because the code below is synchronous.
+            customizeLoadResult callback does not support async code.
+          */
+          new ArrayStore(e.data).load(this.pendingLocalOperations[e.operationId]).done((data) => {
+            e.data = data;
+          }).fail((error) => {
+            // @ts-expect-error
+            e.data = new Deferred().reject(error);
+          });
+          this.pendingLocalOperations[e.operationId] = undefined;
+        };
+
+        if (dataSource.isLoaded()) {
+          changedCallback();
+        }
+        dataSource.on('changed', changedCallback);
+        dataSource.on('loadingChanged', loadingChangedCallback);
+        dataSource.on('loadError', loadErrorCallback);
+
+        // @ts-expect-error
+        dataSource.on('customizeStoreLoadOptions', customizeStoreLoadOptionsCallback);
+        // @ts-expect-error
+        dataSource.on('customizeLoadResult', dataLoadedCallback);
+
+        return (): void => {
+          dataSource.off('changed', changedCallback);
+          dataSource.off('loadingChanged', loadingChangedCallback);
+          dataSource.off('loadError', loadErrorCallback);
+
+          // @ts-expect-error
+          dataSource.off('customizeStoreLoadOptions', customizeStoreLoadOptionsCallback);
+          // @ts-expect-error
+          dataSource.off('customizeLoadResult', dataLoadedCallback);
+        };
+      },
+      [this.dataSource],
+    );
+
+    effect(
+      () => {
+        if (this.dataSource.unreactive_get().isLoaded()) {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          this.dataSource.unreactive_get().load();
+        }
+      },
+      [this.normalizedRemoteOptions],
+    );
+
+    effect(
+      (dataSource, pageIndex, pageSize, pagingEnabled) => {
+        let someParamChanged = false;
+        if (dataSource.pageIndex() !== pageIndex) {
+          dataSource.pageIndex(pageIndex);
+          someParamChanged ||= true;
+        }
+        if (dataSource.pageSize() !== pageSize) {
+          dataSource.pageSize(pageSize);
+          someParamChanged ||= true;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+        if (dataSource.requireTotalCount() !== true) {
+          dataSource.requireTotalCount(true);
+          someParamChanged ||= true;
+        }
+        if (dataSource.paginate() !== pagingEnabled) {
+          dataSource.paginate(pagingEnabled);
+          someParamChanged ||= true;
+        }
+
+        if (someParamChanged || !dataSource.isLoaded()) {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          dataSource.load();
+        }
+      },
+      [this.dataSource, this.pageIndex, this.pageSize, this.pagingEnabled],
+    );
+  }
+
+  private onChanged(dataSource: DataSource, e): void {
+    let items = dataSource.items() as DataObject[];
+
+    if (e?.changes) {
+      items = this._items.unreactive_get();
+      items = updateItemsImmutable(items, e.changes, dataSource.store());
+    }
+
+    this._items.update(items);
+    this.pageIndex.update(dataSource.pageIndex());
+    this.pageSize.update(dataSource.pageSize());
+    this._totalCount.update(dataSource.totalCount());
+    this.loadedPromise.resolve();
+  }
+
+  public getDataKey(data: DataObject): Key {
+    return this.dataSource.unreactive_get().store().keyOf(data);
+  }
+
+  public waitLoaded(): Promise<void> {
+    return this.loadedPromise.promise;
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/index.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/index.ts
new file mode 100644
index 000000000000..11e3ebad75f5
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/index.ts
@@ -0,0 +1,3 @@
+export { DataController } from './data_controller';
+export { defaultOptions, type Options } from './options';
+export { PublicMethods } from './public_methods';
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/options.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/options.test.ts
new file mode 100644
index 000000000000..6f8c56c63b0e
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/options.test.ts
@@ -0,0 +1,320 @@
+/* eslint-disable spellcheck/spell-checker */
+import {
+  afterAll,
+  beforeAll,
+  describe, expect, it, jest,
+} from '@jest/globals';
+import { CustomStore } from '@js/common/data';
+import DataSource from '@js/data/data_source';
+import { logger } from '@ts/core/utils/m_console';
+import ArrayStore from '@ts/data/m_array_store';
+
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { DataController } from './data_controller';
+
+beforeAll(() => {
+  jest.spyOn(logger, 'error').mockImplementation(() => {});
+});
+afterAll(() => {
+  jest.restoreAllMocks();
+});
+
+const setup = (options: Options) => {
+  const optionsController = new OptionsControllerMock(options);
+  const dataController = new DataController(optionsController);
+
+  return {
+    optionsController,
+    dataController,
+  };
+};
+
+describe('Options', () => {
+  describe('cacheEnabled', () => {
+    const setupForCacheEnabled = ({ cacheEnabled }) => {
+      const store = new ArrayStore({
+        data: [
+          { id: 1, value: 'value 1' },
+          { id: 2, value: 'value 2' },
+          { id: 3, value: 'value 3' },
+        ],
+        key: 'id',
+      });
+
+      jest.spyOn(store, 'load');
+
+      const { dataController } = setup({
+        cacheEnabled,
+        dataSource: store,
+        paging: {
+          pageSize: 1,
+        },
+      });
+
+      return { store, dataController };
+    };
+
+    describe('when it is false', () => {
+      it('should skip caching requests', () => {
+        const { store, dataController } = setupForCacheEnabled({
+          cacheEnabled: false,
+        });
+        expect(store.load).toBeCalledTimes(1);
+
+        dataController.pageIndex.update(1);
+        expect(store.load).toBeCalledTimes(2);
+
+        dataController.pageIndex.update(0);
+        expect(store.load).toBeCalledTimes(3);
+      });
+    });
+
+    describe('when it is true', () => {
+      it.skip('should cache previously loaded pages', () => {});
+      it.skip('should clear cache if not only pageIndex changed', () => {});
+    });
+  });
+
+  describe('dataSourse', () => {
+    describe('when it is dataSource instance', () => {
+      it('should pass dataSource as is', () => {
+        const dataSource = new DataSource({
+          store: [{ a: 1 }, { b: 2 }],
+        });
+
+        const { dataController } = setup({ dataSource });
+
+        expect(dataController.dataSource.unreactive_get()).toBe(dataSource);
+      });
+    });
+    describe('when it is array', () => {
+      it('should normalize to DataSource with given items', () => {
+        const data = [{ a: 1 }, { b: 2 }];
+        const { dataController } = setup({ dataSource: data });
+
+        const dataSource = dataController.dataSource.unreactive_get();
+
+        expect(dataSource).toBeInstanceOf(DataSource);
+        expect(dataSource.items()).toEqual(data);
+      });
+    });
+    describe('when it is empty', () => {
+      it('should should normalize to empty DataSource', () => {
+        const { dataController } = setup({});
+
+        const dataSource = dataController.dataSource.unreactive_get();
+
+        expect(dataSource).toBeInstanceOf(DataSource);
+        expect(dataSource.items()).toHaveLength(0);
+      });
+    });
+  });
+
+  describe('keyExpr', () => {
+    describe('when dataSource is array', () => {
+      it('should be passed as key to DataSource', () => {
+        const { dataController } = setup({
+          dataSource: [{ myKeyExpr: 1 }, { myKeyExpr: 2 }],
+          keyExpr: 'myKeyExpr',
+        });
+
+        const dataSource = dataController.dataSource.unreactive_get();
+        expect(dataSource.key()).toBe('myKeyExpr');
+      });
+    });
+    describe('when dataSource is DataSource instance', () => {
+      it('should be ignored', () => {
+        const { dataController } = setup({
+          dataSource: new ArrayStore({
+            key: 'storeKeyExpr',
+            data: [{ storeKeyExpr: 1 }, { storeKeyExpr: 2 }],
+          }),
+          keyExpr: 'myKeyExpr',
+        });
+
+        const dataSource = dataController.dataSource.unreactive_get();
+        expect(dataSource.key()).toBe('storeKeyExpr');
+      });
+    });
+  });
+
+  describe('onDataErrorOccurred', () => {
+    it('should be called when load error happens', async () => {
+      const onDataErrorOccurred = jest.fn();
+
+      const { dataController } = setup({
+        dataSource: new CustomStore({
+          load() {
+            return Promise.reject(new Error('my error'));
+          },
+        }),
+        onDataErrorOccurred,
+      });
+
+      await dataController.waitLoaded();
+
+      expect(onDataErrorOccurred).toBeCalledTimes(1);
+      expect(onDataErrorOccurred.mock.calls[0]).toMatchSnapshot([{
+        component: expect.any(Object),
+      }]);
+    });
+  });
+
+  describe('paging.enabled', () => {
+    describe('when it is true', () => {
+      it('should turn on pagination', () => {
+        const { dataController } = setup({
+          dataSource: [{ a: '1' }, { a: '2' }, { a: '3' }, { a: '4' }],
+          paging: {
+            enabled: true,
+            pageSize: 2,
+          },
+        });
+
+        const items = dataController.items.unreactive_get();
+        expect(items).toHaveLength(2);
+      });
+    });
+    describe('when it is false', () => {
+      it('should turn on pagination', () => {
+        const { dataController } = setup({
+          dataSource: [{ a: '1' }, { a: '2' }, { a: '3' }, { a: '4' }],
+          paging: {
+            enabled: false,
+            pageSize: 2,
+          },
+        });
+
+        const items = dataController.items.unreactive_get();
+        expect(items).toHaveLength(4);
+      });
+    });
+  });
+
+  describe('paging.pageIndex', () => {
+    it('should change current page', () => {
+      const { dataController, optionsController } = setup({
+        dataSource: [{ a: '1' }, { a: '2' }, { a: '3' }, { a: '4' }],
+        paging: {
+          pageSize: 2,
+          pageIndex: 1,
+        },
+      });
+
+      let items = dataController.items.unreactive_get();
+      expect(items).toEqual([{ a: '3' }, { a: '4' }]);
+
+      optionsController.option('paging.pageIndex', 0);
+      items = dataController.items.unreactive_get();
+      expect(items).toEqual([{ a: '1' }, { a: '2' }]);
+    });
+  });
+
+  describe('paging.pageSize', () => {
+    it('should change size of current page', () => {
+      const { dataController, optionsController } = setup({
+        dataSource: [{ a: '1' }, { a: '2' }, { a: '3' }, { a: '4' }],
+        paging: {
+          pageSize: 2,
+        },
+      });
+
+      let items = dataController.items.unreactive_get();
+      expect(items).toEqual([{ a: '1' }, { a: '2' }]);
+
+      optionsController.option('paging.pageSize', 3);
+      items = dataController.items.unreactive_get();
+      expect(items).toEqual([{ a: '1' }, { a: '2' }, { a: '3' }]);
+    });
+  });
+
+  describe('remoteOperations', () => {
+    const setupForRemoteOperations = ({ remoteOperations }) => {
+      const store = new CustomStore({
+        key: 'id',
+        load(loadOptions) {
+          const data = [
+            { id: 1, value: 'value 1' },
+            { id: 2, value: 'value 2' },
+            { id: 3, value: 'value 3' },
+          ];
+
+          const remotePaging = loadOptions.skip === 0 && !!loadOptions.take;
+          if (remotePaging) {
+            return Promise.resolve({
+              data: [data[0]],
+              totalCount: 1,
+            });
+          }
+
+          return Promise.resolve({
+            data,
+            totalCount: data.length,
+          });
+        },
+      });
+
+      jest.spyOn(store, 'load');
+
+      const { dataController } = setup({
+        remoteOperations,
+        dataSource: store,
+        paging: {
+          pageSize: 1,
+          pageIndex: 0,
+        },
+      });
+
+      return { store, dataController };
+    };
+
+    it('should exclude skip and take in the store load request by default for CustomStore', async () => {
+      const { store, dataController } = setupForRemoteOperations({
+        remoteOperations: 'auto',
+      });
+
+      await dataController.waitLoaded();
+
+      const items = dataController.items.unreactive_get();
+      expect(items).toHaveLength(1);
+
+      // @ts-expect-error
+      expect(store.load.mock.calls[0][0].skip).toBe(undefined);
+      // @ts-expect-error
+      expect(store.load.mock.calls[0][0].take).toBe(undefined);
+    });
+
+    it('should exclude skip and take in the store load request if remotePaging disabled', async () => {
+      const { store, dataController } = setupForRemoteOperations({
+        remoteOperations: { paging: false },
+      });
+
+      await dataController.waitLoaded();
+
+      const items = dataController.items.unreactive_get();
+      expect(items).toHaveLength(1);
+
+      // @ts-expect-error
+      expect(store.load.mock.calls[0][0].skip).toBe(undefined);
+      // @ts-expect-error
+      expect(store.load.mock.calls[0][0].take).toBe(undefined);
+    });
+
+    it('should include skip and take in the store load request if remotePaging enabled', async () => {
+      const { store, dataController } = setupForRemoteOperations({
+        remoteOperations: { paging: true },
+      });
+
+      await dataController.waitLoaded();
+
+      const items = dataController.items.unreactive_get();
+      expect(items).toHaveLength(1);
+
+      // @ts-expect-error
+      expect(store.load.mock.calls[0][0].skip).toBe(0);
+      // @ts-expect-error
+      expect(store.load.mock.calls[0][0].take).toBe(1);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/options.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/options.ts
new file mode 100644
index 000000000000..c44c541e4901
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/options.ts
@@ -0,0 +1,35 @@
+import type { DataSourceLike } from '@js/data/data_source';
+
+import type { Action } from '../types';
+
+interface PagingOptions {
+  enabled?: boolean;
+  pageSize?: number;
+  pageIndex?: number;
+}
+
+interface RemoteOperationsOptions {
+  filtering?: boolean;
+  paging?: boolean;
+  sorting?: boolean;
+  summary?: boolean;
+}
+
+export interface Options {
+  cacheEnabled?: boolean;
+  dataSource?: DataSourceLike<unknown>;
+  keyExpr?: string | string[];
+  onDataErrorOccurred?: Action<{ error: string }>;
+  paging?: PagingOptions;
+  remoteOperations?: RemoteOperationsOptions | boolean | 'auto';
+}
+
+export const defaultOptions = {
+  paging: {
+    enabled: true,
+    pageSize: 6,
+    pageIndex: 0,
+  },
+  remoteOperations: 'auto',
+  cacheEnabled: true,
+} satisfies Options;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.test.ts
new file mode 100644
index 000000000000..c0adb8e137e7
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.test.ts
@@ -0,0 +1,171 @@
+/* eslint-disable spellcheck/spell-checker */
+import {
+  describe, expect, it, jest,
+} from '@jest/globals';
+import ArrayStore from '@ts/data/m_array_store';
+
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { DataController } from './data_controller';
+import { PublicMethods } from './public_methods';
+
+const setup = (options: Options) => {
+  const optionsController = new OptionsControllerMock(options);
+  const dataController = new DataController(optionsController);
+  // @ts-expect-error
+  const gridCore = new (PublicMethods(class {
+    protected dataController = dataController;
+  }))();
+
+  return {
+    optionsController,
+    dataController,
+    gridCore,
+  };
+};
+
+describe('PublicMethods', () => {
+  describe('getDataSource', () => {
+    it('should return current dataSource', () => {
+      const data = [{ a: 1 }, { b: 2 }];
+      const { gridCore, dataController } = setup({ dataSource: data });
+
+      expect(
+        gridCore.getDataSource(),
+      ).toBe(
+        dataController.dataSource.unreactive_get(),
+      );
+    });
+  });
+  describe('byKey', () => {
+    it('should return item by key', async () => {
+      const { gridCore } = setup({
+        keyExpr: 'id',
+        dataSource: [
+          { id: 1, value: 'value 1' },
+          { id: 2, value: 'value 2' },
+        ],
+      });
+
+      expect(await gridCore.byKey(1)).toEqual({ id: 1, value: 'value 1' });
+      expect(await gridCore.byKey(2)).toEqual({ id: 2, value: 'value 2' });
+    });
+
+    describe('when needed item is already loaded', () => {
+      it('should return item by given key without request', async () => {
+        const store = new ArrayStore({
+          data: [
+            { id: 1, value: 'value 1' },
+            { id: 2, value: 'value 2' },
+            { id: 3, value: 'value 3' },
+          ],
+          key: 'id',
+        });
+
+        jest.spyOn(store, 'byKey');
+
+        const { gridCore, dataController } = setup({ dataSource: store });
+        await dataController.waitLoaded();
+
+        const item = await gridCore.byKey(1);
+        expect(store.byKey).toBeCalledTimes(0);
+        expect(item).toEqual({ id: 1, value: 'value 1' });
+      });
+    });
+    describe('when needed item is not already loaded', () => {
+      it('should make request to get item by given key', async () => {
+        const store = new ArrayStore({
+          data: [
+            { id: 1, value: 'value 1' },
+            { id: 2, value: 'value 2' },
+            { id: 3, value: 'value 3' },
+          ],
+          key: 'id',
+        });
+
+        jest.spyOn(store, 'byKey');
+
+        const { gridCore, dataController } = setup({
+          dataSource: store,
+          paging: { pageSize: 1 },
+        });
+        await dataController.waitLoaded();
+
+        const item = await gridCore.byKey(2);
+        expect(store.byKey).toBeCalledTimes(1);
+        expect(item).toEqual({ id: 2, value: 'value 2' });
+      });
+    });
+  });
+  describe('getFilter', () => {
+    // TODO: add test once some filter module (header filter, filter row etc) is implemented
+    it.skip('should return filter applied to dataSource', () => {
+    });
+  });
+
+  describe('keyOf', () => {
+    it('should return key of given data object', () => {
+      const { gridCore } = setup({ keyExpr: 'id', dataSource: [] });
+      const dataObject = { value: 'my value', id: 'my id' };
+
+      expect(gridCore.keyOf(dataObject)).toBe('my id');
+    });
+  });
+
+  describe('pageCount', () => {
+    it('should return current page count', () => {
+      const { gridCore, dataController } = setup({
+        dataSource: [{ a: '1' }, { a: '2' }, { a: '3' }, { a: '4' }],
+        paging: {
+          pageSize: 2,
+        },
+      });
+      expect(gridCore.pageCount()).toBe(2);
+
+      dataController.pageSize.update(4);
+      expect(gridCore.pageCount()).toBe(1);
+    });
+  });
+
+  describe('pageSize', () => {
+    it('should return current page size', () => {
+      const { gridCore, dataController } = setup({
+        dataSource: [{ a: '1' }, { a: '2' }, { a: '3' }, { a: '4' }],
+        paging: {
+          pageSize: 2,
+        },
+      });
+      expect(gridCore.pageSize()).toBe(2);
+
+      dataController.pageSize.update(4);
+      expect(gridCore.pageSize()).toBe(4);
+    });
+  });
+
+  describe('pageIndex', () => {
+    it('should return current page index', () => {
+      const { gridCore, dataController } = setup({
+        dataSource: [{ a: '1' }, { a: '2' }, { a: '3' }, { a: '4' }],
+        paging: {
+          pageSize: 2,
+        },
+      });
+      expect(gridCore.pageIndex()).toBe(0);
+
+      dataController.pageIndex.update(3);
+      expect(gridCore.pageIndex()).toBe(3);
+    });
+  });
+
+  describe('totalCount', () => {
+    it('should return current total count', () => {
+      const { gridCore } = setup({
+        dataSource: [{ a: '1' }, { a: '2' }, { a: '3' }, { a: '4' }],
+        paging: {
+          pageSize: 2,
+        },
+      });
+      expect(gridCore.totalCount()).toBe(4);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.ts
new file mode 100644
index 000000000000..1a1ec73a2c19
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/public_methods.ts
@@ -0,0 +1,71 @@
+/* eslint-disable consistent-return */
+/* eslint-disable @typescript-eslint/no-invalid-void-type */
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import type { FilterDescriptor } from '@js/data';
+import type DataSource from '@js/data/data_source';
+import { keysEqual } from '@ts/data/m_utils';
+
+import type { Constructor } from '../types';
+import type { GridCoreNewBase } from '../widget';
+import type { DataObject, Key } from './types';
+
+export function PublicMethods<T extends Constructor<GridCoreNewBase>>(GridCore: T) {
+  return class GridCoreWithDataController extends GridCore {
+    public getDataSource(): DataSource {
+      return this.dataController.dataSource.unreactive_get();
+    }
+
+    public byKey(key: Key): Promise<DataObject> | undefined {
+      const items = this.getDataSource().items();
+      const store = this.getDataSource().store();
+      const keyExpr = store.key();
+
+      const foundItem = items.find(
+        (item) => keysEqual(keyExpr, key, this.keyOf(item)),
+      );
+
+      if (foundItem) {
+        return Promise.resolve(foundItem);
+      }
+
+      return store.byKey(key);
+    }
+
+    public getFilter(): FilterDescriptor | FilterDescriptor[] {
+      return this.getDataSource().filter();
+    }
+
+    public keyOf(obj: DataObject) {
+      return this.dataController.getDataKey(obj);
+    }
+
+    public pageCount(): number {
+      return this.dataController.pageCount.unreactive_get();
+    }
+
+    public pageSize(): number;
+    public pageSize(value: number): void;
+    public pageSize(value?: number): number | void {
+      if (value === undefined) {
+        return this.dataController.pageSize.unreactive_get();
+      }
+      this.dataController.pageSize.update(value);
+    }
+
+    public pageIndex(): number;
+    public pageIndex(newIndex: number): void;
+    public pageIndex(newIndex?: number): number | void {
+      if (newIndex === undefined) {
+        return this.dataController.pageIndex.unreactive_get();
+      }
+      // TODO: Promise<void> (jQuery or native)
+      return this.dataController.pageIndex.update(newIndex);
+    }
+
+    public totalCount(): number {
+      return this.dataController.totalCount.unreactive_get();
+    }
+  };
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/types.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/types.ts
new file mode 100644
index 000000000000..2c5e30f0fa59
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/types.ts
@@ -0,0 +1,9 @@
+export type DataObject = Record<string, unknown>;
+export type Key = unknown;
+export type KeyExpr = unknown;
+export interface OperationOptions {
+  filtering?: boolean;
+  sorting?: boolean;
+  paging?: boolean;
+}
+export type RemoteOperations = boolean | OperationOptions | 'auto';
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.test.ts
new file mode 100644
index 000000000000..018b43edda50
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.test.ts
@@ -0,0 +1,104 @@
+/* eslint-disable @stylistic/object-curly-newline */
+import { describe, expect } from '@jest/globals';
+import each from 'jest-each';
+
+import {
+  getLocalLoadOptions, getStoreLoadOptions, normalizeLocalOptions, normalizeRemoteOptions,
+} from './utils';
+
+describe('normalizeRemoteOption', () => {
+  describe('with non-object arg', () => {
+    each`
+            remoteOperations | isLocalStore | isCustomStore | expectedOperationOptions
+            ${'auto'}        | ${true}      | ${true}       | ${{ filtering: false, sorting: false, paging: false }}
+            ${'auto'}        | ${false}     | ${true}       | ${{ filtering: false, sorting: false, paging: false }}
+            ${'auto'}        | ${true}      | ${false}      | ${{ filtering: false, sorting: false, paging: false }}
+            ${false}         | ${false}     | ${false}      | ${{ filtering: false, sorting: false, paging: false }}
+            ${true}          | ${false}     | ${false}      | ${{ filtering: true, sorting: true, paging: true }}
+    `
+      .it('should calculate the operation options', ({
+        remoteOperations,
+        isLocalStore,
+        isCustomStore,
+
+        expectedOperationOptions,
+      }) => {
+        const result = normalizeRemoteOptions(remoteOperations, isLocalStore, isCustomStore);
+        expect(result).toEqual(expectedOperationOptions);
+      });
+  });
+  describe('with object arg', () => {
+    each`
+            remoteOperations                                      | isLocalStore | isCustomStore | expectedOperationOptions
+            ${{ filtering: true, sorting: false, paging: false }} | ${true}      | ${true}       | ${{ filtering: true, sorting: false, paging: false }}
+            ${{ filtering: false, sorting: true, paging: false }} | ${true}      | ${true}       | ${{ filtering: false, sorting: true, paging: false }}
+            ${{ filtering: false, sorting: false, paging: true }} | ${true}      | ${true}       | ${{ filtering: false, sorting: false, paging: true }}
+            ${{ filtering: false, sorting: false, paging: false }}| ${true}      | ${true}       | ${{ filtering: false, sorting: false, paging: false }}
+    `
+      .it('should leave the arg as is', ({
+        remoteOperations,
+        isLocalStore,
+        isCustomStore,
+
+        expectedOperationOptions,
+      }) => {
+        const result = normalizeRemoteOptions(remoteOperations, isLocalStore, isCustomStore);
+        expect(result).toEqual(expectedOperationOptions);
+      });
+  });
+});
+
+describe('normalizeLocalOption', () => {
+  each`
+          remoteOperations                                      | expectedOperationOptions
+          ${{ filtering: true, sorting: false, paging: false }} | ${{ filtering: false, sorting: true, paging: true }}
+          ${{ filtering: false, sorting: true, paging: false }} | ${{ filtering: true, sorting: false, paging: true }}
+          ${{ filtering: false, sorting: false, paging: true }} | ${{ filtering: true, sorting: true, paging: false }}
+
+          ${{ filtering: true, sorting: true, paging: true }}   | ${{ filtering: false, sorting: false, paging: false }}
+          ${{ filtering: false, sorting: false, paging: false }}| ${{ filtering: true, sorting: true, paging: true }}
+  `
+    .it('should invert remoteOperations', ({
+      remoteOperations,
+      expectedOperationOptions,
+    }) => {
+      const result = normalizeLocalOptions(remoteOperations);
+      expect(result).toEqual(expectedOperationOptions);
+    });
+});
+
+describe('getLocalLoadOptions', () => {
+  each`
+          originOptions                                         | localOperations        | expectedLoadOptions 
+          ${{ filter: 'test', sort: 'asc', skip: 0, take: 20 }} | ${{ filtering: true }} | ${{ filter: 'test' }}
+          ${{ filter: 'test', sort: 'asc', skip: 0, take: 20 }} | ${{ sorting: true }}   | ${{ sort: 'asc' }}
+          ${{ filter: 'test', sort: 'asc', skip: 0, take: 20 }} | ${{ paging: true }}    | ${{ skip: 0, take: 20 }}
+  `
+    .it('should convert local operation to load options', ({
+      originOptions,
+      localOperations,
+
+      expectedLoadOptions,
+    }) => {
+      const result = getLocalLoadOptions(originOptions, localOperations);
+      expect(result).toEqual(expectedLoadOptions);
+    });
+});
+
+describe('getStoreLoadOptions', () => {
+  each`
+          originOptions                                         | localOperations        | expectedLoadOptions 
+          ${{ filter: 'test', sort: 'asc', skip: 0, take: 20 }} | ${{ filtering: true }} | ${{ sort: 'asc', skip: 0, take: 20 }}
+          ${{ filter: 'test', sort: 'asc', skip: 0, take: 20 }} | ${{ sorting: true }}   | ${{ filter: 'test', skip: 0, take: 20 }}
+          ${{ filter: 'test', sort: 'asc', skip: 0, take: 20 }} | ${{ paging: true }}    | ${{ filter: 'test', sort: 'asc' }}
+  `
+    .it('should clear local operations from load options', ({
+      originOptions,
+      localOperations,
+
+      expectedLoadOptions,
+    }) => {
+      const result = getStoreLoadOptions(originOptions, localOperations);
+      expect(result).toEqual(expectedLoadOptions);
+    });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts
new file mode 100644
index 000000000000..49f6b7c1d2e4
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/data_controller/utils.ts
@@ -0,0 +1,140 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ArrayStore, CustomStore } from '@js/common/data';
+import type { Store } from '@js/data';
+import type { DataSourceLike } from '@js/data/data_source';
+import DataSource from '@js/data/data_source';
+import { normalizeDataSourceOptions } from '@js/data/data_source/utils';
+import { applyBatch } from '@ts/data/m_array_utils';
+
+import type { DataObject, OperationOptions, RemoteOperations } from './types';
+
+export function normalizeDataSource(
+  dataSourceLike: DataSourceLike<unknown, unknown> | null | undefined,
+  keyExpr: string | string[] | undefined,
+): DataSource<unknown, unknown> {
+  if (dataSourceLike instanceof DataSource) {
+    return dataSourceLike;
+  }
+
+  if (Array.isArray(dataSourceLike)) {
+    // eslint-disable-next-line no-param-reassign
+    dataSourceLike = {
+      store: {
+        type: 'array',
+        data: dataSourceLike,
+        key: keyExpr,
+      },
+    };
+  }
+
+  // TODO: research making second param not required
+  return new DataSource(normalizeDataSourceOptions(dataSourceLike, undefined));
+}
+
+export function isLocalStore(store: Store): boolean {
+  return store instanceof ArrayStore;
+}
+
+export function isCustomStore(store: Store): boolean {
+  return store instanceof CustomStore;
+}
+
+export function normalizeRemoteOptions(
+  remoteOperations: RemoteOperations,
+  localStore: boolean,
+  customStore: boolean,
+): OperationOptions {
+  const disabledAllRemoteOperations = {
+    filtering: false,
+    sorting: false,
+    paging: false,
+  };
+  if (remoteOperations === false) {
+    return disabledAllRemoteOperations;
+  }
+
+  const enabledAllRemoteOperations = {
+    filtering: true,
+    sorting: true,
+    paging: true,
+  };
+  if (remoteOperations === 'auto') {
+    if (localStore || customStore) {
+      return disabledAllRemoteOperations;
+    }
+    return enabledAllRemoteOperations;
+  }
+
+  if (remoteOperations === true) {
+    return enabledAllRemoteOperations;
+  }
+
+  return remoteOperations;
+}
+
+export function normalizeLocalOptions(
+  normalizedRemoteOperations: OperationOptions,
+): OperationOptions {
+  return {
+    filtering: !normalizedRemoteOperations.filtering,
+    sorting: !normalizedRemoteOperations.sorting,
+    paging: !normalizedRemoteOperations.paging,
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function getLocalLoadOptions(originOptions, localOperations) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const localLoadOptions = {} as any;
+  if (localOperations.sorting) {
+    localLoadOptions.sort = originOptions.sort;
+  }
+  if (localOperations.filtering) {
+    localLoadOptions.filter = originOptions.filter;
+  }
+  if (localOperations.paging) {
+    localLoadOptions.skip = originOptions.skip;
+    localLoadOptions.take = originOptions.take;
+  }
+  if (localOperations.summary) {
+    localLoadOptions.summary = originOptions.summary;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return localLoadOptions;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function getStoreLoadOptions(originOptions, localOperations) {
+  const storeLoadOptions = originOptions;
+  if (localOperations.sorting) {
+    delete storeLoadOptions.sort;
+  }
+  if (localOperations.filtering) {
+    delete storeLoadOptions.filter;
+  }
+  if (localOperations.paging) {
+    delete storeLoadOptions.skip;
+    delete storeLoadOptions.take;
+  }
+  if (localOperations.summary) {
+    delete storeLoadOptions.summary;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return storeLoadOptions;
+}
+
+export function updateItemsImmutable(
+  data: DataObject[],
+  changes: any[],
+  keyInfo: any,
+): DataObject[] {
+  // @ts-expect-error
+  return applyBatch({
+    keyInfo,
+    data,
+    changes,
+    immutable: true,
+  });
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/error_controller/error_controller.ts b/packages/devextreme/js/__internal/grids/new/grid_core/error_controller/error_controller.ts
new file mode 100644
index 000000000000..9e6f8e9a3d21
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/error_controller/error_controller.ts
@@ -0,0 +1,34 @@
+/* eslint-disable spellcheck/spell-checker */
+import type { Subscribable } from '@ts/core/reactive/index';
+import { state } from '@ts/core/reactive/index';
+
+export interface GridError {
+  text: string;
+  id: number;
+}
+
+export class ErrorController {
+  private readonly _errors = state<GridError[]>([]);
+
+  public errors: Subscribable<GridError[]> = this._errors;
+
+  public static dependencies = [] as const;
+
+  private counter = 0;
+
+  public showError(error: string): void {
+    this._errors.updateFunc((errors) => [...errors, {
+      text: error,
+      id: this.counter,
+    }]);
+    this.counter += 1;
+  }
+
+  public removeError(index: number): void {
+    this._errors.updateFunc((errors) => {
+      const newErrors = errors.slice();
+      newErrors.splice(index, 1);
+      return newErrors;
+    });
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/button.ts b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/button.ts
new file mode 100644
index 000000000000..75e101617849
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/button.ts
@@ -0,0 +1,10 @@
+import type { Properties as ButtonProperties } from '@js/ui/button';
+import dxButton from '@js/ui/button';
+
+import { InfernoWrapper } from './widget_wrapper';
+
+export class Button extends InfernoWrapper<ButtonProperties, dxButton> {
+  protected getComponentFabric(): typeof dxButton {
+    return dxButton;
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/load_panel.ts b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/load_panel.ts
new file mode 100644
index 000000000000..fc2d8d3e2d0f
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/load_panel.ts
@@ -0,0 +1,12 @@
+import type { Properties as LoadPanelProperties } from '@js/ui/load_panel';
+import dxLoadPanel from '@js/ui/load_panel';
+
+import { InfernoWrapper } from './widget_wrapper';
+
+export type { LoadPanelProperties };
+
+export class LoadPanel extends InfernoWrapper<LoadPanelProperties, dxLoadPanel> {
+  protected getComponentFabric(): typeof dxLoadPanel {
+    return dxLoadPanel;
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/pager.ts b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/pager.ts
new file mode 100644
index 000000000000..589e4a33dbf7
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/pager.ts
@@ -0,0 +1,10 @@
+import type { Properties as PaginationProperties } from '@js/ui/pagination';
+import dxPagination from '@js/ui/pagination';
+
+import { InfernoWrapper } from './widget_wrapper';
+
+export class Pager extends InfernoWrapper<PaginationProperties, dxPagination> {
+  protected getComponentFabric(): typeof dxPagination {
+    return dxPagination;
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/scrollable.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/scrollable.tsx
new file mode 100644
index 000000000000..0a3fa4a7cab6
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/scrollable.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { Properties as ScrollableProperties } from '@js/ui/scroll_view/ui.scrollable';
+import dxScrollable from '@js/ui/scroll_view/ui.scrollable';
+import { createPortal, type InfernoNode } from 'inferno';
+
+import { InfernoWrapper } from './widget_wrapper';
+
+export interface Props extends ScrollableProperties {
+  scrollTop?: number;
+}
+
+export class Scrollable extends InfernoWrapper<Props, dxScrollable> {
+  private readonly contentRef: { current?: HTMLDivElement } = {};
+
+  public render(): InfernoNode {
+    return (
+      <>
+        {super.render()}
+        {this.contentRef.current && createPortal(
+          this.props.children,
+          this.contentRef.current,
+        )}
+      </>
+    );
+  }
+
+  protected getComponentFabric(): typeof dxScrollable {
+    return dxScrollable;
+  }
+
+  private updateScrollTop(): void {
+    this.component?.scrollTo(this.props.scrollTop);
+  }
+
+  public componentDidMount(): void {
+    if (this.props.useNative === undefined) {
+      // @ts-expect-error
+      delete this.props.useNative;
+    }
+    super.componentDidMount();
+    // @ts-expect-error
+    this.contentRef.current = this.component.$content().get(0);
+    this.setState({});
+    this.updateScrollTop();
+  }
+
+  public componentDidUpdate(prevProps: Props): void {
+    super.componentDidUpdate(prevProps);
+    this.updateScrollTop();
+  }
+
+  public clientHeight(): number {
+    return this.component!.clientHeight();
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/sortable.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/sortable.tsx
new file mode 100644
index 000000000000..3806d32afa2c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/sortable.tsx
@@ -0,0 +1,23 @@
+import type { Properties as SortableProperties } from '@js/ui/sortable';
+import dxSortable from '@js/ui/sortable';
+import { type InfernoNode } from 'inferno';
+
+import { InfernoWrapper } from './widget_wrapper';
+
+export interface Props extends SortableProperties {
+
+}
+
+export class Sortable extends InfernoWrapper<Props, dxSortable> {
+  public render(): InfernoNode {
+    return (
+      <div ref={this.ref}>
+        {this.props.children}
+      </div>
+    );
+  }
+
+  protected getComponentFabric(): typeof dxSortable {
+    return dxSortable;
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/template_wrapper.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/template_wrapper.tsx
new file mode 100644
index 000000000000..5d2e57bcb63f
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/template_wrapper.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import { Component, createRef } from 'inferno';
+
+interface TemplateType<T> {
+  render: (args: { model: T; container: dxElementWrapper }) => void;
+}
+
+// eslint-disable-next-line @stylistic/max-len
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
+export function TemplateWrapper<TProps = {}>(template: TemplateType<TProps>) {
+  return class Template extends Component<TProps> {
+    private readonly ref = createRef<HTMLDivElement>();
+
+    private renderTemplate(): void {
+      $(this.ref.current!).empty();
+      template.render({
+        container: $(this.ref.current!),
+        model: this.props,
+      });
+    }
+
+    public render(): JSX.Element {
+      return <div ref={this.ref}></div>;
+    }
+
+    public componentDidUpdate(): void {
+      this.renderTemplate();
+    }
+
+    public componentDidMount(): void {
+      this.renderTemplate();
+    }
+  };
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toast.ts b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toast.ts
new file mode 100644
index 000000000000..0e5b5ae2b3c7
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toast.ts
@@ -0,0 +1,10 @@
+import type { Properties as ToastProperties } from '@js/ui/toast';
+import dxToast from '@js/ui/toast';
+
+import { InfernoWrapper } from './widget_wrapper';
+
+export class Toast extends InfernoWrapper<ToastProperties, dxToast> {
+  protected getComponentFabric(): typeof dxToast {
+    return dxToast;
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts
new file mode 100644
index 000000000000..c9e2d216081e
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts
@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import '@js/ui/button';
+import '@js/ui/check_box';
+
+import dxToolbar from '@js/ui/toolbar';
+
+import type { ToolbarProps } from '../toolbar/types';
+import { InfernoWrapper } from './widget_wrapper';
+
+export class Toolbar extends InfernoWrapper<ToolbarProps, dxToolbar> {
+  protected getComponentFabric(): typeof dxToolbar {
+    return dxToolbar;
+  }
+
+  protected updateComponentOptions(prevProps: ToolbarProps, props: ToolbarProps): void {
+    if (
+      Array.isArray(props.items)
+      && Array.isArray(prevProps.items)
+      && props.items.length === prevProps.items.length
+    ) {
+      props.items?.forEach((item, index) => {
+        if (props.items![index] !== prevProps.items![index]) {
+          const prevItem = prevProps.items![index];
+
+          Object.keys(item).forEach((key) => {
+            if (item[key] !== prevItem[key]) {
+              this.component?.option(`items[${index}].${key}`, props.items![index][key]);
+            }
+          });
+        }
+      });
+
+      const { items, ...propsToUpdate } = props;
+
+      super.updateComponentOptions(prevProps, propsToUpdate);
+    } else {
+      super.updateComponentOptions(prevProps, props);
+    }
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/widget_wrapper.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/widget_wrapper.tsx
new file mode 100644
index 000000000000..dac76fe3f79c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/widget_wrapper.tsx
@@ -0,0 +1,68 @@
+import type DOMComponent from '@js/core/dom_component';
+import type { InfernoNode, RefObject } from 'inferno';
+import { Component, createRef } from 'inferno';
+
+import { ConfigContext } from '../core/config_context';
+
+interface WithRef<TComponent> {
+  componentRef?: RefObject<TComponent>;
+}
+
+export abstract class InfernoWrapper<
+  TProperties,
+  TComponent extends DOMComponent<TProperties>,
+> extends Component<TProperties & WithRef<TComponent>> {
+  protected readonly ref = createRef<HTMLDivElement>();
+
+  protected component?: TComponent;
+
+  protected abstract getComponentFabric(): new (
+    element: Element, options: TProperties
+  ) => TComponent;
+
+  public render(): InfernoNode {
+    return <div ref={this.ref}></div>;
+  }
+
+  private getComponentOptions(): TProperties {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return {
+      ...this.context[ConfigContext.id],
+      ...this.props,
+    };
+  }
+
+  private updateComponentRef(): void {
+    if (this.props.componentRef) {
+      // @ts-expect-error
+      this.props.componentRef.current = this.component;
+    }
+  }
+
+  protected updateComponentOptions(prevProps: TProperties, props: TProperties): void {
+    Object.keys(props as object).forEach((key) => {
+      if (props[key] !== prevProps[key]) {
+        this.component?.option(key, props[key]);
+      }
+    });
+  }
+
+  protected createComponent(ref: RefObject<HTMLDivElement>, props: TProperties): TComponent {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return new (this.getComponentFabric())(ref.current!, props);
+  }
+
+  public componentDidMount(): void {
+    this.component = this.createComponent(this.ref, this.getComponentOptions());
+    this.updateComponentRef();
+  }
+
+  public componentDidUpdate(prevProps: TProperties): void {
+    this.updateComponentOptions(prevProps, this.getComponentOptions());
+    this.updateComponentRef();
+  }
+
+  public componentWillUnmount(): void {
+    this.component?.dispose();
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/items_controller/__snapshots__/items_controller.test.ts.snap b/packages/devextreme/js/__internal/grids/new/grid_core/items_controller/__snapshots__/items_controller.test.ts.snap
new file mode 100644
index 000000000000..8929fd9f6a04
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/items_controller/__snapshots__/items_controller.test.ts.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ItemsController createDataRow should process data object to data row using column configuration 1`] = `
+{
+  "cells": [
+    {
+      "column": {
+        "alignment": "left",
+        "allowReordering": true,
+        "calculateCellValue": [Function],
+        "calculateDisplayValue": [Function],
+        "caption": "A",
+        "dataField": "a",
+        "dataType": "string",
+        "falseText": "false",
+        "headerItemTemplate": undefined,
+        "name": "a",
+        "trueText": "true",
+        "visible": true,
+        "visibleIndex": 0,
+      },
+      "displayValue": "my a value",
+      "text": "my a value",
+      "value": "my a value",
+    },
+    {
+      "column": {
+        "alignment": "left",
+        "allowReordering": true,
+        "calculateCellValue": [Function],
+        "calculateDisplayValue": [Function],
+        "caption": "B",
+        "dataField": "b",
+        "dataType": "string",
+        "falseText": "false",
+        "headerItemTemplate": undefined,
+        "name": "b",
+        "trueText": "true",
+        "visible": true,
+        "visibleIndex": 1,
+      },
+      "displayValue": "my b value",
+      "text": "my b value",
+      "value": "my b value",
+    },
+  ],
+  "data": {
+    "a": "my a value",
+    "b": "my b value",
+    "id": 1,
+  },
+  "index": 0,
+  "key": 1,
+}
+`;
+
+exports[`ItemsController createDataRow should process data object to data row using column configuration 2`] = `
+{
+  "cells": [
+    {
+      "column": {
+        "alignment": "left",
+        "allowReordering": true,
+        "calculateCellValue": [Function],
+        "calculateDisplayValue": [Function],
+        "caption": "A",
+        "dataField": "a",
+        "dataType": "string",
+        "falseText": "false",
+        "headerItemTemplate": undefined,
+        "name": "a",
+        "trueText": "true",
+        "visible": true,
+        "visibleIndex": 0,
+      },
+      "displayValue": "my a value",
+      "text": "my a value",
+      "value": "my a value",
+    },
+    {
+      "column": {
+        "alignment": "left",
+        "allowReordering": true,
+        "calculateCellValue": [Function],
+        "calculateDisplayValue": [Function],
+        "caption": "B",
+        "dataField": "b",
+        "dataType": "string",
+        "falseText": "false",
+        "headerItemTemplate": undefined,
+        "name": "b",
+        "trueText": "true",
+        "visible": true,
+        "visibleIndex": 1,
+      },
+      "displayValue": "my b value",
+      "text": "my b value",
+      "value": "my b value",
+    },
+  ],
+  "data": {
+    "a": "my a value",
+    "b": "my b value",
+    "id": 1,
+  },
+  "index": 0,
+  "key": 1,
+}
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/items_controller/items_controller.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/items_controller/items_controller.test.ts
new file mode 100644
index 000000000000..dd8598c9c914
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/items_controller/items_controller.test.ts
@@ -0,0 +1,61 @@
+/* eslint-disable spellcheck/spell-checker */
+import { describe, expect, it } from '@jest/globals';
+
+import { ColumnsController } from '../columns_controller/columns_controller';
+import { DataController } from '../data_controller';
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { ItemsController } from './items_controller';
+
+const setup = (config: Options = {}) => {
+  const options = new OptionsControllerMock(config);
+
+  const dataController = new DataController(options);
+
+  const columnsController = new ColumnsController(options);
+
+  const itemsController = new ItemsController(dataController, columnsController);
+
+  return {
+    options,
+    dataController,
+    columnsController,
+    itemsController,
+  };
+};
+
+describe('ItemsController', () => {
+  describe('createDataRow', () => {
+    it('should process data object to data row using column configuration', () => {
+      const dataObject = { id: 1, a: 'my a value', b: 'my b value' };
+      const { columnsController, itemsController } = setup({
+        keyExpr: 'id',
+        dataSource: [dataObject],
+        columns: [
+          'a',
+          { dataField: 'b' },
+        ],
+      });
+
+      const columns = columnsController.columns.unreactive_get();
+      const dataRow = itemsController.createDataRow(dataObject, columns, 0);
+      expect(dataRow).toMatchSnapshot();
+    });
+
+    it('should process data object to data row using column configuration', () => {
+      const dataObject = { id: 1, a: 'my a value', b: 'my b value' };
+      const { columnsController, itemsController } = setup({
+        keyExpr: 'id',
+        dataSource: [dataObject],
+        columns: [
+          'a',
+          { dataField: 'b' },
+        ],
+      });
+
+      const columns = columnsController.columns.unreactive_get();
+      const dataRow = itemsController.createDataRow(dataObject, columns, 0);
+      expect(dataRow).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/items_controller/items_controller.ts b/packages/devextreme/js/__internal/grids/new/grid_core/items_controller/items_controller.ts
new file mode 100644
index 000000000000..d4ca8fdb087c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/items_controller/items_controller.ts
@@ -0,0 +1,62 @@
+import formatHelper from '@js/format_helper';
+import { computed } from '@ts/core/reactive/index';
+import { ColumnsController } from '@ts/grids/new/grid_core/columns_controller/columns_controller';
+import { DataController } from '@ts/grids/new/grid_core/data_controller/data_controller';
+
+import type { Column, DataRow } from '../columns_controller/types';
+import type { DataObject } from '../data_controller/types';
+
+export class ItemsController {
+  public static dependencies = [
+    DataController, ColumnsController,
+  ] as const;
+
+  public readonly items = computed(
+    (dataItems, columns: Column[]) => dataItems.map(
+      (item, itemIndex) => this.createDataRow(
+        item,
+        columns,
+        itemIndex,
+      ),
+    ),
+    [this.dataController.items, this.columnsController.visibleColumns],
+  );
+
+  constructor(
+    protected readonly dataController: DataController,
+    protected readonly columnsController: ColumnsController,
+  ) {}
+
+  public createDataRow(
+    data: DataObject,
+    columns: Column[],
+    itemIndex: number,
+  ): DataRow {
+    const itemKey = this.dataController.getDataKey(data);
+
+    return {
+      cells: columns.map((c) => {
+        const displayValue = c.calculateDisplayValue(data);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let text = formatHelper.format(displayValue as any, c.format);
+
+        if (c.customizeText) {
+          text = c.customizeText({
+            value: displayValue,
+            valueText: text,
+          });
+        }
+
+        return {
+          column: c,
+          value: c.calculateCellValue(data),
+          displayValue,
+          text,
+        };
+      }),
+      key: itemKey,
+      index: itemIndex,
+      data,
+    };
+  }
+}
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
new file mode 100644
index 000000000000..0cae62c792de
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/main_view.tsx
@@ -0,0 +1,3 @@
+import { View } from './core/view';
+
+export abstract class MainView<T extends {}> extends View<T> {}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/options.ts b/packages/devextreme/js/__internal/grids/new/grid_core/options.ts
new file mode 100644
index 000000000000..9c86a257a01c
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/options.ts
@@ -0,0 +1,68 @@
+import browser from '@js/core/utils/browser';
+import { isMaterialBased } from '@js/ui/themes';
+import type { WidgetOptions } from '@js/ui/widget/ui.widget';
+
+import * as columnsController from './columns_controller/index';
+import * as contentView from './content_view/index';
+import * as dataController from './data_controller/index';
+import * as pager from './pager/index';
+import type * as toolbar from './toolbar/index';
+import type { GridCoreNew } from './widget';
+
+/**
+ * @interface
+ */
+export type Options =
+  & WidgetOptions<GridCoreNew>
+  & dataController.Options
+  & pager.Options
+  & columnsController.Options
+  & contentView.Options
+  & toolbar.Options;
+
+export const defaultOptions = {
+  ...dataController.defaultOptions,
+  ...columnsController.defaultOptions,
+  ...pager.defaultOptions,
+  ...contentView.defaultOptions,
+} satisfies Options;
+
+// TODO: separate by modules
+// TODO: add typing for defaultOptionRules
+export const defaultOptionsRules = [
+  {
+    device(): boolean {
+      // @ts-expect-error
+      return isMaterialBased();
+    },
+    options: {
+      headerFilter: {
+        height: 315,
+      },
+      editing: {
+        useIcons: true,
+      },
+      selection: {
+        showCheckBoxesMode: 'always',
+      },
+    },
+  },
+  {
+    device(): boolean | undefined {
+      return browser.webkit;
+    },
+    options: {
+      loadingTimeout: 30, // T344031
+      loadPanel: {
+        animation: {
+          show: {
+            easing: 'cubic-bezier(1, 0, 1, 0)',
+            duration: 500,
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+          },
+        },
+      },
+    },
+  },
+];
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller.mock.ts b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller.mock.ts
new file mode 100644
index 000000000000..18dd6d589a37
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller.mock.ts
@@ -0,0 +1,11 @@
+import type { Options } from '../options';
+import { defaultOptions } from '../options';
+import { OptionsControllerMock as OptionsControllerBaseMock } from './options_controller_base.mock';
+
+export class OptionsControllerMock extends OptionsControllerBaseMock<
+Options, typeof defaultOptions
+> {
+  constructor(options: Options) {
+    super(options, defaultOptions);
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller.ts b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller.ts
new file mode 100644
index 000000000000..29de722e585a
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller.ts
@@ -0,0 +1,6 @@
+import type { defaultOptions, Options } from '../options';
+import { OptionsController as OptionsControllerBase } from './options_controller_base';
+
+class GridCoreOptionsController extends OptionsControllerBase<Options, typeof defaultOptions> {}
+
+export { GridCoreOptionsController as OptionsController };
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.mock.ts b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.mock.ts
new file mode 100644
index 000000000000..348b769e6cf1
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.mock.ts
@@ -0,0 +1,23 @@
+import { Component } from '@js/core/component';
+
+import { OptionsController } from './options_controller_base';
+
+export class OptionsControllerMock<
+  TProps,
+  TDefaultProps extends TProps,
+> extends OptionsController<TProps, TDefaultProps> {
+  private readonly componentMock: Component<TProps>;
+
+  constructor(options: TProps, defaultOptions: TDefaultProps) {
+    const componentMock = new Component(options);
+    super(componentMock);
+    this.defaults = defaultOptions;
+    this.componentMock = componentMock;
+  }
+
+  // TODO: add typing
+  public option(key?: string, value?: unknown): unknown {
+    // @ts-expect-error
+    return this.componentMock.option(key, value);
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.test.ts
new file mode 100644
index 000000000000..e56a4ba02b73
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.test.ts
@@ -0,0 +1,99 @@
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/init-declarations */
+import {
+  beforeEach,
+  describe, expect, it, jest,
+} from '@jest/globals';
+import { Component } from '@js/core/component';
+
+import { OptionsController } from './options_controller_base';
+
+interface Options {
+  value?: string;
+
+  objectValue?: {
+    nestedValue?: string;
+  };
+
+  onOptionChanged?: () => void;
+}
+
+const onOptionChanged = jest.fn();
+let component: Component<Options>;
+let optionsController: OptionsController<Options>;
+
+beforeEach(() => {
+  component = new Component<Options>({
+    value: 'initialValue',
+    objectValue: { nestedValue: 'nestedInitialValue' },
+    onOptionChanged,
+  });
+  optionsController = new OptionsController<Options>(component);
+  onOptionChanged.mockReset();
+});
+
+describe('oneWay', () => {
+  describe('plain', () => {
+    it('should have initial value', () => {
+      const value = optionsController.oneWay('value');
+      expect(value.unreactive_get()).toBe('initialValue');
+    });
+
+    it('should update on options changed', () => {
+      const value = optionsController.oneWay('value');
+      const fn = jest.fn();
+
+      value.subscribe(fn);
+
+      component.option('value', 'newValue');
+      expect(fn).toHaveBeenCalledTimes(2);
+      expect(fn).toHaveBeenCalledWith('newValue');
+    });
+  });
+
+  describe('nested', () => {
+    it('should have initial value', () => {
+      const a = optionsController.oneWay('objectValue.nestedValue');
+      expect(a.unreactive_get()).toBe('nestedInitialValue');
+    });
+  });
+});
+
+describe('twoWay', () => {
+  it('should have initial value', () => {
+    const value = optionsController.twoWay('value');
+    expect(value.unreactive_get()).toBe('initialValue');
+  });
+
+  it('should update on options changed', () => {
+    const value = optionsController.twoWay('value');
+    const fn = jest.fn();
+
+    value.subscribe(fn);
+
+    component.option('value', 'newValue');
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(fn).toHaveBeenCalledWith('newValue');
+  });
+
+  it('should return new value after update', () => {
+    const value = optionsController.twoWay('value');
+    value.update('newValue');
+
+    expect(value.unreactive_get()).toBe('newValue');
+  });
+
+  it('should call optionChanged on update', () => {
+    const value = optionsController.twoWay('value');
+    value.update('newValue');
+
+    expect(onOptionChanged).toHaveBeenCalledTimes(1);
+    expect(onOptionChanged).toHaveBeenCalledWith({
+      component,
+      fullName: 'value',
+      name: 'value',
+      previousValue: 'initialValue',
+      value: 'newValue',
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.ts b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.ts
new file mode 100644
index 000000000000..0bf2649f6741
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.ts
@@ -0,0 +1,181 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable spellcheck/spell-checker */
+import { Component } from '@js/core/component';
+import { getPathParts } from '@js/core/utils/data';
+import type { ChangedOptionInfo } from '@js/events';
+import type {
+  SubsGets, SubsGetsUpd,
+} from '@ts/core/reactive/index';
+import { computed, state } from '@ts/core/reactive/index';
+import type { ComponentType } from 'inferno';
+
+import { TemplateWrapper } from '../inferno_wrappers/template_wrapper';
+import type { Action, Template } from '../types';
+
+type OwnProperty<T, TPropName extends string> =
+  TPropName extends keyof Required<T>
+    ? Required<T>[TPropName]
+    : unknown;
+
+type PropertyTypeBase<T, TProp extends string> =
+  TProp extends `${infer TOwnProp}.${infer TNestedProps}`
+    ? PropertyTypeBase<OwnProperty<T, TOwnProp>, TNestedProps>
+    : OwnProperty<T, TProp>;
+
+type PropertyType<TProps, TProp extends string> =
+  unknown extends PropertyTypeBase<TProps, TProp>
+    ? unknown
+    : PropertyTypeBase<TProps, TProp> | undefined;
+
+type PropertyWithDefaults<TProps, TDefaults, TProp extends string> =
+  unknown extends PropertyType<TDefaults, TProp>
+    ? PropertyType<TProps, TProp>
+    : NonNullable<PropertyType<TProps, TProp>> | PropertyTypeBase<TDefaults, TProp>;
+
+type TemplateProperty<TProps, TProp extends string> =
+  NonNullable<PropertyType<TProps, TProp>> extends Template<infer TTemplateProps>
+    ? ComponentType<TTemplateProps> | undefined
+    : unknown;
+
+type ActionProperty<TProps, TProp extends string> =
+  NonNullable<PropertyType<TProps, TProp>> extends Action<infer TActionArgs>
+    ? (args: TActionArgs) => void
+    : unknown;
+
+function cloneObjectValue<T extends Record<string, unknown> | unknown[]>(
+  value: T,
+): T {
+  // @ts-expect-error
+  return Array.isArray(value) ? [...value] : { ...value };
+}
+
+function updateImmutable<T extends Record<string, unknown> | unknown[]>(
+  value: T,
+  newValue: T,
+  pathParts: string[],
+): T {
+  const [pathPart, ...restPathParts] = pathParts;
+  const ret = cloneObjectValue(value);
+
+  ret[pathPart] = restPathParts.length
+    ? updateImmutable(value[pathPart], newValue[pathPart], restPathParts)
+    : newValue[pathPart];
+
+  return ret;
+}
+
+function getValue<T>(obj: unknown, path: string): T {
+  let v: any = obj;
+  for (const pathPart of getPathParts(path)) {
+    v = v?.[pathPart];
+  }
+
+  return v;
+}
+
+export class OptionsController<TProps, TDefaultProps extends TProps = TProps> {
+  private isControlledMode = false;
+
+  private readonly props: SubsGetsUpd<TProps>;
+
+  protected defaults: TDefaultProps;
+
+  public static dependencies = [Component];
+
+  constructor(
+    private readonly component: Component<TProps>,
+  ) {
+    this.props = state(component.option());
+    // @ts-expect-error
+    this.defaults = component._getDefaultOptions?.() ?? {};
+    this.updateIsControlledMode();
+
+    component.on('optionChanged', (e: ChangedOptionInfo) => {
+      this.updateIsControlledMode();
+
+      const pathParts = getPathParts(e.fullName);
+      // @ts-expect-error
+      this.props.updateFunc((oldValue) => updateImmutable(
+        // @ts-expect-error
+        oldValue,
+        component.option(),
+        pathParts,
+      ));
+    });
+  }
+
+  private updateIsControlledMode(): void {
+    const isControlledMode = this.component.option('integrationOptions.isControlledMode');
+    this.isControlledMode = (isControlledMode as boolean | undefined) ?? false;
+  }
+
+  public oneWay<TProp extends string>(
+    name: TProp,
+  ): SubsGets<PropertyWithDefaults<TProps, TDefaultProps, TProp>> {
+    const obs = computed(
+      (props) => {
+        const value = getValue(props, name);
+        /*
+          NOTE: it is better not to use '??' operator,
+          because result will be different if value is 'null'.
+          Some code works differently if undefined is passed instead of null,
+          for example dataSource's getter-setter `.filter()`
+        */
+        return value !== undefined ? value : getValue(this.defaults, name);
+      },
+      [this.props],
+    );
+
+    return obs as any;
+  }
+
+  public twoWay<TProp extends string>(
+    name: TProp,
+  ): SubsGetsUpd<PropertyWithDefaults<TProps, TDefaultProps, TProp>> {
+    const obs = state(this.component.option(name));
+    this.oneWay(name).subscribe(obs.update.bind(obs) as any);
+    return {
+      subscribe: obs.subscribe.bind(obs) as any,
+      update: (value): void => {
+        const callbackName = `on${name}Change`;
+        const callback = this.component.option(callbackName) as any;
+        const isControlled = this.isControlledMode && this.component.option(name) !== undefined;
+        if (isControlled) {
+          callback?.(value);
+        } else {
+          // @ts-expect-error
+          this.component.option(name, value);
+          callback?.(value);
+        }
+      },
+      // @ts-expect-error
+      unreactive_get: obs.unreactive_get.bind(obs),
+    };
+  }
+
+  public normalizeTemplate<T>(template: Template<T>): ComponentType<T> {
+    // @ts-expect-error
+    return TemplateWrapper(this.component._getTemplate(template)) as any;
+  }
+
+  public template<TProp extends string>(
+    name: TProp,
+  ): SubsGets<TemplateProperty<TProps, TProp>> {
+    return computed(
+      // @ts-expect-error
+      (template) => template && this.normalizeTemplate(template) as any,
+      [this.oneWay(name)],
+    );
+  }
+
+  public action<TProp extends string>(
+    name: TProp,
+  ): SubsGets<ActionProperty<TProps, TProp>> {
+    return computed(
+      // @ts-expect-error
+      () => this.component._createActionByOption(name) as any,
+      [this.oneWay(name)],
+    );
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/pager/__snapshots__/view.test.ts.snap b/packages/devextreme/js/__internal/grids/new/grid_core/pager/__snapshots__/view.test.ts.snap
new file mode 100644
index 000000000000..fc8eb1ebb701
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/pager/__snapshots__/view.test.ts.snap
@@ -0,0 +1,537 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Applying options when allowedPageSizes = 'auto' calculates pageSizes by pageSize 1`] = `
+<div>
+  <div
+    aria-label="Page navigation"
+    class="dx-widget dx-pagination"
+    role="navigation"
+  >
+    <div
+      class="dx-page-sizes"
+    >
+      <div
+        aria-label="Items per page: 3"
+        class="dx-page-size dx-first-child"
+        role="button"
+        tabindex="0"
+      >
+        3
+      </div>
+      <div
+        aria-label="Items per page: 6"
+        class="dx-page-size dx-selection"
+        role="button"
+        tabindex="0"
+      >
+        6
+      </div>
+      <div
+        aria-label="Items per page: 12"
+        class="dx-page-size"
+        role="button"
+        tabindex="0"
+      >
+        12
+      </div>
+    </div>
+    <div
+      class="dx-pages"
+      style="visibility: hidden;"
+    >
+      <div
+        class="dx-page-indexes"
+      >
+        <div
+          aria-label="Page 1"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          1
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Applying options when allowedPageSizes with custom values displays custom values 1`] = `
+<div>
+  <div
+    aria-label="Page navigation"
+    class="dx-widget dx-pagination"
+    role="navigation"
+  >
+    <div
+      class="dx-page-sizes"
+    >
+      <div
+        aria-label="Items per page: 4"
+        class="dx-page-size dx-first-child"
+        role="button"
+        tabindex="0"
+      >
+        4
+      </div>
+      <div
+        aria-label="Items per page: 10"
+        class="dx-page-size"
+        role="button"
+        tabindex="0"
+      >
+        10
+      </div>
+      <div
+        aria-label="Items per page: 20"
+        class="dx-page-size"
+        role="button"
+        tabindex="0"
+      >
+        20
+      </div>
+    </div>
+    <div
+      class="dx-pages"
+    >
+      <div
+        class="dx-page-indexes"
+      >
+        <div
+          aria-label="Page 1"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          1
+        </div>
+        <div
+          aria-label="Page 2"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          2
+        </div>
+        <div
+          aria-label="Page 3"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          3
+        </div>
+        <div
+          aria-label="Page 4"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          4
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Applying options when changing a visible to 'false' at runtime Pager should be hidden 1`] = `
+<div>
+  
+</div>
+`;
+
+exports[`Applying options when changing a visible to 'true' at runtime Pager should be visible 1`] = `
+<div>
+  <div
+    aria-label="Page navigation"
+    class="dx-widget dx-pagination"
+    role="navigation"
+  >
+    <div
+      class="dx-page-sizes"
+    >
+      <div
+        aria-label="Items per page: 3"
+        class="dx-page-size dx-first-child"
+        role="button"
+        tabindex="0"
+      >
+        3
+      </div>
+      <div
+        aria-label="Items per page: 6"
+        class="dx-page-size dx-selection"
+        role="button"
+        tabindex="0"
+      >
+        6
+      </div>
+      <div
+        aria-label="Items per page: 12"
+        class="dx-page-size"
+        role="button"
+        tabindex="0"
+      >
+        12
+      </div>
+    </div>
+    <div
+      class="dx-pages"
+      style="visibility: hidden;"
+    >
+      <div
+        class="dx-page-indexes"
+      >
+        <div
+          aria-label="Page 1"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          1
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Applying options when changing an allowedPageSizes to custom values at runtime applies custom values 1`] = `
+<div>
+  <div
+    aria-label="Page navigation"
+    class="dx-widget dx-pagination"
+    role="navigation"
+  >
+    <div
+      class="dx-page-sizes"
+    >
+      <div
+        aria-label="Items per page: 4"
+        class="dx-page-size dx-first-child"
+        role="button"
+        tabindex="0"
+      >
+        4
+      </div>
+      <div
+        aria-label="Items per page: 10"
+        class="dx-page-size"
+        role="button"
+        tabindex="0"
+      >
+        10
+      </div>
+      <div
+        aria-label="Items per page: 20"
+        class="dx-page-size"
+        role="button"
+        tabindex="0"
+      >
+        20
+      </div>
+    </div>
+    <div
+      class="dx-pages"
+    >
+      <div
+        class="dx-page-indexes"
+      >
+        <div
+          aria-label="Page 1"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          1
+        </div>
+        <div
+          aria-label="Page 2"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          2
+        </div>
+        <div
+          aria-label="Page 3"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          3
+        </div>
+        <div
+          aria-label="Page 4"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          4
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Applying options when visible = 'auto' and pageCount <= 1 Pager should be hidden 1`] = `
+<div>
+  
+</div>
+`;
+
+exports[`Applying options when visible = 'auto' and pageCount > 1 Pager should be visible 1`] = `
+<div>
+  <div
+    aria-label="Page navigation"
+    class="dx-widget dx-pagination"
+    role="navigation"
+  >
+    <div
+      class="dx-page-sizes"
+    >
+      <div
+        aria-label="Items per page: 3"
+        class="dx-page-size dx-first-child"
+        role="button"
+        tabindex="0"
+      >
+        3
+      </div>
+      <div
+        aria-label="Items per page: 6"
+        class="dx-page-size dx-selection"
+        role="button"
+        tabindex="0"
+      >
+        6
+      </div>
+      <div
+        aria-label="Items per page: 12"
+        class="dx-page-size"
+        role="button"
+        tabindex="0"
+      >
+        12
+      </div>
+    </div>
+    <div
+      class="dx-pages"
+    >
+      <div
+        class="dx-page-indexes"
+      >
+        <div
+          aria-label="Page 1"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          1
+        </div>
+        <div
+          aria-label="Page 2"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          2
+        </div>
+        <div
+          aria-label="Page 3"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          3
+        </div>
+        <div
+          aria-label="Page 4"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          4
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Applying options when visible = 'false' Pager should be hidden 1`] = `
+<div>
+  
+</div>
+`;
+
+exports[`Applying options when visible = 'true' Pager should be visible 1`] = `
+<div>
+  <div
+    aria-label="Page navigation"
+    class="dx-widget dx-pagination"
+    role="navigation"
+  >
+    <div
+      class="dx-page-sizes"
+    >
+      <div
+        aria-label="Items per page: 3"
+        class="dx-page-size dx-first-child"
+        role="button"
+        tabindex="0"
+      >
+        3
+      </div>
+      <div
+        aria-label="Items per page: 6"
+        class="dx-page-size dx-selection"
+        role="button"
+        tabindex="0"
+      >
+        6
+      </div>
+      <div
+        aria-label="Items per page: 12"
+        class="dx-page-size"
+        role="button"
+        tabindex="0"
+      >
+        12
+      </div>
+    </div>
+    <div
+      class="dx-pages"
+    >
+      <div
+        class="dx-page-indexes"
+      >
+        <div
+          aria-label="Page 1"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          1
+        </div>
+        <div
+          aria-label="Page 2"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          2
+        </div>
+        <div
+          aria-label="Page 3"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          3
+        </div>
+        <div
+          aria-label="Page 4"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          4
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`render PagerView with options 1`] = `
+<div>
+  <div
+    aria-label="Page navigation"
+    class="dx-widget dx-pagination"
+    role="navigation"
+  >
+    <div
+      class="dx-page-sizes"
+    >
+      <div
+        aria-label="Items per page: 3"
+        class="dx-page-size dx-first-child"
+        role="button"
+        tabindex="0"
+      >
+        3
+      </div>
+      <div
+        aria-label="Items per page: 6"
+        class="dx-page-size dx-selection"
+        role="button"
+        tabindex="0"
+      >
+        6
+      </div>
+      <div
+        aria-label="Items per page: 12"
+        class="dx-page-size"
+        role="button"
+        tabindex="0"
+      >
+        12
+      </div>
+    </div>
+    <div
+      class="dx-pages"
+    >
+      <div
+        class="dx-page-indexes"
+      >
+        <div
+          aria-label="Page 1"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          1
+        </div>
+        <div
+          aria-label="Page 2"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          2
+        </div>
+        <div
+          aria-current="page"
+          aria-label="Page 3"
+          class="dx-page dx-selection"
+          role="button"
+          tabindex="0"
+        >
+          3
+        </div>
+        <div
+          aria-label="Page 4"
+          class="dx-page"
+          role="button"
+          tabindex="0"
+        >
+          4
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`render empty PagerView 1`] = `
+<div>
+  <div
+    aria-label="Page navigation"
+    class="dx-widget dx-pagination"
+    role="navigation"
+  />
+</div>
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/pager/index.ts b/packages/devextreme/js/__internal/grids/new/grid_core/pager/index.ts
new file mode 100644
index 000000000000..38129b24f9e3
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/pager/index.ts
@@ -0,0 +1,2 @@
+export { defaultOptions, type Options } from './options';
+export { PagerView as View } from './view';
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/pager/options.ts b/packages/devextreme/js/__internal/grids/new/grid_core/pager/options.ts
new file mode 100644
index 000000000000..2c6a75b63dd4
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/pager/options.ts
@@ -0,0 +1,27 @@
+import type { Mode } from '@js/common';
+import messageLocalization from '@js/localization/message';
+import type { PagerBase } from '@js/ui/pagination';
+
+export type PageSize = number | 'all';
+
+export type PageSizes = PageSize[] | Mode;
+
+export type PagerVisible = boolean | Mode;
+
+export interface PagerOptions extends PagerBase {
+  allowedPageSizes?: PageSizes;
+  visible?: PagerVisible;
+}
+
+export interface Options {
+  pager?: PagerOptions;
+}
+
+export const defaultOptions = {
+  pager: {
+    visible: 'auto',
+    showPageSizeSelector: false,
+    allowedPageSizes: 'auto',
+    label: messageLocalization.format('dxPager-ariaLabel'),
+  },
+} satisfies Options;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/pager/pager.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/pager/pager.tsx
new file mode 100644
index 000000000000..21b00c5f2df4
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/pager/pager.tsx
@@ -0,0 +1,11 @@
+import type { PagerBase } from '@js/ui/pagination';
+
+import { Pager } from '../inferno_wrappers/pager';
+
+export type PagerProps = PagerBase & { visible: boolean };
+
+export function PagerView(props: PagerProps): JSX.Element {
+  return (
+    props.visible ? <Pager {...props}></Pager> : <></>
+  );
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/pager/utils.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/pager/utils.test.ts
new file mode 100644
index 000000000000..4073777fed42
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/pager/utils.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { calculatePageSizes, isVisible } from './utils';
+
+describe('calculatePageSizes', () => {
+  describe('when pageSizesConfig = \'auto\'', () => {
+    it('calculates pageSizes by pageSize', () => {
+      expect(calculatePageSizes(undefined, 'auto', 6)).toEqual([3, 6, 12]);
+    });
+  });
+
+  describe('when pageSizesConfig with custom values', () => {
+    it('return custom values', () => {
+      expect(calculatePageSizes(undefined, [4, 10, 20], 6)).toEqual([4, 10, 20]);
+    });
+  });
+
+  describe('when there is an initial value of pageSizes and pageSizesConfig = \'auto\'', () => {
+    it('return initial values', () => {
+      expect(calculatePageSizes([3, 6, 12], 'auto', 12)).toEqual([3, 6, 12]);
+    });
+  });
+});
+
+describe('isVisible', () => {
+  describe('when visibleConfig = true', () => {
+    it('visible should be equal to true', () => {
+      expect(isVisible(true, 1)).toBe(true);
+    });
+  });
+
+  describe('when visibleConfig = false', () => {
+    it('visible should be equal to false', () => {
+      expect(isVisible(false, 2)).toBe(false);
+    });
+  });
+
+  describe('when visibleConfig = \'auto\' and pageCount = 1', () => {
+    it('visible should be equal to false', () => {
+      expect(isVisible('auto', 1)).toBe(false);
+    });
+  });
+
+  describe('when visibleConfig = \'auto\' and pageCount > 1', () => {
+    it('visible should be equal to true', () => {
+      expect(isVisible('auto', 2)).toBe(true);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/pager/utils.ts b/packages/devextreme/js/__internal/grids/new/grid_core/pager/utils.ts
new file mode 100644
index 000000000000..51c877e18d02
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/pager/utils.ts
@@ -0,0 +1,30 @@
+import type { PagerVisible, PageSize, PageSizes } from './options';
+
+// TODO: Need to fix case with runtime changes the allowedPageSizes property to 'auto'
+export function calculatePageSizes(
+  allowedPageSizes: PageSize[] | undefined,
+  pageSizesConfig: PageSizes,
+  pageSize: number,
+): PageSizes {
+  if (Array.isArray(pageSizesConfig)) {
+    return pageSizesConfig;
+  }
+  if (Array.isArray(allowedPageSizes) && allowedPageSizes.includes(pageSize)) {
+    return allowedPageSizes;
+  }
+  if (pageSizesConfig && pageSize > 1) {
+    return [Math.floor(pageSize / 2), pageSize, pageSize * 2];
+  }
+
+  return [];
+}
+
+export function isVisible(
+  visibleConfig: PagerVisible,
+  pageCount: number,
+): boolean {
+  if (visibleConfig === 'auto') {
+    return pageCount > 1;
+  }
+  return visibleConfig;
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/pager/view.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/pager/view.test.ts
new file mode 100644
index 000000000000..d4977f2f12c4
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/pager/view.test.ts
@@ -0,0 +1,213 @@
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/dot-notation */
+import { describe, expect, it } from '@jest/globals';
+
+import { DataController } from '../data_controller/data_controller';
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { PagerView } from './view';
+
+const createPagerView = (options?: Options) => {
+  const rootElement = document.createElement('div');
+  const optionsController = new OptionsControllerMock(options ?? {
+    dataSource: [],
+    pager: {
+      visible: true,
+    },
+  });
+
+  const dataController = new DataController(optionsController);
+  const pager = new PagerView(dataController, optionsController);
+
+  pager.render(rootElement);
+
+  return {
+    rootElement,
+    optionsController,
+  };
+};
+
+describe('render', () => {
+  it('empty PagerView', () => {
+    const { rootElement } = createPagerView();
+
+    expect(rootElement).toMatchSnapshot();
+  });
+
+  it('PagerView with options', () => {
+    const { rootElement } = createPagerView({
+      dataSource: [...new Array(20)].map((_, index) => ({ field: `test_${index}` })),
+      paging: {
+        pageIndex: 2,
+      },
+      pager: {
+        showPageSizeSelector: true,
+      },
+    });
+
+    expect(rootElement).toMatchSnapshot();
+  });
+});
+
+describe('Applying options', () => {
+  describe('when visible = \'auto\' and pageCount <= 1', () => {
+    it('Pager should be hidden', () => {
+      const { rootElement } = createPagerView({
+        dataSource: [...new Array(4)].map((_, index) => ({ field: `test_${index}` })),
+        paging: {
+          pageIndex: 6,
+        },
+        pager: {
+          visible: 'auto',
+          showPageSizeSelector: true,
+        },
+      });
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+
+  describe('when visible = \'auto\' and pageCount > 1', () => {
+    it('Pager should be visible', () => {
+      const { rootElement } = createPagerView({
+        dataSource: [...new Array(20)].map((_, index) => ({ field: `test_${index}` })),
+        paging: {
+          pageIndex: 6,
+        },
+        pager: {
+          visible: 'auto',
+          showPageSizeSelector: true,
+        },
+      });
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+
+  describe('when visible = \'true\'', () => {
+    it('Pager should be visible', () => {
+      const { rootElement } = createPagerView({
+        dataSource: [...new Array(20)].map((_, index) => ({ field: `test_${index}` })),
+        paging: {
+          pageIndex: 6,
+        },
+        pager: {
+          visible: true,
+          showPageSizeSelector: true,
+        },
+      });
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+
+  describe('when visible = \'false\'', () => {
+    it('Pager should be hidden', () => {
+      const { rootElement } = createPagerView({
+        dataSource: [...new Array(20)].map((_, index) => ({ field: `test_${index}` })),
+        paging: {
+          pageIndex: 6,
+        },
+        pager: {
+          visible: false,
+          showPageSizeSelector: true,
+        },
+      });
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+
+  describe('when changing a visible to \'false\' at runtime', () => {
+    it('Pager should be hidden', () => {
+      const { rootElement, optionsController } = createPagerView({
+        dataSource: [...new Array(4)].map((_, index) => ({ field: `test_${index}` })),
+        paging: {
+          pageIndex: 6,
+        },
+        pager: {
+          visible: true,
+          showPageSizeSelector: true,
+        },
+      });
+
+      optionsController.option('pager.visible', false);
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+
+  describe('when changing a visible to \'true\' at runtime', () => {
+    it('Pager should be visible', () => {
+      const { rootElement, optionsController } = createPagerView({
+        dataSource: [...new Array(4)].map((_, index) => ({ field: `test_${index}` })),
+        paging: {
+          pageIndex: 6,
+        },
+        pager: {
+          visible: false,
+          showPageSizeSelector: true,
+        },
+      });
+
+      optionsController.option('pager.visible', true);
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+
+  describe('when allowedPageSizes = \'auto\'', () => {
+    it('calculates pageSizes by pageSize', () => {
+      const { rootElement } = createPagerView({
+        dataSource: [...new Array(4)].map((_, index) => ({ field: `test_${index}` })),
+        paging: {
+          pageIndex: 6,
+        },
+        pager: {
+          visible: true,
+          allowedPageSizes: 'auto',
+          showPageSizeSelector: true,
+        },
+      });
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+
+  describe('when allowedPageSizes with custom values', () => {
+    it('displays custom values', () => {
+      const { rootElement } = createPagerView({
+        dataSource: [...new Array(20)].map((_, index) => ({ field: `test_${index}` })),
+        paging: {
+          pageIndex: 6,
+        },
+        pager: {
+          visible: 'auto',
+          allowedPageSizes: [4, 10, 20],
+          showPageSizeSelector: true,
+        },
+      });
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+
+  describe('when changing an allowedPageSizes to custom values at runtime', () => {
+    it('applies custom values', () => {
+      const { rootElement, optionsController } = createPagerView({
+        dataSource: [...new Array(20)].map((_, index) => ({ field: `test_${index}` })),
+        paging: {
+          pageIndex: 6,
+        },
+        pager: {
+          allowedPageSizes: 'auto',
+          showPageSizeSelector: true,
+        },
+      });
+
+      optionsController.option('pager.allowedPageSizes', [4, 10, 20]);
+
+      expect(rootElement).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/pager/view.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/pager/view.tsx
new file mode 100644
index 000000000000..28f1ec5568da
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/pager/view.tsx
@@ -0,0 +1,63 @@
+/* eslint-disable spellcheck/spell-checker */
+import type { SubsGets } from '@ts/core/reactive/index';
+import { combined, computed } from '@ts/core/reactive/index';
+
+import { View } from '../core/view';
+import { DataController } from '../data_controller/index';
+import { OptionsController } from '../options_controller/options_controller';
+import type { PagerProps } from './pager';
+import { PagerView as Pager } from './pager';
+import { calculatePageSizes, isVisible } from './utils';
+
+export class PagerView extends View<PagerProps> {
+  protected override component = Pager;
+
+  public static dependencies = [DataController, OptionsController] as const;
+
+  private readonly pageSizesConfig = this.options.oneWay('pager.allowedPageSizes');
+
+  private readonly allowedPageSizes = computed(
+    (pageSizesConfig, pageSize) => calculatePageSizes(
+      this.allowedPageSizes?.unreactive_get(),
+      pageSizesConfig,
+      pageSize,
+    ),
+    [this.pageSizesConfig, this.dataController.pageSize],
+  );
+
+  private readonly visibleConfig = this.options.oneWay('pager.visible');
+
+  private readonly visible = computed(
+    (visibleConfig, pageCount) => isVisible(visibleConfig, pageCount),
+    [this.visibleConfig, this.dataController.pageCount],
+  );
+
+  constructor(
+    private readonly dataController: DataController,
+    private readonly options: OptionsController,
+  ) {
+    super();
+  }
+
+  protected override getProps(): SubsGets<PagerProps> {
+    return combined({
+      itemCount: this.dataController.totalCount,
+      allowedPageSizes: this.allowedPageSizes,
+      visible: this.visible,
+      pageIndex: computed(
+        (pageIndex) => pageIndex + 1,
+        [this.dataController.pageIndex],
+      ),
+      pageIndexChanged: (value): void => this.dataController.pageIndex.update(value - 1),
+      pageSize: this.dataController.pageSize,
+      pageSizeChanged: (value): void => this.dataController.pageSize.update(value),
+      isGridCompatibility: false,
+      pageCount: this.dataController.pageCount,
+      showPageSizeSelector: this.options.oneWay('pager.showPageSizeSelector'),
+      _skipValidation: true,
+      tabIndex: 0,
+      showInfo: this.options.oneWay('pager.showInfo'),
+      showNavigationButtons: this.options.oneWay('pager.showNavigationButtons'),
+    });
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/options.test.ts.snap b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/options.test.ts.snap
new file mode 100644
index 000000000000..5fa658a56425
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/options.test.ts.snap
@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Options disabled when it is 'false' Toolbar should not be disabled 1`] = `
+<div>
+  <div
+    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
+    role="toolbar"
+  >
+    <div
+      class="dx-toolbar-items-container"
+    >
+      <div
+        class="dx-toolbar-before"
+        role="presentation"
+      />
+      <div
+        class="dx-toolbar-center"
+        role="presentation"
+      />
+      <div
+        class="dx-toolbar-after"
+        role="presentation"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Options disabled when it is 'true' Toolbar should be disabled 1`] = `
+<div>
+  <div
+    aria-disabled="true"
+    class="dx-toolbar dx-widget dx-state-disabled dx-visibility-change-handler dx-collection dx-toolbar-mini"
+    role="toolbar"
+  >
+    <div
+      class="dx-toolbar-items-container"
+    >
+      <div
+        class="dx-toolbar-before"
+        role="presentation"
+      />
+      <div
+        class="dx-toolbar-center"
+        role="presentation"
+      />
+      <div
+        class="dx-toolbar-after"
+        role="presentation"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Options items when these are not set Toolbar should be hidden 1`] = `
+<div>
+  
+</div>
+`;
+
+exports[`Options items when these are set Toolbar should be visible 1`] = `
+<div>
+  <div
+    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection"
+    role="toolbar"
+  >
+    <div
+      class="dx-toolbar-items-container"
+    >
+      <div
+        class="dx-toolbar-before"
+        role="presentation"
+      >
+        <div
+          class="dx-item dx-toolbar-item dx-toolbar-button"
+        >
+          <div
+            class="dx-item-content dx-toolbar-item-content"
+          >
+            <div
+              aria-label="button1"
+              class="dx-widget dx-button dx-button-mode-contained dx-button-normal dx-button-has-text"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="dx-button-content"
+              >
+                <span
+                  class="dx-button-text"
+                >
+                  button1
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="dx-toolbar-center"
+        role="presentation"
+      />
+      <div
+        class="dx-toolbar-after"
+        role="presentation"
+      >
+        <div
+          class="dx-item dx-toolbar-item dx-toolbar-button"
+        >
+          <div
+            class="dx-item-content dx-toolbar-item-content"
+          >
+            <div
+              aria-label="button2"
+              class="dx-widget dx-button dx-button-mode-contained dx-button-normal dx-button-has-text"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="dx-button-content"
+              >
+                <span
+                  class="dx-button-text"
+                >
+                  button2
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Options visilbe when changing it to 'false' at runtime Toolbar should be hidden 1`] = `
+<div>
+  
+</div>
+`;
+
+exports[`Options visilbe when changing it to 'true' at runtime Toolbar should be visible 1`] = `
+<div>
+  <div
+    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
+    role="toolbar"
+  >
+    <div
+      class="dx-toolbar-items-container"
+    >
+      <div
+        class="dx-toolbar-before"
+        role="presentation"
+      />
+      <div
+        class="dx-toolbar-center"
+        role="presentation"
+      />
+      <div
+        class="dx-toolbar-after"
+        role="presentation"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Options visilbe when it is 'false' Toolbar should be hidden 1`] = `
+<div>
+  
+</div>
+`;
+
+exports[`Options visilbe when it is 'true' Toolbar should be visible 1`] = `
+<div>
+  <div
+    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
+    role="toolbar"
+  >
+    <div
+      class="dx-toolbar-items-container"
+    >
+      <div
+        class="dx-toolbar-before"
+        role="presentation"
+      />
+      <div
+        class="dx-toolbar-center"
+        role="presentation"
+      />
+      <div
+        class="dx-toolbar-after"
+        role="presentation"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.test.ts
new file mode 100644
index 000000000000..57418a60a462
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.test.ts
@@ -0,0 +1,86 @@
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/dot-notation */
+import { describe, expect, it } from '@jest/globals';
+
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { ToolbarController } from './controller';
+
+const createToolbarController = (options?: Options): {
+  toolbarController: ToolbarController;
+  optionsController: OptionsControllerMock;
+} => {
+  const optionsController = new OptionsControllerMock(options ?? {
+    toolbar: {
+      visible: true,
+    },
+  });
+
+  const toolbarController = new ToolbarController(optionsController);
+
+  return {
+    toolbarController,
+    optionsController,
+  };
+};
+
+describe('ToolbarController', () => {
+  describe('items', () => {
+    describe('when user items are specified', () => {
+      it('should contain processed toolbar items', () => {
+        const { toolbarController } = createToolbarController({
+          toolbar: {
+            items: [{ location: 'before' }],
+          },
+        });
+
+        expect(toolbarController.items.unreactive_get()).toStrictEqual([{ location: 'before' }]);
+      });
+    });
+
+    describe('when default items and user items are specified', () => {
+      it('should contain processed toolbar items', () => {
+        const { toolbarController } = createToolbarController({
+          toolbar: {
+            items: ['searchPanel', { location: 'before' }],
+          },
+        });
+
+        toolbarController.addDefaultItem({ name: 'searchPanel', location: 'after' });
+
+        expect(toolbarController.items.unreactive_get()).toStrictEqual([
+          { name: 'searchPanel', location: 'after' },
+          { location: 'before' },
+        ]);
+      });
+    });
+  });
+
+  describe('addDefaultItem', () => {
+    it('should add new default item to items', () => {
+      const { toolbarController } = createToolbarController();
+
+      toolbarController.addDefaultItem({ name: 'searchPanel', location: 'after' });
+
+      expect(toolbarController.items.unreactive_get()).toStrictEqual([
+        { name: 'searchPanel', location: 'after' },
+      ]);
+    });
+  });
+
+  describe('removeDefaultItem', () => {
+    it('should remove given default item from items', () => {
+      const { toolbarController } = createToolbarController();
+
+      toolbarController.addDefaultItem({ name: 'searchPanel', location: 'after' });
+
+      expect(toolbarController.items.unreactive_get()).toStrictEqual([
+        { name: 'searchPanel', location: 'after' },
+      ]);
+
+      toolbarController.removeDefaultItem('searchPanel');
+
+      expect(toolbarController.items.unreactive_get()).toStrictEqual([]);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.ts
new file mode 100644
index 000000000000..ef12e1ba7e69
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.ts
@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-dynamic-delete */
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable spellcheck/spell-checker */
+import type {
+  MaybeSubscribable, Subscribable, Subscription, SubsGets,
+} from '@ts/core/reactive/index';
+import { computed, state, toSubscribable } from '@ts/core/reactive/index';
+
+import { OptionsController } from '../options_controller/options_controller';
+import { DEFAULT_TOOLBAR_ITEMS } from './defaults';
+import type { PredefinedToolbarItem, ToolbarItem, ToolbarItems } from './types';
+import { normalizeToolbarItems } from './utils';
+
+export class ToolbarController {
+  private readonly itemSubscriptions: Record<string, Subscription> = {};
+
+  private readonly defaultItems = state<Record<string, PredefinedToolbarItem>>({});
+
+  private readonly userItems: Subscribable<ToolbarItems | undefined>;
+
+  public items: SubsGets<ToolbarItem[]>;
+
+  public static dependencies = [OptionsController] as const;
+
+  constructor(
+    private readonly options: OptionsController,
+  ) {
+    this.userItems = this.options.oneWay('toolbar.items');
+    this.items = computed(
+      (defaultItems, userItems) => normalizeToolbarItems(
+        Object.values(defaultItems),
+        userItems,
+        DEFAULT_TOOLBAR_ITEMS,
+      ),
+      [this.defaultItems, this.userItems],
+    );
+  }
+
+  public addDefaultItem(
+    item: MaybeSubscribable<PredefinedToolbarItem>,
+  ): void {
+    const itemObs = toSubscribable(item);
+    // @ts-expect-error
+    const { name } = itemObs.unreactive_get();
+
+    this.itemSubscriptions[name] = itemObs.subscribe((item) => {
+      this.defaultItems.updateFunc((oldDefaultItems) => ({
+        ...oldDefaultItems,
+        [item.name]: item,
+      }));
+    });
+  }
+
+  public removeDefaultItem(name: typeof DEFAULT_TOOLBAR_ITEMS[number]): void {
+    this.defaultItems.updateFunc((oldDefaultItems) => {
+      const defaultItems = { ...oldDefaultItems };
+      delete defaultItems[name];
+      return defaultItems;
+    });
+    this.itemSubscriptions[name].unsubscribe();
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/defaults.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/defaults.tsx
new file mode 100644
index 000000000000..5e8280f1393d
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/defaults.tsx
@@ -0,0 +1,6 @@
+/**
+ * used for defining default toolbar items and their default order in header panel
+ */
+export const DEFAULT_TOOLBAR_ITEMS = [
+  'searchPanel',
+] as const;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/index.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/index.ts
new file mode 100644
index 000000000000..f1059a6060ec
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/index.ts
@@ -0,0 +1,3 @@
+export { ToolbarController as Controller } from './controller';
+export { type Options } from './options';
+export { ToolbarView as View } from './view';
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.test.ts
new file mode 100644
index 000000000000..060c8769fb57
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.test.ts
@@ -0,0 +1,152 @@
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/dot-notation */
+import { describe, expect, it } from '@jest/globals';
+
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { ToolbarController } from './controller';
+import { ToolbarView } from './view';
+
+const createToolbarView = (options?: Options): {
+  rootElement: HTMLElement;
+  optionsController: OptionsControllerMock;
+} => {
+  const rootElement = document.createElement('div');
+  const optionsController = new OptionsControllerMock(options ?? {
+    toolbar: {
+      visible: true,
+    },
+  });
+
+  const toolbarController = new ToolbarController(optionsController);
+  const toolbar = new ToolbarView(toolbarController, optionsController);
+
+  toolbar.render(rootElement);
+
+  return {
+    rootElement,
+    optionsController,
+  };
+};
+
+describe('Options', () => {
+  describe('visilbe', () => {
+    describe('when it is \'true\'', () => {
+      it('Toolbar should be visible', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            visible: true,
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when it is \'false\'', () => {
+      it('Toolbar should be hidden', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            visible: false,
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when changing it to \'false\' at runtime', () => {
+      it('Toolbar should be hidden', () => {
+        const { rootElement, optionsController } = createToolbarView({
+          toolbar: {
+            visible: true,
+          },
+        });
+
+        optionsController.option('toolbar.visible', false);
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when changing it to \'true\' at runtime', () => {
+      it('Toolbar should be visible', () => {
+        const { rootElement, optionsController } = createToolbarView({
+          toolbar: {
+            visible: false,
+          },
+        });
+
+        optionsController.option('toolbar.visible', true);
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('items', () => {
+    describe('when these are not set', () => {
+      it('Toolbar should be hidden', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            items: [],
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when these are set', () => {
+      it('Toolbar should be visible', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            items: [{
+              location: 'before',
+              widget: 'dxButton',
+              options: {
+                text: 'button1',
+              },
+            }, {
+              location: 'after',
+              widget: 'dxButton',
+              options: {
+                text: 'button2',
+              },
+            }],
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('disabled', () => {
+    describe('when it is \'true\'', () => {
+      it('Toolbar should be disabled', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            visible: true,
+            disabled: true,
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when it is \'false\'', () => {
+      it('Toolbar should not be disabled', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            visible: true,
+            disabled: false,
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.ts
new file mode 100644
index 000000000000..cfbdaf634790
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.ts
@@ -0,0 +1,5 @@
+import type { ToolbarProps } from './types';
+
+export interface Options {
+  toolbar?: ToolbarProps;
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/toolbar.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/toolbar.tsx
new file mode 100644
index 000000000000..3ae5844f9928
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/toolbar.tsx
@@ -0,0 +1,8 @@
+import { Toolbar } from '../inferno_wrappers/toolbar';
+import type { ToolbarProps } from './types';
+
+export function ToolbarView(props: ToolbarProps): JSX.Element {
+  return (
+    props.visible ? <Toolbar {...props}></Toolbar> : <></>
+  );
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/types.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/types.ts
new file mode 100644
index 000000000000..994bf1791e7f
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/types.ts
@@ -0,0 +1,18 @@
+import type { Item as BaseToolbarItem } from '@js/ui/toolbar';
+
+import type { DEFAULT_TOOLBAR_ITEMS } from './defaults';
+
+type DefaultToolbarItem = typeof DEFAULT_TOOLBAR_ITEMS[number];
+
+export interface ToolbarItem extends BaseToolbarItem {
+  name?: DefaultToolbarItem | string;
+}
+
+export type PredefinedToolbarItem = ToolbarItem & { name: DefaultToolbarItem };
+export type ToolbarItems = (ToolbarItem | DefaultToolbarItem)[];
+
+export interface ToolbarProps {
+  items?: ToolbarItems;
+  visible?: boolean | undefined;
+  disabled?: boolean;
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.test.ts
new file mode 100644
index 000000000000..4ce02da03eeb
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.test.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { isVisible, normalizeToolbarItems } from './utils';
+
+describe('isVisible', () => {
+  describe('when visibleConfig = true', () => {
+    it('should be equal to true', () => {
+      expect(isVisible(true, [])).toBe(true);
+    });
+  });
+
+  describe('when visibleConfig = false', () => {
+    it('should be equal to false', () => {
+      expect(isVisible(false, [{ name: 'toolbarItem1' }])).toBe(false);
+    });
+  });
+
+  describe('when visibleConfig = undefined and there are items', () => {
+    it('should be equal to false', () => {
+      expect(isVisible(undefined, [])).toBe(false);
+    });
+  });
+
+  describe('when visibleConfig = undefined and there are no items', () => {
+    it('should be equal to true', () => {
+      expect(isVisible(undefined, [
+        { name: 'toolbarItem1' },
+        { name: 'toolbarItem2' },
+      ])).toBe(true);
+    });
+  });
+});
+
+describe('normalizeToolbarItems', () => {
+  describe('when only default items are specified', () => {
+    it('should return default items', () => {
+      expect(normalizeToolbarItems(
+        [{ name: 'toolbarItem1' }],
+        undefined,
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'toolbarItem1' }]);
+    });
+  });
+
+  describe('when only custom items are specified', () => {
+    it('should return processed custom items', () => {
+      expect(normalizeToolbarItems(
+        [],
+        [{ name: 'customToolbarItem1' }],
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'customToolbarItem1', location: 'after' }]);
+    });
+  });
+
+  describe('when default items and custom items are specified', () => {
+    it('should return processed custom items', () => {
+      expect(normalizeToolbarItems(
+        [{ name: 'toolbarItem1' }],
+        [{ name: 'customToolbarItem1' }],
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'customToolbarItem1', location: 'after' }]);
+    });
+  });
+
+  describe('when custom items override default items', () => {
+    it('should return default items merged with custom items', () => {
+      expect(normalizeToolbarItems(
+        [{ name: 'toolbarItem1', location: 'before' }],
+        [{ name: 'toolbarItem1', location: 'after' }],
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'toolbarItem1', location: 'after' }]);
+    });
+  });
+
+  describe('when default items are set in custom items', () => {
+    it('should return both default and custom items', () => {
+      expect(normalizeToolbarItems(
+        [{ name: 'toolbarItem1', location: 'before' }],
+        ['toolbarItem1', { name: 'customToolbarItem1' }],
+        ['toolbarItem1'],
+      )).toStrictEqual([
+        { name: 'toolbarItem1', location: 'before' },
+        { name: 'customToolbarItem1', location: 'after' },
+      ]);
+    });
+  });
+
+  describe('when there are no default items but they are specified in custom items', () => {
+    it('should return processed default items', () => {
+      expect(normalizeToolbarItems(
+        [],
+        ['toolbarItem1'],
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'toolbarItem1', location: 'after', visible: false }]);
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.ts
new file mode 100644
index 000000000000..8affcc918e27
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.ts
@@ -0,0 +1,65 @@
+import { extend } from '@js/core/utils/extend';
+import { isDefined, isString } from '@js/core/utils/type';
+import type { Item as BaseToolbarItem } from '@js/ui/toolbar';
+
+import type { ToolbarItems } from './types';
+
+export function isVisible(
+  visibleConfig: boolean | undefined,
+  items: ToolbarItems,
+): boolean {
+  if (visibleConfig === undefined) {
+    return items.length > 0;
+  }
+
+  return visibleConfig;
+}
+
+interface ToolbarItem extends BaseToolbarItem {
+  name?: string;
+}
+
+function normalizeToolbarItem(
+  item: ToolbarItem | string,
+  defaultButtonsMap: { [key: string]: ToolbarItem },
+  defaultItemNames: readonly string[],
+): ToolbarItem {
+  let button = item;
+  const defaultProps: ToolbarItem = { location: 'after' };
+
+  if (isString(button)) {
+    button = { name: button };
+  }
+
+  if (isDefined(button.name)) {
+    if (isDefined(defaultButtonsMap[button.name])) {
+      button = extend(true, {}, defaultButtonsMap[button.name], button);
+    } else if (defaultItemNames.includes(button.name)) {
+      button = { ...button, visible: false };
+    }
+  }
+
+  return extend(true, {}, defaultProps, button) as ToolbarItem;
+}
+
+export function normalizeToolbarItems(
+  defaultItems: (ToolbarItem & { name: string })[],
+  userItems: (ToolbarItem | string)[] | undefined,
+  defaultItemNames: readonly string[],
+): ToolbarItem[] {
+  if (!isDefined(userItems)) {
+    return defaultItems;
+  }
+
+  const defaultButtonsMap = {};
+
+  defaultItems.forEach((button) => {
+    defaultButtonsMap[button.name] = button;
+  });
+
+  return userItems.map(
+    (
+      item: ToolbarItem | string,
+    ) => normalizeToolbarItem(item, defaultButtonsMap, defaultItemNames),
+  );
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/view.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/view.tsx
new file mode 100644
index 000000000000..2cdb0de3ce16
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/view.tsx
@@ -0,0 +1,37 @@
+import type { SubsGets } from '@ts/core/reactive/index';
+import { combined, computed } from '@ts/core/reactive/index';
+
+import { View } from '../core/view';
+import { OptionsController } from '../options_controller/options_controller';
+import { ToolbarController } from './controller';
+import { ToolbarView as Toolbar } from './toolbar';
+import type { ToolbarProps } from './types';
+import { isVisible } from './utils';
+
+export class ToolbarView extends View<ToolbarProps> {
+  protected override component = Toolbar;
+
+  private readonly visibleConfig = this.options.oneWay('toolbar.visible');
+
+  private readonly visible = computed(
+    (visibleConfig, pageCount) => isVisible(visibleConfig, pageCount),
+    [this.visibleConfig, this.controller.items],
+  );
+
+  public static dependencies = [ToolbarController, OptionsController] as const;
+
+  constructor(
+    private readonly controller: ToolbarController,
+    private readonly options: OptionsController,
+  ) {
+    super();
+  }
+
+  protected override getProps(): SubsGets<ToolbarProps> {
+    return combined({
+      visible: this.visible,
+      items: this.controller.items,
+      disabled: this.options.oneWay('toolbar.disabled'),
+    });
+  }
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/types.ts b/packages/devextreme/js/__internal/grids/new/grid_core/types.ts
new file mode 100644
index 000000000000..0b91c9e01175
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/types.ts
@@ -0,0 +1,16 @@
+import type { template } from '@js/core/templates/template';
+import type { EventInfo } from '@js/events';
+
+import type { GridCoreNew } from './widget';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Constructor<T, TDeps extends readonly any[] = any[]> = new(...deps: TDeps) => T;
+
+// TODO
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export type Template<TProps> = (props: TProps) => HTMLDivElement | template;
+
+// TODO: add TComponent
+export type Action<TArgs> = (args: TArgs & EventInfo<GridCoreNew>) => void;
+
+export type WithRequired<T, TProp extends keyof T> = Omit<T, TProp> & Required<Pick<T, TProp>>;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/widget.ts b/packages/devextreme/js/__internal/grids/new/grid_core/widget.ts
new file mode 100644
index 000000000000..3d45d306c0a6
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/widget.ts
@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable spellcheck/spell-checker */
+// eslint-disable-next-line max-classes-per-file
+import { extend } from '@js/core/utils/extend';
+import Widget from '@js/ui/widget/ui.widget';
+import { DIContext } from '@ts/core/di/index';
+import type { Subscription } from '@ts/core/reactive/index';
+import { render } from 'inferno';
+
+import * as ColumnsControllerModule from './columns_controller/index';
+import * as DataControllerModule from './data_controller/index';
+import { ErrorController } from './error_controller/error_controller';
+import { ItemsController } from './items_controller/items_controller';
+import { MainView } from './main_view';
+import { defaultOptions, defaultOptionsRules, type Options } from './options';
+import { PagerView } from './pager/view';
+import { ToolbarController } from './toolbar/controller';
+import { ToolbarView } from './toolbar/view';
+
+export class GridCoreNewBase<
+  TProperties extends Options = Options,
+> extends Widget<TProperties> {
+  protected renderSubscription?: Subscription;
+
+  protected diContext!: DIContext;
+
+  protected dataController!: DataControllerModule.DataController;
+
+  protected itemsController!: ItemsController;
+
+  protected columnsController!: ColumnsControllerModule.ColumnsController;
+
+  private pagerView!: PagerView;
+
+  private toolbarController!: ToolbarController;
+
+  private toolbarView!: ToolbarView;
+
+  private errorController!: ErrorController;
+
+  protected _registerDIContext(): void {
+    this.diContext = new DIContext();
+    this.diContext.register(DataControllerModule.DataController);
+    this.diContext.register(ItemsController);
+    this.diContext.register(ColumnsControllerModule.ColumnsController);
+    this.diContext.register(ToolbarController);
+    this.diContext.register(ToolbarView);
+    this.diContext.register(PagerView);
+    this.diContext.register(ErrorController);
+  }
+
+  protected _initDIContext(): void {
+    this.dataController = this.diContext.get(DataControllerModule.DataController);
+    this.columnsController = this.diContext.get(ColumnsControllerModule.ColumnsController);
+    this.itemsController = this.diContext.get(ItemsController);
+    this.toolbarController = this.diContext.get(ToolbarController);
+    this.toolbarView = this.diContext.get(ToolbarView);
+    this.pagerView = this.diContext.get(PagerView);
+    this.errorController = this.diContext.get(ErrorController);
+  }
+
+  protected _init(): void {
+    // @ts-expect-error
+    super._init();
+    this._registerDIContext();
+    this._initDIContext();
+  }
+
+  protected _getDefaultOptions() {
+    return {
+      // @ts-expect-error
+      ...super._getDefaultOptions() as {},
+      ...extend(true, {}, defaultOptions) as typeof defaultOptions,
+    };
+  }
+
+  protected _defaultOptionsRules() {
+    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return super._defaultOptionsRules().concat(defaultOptionsRules);
+  }
+
+  protected _initMarkup(): void {
+    // @ts-expect-error
+    super._initMarkup();
+    this.renderSubscription = this.diContext.get(MainView).render(this.$element().get(0));
+  }
+
+  protected _clean(): void {
+    this.renderSubscription?.unsubscribe();
+    render(null, this.$element().get(0));
+    // @ts-expect-error
+    super._clean();
+  }
+}
+
+export class GridCoreNew extends ColumnsControllerModule.PublicMethods(
+  DataControllerModule.PublicMethods(
+    GridCoreNewBase,
+  ),
+) {}
diff --git a/packages/devextreme/js/bundles/modules/parts/widgets-web.js b/packages/devextreme/js/bundles/modules/parts/widgets-web.js
index e8d6d70fd681..959a240fde2a 100644
--- a/packages/devextreme/js/bundles/modules/parts/widgets-web.js
+++ b/packages/devextreme/js/bundles/modules/parts/widgets-web.js
@@ -9,6 +9,7 @@ ui.dxAccordion = require('../../../ui/accordion');
 ui.dxContextMenu = require('../../../ui/context_menu');
 ui.dxDataGrid = require('../../../ui/data_grid');
 ui.dxTreeList = require('../../../ui/tree_list');
+ui.dxCardView = require('../../../ui/card_view');
 ui.dxMenu = require('../../../ui/menu');
 ui.dxPivotGrid = require('../../../ui/pivot_grid');
 ui.dxPivotGridFieldChooser = require('../../../ui/pivot_grid_field_chooser');
diff --git a/packages/devextreme/js/ui/card_view.d.ts b/packages/devextreme/js/ui/card_view.d.ts
new file mode 100644
index 000000000000..3335571fb327
--- /dev/null
+++ b/packages/devextreme/js/ui/card_view.d.ts
@@ -0,0 +1,513 @@
+import { Mode, template } from '../common';
+import { UserDefinedElement } from '../core/element';
+import {
+ ColumnBase, DataErrorOccurredInfo, Pager, ScrollingBase,
+} from '../common/grids';
+import { DataSourceLike } from '../data/data_source';
+import Widget, { WidgetOptions } from './widget/ui.widget';
+import { EventInfo } from '../events';
+import { dxToolbarItem, ToolbarItemLocation } from './toolbar';
+import { dxSortableOptions } from './sortable';
+import { dxLoadPanelOptions } from './load_panel';
+
+// #region DataController
+
+/**
+ * @docid
+ * @namespace DevExpress.ui.dxCardView
+ */
+interface Paging {
+    /**
+     * @docid
+     * @default true
+     * @public
+     */
+    enabled?: boolean;
+    /**
+     * @docid
+     * @default 0
+     * @fires dxCardViewOptions.onOptionChanged
+     * @public
+     */
+    pageIndex?: number;
+    /**
+     * @docid
+     * @default 6
+     * @fires dxCardViewOptions.onOptionChanged
+     * @public
+     */
+    pageSize?: number;
+}
+
+/**
+ * @docid
+ * @namespace DevExpress.ui.dxCardView
+ */
+interface RemoteOperations {
+    /**
+     * @docid
+     * @default false
+     */
+    filtering?: boolean;
+    /**
+     * @docid
+     * @default false
+     */
+    paging?: boolean;
+    /**
+     * @docid
+     * @default false
+     */
+    sorting?: boolean;
+    /**
+     * @docid
+     * @default false
+     */
+    summary?: boolean;
+}
+
+/**
+ * @docid
+ * @hidden
+ * @namespace DevExpress.ui.dxCardView
+ */
+export type DataControllerConfiguration<TRowData = unknown, TKey = unknown> = {
+    /**
+     * @docid
+     * @default undefined
+     * @type string | Array<any> | Store | DataSource | DataSourceOptions
+     * @public
+     */
+    dataSource?: DataSourceLike<TRowData, TKey>;
+    /**
+     * @docid
+     * @public
+     */
+    paging?: Paging;
+    /**
+     * @docid
+     * @default undefined
+     * @public
+     */
+    keyExpr?: string | string[];
+    /**
+     * @docid
+     * @default "auto"
+     * @public
+     */
+    remoteOperations?: RemoteOperations | boolean | Mode;
+};
+
+// #endregion
+
+// #region Pager
+
+/**
+ * @docid
+ * @hidden
+ * @namespace DevExpress.ui.dxCardView
+ */
+export type PagerConfiguration = {
+    /**
+     * @docid
+     * @public
+     */
+    pager?: Pager;
+};
+
+// #endregion
+
+// #region Toolbar
+
+export type PredefinedToolbarItem = 'columnChooserButton' | 'searchPanel' | 'addCardButton';
+export type dxCardViewToolbar = Toolbar;
+export type dxCardViewToolbarItem = ToolbarItem;
+
+/**
+ * @docid dxCardViewToolbarItem
+ * @inherits dxToolbarItem
+ * @namespace DevExpress.ui.dxCardView 
+ * @public
+ */
+export type ToolbarItem = dxToolbarItem & {
+    /**
+     * @docid dxCardViewToolbarItem.name
+     * @public
+     */
+    name?: PredefinedToolbarItem | string;
+    /**
+     * @docid dxCardViewToolbarItem.location
+     * @default 'after'
+     * @public
+     */
+    location?: ToolbarItemLocation;
+};
+
+/**
+ * @docid dxCardViewToolbar
+ * @public
+ * @namespace DevExpress.ui.dxCardView
+ */
+export type Toolbar = {
+    /**
+     * @docid dxCardViewToolbar.items
+     * @type Array<dxCardViewToolbarItem,Enums.PredefinedToolbarItem>
+     * @public
+     */
+    items?: Array<PredefinedToolbarItem | ToolbarItem>;
+    /**
+     * @docid dxCardViewToolbar.visible
+     * @default undefined
+     * @public
+     */
+    visible?: boolean | undefined;
+    /**
+     * @docid dxCardViewToolbar.disabled
+     * @default false
+     * @public
+     */
+    disabled?: boolean;
+};
+
+// #endregion
+
+// #region ColumnsController
+
+/**
+ * @public
+ * @docid
+ * @namespace DevExpress.ui.dxCardView
+ */
+export interface Cell {
+    /**
+     * @public
+     * @docid
+     * @type object
+     */
+    value: unknown;
+    /**
+     * @public
+     * @docid
+     * @type object
+     */
+    displayValue: unknown;
+    /**
+     * @public
+     * @docid
+     */
+    text: string;
+    /**
+     * @public
+     * @docid
+     */
+    column: Column;
+}
+
+/**
+ * @public
+ * @docid
+ * @namespace DevExpress.ui.dxCardView
+ */
+export interface DataRow<TRowData = unknown, TKey = unknown> {
+    /**
+     * @public
+     * @docid
+     */
+    cells: Cell[];
+    /**
+     * @public
+     * @docid
+     */
+    key: TKey;
+    /**
+     * @public
+     * @docid
+     */
+    data: TRowData;
+}
+
+type InheritedColumnProps =
+  | 'alignment'
+  | 'dataType'
+  | 'visible'
+  | 'visibleIndex'
+  | 'allowReordering'
+  | 'allowHiding'
+  | 'trueText'
+  | 'falseText'
+  | 'caption'
+  | 'dataField'
+  | 'sortOrder'
+  | 'sortIndex'
+  | 'name'
+  | 'calculateCellValue'
+  | 'calculateDisplayValue'
+  | 'customizeText'
+  ;
+
+/**
+ * @docid
+ * @public
+ * @namespace DevExpress.ui.dxCardView
+ * @type object
+ */
+export type ColumnProperties<TRowData = unknown, TKey = unknown> = Pick<ColumnBase<TRowData>, InheritedColumnProps> & {
+    /**
+     * @public
+     * @docid
+     */
+    fieldTemplate?: template | ((dataRow: DataRow<TRowData, TKey>) => string | UserDefinedElement);
+    /**
+     * @public
+     * @docid
+     */
+    fieldCaptionTemplate?: template | ((dataRow: DataRow<TRowData, TKey>) => string | UserDefinedElement);
+    /**
+     * @public
+     * @docid
+     */
+    fieldValueTemplate?: template | ((dataRow: DataRow<TRowData, TKey>) => string | UserDefinedElement);
+    /**
+     * @public
+     * @docid
+     */
+    headerItemTemplate?: template | ((column: Column<TRowData, TKey>) => string | UserDefinedElement);
+    /**
+     * @public
+     * @docid
+     */
+    headerItemCssClass?: string;
+};
+
+type RequiredColumnProps = 'alignment' | 'dataType' | 'visible' | 'visibleIndex' | 'allowReordering' | 'allowHiding' | 'trueText' | 'falseText' | 'caption';
+
+/**
+ * @docid
+ * @public
+ * @type object
+ * @namespace DevExpress.ui.dxCardView
+ */
+export type Column<TRowData = unknown, TKey = unknown> =
+    Pick<Required<ColumnProperties<TRowData, TKey>>, RequiredColumnProps>
+    & Omit<ColumnProperties, RequiredColumnProps>;
+
+/**
+ * @docid
+ * @hidden
+ * @namespace DevExpress.ui.dxCardView
+ */
+export type ColumnsControllerConfiguration<TRowData = unknown, TKey = unknown> = {
+    /**
+     * @public
+     * @docid
+     */
+    columns?: (ColumnProperties<TRowData, TKey> | string)[];
+};
+
+// #endregion
+
+// #region HeaderPanel
+
+/**
+ * @docid
+ */
+type HeaderPanel<TRowData = unknown, TKey = unknown> = {
+    /**
+     * @docid
+     * @public
+     * @type object
+     */
+    dragging?: Pick<dxSortableOptions, 'dropFeedbackMode' | 'scrollSpeed' | 'scrollSensitivity' | 'onDragChange' | 'onDragEnd' | 'onDragMove' | 'onDragStart' | 'onRemove' | 'onReorder'>;
+    /**
+     * @docid
+     * @public
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * @docid
+     * @public
+     */
+    itemTemplate?: template | ((e: { column: Column<TRowData, TKey> }) => string | UserDefinedElement);
+    /**
+     * @docid
+     * @public
+     */
+    itemCssClass?: string;
+};
+
+/**
+ * @docid
+ * @hidden
+ * @namespace DevExpress.ui.dxCardView
+ */
+export type HeaderPanelConfiguration<TRowData = unknown, TKey = unknown> = {
+    /**
+     * @docid
+     */
+    headerPanel?: HeaderPanel<TRowData, TKey>;
+};
+
+// #endregion
+
+// #region ContentView
+
+/**
+ * @docid
+ * @hidden
+ * @namespace DevExpress.ui.dxCardView
+ * @type object
+ */
+export interface BaseContentViewConfiguration {
+    /**
+     * @docid
+     * @public
+     * @type object
+     */
+    scrolling?: Pick<ScrollingBase, 'scrollByContent' | 'scrollByThumb' | 'showScrollbar' | 'useNative'>;
+    /**
+     * @docid
+     * @public
+     * @default true
+     */
+    errorRowEnabled?: boolean;
+    /**
+     * @docid
+     * @public
+     */
+    loadPanel?: dxLoadPanelOptions;
+    /**
+     * @docid
+     * @public
+     * @default "No data"
+     */
+    noDataText?: string;
+    /**
+     * @docid
+     * @public
+     */
+    noDataTemplate?: template | ((e: { text: string }) => string | UserDefinedElement);
+}
+
+/**
+ * @docid
+ * @namespace DevExpress.ui.dxCardView
+ */
+interface CardCover<TRowData = unknown> {
+    /**
+     * @docid
+     * @public
+     */
+    imageExpr: string | ((data: TRowData) => string);
+    /**
+     * @docid
+     * @public
+     */
+    altExpr: string | ((data: TRowData) => string);
+}
+
+/**
+ * @docid
+ * @namespace DevExpress.ui.dxCardView
+ */
+interface CardHeader<TRowData = unknown> {
+    /**
+     * @docid
+     * @public
+     */
+    captionExpr?: string | ((data: TRowData) => string);
+    /**
+     * @docid
+     * @public
+     */
+    visible?: boolean;
+}
+
+/**
+ * @docid
+ * @hidden
+ * @namespace DevExpress.ui.dxCardView
+ * @type object
+ */
+export interface ContentViewConfiguration<TRowData = unknown> extends BaseContentViewConfiguration {
+    /**
+     * @docid
+     * @public
+     */
+    cardsPerRow?: number | Mode;
+    /**
+     * @docid
+     * @public
+     */
+    cardMinWidth?: number;
+    /**
+     * @docid
+     * @public
+     */
+    cardMaxWidth?: number;
+    /**
+     * @docid
+     * @public
+     */
+    cardCover?: CardCover<TRowData>;
+    /**
+     * @docid
+     * @public
+     */
+    cardTemplate?: template | ((row: DataRow) => string | UserDefinedElement);
+    /**
+     * @docid
+     * @public
+     */
+    cardHeader?: CardHeader<TRowData>;
+}
+
+// #endregion
+
+/**
+ * @namespace DevExpress.ui
+ * @public
+ * @docid
+ * @deprecated use Properties instead
+ * @inherits DataControllerConfiguration,PagerConfiguration,ColumnsControllerConfiguration,HeaderPanelConfiguration,ContentViewConfiguration
+ */
+export interface dxCardViewOptions<TRowData = unknown, TKey = unknown> extends WidgetOptions<dxCardView>,
+DataControllerConfiguration<TRowData, TKey>,
+PagerConfiguration,
+ColumnsControllerConfiguration<TRowData, TKey>,
+HeaderPanelConfiguration<TRowData, TKey>,
+ContentViewConfiguration<TRowData> {
+    /**
+     * @docid
+     * @default undefined
+     * @type_function_param1 e:object
+     * @type_function_param1_field component:this
+     * @action
+     * @public
+     */
+    onDataErrorOccurred?: (e: EventInfo<dxCardView> & DataErrorOccurredInfo) => void;
+    /**
+     * @docid
+     * @type dxCardViewToolbar | undefined
+     * @public
+     */
+    toolbar?: Toolbar | undefined;
+}
+
+/** @public */
+export type Properties<TRowData = unknown, TKey = unknown> = dxCardViewOptions<TRowData, TKey>;
+
+/**
+* @docid
+* @inherits Widget
+* @namespace DevExpress.ui
+* @public
+*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default class dxCardView<TRowData = unknown, TKey = unknown> extends Widget<Properties> {
+
+}
+
+export type ExplicitTypes<TRowData = unknown, TKey = unknown> = {
+    Properties: Properties<TRowData, TKey>;
+};
diff --git a/packages/devextreme/js/ui/card_view.js b/packages/devextreme/js/ui/card_view.js
new file mode 100644
index 000000000000..3c91eac1b924
--- /dev/null
+++ b/packages/devextreme/js/ui/card_view.js
@@ -0,0 +1,5 @@
+import CardView from '../__internal/grids/new/card_view/widget';
+
+// STYLE cardView
+
+export default CardView;
diff --git a/packages/devextreme/js/ui/card_view_types.d.ts b/packages/devextreme/js/ui/card_view_types.d.ts
new file mode 100644
index 000000000000..9daa30d25ba6
--- /dev/null
+++ b/packages/devextreme/js/ui/card_view_types.d.ts
@@ -0,0 +1,10 @@
+export {
+  ToolbarItem,
+  Toolbar,
+  Cell,
+  DataRow,
+  ColumnProperties,
+  Column,
+  dxCardViewOptions,
+  Properties,
+} from './card_view';
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerPanel.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerPanel.tests.js
index 970db3d94b22..f9e6c8e1da6e 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerPanel.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerPanel.tests.js
@@ -938,20 +938,4 @@ QUnit.module('Draw buttons in header panel', {
         assert.strictEqual($customToolbarItem.length, 1, 'item is rendered');
         assert.ok($customToolbarItem.is(':visible'), 'item is visible');
     });
-
-    QUnit.test('The error should be raised if new default toolbar item is not added to DEFAULT_TOOLBAR_ITEM_NAMES', function(assert) {
-        // arrange
-        const headerPanel = this.headerPanel;
-        const $testElement = $('#container');
-
-        // act
-        headerPanel._getToolbarItems = () => [{ name: 'new' }];
-
-        assert.throws(function() {
-            headerPanel.init();
-            headerPanel.render($testElement);
-        }, function(e) {
-            return e.message === 'Default toolbar item \'new\' is not added to DEFAULT_TOOLBAR_ITEM_NAMES';
-        }, 'exception');
-    });
 });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/optionChanged_bundled.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/optionChanged_bundled.tests.js
index bc28d7d5f7d1..fcf3f2b30792 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/optionChanged_bundled.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/optionChanged_bundled.tests.js
@@ -63,7 +63,8 @@ QUnit.module('OptionChanged', {
     }
 
     const excludedComponents = [
-        'dxLayoutManager'
+        'dxLayoutManager',
+        'dxCardView',
     ];
 
     const getDefaultOptions = function(componentName) {
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index 4c8062b26824..274fd87b67be 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -9750,6 +9750,130 @@ declare module DevExpress.ui {
      */
     zoomLevel?: DevExpress.ui.dxCalendar.CalendarZoomLevel;
   }
+  /**
+   * [descr:dxCardView]
+   */
+  export class dxCardView<
+    TRowData = unknown,
+    TKey = unknown
+  > extends Widget<DevExpress.ui.dxCardView.Properties> {}
+  module dxCardView {
+    /**
+     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+     */
+    export type dxCardViewToolbar = Toolbar;
+    /**
+     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+     */
+    export type dxCardViewToolbarItem = ToolbarItem;
+
+    /**
+     * [descr:HeaderPanel]
+     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+     */
+    type HeaderPanel<TRowData = unknown, TKey = unknown> = {
+      /**
+       * [descr:HeaderPanel.dragging]
+       */
+      dragging?: Pick<
+        dxSortableOptions,
+        | 'dropFeedbackMode'
+        | 'scrollSpeed'
+        | 'scrollSensitivity'
+        | 'onDragChange'
+        | 'onDragEnd'
+        | 'onDragMove'
+        | 'onDragStart'
+        | 'onRemove'
+        | 'onReorder'
+      >;
+      /**
+       * [descr:HeaderPanel.visible]
+       */
+      visible?: boolean;
+      /**
+       * [descr:HeaderPanel.itemTemplate]
+       */
+      itemTemplate?:
+        | template
+        | ((e: {
+            column: Column<TRowData, TKey>;
+          }) => string | DevExpress.core.UserDefinedElement);
+      /**
+       * [descr:HeaderPanel.itemCssClass]
+       */
+      itemCssClass?: string;
+    };
+    /**
+     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+     */
+    type InheritedColumnProps =
+      | 'alignment'
+      | 'dataType'
+      | 'visible'
+      | 'visibleIndex'
+      | 'allowReordering'
+      | 'allowHiding'
+      | 'trueText'
+      | 'falseText'
+      | 'caption'
+      | 'dataField'
+      | 'sortOrder'
+      | 'sortIndex'
+      | 'name'
+      | 'calculateCellValue'
+      | 'calculateDisplayValue'
+      | 'customizeText';
+
+    /**
+     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+     */
+    export type PredefinedToolbarItem =
+      | 'columnChooserButton'
+      | 'searchPanel'
+      | 'addCardButton';
+    export type Properties<
+      TRowData = unknown,
+      TKey = unknown
+    > = dxCardViewOptions<TRowData, TKey>;
+    /**
+     * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+     */
+    type RequiredColumnProps =
+      | 'alignment'
+      | 'dataType'
+      | 'visible'
+      | 'visibleIndex'
+      | 'allowReordering'
+      | 'allowHiding'
+      | 'trueText'
+      | 'falseText'
+      | 'caption';
+  }
+
+  /**
+   * [descr:dxCardViewOptions]
+   * @deprecated [depNote:dxCardViewOptions]
+   */
+  export interface dxCardViewOptions<TRowData = unknown, TKey = unknown>
+    extends WidgetOptions<dxCardView>,
+      DevExpress.ui.dxCardView.DataControllerConfiguration<TRowData, TKey>,
+      DevExpress.ui.dxCardView.PagerConfiguration,
+      DevExpress.ui.dxCardView.ColumnsControllerConfiguration<TRowData, TKey>,
+      DevExpress.ui.dxCardView.HeaderPanelConfiguration<TRowData, TKey>,
+      DevExpress.ui.dxCardView.ContentViewConfiguration<TRowData> {
+    /**
+     * [descr:dxCardViewOptions.onDataErrorOccurred]
+     */
+    onDataErrorOccurred?: (
+      e: DevExpress.common.core.events.EventInfo<dxCardView> &
+        DevExpress.common.grids.DataErrorOccurredInfo
+    ) => void;
+    /**
+     * [descr:dxCardViewOptions.toolbar]
+     */
+    toolbar?: DevExpress.ui.dxCardView.Toolbar | undefined;
+  }
   /**
    * [descr:dxChat]
    */
@@ -31499,6 +31623,321 @@ declare module DevExpress.ui.dxBox {
 declare module DevExpress.ui.dxButtonGroup {
   export type Item = dxButtonGroupItem;
 }
+declare module DevExpress.ui.dxCardView {
+  /**
+   * [descr:BaseContentViewConfiguration]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  export interface BaseContentViewConfiguration {
+    /**
+     * [descr:BaseContentViewConfiguration.scrolling]
+     */
+    scrolling?: Pick<
+      DevExpress.common.grids.ScrollingBase,
+      'scrollByContent' | 'scrollByThumb' | 'showScrollbar' | 'useNative'
+    >;
+    /**
+     * [descr:BaseContentViewConfiguration.errorRowEnabled]
+     */
+    errorRowEnabled?: boolean;
+    /**
+     * [descr:BaseContentViewConfiguration.loadPanel]
+     */
+    loadPanel?: dxLoadPanelOptions;
+    /**
+     * [descr:BaseContentViewConfiguration.noDataText]
+     */
+    noDataText?: string;
+    /**
+     * [descr:BaseContentViewConfiguration.noDataTemplate]
+     */
+    noDataTemplate?:
+      | template
+      | ((e: { text: string }) => string | DevExpress.core.UserDefinedElement);
+  }
+  /**
+   * [descr:CardCover]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  interface CardCover<TRowData = unknown> {
+    /**
+     * [descr:CardCover.imageExpr]
+     */
+    imageExpr: string | ((data: TRowData) => string);
+    /**
+     * [descr:CardCover.altExpr]
+     */
+    altExpr: string | ((data: TRowData) => string);
+  }
+  /**
+   * [descr:CardHeader]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  interface CardHeader<TRowData = unknown> {
+    /**
+     * [descr:CardHeader.captionExpr]
+     */
+    captionExpr?: string | ((data: TRowData) => string);
+    /**
+     * [descr:CardHeader.visible]
+     */
+    visible?: boolean;
+  }
+
+  /**
+   * [descr:Cell]
+   */
+  export interface Cell {
+    /**
+     * [descr:Cell.value]
+     */
+    value: unknown;
+    /**
+     * [descr:Cell.displayValue]
+     */
+    displayValue: unknown;
+    /**
+     * [descr:Cell.text]
+     */
+    text: string;
+    /**
+     * [descr:Cell.column]
+     */
+    column: Column;
+  }
+  /**
+   * [descr:Column]
+   */
+  export type Column<TRowData = unknown, TKey = unknown> = Pick<
+    Required<ColumnProperties<TRowData, TKey>>,
+    RequiredColumnProps
+  > &
+    Omit<ColumnProperties, RequiredColumnProps>;
+  /**
+   * [descr:ColumnProperties]
+   */
+  export type ColumnProperties<TRowData = unknown, TKey = unknown> = Pick<
+    DevExpress.common.grids.ColumnBase<TRowData>,
+    InheritedColumnProps
+  > & {
+    /**
+     * [descr:ColumnProperties.fieldTemplate]
+     */
+    fieldTemplate?:
+      | template
+      | ((
+          dataRow: DataRow<TRowData, TKey>
+        ) => string | DevExpress.core.UserDefinedElement);
+    /**
+     * [descr:ColumnProperties.fieldCaptionTemplate]
+     */
+    fieldCaptionTemplate?:
+      | template
+      | ((
+          dataRow: DataRow<TRowData, TKey>
+        ) => string | DevExpress.core.UserDefinedElement);
+    /**
+     * [descr:ColumnProperties.fieldValueTemplate]
+     */
+    fieldValueTemplate?:
+      | template
+      | ((
+          dataRow: DataRow<TRowData, TKey>
+        ) => string | DevExpress.core.UserDefinedElement);
+    /**
+     * [descr:ColumnProperties.headerItemTemplate]
+     */
+    headerItemTemplate?:
+      | template
+      | ((
+          column: Column<TRowData, TKey>
+        ) => string | DevExpress.core.UserDefinedElement);
+    /**
+     * [descr:ColumnProperties.headerItemCssClass]
+     */
+    headerItemCssClass?: string;
+  };
+  /**
+   * [descr:ColumnsControllerConfiguration]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  export type ColumnsControllerConfiguration<
+    TRowData = unknown,
+    TKey = unknown
+  > = {
+    /**
+     * [descr:ColumnsControllerConfiguration.columns]
+     */
+    columns?: (ColumnProperties<TRowData, TKey> | string)[];
+  };
+  /**
+   * [descr:ContentViewConfiguration]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  export interface ContentViewConfiguration<TRowData = unknown>
+    extends BaseContentViewConfiguration {
+    /**
+     * [descr:ContentViewConfiguration.cardsPerRow]
+     */
+    cardsPerRow?: number | DevExpress.common.Mode;
+    /**
+     * [descr:ContentViewConfiguration.cardMinWidth]
+     */
+    cardMinWidth?: number;
+    /**
+     * [descr:ContentViewConfiguration.cardMaxWidth]
+     */
+    cardMaxWidth?: number;
+    /**
+     * [descr:ContentViewConfiguration.cardCover]
+     */
+    cardCover?: CardCover<TRowData>;
+    /**
+     * [descr:ContentViewConfiguration.cardTemplate]
+     */
+    cardTemplate?:
+      | template
+      | ((row: DataRow) => string | DevExpress.core.UserDefinedElement);
+    /**
+     * [descr:ContentViewConfiguration.cardHeader]
+     */
+    cardHeader?: CardHeader<TRowData>;
+  }
+  /**
+   * [descr:DataControllerConfiguration]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  export type DataControllerConfiguration<
+    TRowData = unknown,
+    TKey = unknown
+  > = {
+    /**
+     * [descr:DataControllerConfiguration.dataSource]
+     */
+    dataSource?: DevExpress.data.DataSourceLike<TRowData, TKey>;
+    /**
+     * [descr:DataControllerConfiguration.paging]
+     */
+    paging?: Paging;
+    /**
+     * [descr:DataControllerConfiguration.keyExpr]
+     */
+    keyExpr?: string | string[];
+    /**
+     * [descr:DataControllerConfiguration.remoteOperations]
+     */
+    remoteOperations?: RemoteOperations | boolean | DevExpress.common.Mode;
+  };
+  /**
+   * [descr:DataRow]
+   */
+  export interface DataRow<TRowData = unknown, TKey = unknown> {
+    /**
+     * [descr:DataRow.cells]
+     */
+    cells: Cell[];
+    /**
+     * [descr:DataRow.key]
+     */
+    key: TKey;
+    /**
+     * [descr:DataRow.data]
+     */
+    data: TRowData;
+  }
+  /**
+   * [descr:HeaderPanelConfiguration]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  export type HeaderPanelConfiguration<TRowData = unknown, TKey = unknown> = {
+    /**
+     * [descr:HeaderPanelConfiguration.headerPanel]
+     */
+    headerPanel?: HeaderPanel<TRowData, TKey>;
+  };
+
+  /**
+   * [descr:PagerConfiguration]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  export type PagerConfiguration = {
+    /**
+     * [descr:PagerConfiguration.pager]
+     */
+    pager?: DevExpress.common.grids.Pager;
+  };
+
+  /**
+   * [descr:Paging]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  interface Paging {
+    /**
+     * [descr:Paging.enabled]
+     */
+    enabled?: boolean;
+    /**
+     * [descr:Paging.pageIndex]
+     */
+    pageIndex?: number;
+    /**
+     * [descr:Paging.pageSize]
+     */
+    pageSize?: number;
+  }
+  /**
+   * [descr:RemoteOperations]
+   * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
+   */
+  interface RemoteOperations {
+    /**
+     * [descr:RemoteOperations.filtering]
+     */
+    filtering?: boolean;
+    /**
+     * [descr:RemoteOperations.paging]
+     */
+    paging?: boolean;
+    /**
+     * [descr:RemoteOperations.sorting]
+     */
+    sorting?: boolean;
+    /**
+     * [descr:RemoteOperations.summary]
+     */
+    summary?: boolean;
+  }
+  /**
+   * [descr:dxCardViewToolbar]
+   */
+  export type Toolbar = {
+    /**
+     * [descr:dxCardViewToolbar.items]
+     */
+    items?: Array<PredefinedToolbarItem | ToolbarItem>;
+    /**
+     * [descr:dxCardViewToolbar.visible]
+     */
+    visible?: boolean | undefined;
+    /**
+     * [descr:dxCardViewToolbar.disabled]
+     */
+    disabled?: boolean;
+  };
+  /**
+   * [descr:dxCardViewToolbarItem]
+   */
+  export type ToolbarItem = dxToolbarItem & {
+    /**
+     * [descr:dxCardViewToolbarItem.name]
+     */
+    name?: PredefinedToolbarItem | string;
+    /**
+     * [descr:dxCardViewToolbarItem.location]
+     */
+    location?: DevExpress.common.ToolbarItemLocation;
+  };
+}
 declare module DevExpress.ui.dxChat {
   /**
    * [descr:Alert]