feat(AnalyticalTable): Add overscanCount prop (#231)

Author: Lukas742

packages/main/src/components/AnalyticalTable/index.tsx

@@ -100,6 +100,7 @@ export interface TableProps extends CommonProps {
   subRowsKey?: string;
   selectedRowKey?: string;
   isTreeTable?: boolean;
+  overscanCount?: number;
 
   // default components
 
@@ -138,7 +139,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
     visibleRows,
     minRows,
     isTreeTable,
-    alternateRowColor
+    alternateRowColor,
+    overscanCount
   } = props;
   const theme = useTheme() as JSSTheme;
   const classes = useStyles({ rowHeight: props.rowHeight });
@@ -308,6 +310,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
               tableBodyHeight={tableBodyHeight}
               visibleRows={visibleRows}
               alternateRowColor={alternateRowColor}
+              overscanCount={overscanCount}
             />
           )}
         </div>

packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx

@@ -23,7 +23,8 @@ export const VirtualTableBody = (props) => {
     internalRowHeight,
     tableBodyHeight,
     visibleRows,
-    alternateRowColor
+    alternateRowColor,
+    overscanCount
   } = props;
 
   const innerDivRef = useRef(null);
@@ -39,7 +40,7 @@ export const VirtualTableBody = (props) => {
   }, [innerDivRef.current, selectable, classes.tbody, classes.selectable]);
 
   const itemCount = Math.max(minRows, rows.length);
-  const overscanCount = Math.floor(visibleRows / 2);
+  const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2);
 
   const columnsWidth = useMemo(() => {
     const aggregatedWidth = columns
@@ -104,7 +105,7 @@ export const VirtualTableBody = (props) => {
       itemSize={internalRowHeight}
       itemKey={getItemKey}
       innerRef={innerDivRef}
-      overscanCount={overscanCount}
+      overscanCount={overscan}
     >
       {VirtualTableRow}
     </FixedSizeList>