From 23bc67eab90e152e5bfd6ecfd17cd7e96b5b5b24 Mon Sep 17 00:00:00 2001
From: Enrique Moreno <morenocarmonaenrique@gmail.com>
Date: Tue, 29 Jul 2025 13:48:00 +0200
Subject: [PATCH] Fixed alignment in resultset table header by adding DxcFlex
 containers

---
 .../ResultsetTable.stories.tsx                | 387 ++++++++++++++++--
 .../src/resultset-table/ResultsetTable.tsx    |   4 +-
 2 files changed, 348 insertions(+), 43 deletions(-)

diff --git a/packages/lib/src/resultset-table/ResultsetTable.stories.tsx b/packages/lib/src/resultset-table/ResultsetTable.stories.tsx
index 9b4ccc693..8307f1a50 100644
--- a/packages/lib/src/resultset-table/ResultsetTable.stories.tsx
+++ b/packages/lib/src/resultset-table/ResultsetTable.stories.tsx
@@ -6,6 +6,7 @@ import preview from "../../.storybook/preview";
 import { disabledRules } from "../../test/accessibility/rules/specific/resultset-table/disabledRules";
 import DxcResultsetTable from "./ResultsetTable";
 import { Meta, StoryObj } from "@storybook/react";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Resultset Table",
@@ -29,15 +30,86 @@ const deleteIcon = (
   </svg>
 );
 
-const columns = [{ displayValue: "Id" }, { displayValue: "Name" }, { displayValue: "City" }];
-
+const columns = [
+  {
+    displayValue: (
+      <DxcFlex grow={1} justifyContent="flex-end">
+        Id
+      </DxcFlex>
+    ),
+  },
+  {
+    displayValue: "Name",
+  },
+  { displayValue: "City" },
+];
 const rows = [
-  [{ displayValue: "001" }, { displayValue: "Peter" }, { displayValue: "Miami" }],
-  [{ displayValue: "002" }, { displayValue: "Louis" }, { displayValue: "London" }],
-  [{ displayValue: "003" }, { displayValue: "Lana" }, { displayValue: "Amsterdam" }],
-  [{ displayValue: "004" }, { displayValue: "Rick" }, { displayValue: "London" }],
-  [{ displayValue: "005" }, { displayValue: "Mark" }, { displayValue: "Miami" }],
-  [{ displayValue: "006" }, { displayValue: "Cris" }, { displayValue: "Paris" }],
+  [
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          001
+        </DxcFlex>
+      ),
+    },
+    { displayValue: "Peter" },
+    { displayValue: "Miami" },
+  ],
+  [
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+    },
+    { displayValue: "Louis" },
+    { displayValue: "London" },
+  ],
+  [
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          003
+        </DxcFlex>
+      ),
+    },
+    { displayValue: "Lana" },
+    { displayValue: "Amsterdam" },
+  ],
+  [
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          004
+        </DxcFlex>
+      ),
+    },
+    { displayValue: "Rick" },
+    { displayValue: "London" },
+  ],
+  [
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          005
+        </DxcFlex>
+      ),
+    },
+    { displayValue: "Mark" },
+    { displayValue: "Miami" },
+  ],
+  [
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          006
+        </DxcFlex>
+      ),
+    },
+    { displayValue: "Cris" },
+    { displayValue: "Paris" },
+  ],
 ];
 
 const actions = [
@@ -81,21 +153,42 @@ const actions = [
 
 const rowsIcon = [
   [
-    { displayValue: "001", sortValue: "001" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          001
+        </DxcFlex>
+      ),
+      sortValue: "001",
+    },
     { displayValue: "Peter" },
     {
       displayValue: <DxcResultsetTable.ActionsCell actions={actions} />,
     },
   ],
   [
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis" },
     {
       displayValue: <DxcResultsetTable.ActionsCell actions={actions} />,
     },
   ],
   [
-    { displayValue: "003", sortValue: "003" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          003
+        </DxcFlex>
+      ),
+      sortValue: "003",
+    },
     { displayValue: "Mark" },
     {
       displayValue: <DxcResultsetTable.ActionsCell actions={actions} />,
@@ -104,8 +197,18 @@ const rowsIcon = [
 ];
 
 const columnsSortable = [
-  { displayValue: "Id", isSortable: true },
-  { displayValue: "Name", isSortable: true },
+  {
+    displayValue: (
+      <DxcFlex grow={1} justifyContent="flex-end">
+        Id
+      </DxcFlex>
+    ),
+    isSortable: true,
+  },
+  {
+    displayValue: "Name",
+    isSortable: true,
+  },
   { displayValue: "City", isSortable: false },
 ];
 
@@ -116,12 +219,26 @@ const longValues = [
     { displayValue: "Miami: The city that never sleeps", sortValue: "Miami" },
   ],
   [
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
   ],
   [
-    { displayValue: "003", sortValue: "003" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          003
+        </DxcFlex>
+      ),
+      sortValue: "003",
+    },
     { displayValue: "Aida", sortValue: "Aida" },
     { displayValue: "Wroclaw", sortValue: "Wroclaw" },
   ],
@@ -129,37 +246,99 @@ const longValues = [
 
 const rowsSortable = [
   [
-    { displayValue: "001", sortValue: "001" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          001
+        </DxcFlex>
+      ),
+      sortValue: "001",
+    },
     { displayValue: "Peter", sortValue: "Peter" },
     { displayValue: "Miami", sortValue: "Miami" },
   ],
   [
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
   ],
   [
-    { displayValue: "003", sortValue: "003" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          003
+        </DxcFlex>
+      ),
+      sortValue: "003",
+    },
     { displayValue: "Aida", sortValue: "Aida" },
     { displayValue: "Wroclaw", sortValue: "Wroclaw" },
   ],
   [
-    { displayValue: "004", sortValue: "004" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          004
+        </DxcFlex>
+      ),
+      sortValue: "004",
+    },
     { displayValue: "Lana", sortValue: "Lana" },
     { displayValue: "Amsterdam", sortValue: "Amsterdam" },
   ],
 ];
 
 const rowsSortableMissingSortValues = [
-  [{ displayValue: "001" }, { displayValue: "Peter" }, { displayValue: "Miami" }],
-  [{ displayValue: "002" }, { displayValue: "Louis" }, { displayValue: "London" }],
   [
-    { displayValue: "003", sortValue: "003" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          001
+        </DxcFlex>
+      ),
+    },
+    { displayValue: "Peter" },
+    { displayValue: "Miami" },
+  ],
+  [
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+    },
+    { displayValue: "Louis" },
+    { displayValue: "London" },
+  ],
+  [
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          003
+        </DxcFlex>
+      ),
+      sortValue: "003",
+    },
     { displayValue: "Aida", sortValue: "Aida" },
     { displayValue: "Wroclaw", sortValue: "Wroclaw" },
   ],
   [
-    { displayValue: "004", sortValue: "004" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          004
+        </DxcFlex>
+      ),
+      sortValue: "004",
+    },
     { displayValue: "Lana", sortValue: "Lana" },
     { displayValue: "Amsterdam", sortValue: "Amsterdam" },
   ],
@@ -190,67 +369,193 @@ const longColumns = [
 
 const longRows = [
   [
-    { displayValue: "001", sortValue: "001" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          001
+        </DxcFlex>
+      ),
+      sortValue: "001",
+    },
     { displayValue: "Peter", sortValue: "Peter" },
     { displayValue: "Miami", sortValue: "Miami" },
-    { displayValue: "001", sortValue: "001" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          001
+        </DxcFlex>
+      ),
+      sortValue: "001",
+    },
     { displayValue: "Peter", sortValue: "Peter" },
     { displayValue: "Miami", sortValue: "Miami" },
     { displayValue: "Miami", sortValue: "Miami" },
-    { displayValue: "001", sortValue: "001" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          001
+        </DxcFlex>
+      ),
+      sortValue: "001",
+    },
     { displayValue: "Peter", sortValue: "Peter" },
     { displayValue: "Miami", sortValue: "Miami" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
     { displayValue: "London", sortValue: "London" },
   ],
   [
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
     { displayValue: "London", sortValue: "London" },
   ],
   [
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
-    { displayValue: "002", sortValue: "002" },
+    {
+      displayValue: (
+        <DxcFlex grow={1} justifyContent="flex-end">
+          002
+        </DxcFlex>
+      ),
+      sortValue: "002",
+    },
     { displayValue: "Louis", sortValue: "Louis" },
     { displayValue: "London", sortValue: "London" },
     { displayValue: "London", sortValue: "London" },
diff --git a/packages/lib/src/resultset-table/ResultsetTable.tsx b/packages/lib/src/resultset-table/ResultsetTable.tsx
index 009ff1a7e..33b1d5dc0 100644
--- a/packages/lib/src/resultset-table/ResultsetTable.tsx
+++ b/packages/lib/src/resultset-table/ResultsetTable.tsx
@@ -27,7 +27,7 @@ const SortingHeader = styled.span<{
   align-items: center;
   gap: var(--spacing-gap-s);
   height: var(--height-s);
-  width: fit-content;
+  width: auto;
 
   ${({ isSortable }) =>
     isSortable
@@ -123,7 +123,7 @@ const DxcResultsetTable = ({
                   role={column.isSortable ? "button" : undefined}
                   tabIndex={column.isSortable ? tabIndex : -1}
                 >
-                  <span>{column.displayValue}</span>
+                  {column.displayValue}
                   {column.isSortable && (
                     <DxcIcon
                       icon={