Improve table componente

Include new helper to modify align and background for cells and header

Author: Hector Arce De Las Heras

src/components/table/component/listColumnHeaderPriority.tsx

@@ -88,7 +88,7 @@ const ListColumnHeaderValue = (props: IListColumnHeaderValue): JSX.Element => {
     rowHeader,
     getExpandedAria,
     getValue,
-    getBackgroundColorCellValue,
+    getCellTokenValue,
     handleShowExpandedContent,
     hasExpandedContentRow,
     showExpandedContent,
@@ -123,13 +123,15 @@ const ListColumnHeaderValue = (props: IListColumnHeaderValue): JSX.Element => {
         <ListItemHeaderPriorityStyled
           borderPosition={props.value.rowBorderPosition}
           customAlign={
+            getCellTokenValue({ headerValue: props.header, token: 'align' }) ||
             props.header?.config?.alignValue?.[props.device] ||
             props.header?.config?.alignValue ||
             props.header?.config?.alignHeader?.[props.device] ||
             props.header?.config?.alignHeader
           }
           customBackgroundColor={
-            getBackgroundColorCellValue(props.header) ?? props.value.backgroundColor
+            getCellTokenValue({ headerValue: props.header, token: 'backgroundColor' }) ??
+            props.value.backgroundColor
           }
           customWidth={props.header?.config?.width}
           flexWidth={props.header?.config?.flexWidth}

src/components/table/component/listRowHeaderPriority.tsx

@@ -24,7 +24,7 @@ export const ListRowHeaderPriority = (props: IListRowHeaderPriority): JSX.Elemen
     dividerValue,
     getExpandedAria,
     getValue,
-    getBackgroundColorCellValue,
+    getCellTokenValue,
     handleShowExpandedContent,
     hasExpandedContentRow,
     showExpandedContent,
@@ -94,13 +94,15 @@ export const ListRowHeaderPriority = (props: IListRowHeaderPriority): JSX.Elemen
                   <ListItemHeaderPriorityStyled
                     borderPosition={props.value.rowBorderPosition}
                     customAlign={
+                      getCellTokenValue({ headerValue: header, token: 'align' }) ||
                       header?.config?.alignValue?.[props.device] ||
                       header?.config?.alignValue ||
                       header?.config?.alignHeader?.[props.device] ||
                       header?.config?.alignHeader
                     }
                     customBackgroundColor={
-                      getBackgroundColorCellValue(header) ?? props.value.backgroundColor
+                      getCellTokenValue({ headerValue: header, token: 'backgroundColor' }) ??
+                      props.value.backgroundColor
                     }
                     customWidth={header?.config?.width}
                     data-testid={`${props.dataTestId}ItemList${indexHeader}`}

src/components/table/component/tableRow.tsx

@@ -37,7 +37,7 @@ export const TableRow = (props: ITableRow): JSX.Element => {
     dividerValue,
     getExpandedAria,
     getValue,
-    getBackgroundColorCellValue,
+    getCellTokenValue,
     handleShowExpandedContent,
     hasExpandedContentRow,
     hasFooter,
@@ -88,13 +88,15 @@ export const TableRow = (props: ITableRow): JSX.Element => {
               <TableColumnBodyStyled
                 key={indexHeader}
                 customAlign={
+                  getCellTokenValue({ headerValue, token: 'align' }) ||
                   headerValue?.config?.alignValue?.[props.device] ||
                   headerValue?.config?.alignValue ||
                   headerValue?.config?.alignHeader?.[props.device] ||
                   headerValue?.config?.alignHeader
                 }
                 customBackgroundColor={
-                  getBackgroundColorCellValue(headerValue) ?? props.value.backgroundColor
+                  getCellTokenValue({ headerValue, token: 'backgroundColor' }) ??
+                  props.value.backgroundColor
                 }
                 customWidth={headerValue?.config?.width}
                 data-testid={`${props.dataTestId}Row${props.indexRow}Content${indexHeader}`}

src/components/table/stories/mockTable.tsx

@@ -566,7 +566,7 @@ export const mockCustomizableTable = {
     },
     {
       date: '18 DIC',
-      name: { value: 'Dwight', backgroundColor: 'green' },
+      name: { value: 'Dwight', backgroundColor: 'green', align: 'right' },
       surname: 'Malone',
       routingNumber: '123456789',
       accountNumber: '****999999',

src/components/table/types/table.ts

@@ -72,6 +72,7 @@ export type ValueConfigType = {
     | number
     | boolean;
   backgroundColor?: string;
+  align?: string;
 };
 
 export type IValueConfigPropsType = {
@@ -83,6 +84,7 @@ export type IValueConfigPropsType = {
   rowHeader?: ITableRowHeader;
   rowBorderPosition?: LineSeparatorPositionType;
   backgroundColor?: string;
+  align?: string;
 };
 
 /**