feat(Table): upgrade stripped props to support painting columns

packages/react-components/src/components/Table/Table.module.scss

@@ -1,5 +1,6 @@
 @use './styles/pin';
 @use './styles/size';
+@use './styles/strips';
 
 $base-class: 'table';
 $action-bar-class: 'action-bar';
@@ -54,14 +55,12 @@ $action-bar-class: 'action-bar';
     }
   }
 
-  &--stripped {
-    tbody tr:nth-child(odd) {
-      background-color: var(--surface-secondary-default);
+  &--stripped_rows {
+    @include strips.generateStrips('rows');
+  }
 
-      &:hover {
-        background-color: var(--surface-primary-disabled);
-      }
-    }
+  &--stripped_columns {
+    @include strips.generateStrips('columns');
   }
 
   tbody {

packages/react-components/src/components/Table/Table.stories.tsx

@@ -79,6 +79,34 @@ export const Resizing: StoryFn = () => {
   );
 };
 
+export const Stripped: StoryFn = () => {
+  const getRowId = (row: Data) => row.id;
+  const data = generateData(4);
+
+  return (
+    <>
+      <StoryDescriptor title="Rows">
+        <Table
+          size="medium"
+          data={data}
+          columns={columns}
+          getRowId={getRowId}
+          stripped="rows"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Columns">
+        <Table
+          size="medium"
+          data={data}
+          columns={columns}
+          getRowId={getRowId}
+          stripped="columns"
+        />
+      </StoryDescriptor>
+    </>
+  );
+};
+
 export const Sizes: StoryFn = (): React.ReactElement => {
   const getRowId = (row: Data) => row.id;
   const data = generateData(4);

packages/react-components/src/components/Table/Table.tsx

@@ -181,9 +181,7 @@ export const Table = <T,>({
           styles[`${baseClass}`],
           styles[`${baseClass}--${size}`],
           styles[`${baseClass}--pinned_${pin}`],
-          {
-            [styles[`${baseClass}--stripped`]]: stripped,
-          }
+          styles[`${baseClass}--stripped_${stripped}`]
         )}
       >
         <TableHeader

packages/react-components/src/components/Table/styles/pin.scss

@@ -33,6 +33,6 @@
   }
 
  @else {
-    @warn "Invalid pinned value: #{$type}. Supported value are 'header' and 'leftColumn'.";
+    @warn "Invalid pinned value: #{$type}. Supported values are 'header' and 'leftColumn'.";
   }
 }

packages/react-components/src/components/Table/styles/strips.scss

@@ -0,0 +1,25 @@
+@mixin generateStrips($type) {
+  @if $type == 'rows' {
+    tbody tr:nth-child(odd) {
+      background-color: var(--surface-secondary-default);
+
+      &:hover {
+        background-color: var(--surface-primary-disabled) !important;
+      }
+    }
+  }
+
+ @else if $type == 'columns' {
+    tbody tr td:nth-child(even) {
+      background-color: var(--surface-secondary-default);
+    }
+
+    tbody tr:hover td:nth-child(even) {
+      background-color: var(--surface-primary-hover);
+    }
+  }
+
+ @else {
+    @warn "Invalid stripped value: #{$type}. Supported values are 'rows' and 'columns'.";
+  }
+}

packages/react-components/src/components/Table/types.ts

@@ -11,6 +11,8 @@ export type TableSize = 'small' | 'medium' | 'large';
 
 export type PinOptions = 'header' | 'leftColumn';
 
+export type StrippedOptions = 'rows' | 'columns';
+
 export enum SortOrder {
   Ascending = 'asc',
   Descending = 'desc',
@@ -27,9 +29,11 @@ export interface ITableProps<T> {
    */
   columns: Column<T>[];
   /**
-   * Whether to display alternating row background colors for better readability.
+   * The parameter allows you to customize alternating background colors for rows
+   * or columns in the table, enhancing readability and visual separation. Allowed values
+   * are 'rows' or 'columns'
    */
-  stripped?: boolean;
+  stripped?: StrippedOptions;
   /**
    * Specifies the size of the table, which affects row height and spacing.
    * Options: 'small', 'medium', 'large'.