@m4l/components 9.3.21 → 9.3.22-JT22102025.beta.1

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -1,51 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect, useMemo, useCallback, createContext } from "react";
+import { useState, useCallback, useEffect, useMemo, createContext } from "react";
 import { c as castMapColumnsWidthToRecord } from "../../helpers/castMapColumnsWidthToRecord.js";
-import { useFirstRender } from "@m4l/graphics";
+import { useFirstRender, useIsMobile } from "@m4l/graphics";
 import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
 import { a as DATAGRID_ROW_HEIGHTS, b as DATAGRID_ROW_HEADER_HEIGHTS, D as DATAGRID_PREFIX_NAME } from "../../constants.js";
 import { C as ControlNavigateSlots, a as ColumnsConfigSlots, T as TextEditorSlots, b as TableSlots, R as RowsCountSlots, A as ActionsSlots, D as DataGridSlots } from "../../slots/DataGridEnum.js";
 import { deepEqual } from "fast-equals";
 const DataGridContext = createContext(null);
-const getColumnConfigByKey = (key, storeColumnsConfig) => {
-  let indexFind = -1;
-  return [
-    storeColumnsConfig.find((column, index) => {
-      if (column.key === key) {
-        indexFind = index;
-      }
-      return column.key === key;
-    }),
-    indexFind
-  ];
-};
-function getColumnsConfig(id, columns, defaultUserColumns = void 0) {
-  let columnsConfig;
-  if (defaultUserColumns) {
-    columnsConfig = defaultUserColumns.columnsConfig;
-  } else {
-    try {
-      const item = window.localStorage.getItem(`${id}_columns_config`);
-      columnsConfig = item !== null ? JSON.parse(item) : [];
-    } catch (_e) {
-      columnsConfig = [];
-    }
-  }
-  return columns.map((column, index) => {
-    const [columnConfig = { ...column }, columnConfigIndex] = getColumnConfigByKey(column.key, columnsConfig);
-    return {
-      key: column.key,
-      name: typeof column.name === "string" ? column.name : String(column.name),
-      hidden: column.hidden === void 0 ? false : column.hidden,
-      index: columnConfigIndex > -1 ? columnConfigIndex : index,
-      visible: columnConfig.visible === void 0 ? true : columnConfig.visible,
-      frozen: columnConfig.frozen ?? false,
-      originalIndex: index,
-      originalVisible: column.visible === void 0 ? true : column.visible,
-      originalFrozen: column.frozen ?? false
-    };
-  }).sort((a, b) => a.index - b.index);
-}
 function getColumnsWidth(id, columns, defaultUserColumns) {
   const newMap = /* @__PURE__ */ new Map();
   let storeColumnsWidth;
@@ -89,12 +50,87 @@ function saveColumnsWidth(id, storeColumnsWidth, onChangeUserColumns) {
     JSON.stringify([...storeColumnsWidth])
   );
 }
-function saveColumnsConfig(id, columnsConfig, onChangeUserColumns) {
-  if (onChangeUserColumns) {
-    onChangeUserColumns({ reason: "columnsConfig", userConfig: columnsConfig });
+const getAllViewModes = () => {
+  return ["table", "cards"];
+};
+const getViewSpecificConfig = (viewMode) => {
+  const configs = {
+    table: {
+      defaults: { frozen: false },
+      originalDefaults: { originalFrozen: false },
+      dynamicOriginalProperty: (item) => ({
+        originalFrozen: item?.frozen ?? false
+      })
+    },
+    cards: {
+      defaults: { showTitle: true },
+      originalDefaults: { originalShowTitle: true },
+      dynamicOriginalProperty: (item) => ({
+        originalShowTitle: item?.showTitle ?? true
+      })
+    }
+  };
+  return configs[viewMode] || configs.table;
+};
+const getViewSuffix = (viewMode) => {
+  if (viewMode === "table") {
+    return "";
+  }
+  return `_${viewMode}`;
+};
+function getInitialColumnsConfig(id, columns, viewMode, defaultUserConfig, viewSpecificDefaults, originalViewSpecificDefaults) {
+  let columnsConfig;
+  if (defaultUserConfig) {
+    columnsConfig = defaultUserConfig;
+  } else {
+    columnsConfig = loadViewConfig(
+      id,
+      getViewSuffix(viewMode)
+    ) || [];
+  }
+  return columns.map((column, index) => {
+    const existingConfig = columnsConfig.find((c) => c.key === column.key);
+    const columnConfigIndex = existingConfig ? columnsConfig.indexOf(existingConfig) : -1;
+    const baseConfig = {
+      key: column.key,
+      name: typeof column.name === "string" ? column.name : String(column.name),
+      hidden: column.hidden === void 0 ? false : column.hidden,
+      index: columnConfigIndex > -1 ? columnConfigIndex : index,
+      visible: existingConfig?.visible !== void 0 ? existingConfig.visible : column.visible === void 0 ? true : column.visible,
+      originalIndex: index,
+      originalVisible: column.visible === void 0 ? true : column.visible
+    };
+    return {
+      ...baseConfig,
+      ...viewSpecificDefaults,
+      ...originalViewSpecificDefaults,
+      ...existingConfig || {}
+    };
+  }).sort((a, b) => a.index - b.index);
+}
+function saveViewConfig(id, viewSuffix, config, onChangeCallback) {
+  if (onChangeCallback) {
+    const reason = viewSuffix === "" ? "columnsConfig" : `columnsConfig${viewSuffix.replace("_", "")}`;
+    onChangeCallback({
+      reason,
+      userConfig: config
+    });
     return;
   }
-  localStorage.setItem(`${id}_columns_config`, JSON.stringify(columnsConfig));
+  const storageKey = viewSuffix === "" ? `${id}_columns_config` : `${id}_columns_config${viewSuffix}`;
+  localStorage.setItem(storageKey, JSON.stringify(config));
+}
+function loadViewConfig(id, viewSuffix) {
+  try {
+    const storageKey = viewSuffix === "" ? `${id}_columns_config` : `${id}_columns_config${viewSuffix}`;
+    const stored = localStorage.getItem(storageKey);
+    return stored ? JSON.parse(stored) : null;
+  } catch (_e) {
+    return null;
+  }
+}
+function saveViewMode(id, viewMode) {
+  localStorage.setItem(`${id}_view_mode`, viewMode);
 }
 function getIndexRowHeightVariant(variant) {
   if (variant === "compact") {
@@ -123,9 +159,14 @@ function DataGridProvider(props) {
     onChangeUserColumns,
     externalSortSettings: sortSettings,
     externalFilterSettings: filterSettings,
-    size
+    size,
+    viewMode,
+    onViewModeChange,
+    defaultViewMode,
+    cardsViewConfig
   } = props;
   const isFirstRender = useFirstRender([columns, id]);
+  const isMobile = useIsMobile();
   const classes = getComponentClasses(DATAGRID_PREFIX_NAME, {
     ...DataGridSlots,
     ...ActionsSlots,
@@ -136,11 +177,56 @@ function DataGridProvider(props) {
     ...ControlNavigateSlots
   });
   const [columnsWidths, setColumnsWidths] = useState(/* @__PURE__ */ new Map());
-  const [columnsConfig, setColumnsConfigOptions] = useState(
-    () => []
+  const [viewConfig, setViewConfig] = useState(() => ({
+    table: [],
+    cards: []
+  }));
+  const getConfigColumns = useCallback(
+    (viewModeParam) => {
+      return viewConfig[viewModeParam];
+    },
+    [viewConfig]
+  );
+  const updateConfigColumns = useCallback(
+    (viewModeParam, config) => {
+      setViewConfig((prev) => ({
+        ...prev,
+        [viewModeParam]: config
+      }));
+    },
+    []
   );
   const [rowsFilterCount, setRowFilterCount] = useState(rowsCount);
   const [sortColumns, setSortColumns] = useState([]);
+  const [viewModeState, setViewModeState] = useState(() => {
+    if (viewMode) {
+      return viewMode;
+    }
+    try {
+      const savedViewMode = localStorage.getItem(`${id}_view_mode`);
+      if (savedViewMode === "cards" || savedViewMode === "table") {
+        return savedViewMode;
+      }
+    } catch (_e) {
+    }
+    if (defaultViewMode) {
+      return defaultViewMode;
+    }
+    return isMobile ? "cards" : "table";
+  });
+  const handleViewModeChange = useCallback(
+    (newViewMode) => {
+      setViewModeState(newViewMode);
+      saveViewMode(id, newViewMode);
+      onViewModeChange?.(newViewMode);
+    },
+    [onViewModeChange, id]
+  );
+  useEffect(() => {
+    if (viewMode !== void 0) {
+      setViewModeState(viewMode);
+    }
+  }, [viewMode]);
   const [currentRowHeightVariant, setCurrentRowHeightVariant] = useState(() => {
     if (typeof rowHeights !== typeof rowHeaderHeights) {
       throw new Error("Must be same type rowheights and rowHeaderTypes");
@@ -184,99 +270,219 @@ function DataGridProvider(props) {
         }
       }
     }
-  }, [columns, sortSettings, filterSettings]);
+    if (cardsViewConfig !== void 0) {
+      const hasCustomRender = cardsViewConfig.customRender !== void 0;
+      const hasColumnsConfig = cardsViewConfig.columnsConfig !== void 0 && cardsViewConfig.columnsConfig.length > 0;
+      if (!hasCustomRender && !hasColumnsConfig) {
+        throw new Error(
+          `DataGridProvider: cardsViewConfig.enabled=true requiere configurar al menos una de estas opciones:
+          - cardsViewConfig.customRender (renderizado personalizado)
+          - cardsViewConfig.columnsConfig (configuración de columnas con al menos 1 elemento)
+
+          Configuración actual:
+          - customRender: ${hasCustomRender ? "definido" : "undefined"}
+          - columnsConfig: ${cardsViewConfig.columnsConfig?.length || 0} columnas
+
+          Ejemplo válido con columnsConfig:
+            cardsViewConfig={{
+              enabled: true,
+              columnsConfig: [
+                { columnKey: 'name', showTitle: false },
+                { columnKey: 'email', showTitle: true }
+              ]
+            }}
+
+          Ejemplo válido con customRender:
+            cardsViewConfig={{
+              enabled: true,
+              customRender: {
+                renderContent: (row) => <CustomCard row={row} />,
+                minHeight: 200
+              }
+            }}
+          `
+        );
+      }
+      if (hasColumnsConfig && cardsViewConfig.columnsConfig) {
+        for (const cardCol of cardsViewConfig.columnsConfig) {
+          if (!keys.has(cardCol.columnKey)) {
+            throw new Error(
+              `DataGridProvider: cardsViewConfig.columnsConfig incluye columnKey="${cardCol.columnKey}", pero no existe ninguna columna con key="${cardCol.columnKey}".`
+            );
+          }
+        }
+      }
+    }
+  }, [columns, sortSettings, filterSettings, cardsViewConfig]);
   const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
   let timerSaveColumns;
   useEffect(() => {
     if (isFirstRender) {
       setColumnsWidths(getColumnsWidth(id, columns, defaultUserColumns));
-      setColumnsConfigOptions(
-        getColumnsConfig(id, columns, defaultUserColumns)
+      updateConfigColumns(
+        "table",
+        getInitialColumnsConfig(
+          id,
+          columns,
+          "table",
+          defaultUserColumns?.columnsConfig,
+          { frozen: false },
+          { originalFrozen: false }
+        )
+      );
+      const finalCardsConfig = (() => {
+        if (defaultUserColumns?.columnsConfigCards) {
+          return defaultUserColumns.columnsConfigCards;
+        }
+        if (cardsViewConfig?.columnsConfig) {
+          return cardsViewConfig.columnsConfig.map((colConfig, index) => {
+            const originalColumn = columns.find(
+              (col) => col.key === colConfig.columnKey
+            );
+            return {
+              key: colConfig.columnKey,
+              visible: originalColumn?.visible === void 0 ? true : originalColumn?.visible,
+              index,
+              showTitle: colConfig.showTitle
+            };
+          });
+        }
+        return void 0;
+      })();
+      updateConfigColumns(
+        "cards",
+        getInitialColumnsConfig(
+          id,
+          columns,
+          "cards",
+          finalCardsConfig,
+          { showTitle: false },
+          { originalShowTitle: false }
+        )
       );
     }
   }, [defaultUserColumns]);
   useEffect(() => {
     if (!isFirstRender) {
-      const finalColumnsConfig = [];
-      for (let i = 0; i < columnsConfig.length; i++) {
-        const columnIndex = columns.findIndex(
-          (c) => c.key === columnsConfig[i]?.key
-        );
-        if (columnIndex !== -1) {
-          const column = columns[columnIndex];
-          finalColumnsConfig.push({
-            ...columnsConfig[i],
-            // name: column.name as string,
-            originalIndex: columnIndex,
-            originalFrozen: column.frozen ?? false,
-            originalVisible: column.visible ?? true
-          });
-        }
-      }
-      const newColumns = columns.filter(
-        (column, index) => column.key !== columnsConfig[index]?.key
-      );
-      if (newColumns.length > 0) {
-        const colLength = finalColumnsConfig.length;
-        const newColConfig = getColumnsConfig(
-          id,
-          newColumns
-        ).map((columnConfig, index) => {
+      const updatedConfigs = {
+        table: [],
+        cards: []
+      };
+      getAllViewModes().forEach((viewModeParam) => {
+        const currentConfig = getConfigColumns(viewModeParam);
+        const finalConfig = [];
+        for (let i = 0; i < currentConfig.length; i++) {
           const columnIndex = columns.findIndex(
-            (c) => c.key === newColumns[index].key
+            (c) => c.key === currentConfig[i]?.key
           );
-          const column = newColumns[index];
-          const indexNewCol = index + colLength;
-          return {
-            ...columnConfig,
-            index: indexNewCol,
-            name: column.name,
-            originalIndex: columnIndex,
-            originalFrozen: column.frozen ?? false,
-            originalVisible: column.visible ?? true
+          if (columnIndex !== -1) {
+            const column = columns[columnIndex];
+            finalConfig.push({
+              ...currentConfig[i],
+              originalIndex: columnIndex,
+              // Propiedades específicas por vista dinámicamente
+              ...getViewSpecificConfig(viewModeParam).dynamicOriginalProperty(
+                currentConfig[i] || column
+              ),
+              originalVisible: column.visible ?? true
+            });
+          }
+        }
+        updatedConfigs[viewModeParam] = finalConfig;
+      });
+      getAllViewModes().forEach((viewModeParam) => {
+        const currentConfig = updatedConfigs[viewModeParam];
+        const newColumnsForView = columns.filter(
+          (column, index) => column.key !== getConfigColumns(viewModeParam)[index]?.key
+        );
+        if (newColumnsForView.length > 0) {
+          const colLength = currentConfig.length;
+          const viewSpecificDefaults = viewModeParam === "cards" ? { showTitle: false } : {
+            frozen: false
           };
-        });
-        finalColumnsConfig.push(...newColConfig);
-      }
-      if (deepEqual(columnsConfig, finalColumnsConfig)) {
+          const originalViewSpecificDefaults = viewModeParam === "cards" ? {
+            originalShowTitle: false
+          } : {
+            originalFrozen: false
+          };
+          const newColConfig = getInitialColumnsConfig(
+            id,
+            newColumnsForView,
+            viewModeParam,
+            void 0,
+            viewSpecificDefaults,
+            originalViewSpecificDefaults
+          ).map((columnConfig, index) => {
+            const columnIndex = columns.findIndex(
+              (c) => c.key === newColumnsForView[index].key
+            );
+            const column = newColumnsForView[index];
+            return {
+              ...columnConfig,
+              index: index + colLength,
+              name: column.name,
+              originalIndex: columnIndex,
+              originalVisible: column.visible ?? true,
+              // Propiedades específicas por vista dinámicamente
+              ...getViewSpecificConfig(viewModeParam).dynamicOriginalProperty(
+                column
+              )
+            };
+          });
+          updatedConfigs[viewModeParam].push(...newColConfig);
+        }
+      });
+      let hasChanges = false;
+      getAllViewModes().forEach((viewModeParam) => {
+        if (!deepEqual(
+          getConfigColumns(viewModeParam),
+          updatedConfigs[viewModeParam]
+        )) {
+          hasChanges = true;
+        }
+      });
+      if (!hasChanges) {
         return;
       }
-      console.log(
-        "useEffect columnsConfig changed",
-        columnsConfig,
-        finalColumnsConfig
-      );
-      setColumnsConfigOptions(finalColumnsConfig);
+      console.log("useEffect viewConfigs changed", updatedConfigs);
+      getAllViewModes().forEach((viewModeParam) => {
+        updateConfigColumns(viewModeParam, updatedConfigs[viewModeParam]);
+      });
     }
   }, [columns, id]);
   const onChangeColumnsConfig = useCallback(
-    (newColumnsConfig) => {
-      saveColumnsConfig(id, newColumnsConfig, onChangeUserColumns);
-      setColumnsConfigOptions(newColumnsConfig);
+    (viewModeParam, newConfig) => {
+      saveViewConfig(
+        id,
+        getViewSuffix(viewModeParam),
+        newConfig,
+        onChangeUserColumns
+      );
+      updateConfigColumns(viewModeParam, newConfig);
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setColumnsConfigOptions, id]
+    [id, onChangeUserColumns, updateConfigColumns]
   );
   const onChangeColumnsOrder = useCallback(
-    (sourceKey, targetKey) => {
+    (viewModeParam, sourceKey, targetKey) => {
       if (sourceKey === targetKey) {
         return;
       }
-      const sourceColumnIndex = columnsConfig.findIndex(
+      const currentConfig = getConfigColumns(viewModeParam);
+      const sourceColumnIndex = currentConfig.findIndex(
         (c) => c.key === sourceKey
       );
-      const targetColumnIndex = columnsConfig.findIndex(
+      const targetColumnIndex = currentConfig.findIndex(
         (c) => c.key === targetKey
       );
-      const reorderedColumnsConfig = [...columnsConfig];
-      reorderedColumnsConfig.splice(
+      const reorderedConfig = [...currentConfig];
+      reorderedConfig.splice(
         targetColumnIndex,
         0,
-        reorderedColumnsConfig.splice(sourceColumnIndex, 1)[0]
+        reorderedConfig.splice(sourceColumnIndex, 1)[0]
       );
-      onChangeColumnsConfig(reorderedColumnsConfig);
+      onChangeColumnsConfig(viewModeParam, reorderedConfig);
     },
-    [columnsConfig, onChangeColumnsConfig]
+    [getConfigColumns, onChangeColumnsConfig]
   );
   const onChangeColumnWidth = (columnKey, width) => {
     columnsWidths.set(columnKey, Math.round(width));
@@ -307,7 +513,9 @@ function DataGridProvider(props) {
     DataGridContext.Provider,
     {
       value: {
-        columnsConfig,
+        getConfigColumns,
+        onChangeColumnsConfig,
+        columnsConfig: getConfigColumns("table"),
         columnsWidths,
         rowsCount: rowsFilterCount,
         currentRowHeightVariant: currentRowHeightVariant.rowHVariant,
@@ -316,7 +524,6 @@ function DataGridProvider(props) {
         rows,
         rowHeights: finalRowHeights,
         checkedRows,
-        onChangeColumnsConfig,
         onChangeColumnsOrder,
         onChangeColumnWidth,
         setRowsCount: setRowFilterCountInternal,
@@ -330,7 +537,10 @@ function DataGridProvider(props) {
         externalSortSettings: sortSettings,
         externalFilterSettings: filterSettings,
         classes,
-        size
+        size,
+        viewMode: viewModeState,
+        onViewModeChange: handleViewModeChange,
+        cardsViewConfig
       },
       children
     }

package/components/DataGrid/contexts/DataGridContext/types.d.ts

@@ -3,6 +3,29 @@ import { RowKey, RowHeightVariants, GridProps } from '../../types';
 import { Maybe } from '@m4l/core';
 import { ActionsSlots, ColumnsConfigSlots, ControlNavigateSlots, DataGridSlots, RowsCountSlots, TableSlots, TextEditorSlots } from '../../slots/DataGridEnum';
 import { SortColumn } from 'react-data-grid';
+/**
+ * Configuración base genérica que puede extenderse con propiedades específicas de cualquier vista
+ * USO INTERNO: El sistema usa esto para manejar genéricamente las configuraciones
+ */
+export type BaseViewConfig<TViewSpecific = {}> = TViewSpecific & {
+    key: string;
+    visible: boolean;
+    index: number;
+    name?: string;
+};
+/**
+ * Configuración extendida genérica con propiedades originales
+ * USO INTERNO: El contexto usa esto para el estado interno con propiedades de tracking
+ */
+export type IViewConfig<TViewSpecific = {}, TOriginalViewSpecific = {}> = BaseViewConfig<TViewSpecific> & {
+    hidden: boolean;
+    originalIndex: number;
+    originalVisible: boolean;
+} & TOriginalViewSpecific;
+/**
+ * Configuración base para columnas de tabla
+ * USO: Los desarrolladores pasan esto en defaultUserColumns.columnsConfig
+ */
 export interface BaseConfigColumn {
     key: string;
     visible: boolean;
@@ -13,28 +36,66 @@ export interface BaseConfigColumn {
      */
     name?: string;
 }
+/**
+ * Configuración base para vista cards - omite frozen y agrega showTitle
+ * USO: Los desarrolladores pasan esto en defaultUserColumns.columnsConfigCards
+ */
+export interface BaseConfigColumnCards extends Omit<BaseConfigColumn, 'frozen'> {
+    showTitle: boolean;
+}
+/**
+ * Configuración extendida para columnas de tabla (estado interno)
+ * USO INTERNO: El contexto agrega estas propiedades para tracking y gestión de estado
+ */
 export interface IConfigColumn extends BaseConfigColumn {
     hidden: boolean;
     originalIndex: number;
     originalVisible: boolean;
     originalFrozen: boolean;
 }
+/**
+ * Configuración extendida para cards (estado interno)
+ * USO INTERNO: El contexto agrega estas propiedades para tracking y gestión de estado
+ */
+export interface IConfigColumnCards extends Omit<IConfigColumn, 'frozen' | 'originalFrozen'> {
+    showTitle: boolean;
+    originalShowTitle: boolean;
+}
+export type ViewMode = 'table' | 'cards';
+/**
+ * Configuración base del Grid (API pública original)
+ * USO: Tipo base para defaultUserColumns - mantiene retrocompatibilidad
+ * IMPORTANTE: No modificar para mantener retrocompatibilidad con código existente
+ */
 export interface IGridConfig {
     columnsConfig: BaseConfigColumn[];
     columnsWidths: Record<RowKey, number>;
 }
-export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings'> {
+/**
+ * Configuración extendida del Grid para soportar múltiples vistas
+ * USO: Para nuevas implementaciones que soporten cards y futuras vistas
+ * EXTENSIBILIDAD: Agregar aquí nuevas propiedades para nuevas vistas (ej: columnsConfigList)
+ */
+export interface IGridConfigExtended extends IGridConfig {
+    columnsConfigCards?: BaseConfigColumnCards[];
+}
+export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<GridProps<TRow, TSummaryRow, TKey>, 'rows' | 'columns' | 'rowActionsGetter' | 'rowHeaderHeights' | 'rowHeights' | 'initialRowHeightVariant' | 'checkedRows' | 'onCheckedRowsChange' | 'rowKeyGetter' | 'onChangeUserColumns' | 'defaultUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'defaultViewMode' | 'cardsViewConfig'> {
     id: number | string;
     children: ReactNode;
     rowsCount: number;
     size: GridProps<any, any, any>['size'];
+    viewMode?: ViewMode;
+    onViewModeChange?: (viewMode: ViewMode) => void;
 }
 export type RowHeightState = {
     rowHVariant: RowHeightVariants;
     rowHeight: number;
     rowHeaderHeight: number;
 };
-export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings'> {
+export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'onChangeUserColumns' | 'externalSortSettings' | 'externalFilterSettings' | 'viewMode' | 'onViewModeChange' | 'defaultViewMode' | 'cardsViewConfig'> {
+    getConfigColumns: (viewMode: ViewMode) => IViewConfig[];
+    onChangeColumnsConfig: (viewMode: ViewMode, config: IViewConfig[]) => void;
+    onChangeColumnsOrder: (viewMode: ViewMode, sourceKey: string, targetKey: string) => void;
     columnsConfig: IConfigColumn[];
     columnsWidths: Map<string, Maybe<string | number>>;
     setRowsCount: (newRowsCount: number) => void;
@@ -42,8 +103,6 @@ export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = R
     currentRowHeight: number;
     currentRowHeightVariant: RowHeightVariants;
     setRowHeightVariant: (neVariant: RowHeightVariants) => void;
-    onChangeColumnsConfig: (newColumnsConfig: IConfigColumn[]) => void;
-    onChangeColumnsOrder: (sourceKey: string, targetKey: string) => void;
     onChangeColumnWidth: (columnKey: string, width: number) => void;
     classes?: Record<DataGridSlots | ActionsSlots | RowsCountSlots | TableSlots | TextEditorSlots | ColumnsConfigSlots | ControlNavigateSlots, string>;
     size: GridProps<any, any, any>['size'];

package/components/DataGrid/dictionary.d.ts

@@ -16,6 +16,7 @@ export declare const DICTIONARY: {
     SETTINGS_COLUMN_NAME: string;
     SETTINGS_COLUMN_POSITION: string;
     SETTINGS_COLUMN_VISIBLE: string;
+    SETTINGS_COLUMN_SHOW_TITLE: string;
     SETTINGS_COLUMNS_FROZEN: string;
     SETTINGS_SEL_COLUMNS: string;
     SETTINGS_MOVE_FIRST: string;
@@ -33,4 +34,8 @@ export declare const DICTIONARY: {
     UNFREEZE_COLUMN: string;
     HIDE_COLUMN: string;
     ADD_FILTER_COLUMN: string;
+    VIEW_MODE_TABLE: string;
+    VIEW_MODE_CARDS: string;
+    TOOLTIP_VIEW_MODE: string;
+    DETAILS: string;
 };

package/components/DataGrid/dictionary.js

@@ -16,6 +16,7 @@ const DICTIONARY = {
   SETTINGS_COLUMN_NAME: `${DATAGRID_ID_DICTIONARY}.settings_column_name`,
   SETTINGS_COLUMN_POSITION: `${DATAGRID_ID_DICTIONARY}.settings_column_position`,
   SETTINGS_COLUMN_VISIBLE: `${DATAGRID_ID_DICTIONARY}.settings_column_visible`,
+  SETTINGS_COLUMN_SHOW_TITLE: `${DATAGRID_ID_DICTIONARY}.settings_column_show_title`,
   SETTINGS_COLUMNS_FROZEN: `${DATAGRID_ID_DICTIONARY}.settings_column_frozen`,
   SETTINGS_SEL_COLUMNS: `${DATAGRID_ID_DICTIONARY}.settings_sel_columns`,
   SETTINGS_MOVE_FIRST: `${DATAGRID_ID_DICTIONARY}.settings_move_first`,
@@ -32,7 +33,11 @@ const DICTIONARY = {
   FREEZE_COLUMN: `${DATAGRID_ID_DICTIONARY}.freeze_column`,
   UNFREEZE_COLUMN: `${DATAGRID_ID_DICTIONARY}.unfreeze_column`,
   HIDE_COLUMN: `${DATAGRID_ID_DICTIONARY}.hide_column`,
-  ADD_FILTER_COLUMN: `${DATAGRID_ID_DICTIONARY}.add_filter`
+  ADD_FILTER_COLUMN: `${DATAGRID_ID_DICTIONARY}.add_filter`,
+  VIEW_MODE_TABLE: `${DATAGRID_ID_DICTIONARY}.view_mode_table`,
+  VIEW_MODE_CARDS: `${DATAGRID_ID_DICTIONARY}.view_mode_cards`,
+  TOOLTIP_VIEW_MODE: `${DATAGRID_ID_DICTIONARY}.tooltip_view_mode`,
+  DETAILS: `${DATAGRID_ID_DICTIONARY}.details`
 };
 export {
   DICTIONARY as D,