Spike

packages/devextreme-scss/scss/widgets/base/cardView/header_panel/_index.scss

@@ -12,6 +12,7 @@
   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;
+  user-select: none;
 
   &:hover {
     background-color: $cardview-header-item-hovered-background-color;

packages/devextreme/js/__internal/grids/new/card_view/header_panel/header_panel.tsx

@@ -23,7 +23,7 @@ export interface HeaderPanelProps {
 
   showSortIndexes: boolean;
 
-  onSortClick: (column: Column) => void;
+  onSortClick: (column: Column, e: MouseEvent) => void;
 
   itemTemplate?: ComponentType<{ column: Column }>;
 
@@ -66,7 +66,7 @@ export class HeaderPanel extends Component<HeaderPanelProps> {
                 <Item
                   showSortIndexes={this.props.showSortIndexes}
                   column={column}
-                  onSortClick={(): void => { this.props.onSortClick(column); }}
+                  onSortClick={(e): void => { this.props.onSortClick(column, e); }}
                   template={this.props.itemTemplate}
                   cssClass={this.props.itemCssClass}
                 />

packages/devextreme/js/__internal/grids/new/card_view/header_panel/item.tsx

@@ -56,7 +56,7 @@ export interface ItemProps {
   column: Column;
   status?: Status;
   showSortIndexes?: boolean;
-  onSortClick?: () => void;
+  onSortClick?: (e: MouseEvent) => void;
   template?: ComponentType<{ column: Column }>;
   cssClass?: string;
 }

packages/devextreme/js/__internal/grids/new/card_view/header_panel/options.test.ts

@@ -7,6 +7,7 @@ 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 { SortingController } from '../../grid_core/sorting_controller/sorting_controller';
 import type { Options } from '../options';
 import { OptionsControllerMock } from '../options_controller.mock';
 import { HeaderPanelView } from './view';
@@ -18,7 +19,12 @@ const setup = (options: Options) => {
   const optionsController = new OptionsControllerMock(options);
   const dataController = new DataController(optionsController);
   const columnsController = new ColumnsController(optionsController, dataController);
-  const headerPanelView = new HeaderPanelView(columnsController, optionsController);
+  const sortingController = new SortingController(optionsController, columnsController);
+  const headerPanelView = new HeaderPanelView(
+    sortingController,
+    columnsController,
+    optionsController,
+  );
 
   headerPanelView.render(rootElement);
   rerender();

packages/devextreme/js/__internal/grids/new/card_view/header_panel/view.tsx

@@ -5,16 +5,18 @@ import { ColumnsController } from '@ts/grids/new/grid_core/columns_controller/co
 import { View } from '@ts/grids/new/grid_core/core/view';
 
 import type { Column } from '../../grid_core/columns_controller/types';
+import { SortingController } from '../../grid_core/sorting_controller/sorting_controller';
 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;
+  public static dependencies = [SortingController, ColumnsController, OptionsController] as const;
 
   constructor(
+    private readonly sortingController: SortingController,
     private readonly columnsController: ColumnsController,
     private readonly options: OptionsController,
   ) {
@@ -30,14 +32,7 @@ export class HeaderPanelView extends View<HeaderPanelProps> {
       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],
-      ),
+      showSortIndexes: this.sortingController.showSortIndexes,
       onSortClick: this.onSortClick.bind(this),
       itemTemplate: this.options.template('headerPanel.itemTemplate'),
       itemCssClass: this.options.oneWay('headerPanel.itemCssClass'),
@@ -47,16 +42,27 @@ export class HeaderPanelView extends View<HeaderPanelProps> {
   }
 
   public onRemove(column: Column): void {
-    this.columnsController.columnOption(column, 'visible', !column.visible);
+    this.columnsController.columnOption(column, 'visible', false);
   }
 
   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);
+  public onSortClick(column: Column, e: MouseEvent): void {
+    const mode = this.sortingController.mode.unreactive_get();
+    switch (mode) {
+      case 'none':
+        return;
+      case 'single':
+        this.sortingController.onSingleModeSortClick(column, e);
+        return;
+      case 'multiple':
+        this.sortingController.onMultipleModeSortClick(column, e);
+        return;
+      default:
+        throw new Error('Unsupported sorting state');
+    }
   }
 }

packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/columns_controller.ts

@@ -125,6 +125,11 @@ export class ColumnsController {
     );
   }
 
+  // eslint-disable-next-line max-len
+  public updateColumns(updateFunc: (oldValue: PreNormalizedColumn[]) => PreNormalizedColumn[]): void {
+    this.columnsSettings.updateFunc(updateFunc);
+  }
+
   public columnOption<TProp extends keyof ColumnSettings>(
     column: Column,
     option: TProp,

packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/options.ts

@@ -31,6 +31,7 @@ export const defaultColumnProperties = {
   alignment: 'left',
   visible: true,
   allowReordering: true,
+  allowSorting: true,
   allowHiding: true,
   trueText: messageLocalization.format('dxDataGrid-trueText'),
   falseText: messageLocalization.format('dxDataGrid-falseText'),

packages/devextreme/js/__internal/grids/new/grid_core/columns_controller/types.ts

@@ -20,6 +20,10 @@ export type Column = Pick<Required<ColumnBase>, InheritedColumnProps> & {
 
   sortOrder?: SortOrder; // todo: move to sorting module
   sortIndex?: number; // todo: move to sorting module
+  allowSorting?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  sortingMethod?: ((this: Column, value1: any, value2: any) => number) | undefined;
+  calculateSortValue?: string | ((this: Column, rowData: DataObject) => unknown);
 
   name: string;
 

packages/devextreme/js/__internal/grids/new/grid_core/data_controller/data_controller.ts

@@ -174,7 +174,7 @@ export class DataController {
     );
 
     effect(
-      (dataSource, pageIndex, pageSize, filter, pagingEnabled) => {
+      (dataSource, pageIndex, pageSize, filter, pagingEnabled, sortParameters) => {
         let someParamChanged = false;
         if (dataSource.pageIndex() !== pageIndex) {
           dataSource.pageIndex(pageIndex);
@@ -197,13 +197,24 @@ export class DataController {
           dataSource.paginate(pagingEnabled);
           someParamChanged ||= true;
         }
+        if (sortParameters && dataSource.sort() !== sortParameters) {
+          dataSource.sort(sortParameters);
+          someParamChanged ||= true;
+        }
 
         if (someParamChanged || !dataSource.isLoaded()) {
           // eslint-disable-next-line @typescript-eslint/no-floating-promises
           dataSource.load();
         }
       },
-      [this.dataSource, this.pageIndex, this.pageSize, this.filter, this.pagingEnabled],
+      [
+        this.dataSource,
+        this.pageIndex,
+        this.pageSize,
+        this.filter,
+        this.pagingEnabled,
+        this.options.sortParameters,
+      ],
     );
   }
 

packages/devextreme/js/__internal/grids/new/grid_core/options.ts

@@ -8,6 +8,7 @@ import * as dataController from './data_controller/index';
 import { filterPanel } from './filtering/index';
 import * as pager from './pager/index';
 import type { SearchProperties } from './search/types';
+import * as sortingController from './sorting_controller/index';
 import type * as toolbar from './toolbar/index';
 import type { GridCoreNew } from './widget';
 
@@ -17,6 +18,7 @@ import type { GridCoreNew } from './widget';
 export type Options =
   & WidgetOptions<GridCoreNew>
   & dataController.Options
+  & sortingController.Options
   & toolbar.Options
   & pager.Options
   & columnsController.Options
@@ -29,6 +31,7 @@ export type Options =
 
 export const defaultOptions = {
   ...dataController.defaultOptions,
+  ...sortingController.defaultOptions,
   ...columnsController.defaultOptions,
   ...pager.defaultOptions,
   ...filterPanel.defaultOptions,

packages/devextreme/js/__internal/grids/new/grid_core/options_controller/options_controller_base.ts

@@ -3,6 +3,7 @@
 /* eslint-disable spellcheck/spell-checker */
 import { Component } from '@js/core/component';
 import { getPathParts } from '@js/core/utils/data';
+import type { SortDescriptor } from '@js/data';
 import type { ChangedOptionInfo } from '@js/events';
 import type {
   SubsGets, SubsGetsUpd,
@@ -79,6 +80,9 @@ export class OptionsController<TProps, TDefaultProps extends TProps = TProps> {
 
   private readonly props: SubsGetsUpd<TProps>;
 
+  // eslint-disable-next-line max-len
+  public sortParameters = state<SortDescriptor<unknown> | SortDescriptor<unknown>[] | undefined>(undefined);
+
   protected defaults: TDefaultProps;
 
   public static dependencies = [Component];

packages/devextreme/js/__internal/grids/new/grid_core/sorting_controller/index.ts

@@ -0,0 +1,4 @@
+// { CompatibilityDataController } from './compatibility';
+export { defaultOptions, type Options } from './options';
+// export { PublicMethods } from './public_methods';
+export { SortingController } from './sorting_controller';

packages/devextreme/js/__internal/grids/new/grid_core/sorting_controller/options.ts

@@ -0,0 +1,24 @@
+import type { SingleMultipleOrNone } from '@js/common';
+import messageLocalization from '@js/localization/message';
+
+export interface SortingOptions {
+  ascendingText?: string;
+  clearText?: string;
+  descendingText?: string;
+  mode?: SingleMultipleOrNone;
+  showSortIndexes?: boolean;
+}
+
+export interface Options {
+  sorting?: SortingOptions;
+}
+
+export const defaultOptions = {
+  sorting: {
+    ascendingText: messageLocalization.format('dxDataGrid-sortingAscendingText'),
+    descendingText: messageLocalization.format('dxDataGrid-sortingDescendingText'),
+    clearText: messageLocalization.format('dxDataGrid-sortingClearText'),
+    mode: 'single',
+    showSortIndexes: true,
+  },
+} satisfies Options;