chore: add default styles to content

Author: rsbh

packages/raystack/components/data-table/components/content.tsx

@@ -237,7 +237,7 @@ export function Content({
       : null;
 
   return (
-    <div className={classNames.root}>
+    <div className={cx(styles.contentRoot, classNames.root)}>
       <Table className={classNames.table}>
         {hasData && (
           <Headers headerGroups={headerGroups} className={classNames.header} />

packages/raystack/components/data-table/components/virtualized-content.tsx

@@ -163,7 +163,7 @@ const DefaultEmptyComponent = () => (
 );
 
 export function VirtualizedContent({
-  height,
+  height = '100%',
   rowHeight = 40,
   groupHeaderHeight,
   overscan = 5,

packages/raystack/components/data-table/data-table.module.css

@@ -45,6 +45,11 @@
   flex: 1;
 }
 
+.contentRoot {
+  height: 100%;
+  overflow: auto;
+}
+
 .row {
   background: var(--rs-color-background-base-primary);
 }

packages/raystack/components/data-table/data-table.types.tsx

@@ -128,7 +128,7 @@ export type DataTableContentBaseProps = {
 export type DataTableContentProps = DataTableContentBaseProps;
 
 export type VirtualizedContentProps = DataTableContentBaseProps & {
-  height: number | string;
+  height?: number | string;
   rowHeight?: number;
   groupHeaderHeight?: number;
   overscan?: number;