From aa4f08c4f32285950c532929a861c341b62f0e6b Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <ray@fbmsoftware.com>
Date: Wed, 27 Sep 2023 15:11:58 +0800
Subject: [PATCH] ZI-14677 default MRT table columns are autozised by default

---
 src/components/VirtuosoDataGrid/archived.stories.js | 13 ++++---------
 src/components/VirtuosoDataGrid/index.jsx           | 11 ++++++++++-
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/VirtuosoDataGrid/archived.stories.js b/src/components/VirtuosoDataGrid/archived.stories.js
index 9029d8f..3a6fa0b 100644
--- a/src/components/VirtuosoDataGrid/archived.stories.js
+++ b/src/components/VirtuosoDataGrid/archived.stories.js
@@ -196,18 +196,13 @@ ConditionalSelector.args = {
     }
   ],
   columns: [
-    {
-      key: "select-row",
-      name: "",
-      sortable: false,
-      hidden: true,
-      selectable({ row }) {
-        return row.id !== '2'
-      }
-    },
+    
     {
       key: "name",
       name: "Name",
+      selectable({ row }) {
+        return row.id !== 2
+      }
     },
     {
       key: "age",
diff --git a/src/components/VirtuosoDataGrid/index.jsx b/src/components/VirtuosoDataGrid/index.jsx
index 2916b09..ebaaa7c 100644
--- a/src/components/VirtuosoDataGrid/index.jsx
+++ b/src/components/VirtuosoDataGrid/index.jsx
@@ -5,7 +5,7 @@ import { makeStyles } from 'tss-react/mui';
 import { useUrlState } from '../hooks/useUrlState';
 
 
-import { Clear, Search } from '@mui/icons-material';
+import { Clear, DoubleArrow, Search, UnfoldMore } from '@mui/icons-material';
 import { Box, Button, CircularProgress, IconButton, InputAdornment, LinearProgress, ThemeProvider, Toolbar, Tooltip, Typography, createTheme, debounce, styled, tooltipClasses, useTheme } from '@mui/material';
 import { isEmpty } from 'lodash';
 import TruncateMarkup from 'react-truncate-markup';
@@ -535,6 +535,15 @@ const VirtuosoDataGrid = ({
           enableMultiSort={false}
           enableExpanding={!!tableComponents?.detailsRow?.content}
           getRowCanExpand={row => isRowExpandableCallback?isRowExpandableCallback(row?.original):true}
+          displayColumnDefOptions={{
+            'mrt-row-select': {
+              size: 30,
+            },
+            'mrt-row-expand': {
+              size: 30,
+              header: <UnfoldMore/>
+            }
+          }}
           data={data}
           columns={columns}
           onRowSelectionChange={rows=>{