From d2b4dc81ba2ff9345f91373ef5bdbe23dda9d6e3 Mon Sep 17 00:00:00 2001
From: KitoC <35714838+KitoC@users.noreply.github.com>
Date: Fri, 28 Jun 2024 12:49:11 +1000
Subject: [PATCH] Tpp 801/ensure text in table wraps (#297)

---
 lib/components/Table/getExpandColumnConfig.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/lib/components/Table/getExpandColumnConfig.js b/lib/components/Table/getExpandColumnConfig.js
index 1389c295..f4133bb8 100644
--- a/lib/components/Table/getExpandColumnConfig.js
+++ b/lib/components/Table/getExpandColumnConfig.js
@@ -1,7 +1,8 @@
 import { Stack } from "@mui/material";
-import { MRT_ExpandAllButton } from "material-react-table";
+import { MRT_ExpandAllButton, MRT_ExpandButton } from "material-react-table";
 import React from "react";
 import Box from "../Box";
+import Flex from "../Flex";
 import { get } from "lodash";
 import styled from "styled-components";
 import { PropTypes } from "prop-types";
@@ -51,10 +52,14 @@ const GroupedCell = (props) => {
   }
 
   if (firstCol.Cell) {
-    return <firstCol.Cell {...props} renderedCellValue={renderedCellValue} />;
+    return (
+      <Flex alignItems="center">
+        <firstCol.Cell {...props} renderedCellValue={renderedCellValue} />
+      </Flex>
+    );
   }
 
-  return renderedCellValue;
+  return <Flex alignItems="center">{renderedCellValue} </Flex>;
 };
 
 GroupedCell.propTypes = PropTypes.Obj;
@@ -87,7 +92,13 @@ export default (firstCol, tableConfig) => ({
     Header: (props) => (
       <HeaderCell {...props} firstCol={firstCol} tableConfig={tableConfig} />
     ),
-    GroupedCell: (props) => <GroupedCell {...props} firstCol={firstCol} />,
+    Cell: (props) => (
+      <Flex alignItems="center">
+        <MRT_ExpandButton {...props} />
+
+        <GroupedCell {...props} firstCol={firstCol} />
+      </Flex>
+    ),
     enableResizing: true,
     size: 200
   }