Improvement in width size. Add Load More

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -443,12 +443,15 @@ const DocumentsTabComponent: React.FunctionComponent<{
     });
 
   const tableContainerRef = useRef(null);
-  const [tableContainerHeightPx, setTableContainerHeightPx] = useState<number>(undefined);
+  const [tableContainerSizePx, setTableContainerSizePx] = useState<{ height: number, width: number }>(undefined);
   useEffect(() => {
     if (!tableContainerRef.current) {
       return undefined;
     }
-    const resizeObserver = new ResizeObserver(() => setTableContainerHeightPx(tableContainerRef.current.offsetHeight));
+    const resizeObserver = new ResizeObserver(() => setTableContainerSizePx({
+      height: tableContainerRef.current.offsetHeight,
+      width: tableContainerRef.current.offsetWidth,
+    }));
     resizeObserver.observe(tableContainerRef.current);
     return () => resizeObserver.disconnect(); // clean up
   }, []);
@@ -564,9 +567,10 @@ const DocumentsTabComponent: React.FunctionComponent<{
       {/* <Split> doesn't like to be a flex child */}
       <div style={{ overflow: "hidden", height: "100%" }}>
         <Split>
-          <div style={{ minWidth: 440, width: "20%", display: "flex", height: "100%" }}
+          <div style={{ minWidth: 480, width: "20%" }}
             ref={tableContainerRef}>
-            <DocumentsTableComponent style={{ width: "100%" }} items={tableItems} onSelectedItem={onSelectedDocument} height={tableContainerHeightPx} />
+            <DocumentsTableComponent style={{ width: 200 }} items={tableItems} onSelectedItem={onSelectedDocument} size={tableContainerSizePx} />
+            <a className="loadMore" role="button" onClick={() => loadNextPage(false)}>Load more</a>
           </div>
           <div style={{ minWidth: "20%" }}><pre>{JSON.stringify(currentDocument, undefined, " ")}</pre></div>
         </Split>

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -10,7 +10,7 @@ export type DocumentsTableComponentItem = {
 export interface IDocumentsTableComponentProps {
   items: DocumentsTableComponentItem[];
   onSelectedItem: (index: number) => void;
-  height: number;
+  size: { height: number; width: number };
   style?: React.CSSProperties;
 }
 
@@ -25,7 +25,7 @@ const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = [
     },
     renderCell: (item) => {
       return (
-        <TableCellLayout>{item.id}</TableCellLayout>
+        <TableCellLayout truncate>{item.id}</TableCellLayout>
       );
     },
   }),
@@ -39,7 +39,7 @@ const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = [
     },
     renderCell: (item) => {
       return (
-        <TableCellLayout>{item.type}</TableCellLayout>
+        <TableCellLayout truncate>{item.type}</TableCellLayout>
       );
     },
   }),
@@ -56,7 +56,7 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
 }
 
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
-  items, onSelectedItem, style, height,
+  items, onSelectedItem, style, size,
 }: IDocumentsTableComponentProps) => {
   const { targetDocument } = useFluent();
   const scrollbarWidth = useScrollbarWidth({ targetDocument });
@@ -66,11 +66,12 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>({
     id: {
       idealWidth: 280,
-      minWidth: 273,
+      // minWidth: 273,
     },
     type: {
-      minWidth: 110,
-      defaultWidth: 120,
+      defaultWidth: 100
+      // minWidth: 110,
+      // defaultWidth: 120,
     },
   });
 
@@ -94,8 +95,6 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
       aria-rowindex={index + 2}
       style={style}
       key={item.id}
-      // onClick={onClick}
-      // onKeyDown={onKeyDown}
       aria-selected={selected}
       appearance={appearance}
     >
@@ -206,7 +205,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
             onKeyDown={toggleAllKeydown}
             checkboxIndicator={{ "aria-label": "Select all rows " }}
           />
-          {columns.map((column, index) => (
+          {columns.map((column, /* index */) => (
             <Menu openOnContext key={column.columnId}>
               <MenuTrigger>
                 <TableHeaderCell
@@ -233,12 +232,12 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
           <div role="presentation" style={{ width: scrollbarWidth }} />
         </TableRow>
       </TableHeader>
-      <TableBody style={{ height: "100%", flex: 1 }}>
+      <TableBody>
         <List
-          height={height !== undefined ? height - 32 : 0}
+          height={size !== undefined ? size.height - 32 /* table header */ - 21 /* load more */ : 0}
           itemCount={items.length}
-          itemSize={45}
-          width="100%"
+          itemSize={30}
+          width={size ? size.width : 0}
           itemData={rows}
         >
           {RenderRow}