fix grid glitch

Author: hassanad94

apps/sensenet/src/components/content-list/content-list.tsx

@@ -733,15 +733,22 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
                 setActiveContent(rowMouseEventHandlerParams.rowData)
                 handleItemClick(rowMouseEventHandlerParams)
               },
+              rowStyle: {
+                position: 'static',
+                top: 'auto',
+                height: 'auto',
+                overflow: 'initial',
+                padding: '10px 0px',
+              },
               onRowDoubleClick: onItemDoubleClickFunc,
               disableHeader: props.hideHeader,
-
-
               containerStyle: {
                 height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
-                flexWrap: 'nowrap',
+                overflowY: 'auto',
+                maxHeight: '100%',
+                paddingBottom: '15px',
               },
             }}
           />

apps/sensenet/src/globalStyles.ts

@@ -117,7 +117,6 @@ export const useGlobalStyles = makeStyles((theme: Theme) => {
       },
     },
     virtualizedCellStyle: {
-      height: '57px',
       width: '100%',
       padding: 0,
     },

packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx

@@ -20,6 +20,7 @@ import {
   Table,
   TableCellProps,
   TableCellRenderer,
+  TableProps,
 } from 'react-virtualized'
 import { ColumnSetting, ContentListBaseProps } from './content-list-base-props'
 import { ActionsCell, DateCell, ReferenceCell, RowCheckbox, VirtualDefaultCell, VirtualDisplayNameCell } from '.'
@@ -77,6 +78,39 @@ interface ExtendedGenericContent extends GenericContent {
   ColumnSettings?: string
 }
 
+interface snTableProps extends Partial<TableProps> {
+  /**
+   * Number of rows in table.
+   */
+  rowCount: number
+  /**
+   * Callback responsible for returning a data row given an index.
+   * ({ index: number }): any
+   */
+  rowHeight: number | ((params: Index) => number)
+  /** Fixed height of header row */
+  headerHeight: number
+  /**
+   * Callback responsible for returning a data row given an index.
+   * ({ index: number }): any
+   */
+  rowGetter: (info: Index) => any
+  /**
+   * Callback invoked when a user clicks on a table row.
+   * ({ index: number }): void
+   */
+  onRowClick?: (info: RowMouseEventHandlerParams) => void
+  /**
+   * Callback invoked when a user double-clicks on a table row.
+   * ({ index: number }): void
+   */
+  onRowDoubleClick?: (info: RowMouseEventHandlerParams) => void
+  /**
+   * Disable rendering the header at all
+   */
+  disableHeader?: boolean
+}
+
 interface VirtualizedTableProps<T extends GenericContent> extends ContentListBaseProps<T> {
   /**
    * Contains custom cell template components
@@ -94,43 +128,7 @@ interface VirtualizedTableProps<T extends GenericContent> extends ContentListBas
 
   handleColumnSettingsClick?: () => void
 
-  tableProps: {
-    autoHeight?: boolean
-
-    containerStyle?: React.CSSProperties
-
-
-    /**
-     * Number of rows in table.
-     */
-    rowCount: number
-    /**
-     * Callback responsible for returning a data row given an index.
-     * ({ index: number }): any
-     */
-    rowHeight: number | ((params: Index) => number)
-    /** Fixed height of header row */
-    headerHeight: number
-    /**
-     * Callback responsible for returning a data row given an index.
-     * ({ index: number }): any
-     */
-    rowGetter: (info: Index) => any
-    /**
-     * Callback invoked when a user clicks on a table row.
-     * ({ index: number }): void
-     */
-    onRowClick?: (info: RowMouseEventHandlerParams) => void
-    /**
-     * Callback invoked when a user double-clicks on a table row.
-     * ({ index: number }): void
-     */
-    onRowDoubleClick?: (info: RowMouseEventHandlerParams) => void
-    /**
-     * Disable rendering the header at all
-     */
-    disableHeader?: boolean
-  }
+  tableProps: snTableProps
 }
 
 const minColumnWith = (field: keyof ExtendedGenericContent) => {
@@ -386,14 +384,14 @@ export const VirtualizedTable = <T extends GenericContent = GenericContent>(prop
       {({ height, width }) => (
         <>
           <Table
+            {...tableProps}
             className={classes.root}
             height={height}
             width={width}
             gridStyle={{
               direction: 'inherit',
               outline: 'none',
             }}
-            {...tableProps}
             rowClassName={getRowClassName}>
             {currentFieldsToDisplay.map((field) => {
               const currentField = field.field