Adds a view wrapper with a style of 100vh so that what space is also …

…clickable

src/components/app.scss

@@ -1,8 +1,9 @@
 .selectView {
   padding: 10px;
-
+  height: 100vh;
+
   .buttons {
     display: flex;
     gap: 5px;
   }
-}
+}

src/components/app.tsx

@@ -98,7 +98,11 @@ function App() {
       );
 
     default:
-      return renderSelectView();
+      return (
+        <div onClick={handleShowComponent}>
+          {renderSelectView()}
+        </div>
+      );
   }
 }
 

src/components/flat-table.tsx

@@ -8,13 +8,12 @@ interface IFlatProps extends ITableProps {
 }
 
 export const FlatTable = (props: IFlatProps) => {
-  const {selectedDataSet, collections, collectionClasses, items, mapCellsFromValues, showHeaders,
-          handleShowComponent} = props;
+  const {selectedDataSet, collections, collectionClasses, items, mapCellsFromValues, showHeaders} = props;
   const collection = collections[0];
   const {className} = collectionClasses[0];
 
   return (
-    <table className={`${css.mainTable} ${css.flatTable} ${css[className]}}`} onClick={handleShowComponent}>
+    <table className={`${css.mainTable} ${css.flatTable} ${css[className]}}`}>
       <tbody>
         <tr className={css.mainHeader}>
           <th colSpan={items.length}>{selectedDataSet.title}</th>

src/components/hierarchy-view/hierarchy.scss

@@ -1,3 +1,7 @@
+.hierarchyWrapper {
+  height: 100vh;
+}
+
 .hierarchy {
   display: flex;
   flex-direction: row;

src/components/hierarchy-view/hierarchy.tsx

@@ -45,7 +45,7 @@ export const Hierarchy = (props: IProps) => {
     };
 
     return (
-      <div onClick={handleShowComponent}>
+      <div className={css.hierarchyWrapper} onClick={handleShowComponent}>
         <div className={css.hierarchy} style={{gap: CollectionGap}}>
         <DndContext
           collisionDetection={closestCorners}

src/components/landscape-view.tsx

@@ -5,7 +5,7 @@ import css from "./tables.scss";
 
 export const LandscapeView = (props: ITableProps) => {
   const {mapCellsFromValues, mapHeadersFromValues, showHeaders, collectionClasses,
-    getClassName, selectedDataSet, collections, getValueLength, paddingStyle, handleShowComponent} = props;
+    getClassName, selectedDataSet, collections, getValueLength, paddingStyle} = props;
 
   const renderNestedTable = (parentColl: ICollection) => {
     const firstRowValues = parentColl.cases.map(caseObj => caseObj.values);
@@ -95,7 +95,7 @@ export const LandscapeView = (props: ITableProps) => {
   };
 
   return (
-    <div onClick={handleShowComponent}>
+    <div>
       {collections.length && collectionClasses.length && renderTable()}
     </div>
   );

src/components/nested-table.scss

@@ -0,0 +1,3 @@
+.nestedTableWrapper {
+  height: 100vh;
+}

src/components/nested-table.tsx

@@ -6,6 +6,8 @@ import { Menu } from "./menu";
 import { LandscapeView } from "./landscape-view";
 import { FlatTable } from "./flat-table";
 
+import css from "./nested-table.scss";
+
 const portrait = "Portrait";
 const landscape = "Landscape";
 const none = "";
@@ -112,7 +114,7 @@ export const NestedTable = (props: IProps) => {
     const isNoHierarchy = collections.length === 1;
     const classesExist = collectionClasses.length > 0;
     const tableProps = {showHeaders: interactiveState.showHeaders, collectionClasses, collections, selectedDataSet,
-      getClassName, mapHeadersFromValues, mapCellsFromValues, getValueLength, paddingStyle, handleShowComponent};
+      getClassName, mapHeadersFromValues, mapCellsFromValues, getValueLength, paddingStyle};
     const flatProps = {...tableProps, items};
     if (isNoHierarchy && classesExist) {
       return <FlatTable {...flatProps}/>;
@@ -128,7 +130,7 @@ export const NestedTable = (props: IProps) => {
   };
 
   return (
-    <div>
+    <div className={css.nestedTableWrapper} onClick={handleShowComponent}>
       <Menu
         dataSets={dataSets}
         collections={collections}

src/components/portrait-view.tsx

@@ -5,7 +5,7 @@ import css from "./tables.scss";
 
 export const PortraitView = (props: ITableProps) => {
   const {paddingStyle, mapCellsFromValues, mapHeadersFromValues, showHeaders, collectionClasses,
-    getClassName, selectedDataSet, collections, getValueLength, handleShowComponent} = props;
+    getClassName, selectedDataSet, collections, getValueLength} = props;
 
   const renderNestedTable = (parentColl: ICollection) => {
     const firstRowValues = parentColl.cases.map(caseObj => caseObj.values);
@@ -80,7 +80,7 @@ export const PortraitView = (props: ITableProps) => {
   };
 
   return (
-    <div onClick={handleShowComponent}>
+    <div>
       {collections.length && collectionClasses.length && renderTable()}
     </div>
   );

src/types.tsx

@@ -59,7 +59,6 @@ export interface ITableProps {
   mapHeadersFromValues: (values: IValues) => void,
   getValueLength: (firstRow: Array<IValues>) => number
   paddingStyle: Record<string, string>
-  handleShowComponent: () => void
 }
 
 export interface IBoundingBox {