From 6aadce18e5f971604ead808cd140818d81e76adf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oscar=20Carlstr=C3=B6m?= <oscar.carlstrom@gmail.com>
Date: Tue, 16 Dec 2025 12:16:29 +0100
Subject: [PATCH 1/2] Remove redundant div and table cva

---
 packages/react/src/table/table.tsx | 69 ++++++++++++------------------
 1 file changed, 27 insertions(+), 42 deletions(-)

diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index d80bf13f5..4d20a8c51 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -31,16 +31,6 @@ import {
   useHorizontalScroll,
 } from '../utils';
 
-const tableVariants = cva({
-  base: ['relative'],
-  variants: {
-    variant: {
-      default: '',
-      'zebra-striped': '',
-    },
-  },
-});
-
 const tableRowVariants = cva({
   base: [
     'data-focus-visible:outline-focus-inset',
@@ -114,41 +104,36 @@ function Table(props: TableProps) {
     },
     [scrollContainerRef],
   );
-  return (
-    <div className={tableVariants({ className, variant })}>
-      <div className="relative overflow-hidden">
-        <ScrollButton
-          direction="left"
-          onClick={() => handleScroll('left')}
-          isVisible={canScrollLeft}
-          hasScrollingOccurred={hasScrollingOccurred}
-          className="-translate-y-1/2 absolute top-5 z-10 h-11 w-11"
-          iconClassName="h-5 w-5"
-        />
-
-        <ScrollButton
-          direction="right"
-          onClick={() => handleScroll('right')}
-          isVisible={canScrollRight}
-          hasScrollingOccurred={hasScrollingOccurred}
-          className="-translate-y-1/2 absolute top-5 z-10 h-11 w-11"
-          iconClassName="h-5 w-5"
-        />
 
-        <div
-          ref={scrollContainerRef}
-          className="scrollbar-hidden overflow-x-auto"
-          style={{ WebkitOverflowScrolling: 'touch' }}
+  return (
+    <div className={cx('relative overflow-hidden', className)}>
+      <div
+        ref={scrollContainerRef}
+        className="scrollbar-hidden overflow-x-auto"
+        style={{ WebkitOverflowScrolling: 'touch' }}
+      >
+        <RACTable
+          {...restProps}
+          className="group w-full min-w-fit"
+          data-variant={variant}
         >
-          <RACTable
-            {...restProps}
-            className="group w-full min-w-fit"
-            data-variant={variant}
-          >
-            {children}
-          </RACTable>
-        </div>
+          {children}
+        </RACTable>
       </div>
+
+      <ScrollButton
+        direction="left"
+        onClick={() => handleScroll('left')}
+        isVisible={canScrollLeft}
+        hasScrollingOccurred={hasScrollingOccurred}
+      />
+
+      <ScrollButton
+        direction="right"
+        onClick={() => handleScroll('right')}
+        isVisible={canScrollRight}
+        hasScrollingOccurred={hasScrollingOccurred}
+      />
     </div>
   );
 }

From 17564e51a3c12d4b3e6d481458c308b321bb72a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oscar=20Carlstr=C3=B6m?= <oscar.carlstrom@gmail.com>
Date: Tue, 16 Dec 2025 13:00:38 +0100
Subject: [PATCH 2/2] Render scroll container conditionally based on
 TableContainerContext

---
 packages/react/src/table/table.tsx | 107 +++++++++++++++++------------
 1 file changed, 63 insertions(+), 44 deletions(-)

diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index 4d20a8c51..bed9b96e8 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -69,20 +69,14 @@ type TableCellProps = RACCellProps &
     children: React.ReactNode;
   };
 
-// Used to deal with showing or hiding scroll indicators during column resizing
-const TableScrollContainerContext = createContext<{
-  isResizing: boolean;
-}>({
-  isResizing: false,
-});
+type _TableScrollContainerProps = {
+  children: React.ReactNode;
+};
 
-/**
- * A container component for displaying tabular data with horizontal scrolling support.
- */
-function Table(props: TableProps) {
-  const { className, children, variant = 'default', ...restProps } = props;
+const _TableScrollContainer = ({ children }: _TableScrollContainerProps) => {
+  const containerContext = useContext(TableContainerContext);
 
-  const { isResizing } = useContext(TableScrollContainerContext);
+  const isResizing = containerContext?.isResizing ?? false;
 
   const {
     scrollContainerRef,
@@ -91,6 +85,7 @@ function Table(props: TableProps) {
     hasScrollingOccurred,
   } = useHorizontalScroll([isResizing]);
 
+  // This has to be moved into a useEffect since we are stepping outside of React
   const handleScroll = useCallback(
     (direction: ScrollDirection) => {
       const container = scrollContainerRef.current;
@@ -106,35 +101,57 @@ function Table(props: TableProps) {
   );
 
   return (
-    <div className={cx('relative overflow-hidden', className)}>
+    <div className="relative overflow-hidden">
       <div
         ref={scrollContainerRef}
         className="scrollbar-hidden overflow-x-auto"
         style={{ WebkitOverflowScrolling: 'touch' }}
       >
-        <RACTable
-          {...restProps}
-          className="group w-full min-w-fit"
-          data-variant={variant}
-        >
-          {children}
-        </RACTable>
+        {children}
+        <ScrollButton
+          direction="left"
+          onClick={() => handleScroll('left')}
+          isVisible={canScrollLeft}
+          hasScrollingOccurred={hasScrollingOccurred}
+        />
+        <ScrollButton
+          direction="right"
+          onClick={() => handleScroll('right')}
+          isVisible={canScrollRight}
+          hasScrollingOccurred={hasScrollingOccurred}
+        />
       </div>
+    </div>
+  );
+};
 
-      <ScrollButton
-        direction="left"
-        onClick={() => handleScroll('left')}
-        isVisible={canScrollLeft}
-        hasScrollingOccurred={hasScrollingOccurred}
-      />
+// Used to deal with showing or hiding scroll indicators during column resizing
+const TableContainerContext = createContext<{
+  isResizing: boolean;
+} | null>(null);
 
-      <ScrollButton
-        direction="right"
-        onClick={() => handleScroll('right')}
-        isVisible={canScrollRight}
-        hasScrollingOccurred={hasScrollingOccurred}
-      />
-    </div>
+/**
+ * A container component for displaying tabular data with horizontal scrolling support.
+ */
+function Table(props: TableProps) {
+  const { className, children, variant = 'default', ...restProps } = props;
+
+  const containerContext = useContext(TableContainerContext);
+
+  const table = (
+    <RACTable
+      {...restProps}
+      className={cx('group w-full min-w-fit', className)}
+      data-variant={variant}
+    >
+      {children}
+    </RACTable>
+  );
+
+  return containerContext ? (
+    table
+  ) : (
+    <_TableScrollContainer>{table}</_TableScrollContainer>
   );
 }
 
@@ -240,17 +257,19 @@ const TableContainer = ({
 }: ResizableTableContainerProps) => {
   const [isResizing, setIsResizing] = useState(false);
   return (
-    <Provider values={[[TableScrollContainerContext, { isResizing }]]}>
-      <ResizableTableContainer
-        {...restProps}
-        className={cx(
-          className,
-          '**:data-[slot=table-column]:overflow-hidden **:data-[slot=table-column]:text-ellipsis',
-          '**:data-[slot=table-cell]:overflow-hidden **:data-[slot=table-cell]:text-ellipsis',
-        )}
-        onResizeStart={() => setIsResizing(true)}
-        onResizeEnd={() => setIsResizing(false)}
-      />
+    <Provider values={[[TableContainerContext, { isResizing }]]}>
+      <_TableScrollContainer>
+        <ResizableTableContainer
+          {...restProps}
+          className={cx(
+            className,
+            '**:data-[slot=table-column]:overflow-hidden **:data-[slot=table-column]:text-ellipsis',
+            '**:data-[slot=table-cell]:overflow-hidden **:data-[slot=table-cell]:text-ellipsis',
+          )}
+          onResizeStart={() => setIsResizing(true)}
+          onResizeEnd={() => setIsResizing(false)}
+        />
+      </_TableScrollContainer>
     </Provider>
   );
 };