NOOS-955/fix-tab-height

CHANGELOG.md

@@ -201,8 +201,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add debounce to autocomplete input, new prop debounceSeconds
 
-## [2.0.5] - 2024-09-20
+## [2.0.6] - 2024-09-20
 
 ### Changed
 
 - Add IconButton component wrapping MUI IconButton
+
+## [2.0.7] - 2024-09-30
+
+### Changed
+
+- Display table and tab content in full height
+- Add custom sx styling to the table with the prop tableStyle

notebooks/test_tab.ipynb

@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 8,
    "id": "great-steam",
    "metadata": {},
    "outputs": [],
@@ -15,7 +15,96 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 9,
+   "id": "86602fb0",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "data = [\n",
+    "    {\"name\": \"John\"},\n",
+    "    {\"name\": \"Paul\"},\n",
+    "    {\"name\": \"George\"},\n",
+    "    {\"name\": \"Ringo\"},\n",
+    "    {\"name\": \"Brian\"},\n",
+    "    {\"name\": \"Pete\"},\n",
+    "    {\"name\": \"Stuart\"},\n",
+    "    {\"name\": \"George\"},\n",
+    "    {\"name\": \"Neil\"},\n",
+    "    {\"name\": \"Mal\"},\n",
+    "    {\"name\": \"Jim\"},\n",
+    "    {\"name\": \"Derek\"},\n",
+    "    {\"name\": \"Geoff\"},\n",
+    "    {\"name\": \"Andy\"},\n",
+    "    {\"name\": \"Tony\"},\n",
+    "    {\"name\": \"Julia\"},\n",
+    "    {\"name\": \"Astrid\"},\n",
+    "    {\"name\": \"Klaus\"},\n",
+    "    {\"name\": \"Yoko\"},\n",
+    "    {\"name\": \"Billy\"},\n",
+    "    {\"name\": \"Eric\"},\n",
+    "    {\"name\": \"Ginger\"},\n",
+    "    {\"name\": \"Jack\"},\n",
+    "    {\"name\": \"Keith\"},\n",
+    "    {\"name\": \"Mick\"},\n",
+    "    {\"name\": \"Charlie\"},\n",
+    "    {\"name\": \"Ronnie\"},\n",
+    "    {\"name\": \"Bill\"},\n",
+    "    {\"name\": \"Ian\"},\n",
+    "    {\"name\": \"John\"},\n",
+    "    {\"name\": \"Paul\"},\n",
+    "    {\"name\": \"George\"},\n",
+    "    {\"name\": \"Ringo\"},\n",
+    "    {\"name\": \"Brian\"},\n",
+    "    {\"name\": \"Pete\"},\n",
+    "    {\"name\": \"Stuart\"},\n",
+    "    {\"name\": \"George\"},\n",
+    "    {\"name\": \"Neil\"},\n",
+    "    {\"name\": \"Mal\"},\n",
+    "    {\"name\": \"Jim\"},\n",
+    "    {\"name\": \"Derek\"},\n",
+    "    {\"name\": \"Geoff\"},\n",
+    "    {\"name\": \"Andy\"},\n",
+    "    {\"name\": \"Tony\"},\n",
+    "    {\"name\": \"Julia\"},\n",
+    "    {\"name\": \"Astrid\"},\n",
+    "    {\"name\": \"Klaus\"},\n",
+    "    {\"name\": \"Yoko\"},\n",
+    "    {\"name\": \"Billy\"},\n",
+    "    {\"name\": \"Eric\"},\n",
+    "    {\"name\": \"Ginger\"},\n",
+    "    {\"name\": \"Jack\"},\n",
+    "    {\"name\": \"Keith\"},\n",
+    "    {\"name\": \"Mick\"},\n",
+    "    {\"name\": \"Charlie\"},\n",
+    "    {\"name\": \"Ronnie\"},\n",
+    "    {\"name\": \"Bill\"},\n",
+    "    {\"name\": \"Ian\"},\n",
+    "    {\"name\": \"John\"},\n",
+    "    {\"name\": \"Paul\"},\n",
+    "    {\"name\": \"George\"},\n",
+    "    {\"name\": \"Ringo\"},\n",
+    "    {\"name\": \"Brian\"},\n",
+    "    {\"name\": \"Pete\"},\n",
+    "    {\"name\": \"Stuart\"},\n",
+    "    {\"name\": \"George\"},\n",
+    "    {\"name\": \"Neil\"},\n",
+    "    {\"name\": \"Mal\"},\n",
+    "    {\"name\": \"Jim\"},\n",
+    "    {\"name\": \"Derek\"},\n",
+    "    {\"name\": \"Geoff\"},\n",
+    "    {\"name\": \"Andy\"},\n",
+    "]\n",
+    "\n",
+    "table = dmc.Table( \n",
+    "    columns=[\"name\"],\n",
+    "    rows=data,\n",
+    "    rowsPerPageOptions=[25, 50, 100],\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
    "id": "hindu-script",
    "metadata": {},
    "outputs": [],
@@ -30,7 +119,8 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 11,
+   "id": "a76308eb",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -43,8 +133,8 @@
     "    cards=[{\"title\": \"Card 1a\", \"size\": 3}, {\"title\": \"Card 1b\"}, {\"title\": \"Card 1c\"}]\n",
     ")\n",
     "tab = dmc.Tab(\n",
-    "    children=[text, text_2],\n",
-    "    tabs=[{\"label\": \"2a\"}, {\"label\": \"2b\"}]\n",
+    "    children=[table, text_2, dmc.Box(sx={\"height\": \"inherit\", \"width\": \"inherit\", \"backgroundColor\": \"red\"})],\n",
+    "    tabs=[{\"label\": \"2a\"}, {\"label\": \"2b\"}, {\"label\": \"RED!\"}]\n",
     ")\n",
     "section_2 = dmc.Section(\n",
     "    id=\"section-2\",\n",

package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "git://github.com/noosenergy/dash-material-components.git"
   },
-  "version": "2.0.6",
+  "version": "2.0.7",
   "engines": {
     "node": ">=18"
   },
@@ -78,4 +78,4 @@
     "react": "^16.0",
     "react-dom": "^16.0"
   }
-}
+}

pyproject.toml

@@ -5,7 +5,7 @@ build-backend = "poetry.masonry.api"
 [tool.poetry]
 # Description
 name = "dash-material-components"
-version = "2.0.6"
+version = "2.0.7"
 description = "Dash Material Design components for the Noos platform."
 # Credentials
 license = "MIT"

src/components/display/Table.tsx

@@ -10,7 +10,8 @@ const Table = ({
   id = 'table',
   columns,
   rows: initialRows,
-  rowsPerPageOptions = [10, 25, 50]
+  rowsPerPageOptions = [10, 25, 50],
+  tableStyle = {}
 }: TableProps) => {
   const [rows, setRows] = useState(initialRows);
   const [page, setPage] = useState(0);
@@ -29,8 +30,22 @@ const Table = ({
   };
 
   return (
-    <Box id={id}>
-      <TableContainer sx={{height: '100%'}}>
+    <Box
+      id={id}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        overflow: 'hidden'
+      }}
+    >
+      <TableContainer
+        sx={{
+          flexGrow: 1,
+          overflowX: 'auto',
+          ...tableStyle
+        }}
+      >
         <MuiTable stickyHeader size="small" aria-label="data table">
           <TableHead columns={columns} />
           <TableBody rows={rows} page={page} rowsPerPage={rowsPerPage} />
@@ -61,6 +76,8 @@ type TableProps = {
   rows: TableRowData[];
   /** Table pagination setting */
   rowsPerPageOptions?: Array<number>;
+  /** Custom sx styles for TableContainer - https://mui.com/system/getting-started/the-sx-prop/ */
+  tableStyle?: object;
 } & DashComponentProps;
 
 export default Table;

src/components/layout/Tab.tsx

@@ -39,7 +39,7 @@ const Tab = ({id = 'tab', children, tabs}: TabProps) => {
 
   return (
     <Grid id={id} container direction="column" css={tabLayoutStyle} spacing={2}>
-      <Grid item style={{height: 'auto'}}>
+      <Grid item>
         <Tabs
           value={selectedTab}
           onChange={handleTabChange}
@@ -50,7 +50,9 @@ const Tab = ({id = 'tab', children, tabs}: TabProps) => {
           {tabElements}
         </Tabs>
       </Grid>
-      <Grid item>{tabpanelElements}</Grid>
+      <Grid item style={{flexGrow: 1}}>
+        {tabpanelElements}
+      </Grid>
     </Grid>
   );
 };

src/fragments/TabPanel.tsx

@@ -1,26 +1,21 @@
 import React from 'react';
 import {DashComponentProps} from 'props';
-import {css} from '@emotion/react';
-
-const tabpanelLayoutStyle = css`
-  height: 100%;
-`;
-
-const tabpanelContentLayoutStyle = css`
-  height: 100%;
-`;
+import {Box} from '@mui/material';
 
+/**
+ * TabPanel component
+ */
 const TabPanel = ({children, value, index}: TabPanelProps) => {
   return (
-    <div
+    <Box
       role="tabpanel"
       hidden={value !== index}
       id={`tabpanel-${index}`}
       aria-labelledby={`card-tabpanel-${index}`}
-      css={tabpanelLayoutStyle}
+      height={'100%'}
     >
-      {value === index && <div css={tabpanelContentLayoutStyle}>{children}</div>}
-    </div>
+      {value === index && <Box height={'100%'}>{children}</Box>}
+    </Box>
   );
 };