Implemented multi-row and column support

Enhanced the application to support multiple rows and columns. This update provides a more flexible layout and improves the display of data, allowing for a more organized and readable structure

Author: Hector Arce De Las Heras

src/components/table/component/table.tsx

@@ -7,6 +7,7 @@ import { useId } from '@/hooks';
 import { pickAriaProps } from '@/utils/aria/aria';
 
 import {
+  EmptyRowHeader,
   TableCaptionStyled,
   TableColumnHeaderStyled,
   TableRowGroupBodyStyled,
@@ -31,16 +32,20 @@ export const TableComponent = (
   const footerVariant = props.footer?.variant ?? props.styles?.footerVariant;
   const uniqueId = useId('tableCaption');
   const DIVIDER_CONTENT = 'DividerContent';
-  const hasSomeDivider = props.headers.some(h => h.config.hasDivider);
+  const hasSomeDivider = props.headers.some(h => h.config?.hasDivider);
   const hasSomeDividerContent = props.values.some(o => {
     return !!Object.getOwnPropertyDescriptor(o, 'dividerContent');
   });
   const headersElement = props.headers.filter(
-    ({ config }: { config: ConfigType }) => !config.hidden?.[props.device]
+    ({ config }: { config?: ConfigType }) => !config?.hidden?.[props.device]
   );
   const headersElementWithoutDivider = headersElement.filter(
-    element => !element.config.hasDivider || !hasSomeDividerContent
+    element => !element.config?.hasDivider || !hasSomeDividerContent
   );
+  const hasRowHeader = props.values.some(o => {
+    return !!Object.getOwnPropertyDescriptor(o, 'rowHeader');
+  });
+
   return (
     <>
       <TableStyled
@@ -66,6 +71,7 @@ export const TableComponent = (
             numberOfCells={headersElement.length}
             styles={props.styles.header?.[props.headerVariant]}
           >
+            <EmptyRowHeader styles={props.styles.header?.[props.headerVariant]} />
             {hasSomeDividerContent && (
               <TableColumnHeaderStyled
                 key={'dividerContent'}
@@ -93,7 +99,7 @@ export const TableComponent = (
                   customBackgroundColor={headerValue?.config?.backgroundColor}
                   customWidth={headerValue?.config?.width}
                   flexWidth={headerValue?.config?.flexWidth}
-                  hasDivider={headerValue.config.hasDivider}
+                  hasDivider={headerValue?.config?.hasDivider}
                   scope="col"
                   styles={props.styles.header?.[props.headerVariant]}
                 >
@@ -131,6 +137,7 @@ export const TableComponent = (
               <TableRow
                 {...props}
                 key={indexValue}
+                hasRowHeader={hasRowHeader}
                 hasSomeDivider={hasSomeDivider}
                 hasSomeDividerContent={hasSomeDividerContent}
                 hasSomeExpandedContent={props.hasSomeExpandedContent}

src/components/table/component/tableRow.tsx

@@ -3,10 +3,12 @@ import * as React from 'react';
 
 import { ButtonType } from '@/components/button';
 import { ElementOrIcon } from '@/components/elementOrIcon';
+import { Text, TextComponentType } from '@/components/text';
 
 import { useContent } from '../hooks/useContent';
 import {
   TableColumnBodyStyled,
+  TableColumnHeaderStyled,
   TableEmptyExpandedContentRow,
   TableExpandedButton,
   TableExpandedCellStyled,
@@ -22,6 +24,7 @@ export interface ITableRow extends Omit<ITableStandAlone, 'values' | 'headerVari
   indexRow: number;
   hasSomeDivider: boolean;
   hasSomeDividerContent: boolean;
+  hasRowHeader: boolean;
 }
 
 /**
@@ -31,6 +34,7 @@ export interface ITableRow extends Omit<ITableStandAlone, 'values' | 'headerVari
 export const TableRow = (props: ITableRow): JSX.Element => {
   const {
     divider,
+    rowHeader,
     dividerValue,
     getExpandedAria,
     getValue,
@@ -57,6 +61,17 @@ export const TableRow = (props: ITableRow): JSX.Element => {
         styles={props.styles.bodyRows?.[rowVariant]}
       >
         <TableDivider divider={dividerValue()} styles={props.styles.divider} />
+        {rowHeader && (
+          <TableColumnHeaderStyled scope="row" styles={props.styles.header?.[rowHeader.variant]}>
+            <Text
+              component={TextComponentType.SPAN}
+              customTypography={props.styles.header?.[rowHeader.variant]?.typography}
+              dataTestId={`${props.dataTestId}RowHeader${props.indexRow}`}
+            >
+              {rowHeader.label}
+            </Text>
+          </TableColumnHeaderStyled>
+        )}
         {props.headers
           .filter(headerValue => headerValue.id !== divider?.id)
           .map((headerValue, indexHeader) => {
@@ -65,17 +80,17 @@ export const TableRow = (props: ITableRow): JSX.Element => {
               <TableColumnBodyStyled
                 key={indexHeader}
                 customAlign={
-                  headerValue.config?.alignValue?.[props.device] ||
+                  headerValue?.config?.alignValue?.[props.device] ||
                   headerValue?.config?.alignValue ||
-                  headerValue.config?.alignHeader?.[props.device] ||
+                  headerValue?.config?.alignHeader?.[props.device] ||
                   headerValue?.config?.alignHeader
                 }
                 customBackgroundColor={
                   getBackgroundColorCellValue(headerValue) ?? props.value.backgroundColor
                 }
-                customWidth={headerValue.config?.width}
+                customWidth={headerValue?.config?.width}
                 data-testid={`${props.dataTestId}Row${props.indexRow}Content${indexHeader}`}
-                flexWidth={headerValue.config?.flexWidth}
+                flexWidth={headerValue?.config?.flexWidth}
                 hasSomeExpandedContent={props.hasSomeExpandedContent && hasExpandedIcon}
                 styles={props.styles.bodyRows?.[rowVariant]}
               >

src/components/table/hooks/useContent.ts

@@ -4,6 +4,7 @@ import * as React from 'react';
 import {
   DividerContent,
   ITableHeader,
+  ITableRowHeader,
   ITableStandAlone,
   IValue,
   TableDividerType,
@@ -19,6 +20,7 @@ interface IUseContent extends Omit<ITableStandAlone, 'values' | 'headerVariant'>
 
 interface IUseContentResponse {
   divider?: ITableHeader;
+  rowHeader?: ITableRowHeader;
   dividerValue: () => null | TableDividerType | unknown;
   getExpandedAria: () => string | undefined;
   getValue: (headerValue: ITableHeader) => string | JSX.Element | DividerContent;
@@ -32,7 +34,7 @@ interface IUseContentResponse {
 
 export const useContent = (props: IUseContent): IUseContentResponse => {
   const [showExpandedContent, setShowExpandedContent] = React.useState(props.initialExpanded);
-  const divider = props.headers.find(header => header.config.hasDivider);
+  const divider = props.headers.find(header => header?.config?.hasDivider);
   const rowVariant = props.value.rowVariant || 'DEFAULT';
 
   const handleShowExpandedContent = (value: boolean) => {
@@ -102,8 +104,11 @@ export const useContent = (props: IUseContent): IUseContentResponse => {
 
   const hasExpandedContentRow = !!Object.getOwnPropertyDescriptor(props.value, 'expandedContent');
 
+  const rowHeader = props.value.rowHeader;
+
   return {
     divider,
+    rowHeader,
     dividerValue,
     getExpandedAria,
     getValue,

src/components/table/table.styled.ts

@@ -316,3 +316,7 @@ export const ListEmptyExpandedContentItem = styled.div`
   width: 0;
   height: 0;
 `;
+
+export const EmptyRowHeader = styled.td<{ styles?: TableHeaderStylesTypes }>`
+  ${({ styles }) => getStyles(styles?.column)}
+`;

src/components/table/types/table.ts

@@ -75,6 +75,7 @@ export type IValue = {
   accordionIconCollapsedAriaLabel?: string;
   accordionIconExpandedAriaLabel?: string;
   rowVariant?: string;
+  rowHeader?: ITableRowHeader;
   rowBorderPosition?: LineSeparatorPositionType;
   backgroundColor?: string;
 } & {
@@ -117,10 +118,14 @@ export type DividerContent = { dividerContent?: TableDividerType };
 export interface ITableHeader {
   label: React.ReactNode;
   id: string;
-  config: ConfigType;
+  config?: ConfigType;
   value?: ValueFunctionType & DividerContent;
 }
 
+export interface ITableRowHeader extends Omit<ITableHeader, 'id'> {
+  variant: string;
+}
+
 export type TableFooterType = Omit<IFooter, 'children' | 'variant'> & {
   content?: JSX.Element[] | JSX.Element;
   variant?: string;