Update fluent ui v9 dependency. Color columns separation. Fix refresh button placement to not interfere with header cell width.

less/documentDB.less

@@ -2579,6 +2579,18 @@ a:link {
   cursor: pointer;
 }
 
+.documentsTab {
+  .documentsTable {
+    .documentsTableCell {
+      border-left: 1px solid @BaseMedium;
+      height: 100%;
+    }
+    .documentsTableHeader {
+      border-bottom: 1px solid @BaseMedium;
+    }
+  }
+}
+
 .querydropdown {
   border: 1px solid @BaseMedium;
   font-style: normal;

package.json

@@ -13,7 +13,7 @@
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@fluentui/react": "8.112.1",
-    "@fluentui/react-components": "9.34.0",
+    "@fluentui/react-components": "9.51.0",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -1668,7 +1668,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
 
   return (
     <FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ height: "100%" }}>
-      <div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
+      <div className="tab-pane active documentsTab" role="tabpanel" style={{ display: "flex" }}>
         {isFilterCreated && (
           <div className="filterdivs">
             {!isFilterExpanded && !isPreferredApiMongoDB && (
@@ -1763,14 +1763,17 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         {/* <Split> doesn't like to be a flex child */}
         <div style={{ overflow: "hidden", height: "100%" }}>
           <Split>
-            <div style={{ minWidth: 120, width: "35%", overflow: "hidden" }} ref={tableContainerRef}>
+            <div
+              style={{ minWidth: 120, width: "35%", overflow: "hidden", position: "relative" }}
+              ref={tableContainerRef}
+            >
               <Button
                 appearance="transparent"
                 aria-label="Refresh"
                 size="small"
                 icon={<ArrowClockwise16Filled />}
                 style={{
-                  position: "relative",
+                  position: "absolute",
                   top: 6,
                   right: 0,
                   float: "right",

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -136,6 +136,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         {columns.map((column) => (
           <TableCell
             key={column.columnId}
+            className="documentsTableCell"
             onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))}
             onKeyDown={() => onIdClicked(index)}
             {...columnSizing.getTableCellProps(column.columnId)}
@@ -222,9 +223,9 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   };
 
   return (
-    <Table noNativeElements {...tableProps}>
-      <TableHeader>
-        <TableRow>
+    <Table className="documentsTable" noNativeElements {...tableProps}>
+      <TableHeader className="documentsTableHeader">
+        <TableRow style={{ width: size ? size.width - 15 : "100%" }}>
           <TableSelectionCell
             checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
             onClick={toggleAllRows}
@@ -234,7 +235,11 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
           {columns.map((column /* index */) => (
             <Menu openOnContext key={column.columnId}>
               <MenuTrigger>
-                <TableHeaderCell key={column.columnId} {...columnSizing.getTableHeaderCellProps(column.columnId)}>
+                <TableHeaderCell
+                  className="documentsTableCell"
+                  key={column.columnId}
+                  {...columnSizing.getTableHeaderCellProps(column.columnId)}
+                >
                   {column.renderHeaderCell()}
                 </TableHeaderCell>
               </MenuTrigger>
@@ -256,6 +261,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
           itemSize={30}
           width={size ? size.width : 0}
           itemData={rows}
+          style={{ overflowY: "scroll" }}
         >
           {RenderRow}
         </List>