@m4l/components 9.2.17 → 9.2.18

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

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useState, useMemo, useEffect, useCallback } from "react";
 import { c as castMapColumnsWidthToRecord } from "../../helpers/castMapColumnsWidthToRecord.js";
+import { useFirstRender } from "@m4l/graphics";
 const DataGridContext = createContext(null);
 const getColumnConfigByKey = (key, storeColumnsConfig) => {
   let indexFind = -1;
@@ -114,6 +115,7 @@ function DataGridProvider(props) {
     rowKeyGetter,
     onChangeUserColumns
   } = props;
+  const isFirstRender = useFirstRender();
   const [columnsWidths, setColumnsWidths] = useState(
     /* @__PURE__ */ new Map()
   );
@@ -145,9 +147,22 @@ function DataGridProvider(props) {
   const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
   let timerSaveColumns;
   useEffect(() => {
-    setColumnsWidths(getColumnsWidth(id, columns, defaultUserColumns));
-    setColumnsConfigOptions(getColumnsConfig(id, columns, defaultUserColumns));
-  }, [columns, id, defaultUserColumns]);
+    if (isFirstRender) {
+      setColumnsWidths(getColumnsWidth(id, columns, defaultUserColumns));
+      setColumnsConfigOptions(getColumnsConfig(id, columns, defaultUserColumns));
+    }
+  }, [defaultUserColumns]);
+  useEffect(() => {
+    if (!isFirstRender) {
+      const newColumns = columns.filter((column, index) => column.key !== columnsConfig[index]?.key);
+      const newColConfig = getColumnsConfig(id, newColumns).map((column, index) => {
+        const indexNewCol = index + columnsConfig.length;
+        return { ...column, index: indexNewCol, orginalIndex: indexNewCol };
+      });
+      columnsConfig.push(...newColConfig);
+      setColumnsWidths((prevColumnsWidth) => new Map([...prevColumnsWidth, ...getColumnsWidth(id, newColumns, defaultUserColumns)]));
+    }
+  }, [columns, id]);
   const onChangeColumnsConfig = useCallback(
     (newColumnsConfig) => {
       saveColumnsConfig(id, newColumnsConfig, onChangeUserColumns);

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -42,15 +42,18 @@ const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths
     const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
     return !column.hidden && visible;
   }).sort(
-    (a, b) => (
-      // Sort for index
-      getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig)
-    )
+    (a, b) => {
+      let indexA = getColumIndex(a.key, columnsConfig);
+      indexA = indexA === -1 ? columnsConfig.length : indexA;
+      let indexB = getColumIndex(b.key, columnsConfig);
+      indexB = indexB === -1 ? columnsConfig.length : indexB;
+      return indexA - indexB;
+    }
   ).map((columnSorted) => {
     const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
     return {
       ...columnSorted,
-      frozen: columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].frozen : true,
+      frozen: columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].frozen : false,
       width: typeof columnsWidths.get(columnSorted.key) === "number" ? columnsWidths.get(columnSorted.key) : columnSorted.width
     };
   }).sort((a, b) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.17",
+  "version": "9.2.18",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"
@@ -67,7 +67,7 @@
     "react-dom": "^18.0.0",
     "storybook": "^8.3.4",
     "attr-accept": "2.2.2",
-    "@vitejs/plugin-react": "^4.0.0"
+    "@vitejs/plugin-react": "4.3.4"
   },
   "overrides": {
     "glob": "^10.4.5",

package/storybook/components/DataGrid/DataGrid.stories.d.ts

@@ -27,4 +27,5 @@ export declare const NoPager: Story;
  * DataGrid con leftActions y rightActions
  */
 export declare const CustomHeader: Story;
+export declare const DynamicColumns: Story;
 export default meta;

package/storybook/components/DataGrid/subcomponents/DataGridRender.d.ts

@@ -5,6 +5,7 @@ interface DataGridRenderProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> {
     seedProps: SeedProps;
     rowsSelecteds?: boolean;
     withCustomHeader?: boolean;
+    dynamicColumns?: boolean;
 }
 /**
  * Componente que renderiza el DataGrid para el storybook