fix(table): use scrollable container

Author: abelflopes

packages/components/table/package.json

@@ -32,6 +32,7 @@
     "react": "^18.2.0"
   },
   "dependencies": {
+    "@react-ck/provisional": "^1.2.7",
     "@react-ck/scss-utils": "^1.1.3",
     "@react-ck/text": "^1.4.7",
     "@react-ck/theme": "^1.6.7",

packages/components/table/src/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styles from "./styles/index.module.scss";
 import classNames from "classnames";
+import { ScrollableContainer } from "@react-ck/provisional";
 
 export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Specifies the visual style of the table  */
@@ -22,16 +23,34 @@ export const Table = ({
   scrollable,
   ...otherProps
 }: Readonly<TableProps>): React.ReactElement => (
-  <div
-    {...otherProps}
-    className={classNames(
-      styles.root,
-      {
-        [`${styles.scrollable}`]: scrollable,
-        [`${styles[skin]}`]: skin !== "default",
-      },
-      className,
-    )}>
-    <table className={styles.table}>{children}</table>
-  </div>
+  <>
+    {scrollable ? (
+      <ScrollableContainer
+        {...otherProps}
+        className={classNames(
+          styles.root,
+          {
+            [`${styles.scrollable}`]: scrollable,
+            [`${styles[skin]}`]: skin !== "default",
+          },
+          className,
+        )}>
+        <table className={styles.table}>{children}</table>
+      </ScrollableContainer>
+    ) : null}
+
+    {!scrollable && (
+      <div
+        {...otherProps}
+        className={classNames(
+          styles.root,
+          {
+            [`${styles[skin]}`]: skin !== "default",
+          },
+          className,
+        )}>
+        <table className={styles.table}>{children}</table>
+      </div>
+    )}
+  </>
 );

packages/components/table/src/styles/index.module.scss

@@ -12,7 +12,6 @@
 }
 
 .scrollable {
-  overflow: auto;
   max-width: 100%;
   max-height: 100%;