Implemented sticky column headers and scroll features in table

This commit addresses the following enhancements in the table component:

1. When the user scrolls, the column header now remains sticky with a shadow effect, improving readability and user experience.
2. Only vertical scrolling is enabled, providing a more focused view of the data.
3. The maximum height of the table is set to 768px. Beyond this height, scrolling is enabled on desktop devices, ensuring the table remains within a manageable size.

Author: Hector Arce De Las Heras

src/components/table/component/table.tsx

@@ -52,6 +52,7 @@ export const TableComponent = (
       >
         <TableCaptionStyled id={uniqueId}>{props.captionDescription}</TableCaptionStyled>
         <TableRowGroupHeaderStyled
+          $scrolling={props.scrolling}
           hidden={props.hiddenHeaderOn?.[props.device]}
           lineSeparatorBottomOnHeader={props.lineSeparatorBottomOnHeader}
           lineSeparatorLineStyles={props.lineSeparatorLineStyles}

src/components/table/table.styled.ts

@@ -5,7 +5,7 @@ import {
   LineSeparatorPositionType,
 } from '@/components/lineSeparator';
 import { srOnlyMixin } from '@/styles/mixins/srOnly.mixin';
-import { CommonStyleType } from '@/types';
+import { CommonStyleType, DeviceBreakpointsType } from '@/types';
 import { getStyles, getTypographyStyles } from '@/utils/getStyles/getStyles';
 
 import {
@@ -59,6 +59,7 @@ export const TableRowGroupHeaderStyled = styled.thead<{
   lineSeparatorLineStyles?: LineSeparatorLinePropsStylesType;
   lineSeparatorTopOnHeader?: boolean;
   lineSeparatorBottomOnHeader?: boolean;
+  $scrolling?: boolean;
 }>`
   ${({ styles }) => getStyles(styles?.container)}
   ${({ styles }) => getTypographyStyles(styles?.typography)}
@@ -77,6 +78,27 @@ export const TableRowGroupHeaderStyled = styled.thead<{
     }
     return lineSeparator;
   }}
+  ${() =>
+    ({
+      theme: {
+        MEDIA_QUERIES: { onlyDesktop },
+      },
+      styles,
+      $scrolling,
+    }) => {
+      return css`
+        ${onlyDesktop} {
+          ${$scrolling
+            ? css`
+                box-shadow: ${styles?.container?.[DeviceBreakpointsType.DESKTOP]?.box_shadow ??
+                'none'};
+              `
+            : css`
+                box-shadow: none;
+              `}
+        }
+      `;
+    }}
 `;
 
 export const TableRowHeaderStyled = styled.tr<{

src/components/table/table.tsx

@@ -27,12 +27,28 @@ const TableComponent = React.forwardRef(
     );
     const device = useMediaDevice();
 
+    // Indicates if there is scrolling behind the table body to add shadow to column headers.
+    const [scrollPosition, setScrollPosition] = React.useState(0);
+    const refTableBody = React.useRef<HTMLTableSectionElement>(null);
+
+    React.useEffect(() => {
+      const updatePosition = () => {
+        setScrollPosition(refTableBody?.current?.scrollTop ?? 0);
+      };
+
+      refTableBody?.current?.addEventListener('scroll', updatePosition);
+
+      return () => refTableBody?.current?.removeEventListener('scroll', updatePosition);
+    }, []);
+
     return (
       <TableStandAlone
         {...props}
         ref={ref}
         device={device}
         lineSeparatorLineStyles={lineSeparatorLineStyles}
+        refTableBody={refTableBody}
+        scrolling={scrollPosition > 0}
         styles={styles}
       />
     );
@@ -47,7 +63,7 @@ const TableBoundary = <V extends string | unknown>(
   <ErrorBoundary
     fallBackComponent={
       <FallbackComponent>
-        <TableStandAlone {...(props as unknown as ITableStandAlone)} />
+        <TableStandAlone {...(props as unknown as ITableStandAlone)} ref={ref} scrolling={false} />
       </FallbackComponent>
     }
   >

src/components/table/types/table.ts

@@ -138,6 +138,7 @@ type TableAriaAttributes = Pick<
  */
 export interface ITableStandAlone extends TableAriaAttributes {
   styles: TableRowHeaderTypes<string, string>;
+  refTableBody?: React.Ref<HTMLTableSectionElement>;
   lineSeparatorLineStyles: LineSeparatorLinePropsStylesType;
   lineSeparatorTopOnHeader?: boolean;
   lineSeparatorBottomOnHeader?: boolean;
@@ -152,6 +153,7 @@ export interface ITableStandAlone extends TableAriaAttributes {
   dataTestId?: string;
   hiddenHeaderOn?: HiddenType;
   device: DeviceBreakpointsType;
+  scrolling: boolean;
   headerVariant?: string;
   expandedContentHelpMessage?: string;
   formatListInMobile?: boolean;
@@ -169,7 +171,10 @@ export interface ITableStandAlone extends TableAriaAttributes {
  * @interface ITable
  */
 export interface ITable<V = undefined extends string ? unknown : string>
-  extends Omit<ITableStandAlone, 'styles' | 'lineSeparatorLineStyles' | 'device'>,
+  extends Omit<
+      ITableStandAlone,
+      'styles' | 'lineSeparatorLineStyles' | 'device' | 'scrolling' | 'refTableBody'
+    >,
     Omit<CustomTokenTypes<TableRowHeaderTypes<string, string>>, 'cts' | 'extraCt'> {
   variant: V;
   lineSeparatorLineVariant?: string;