@m4l/components 9.2.62-JT08072025.beta.1 → 9.2.62-JT09072025.beta.1

package/components/DataGrid/Datagrid.styles.js

@@ -446,6 +446,7 @@ const dataGridStyles = {
         textAlign: "start",
         display: "inline",
         justifyContent: "center",
+        alignContent: "center",
         alignItems: "center",
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
@@ -466,6 +467,7 @@ const dataGridStyles = {
       },
       "& .rdg-cell.rdg-cell-align-right": {
         textAlign: "right",
+        alignContent: "center",
         '&:not([role="columnheader"])': {
           "& > div:first-of-type": {
             marginLeft: "auto"
@@ -475,16 +477,22 @@ const dataGridStyles = {
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-left .rdg-header-sort-name': {
         textAlign: "start",
-        display: "inline",
-        justifyContent: "center",
+        display: "flex",
+        justifyContent: "flex-start",
         alignItems: "center"
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-center .rdg-header-sort-name': {
         textAlign: "center",
-        alignContent: "center"
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
       },
       '& [role="columnheader"].rdg-cell.rdg-cell-align-right .rdg-header-sort-name': {
-        textAlign: "right"
+        textAlign: "right",
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingRight: theme.vars.size.baseSpacings.sp3
       },
       // Estilado de la ultima celda congelada
       "& .rdg-row .rdg-cell-frozen-last:after": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.62-JT08072025.beta.1",
+  "version": "9.2.62-JT09072025.beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {

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

@@ -23,6 +23,10 @@ export declare const DatagridWithFormatters: Story;
  * DataGrid con columns with actions
  */
 export declare const DatagridWithActions: Story;
+/**
+ * DataGrid con columnas con alineación
+ */
+export declare const DatagridWithAlign: Story;
 /**
  * DataGrid sin pager
  */

package/storybook/components/DataGrid/helpers/types.d.ts

@@ -1,6 +1,7 @@
 import { HeaderRendererProps } from 'react-data-grid';
 import { ChipStatusFormatterProps } from '../../../../src/components/formatters/ChipStatusFormatter/types';
 import { DeepKeyOf } from '../../../../src/utils/types';
+import { ColumnAlign } from '../../../../src/components/DataGrid/types';
 export interface SeedProps {
     quantity: number;
     withBoolean?: boolean;
@@ -20,6 +21,8 @@ export interface SeedProps {
     withActionsUser?: boolean;
     withBooleanStatus?: boolean;
     withUserType?: boolean;
+    aligns?: Record<string, ColumnAlign>;
+    names?: Record<string, string>;
 }
 export type GetColumnsProps = Omit<SeedProps, 'quantity'>;
 export type ColumnType = 'string' | 'number' | 'boolean' | 'date' | 'custom';

package/storybook/components/DataGrid/helpers/useColumns.d.ts

@@ -1,4 +1,5 @@
-import { GetColumnsProps, RowType, Column } from './types';
+import { GetColumnsProps, RowType } from './types';
+import { Column } from 'react-data-grid';
 /**
  * ****************************************************************
  * Función que retorna las columnas para el DataGrid de Storybook

package/storybook/components/DataGrid/helpers/useSeed.d.ts

@@ -3,7 +3,7 @@ import { SeedProps } from './types';
  * Función que retorna el seed para el DataGrid de Storybook
  */
 export declare const useSeed: (props: SeedProps) => {
-    columns: readonly import('./types').Column<import('./types').RowType, unknown>[];
+    columns: readonly import('react-data-grid').Column<import('./types').RowType, unknown>[];
     filters: import('../../../../src').FilterField[];
     sorts: import('../../../../src').SortField[];
     rows: import('./types').RowType[];