@centreon/ui 24.5.12 → 24.5.13

package/src/Listing/index.tsx

@@ -20,48 +20,44 @@ import {
   pick,
   prop,
   propEq,
+  reduce,
   reject,
   slice,
   subtract,
   uniqBy
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
+import { useAtomValue } from 'jotai';
 
-import {
-  Box,
-  LinearProgress,
-  Table,
-  TableBody,
-  TableRow,
-  useTheme
-} from '@mui/material';
+import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import useKeyObserver from '../utils/useKeyObserver';
-import useMemoComponent from '../utils/useMemoComponent';
+import { useKeyObserver, useMemoComponent } from '../utils';
+import { ParentSize } from '..';
 
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
-import getCumulativeOffset from './getCumulativeOffset';
-import ListingHeader, { headerHeight } from './Header/index';
 import {
   Column,
   ColumnConfiguration,
   PredefinedRowSelection,
   RowColorCondition,
   RowId,
-  SortOrder,
-  TableStyleAtom as TableStyle
+  SortOrder
 } from './models';
-import ListingRow from './Row';
-import ListingLoadingSkeleton from './Skeleton';
+import ListingRow from './Row/Row';
 import { labelNoResultFound } from './translatedLabels';
-import useResizeObserver from './useResizeObserver';
 import useStyleTable from './useStyleTable';
+import { useListingStyles } from './Listing.styles';
+import { EmptyResult } from './EmptyResult/EmptyResult';
+import { SkeletonLoader } from './Row/SkeletonLoaderRows';
+import { ListingHeader } from './Header';
+import { subItemsPivotsAtom } from './tableAtoms';
+
+const subItemPrefixKey = 'listing';
 
 const getVisibleColumns = ({
   columnConfiguration,
@@ -74,92 +70,10 @@ const getVisibleColumns = ({
   }
 
   return selectedColumnIds.map((id) =>
-    columns.find(propEq('id', id))
+    columns.find(propEq(id, 'id'))
   ) as Array<Column>;
 };
 
-const loadingIndicatorHeight = 3;
-
-interface StylesProps {
-  checkable: boolean;
-  currentVisibleColumns: Array<Column>;
-  dataStyle: TableStyle;
-  getGridTemplateColumn: string;
-  rows: Array<unknown>;
-  viewMode: ListingVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (
-    theme,
-    { dataStyle, getGridTemplateColumn, rows, checkable, currentVisibleColumns }
-  ) => ({
-    actionBar: {
-      alignItems: 'center',
-      display: 'flex'
-    },
-    checkbox: {
-      justifyContent: 'start'
-    },
-    container: {
-      background: 'none',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      width: '100%'
-    },
-    emptyDataCell: {
-      flexDirection: 'column',
-      gridColumn: `auto / span ${
-        checkable
-          ? currentVisibleColumns.length + 1
-          : currentVisibleColumns.length
-      }`,
-      justifyContent: 'center'
-    },
-    emptyDataRow: {
-      display: 'contents'
-    },
-    loadingIndicator: {
-      height: loadingIndicatorHeight,
-      width: '100%'
-    },
-    table: {
-      '.listingHeader > div > div:first-of-type': {
-        paddingLeft: theme.spacing(1.5)
-      },
-      '.listingHeader div div': {
-        backgroundColor: theme.palette.background.listingHeader,
-        boxShadow: `-1px 0px 0px 0px ${theme.palette.background.listingHeader}`,
-        height: dataStyle.header.height,
-        padding: 0
-      },
-      alignItems: 'center',
-      display: 'grid',
-      gridTemplateColumns: getGridTemplateColumn,
-      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length
-      }, ${dataStyle.body.height}px)`,
-      position: 'relative'
-    },
-    tableBody: {
-      '.MuiTableRow-root > div:first-of-type': {
-        paddingLeft: theme.spacing(1.5)
-      },
-
-      display: 'contents',
-      'div:first-of-type': {
-        gridColumnStart: 1
-      },
-      position: 'relative'
-    },
-    tableWrapper: {
-      borderBottom: 'none',
-      overflow: 'auto'
-    }
-  })
-);
-
 interface CustomStyle {
   customStyleViewerModeContainer?: string;
   customStyleViewerModeIcon?: string;
@@ -180,14 +94,18 @@ export interface Props<TRow> {
   columnConfiguration?: ColumnConfiguration;
   columns: Array<Column>;
   currentPage?: number;
+  customListingComponent?: JSX.Element;
   customPaginationClassName?: string;
   disableRowCheckCondition?: (row) => boolean;
   disableRowCondition?: (row) => boolean;
+  displayCustomListing?: boolean;
   getHighlightRowCondition?: (row: TRow) => boolean;
   getId?: (row: TRow) => RowId;
   headerMemoProps?: Array<unknown>;
   innerScrollDisabled?: boolean;
+  isResponsive?: boolean;
   limit?: number;
+  listingVariant?: ListingVariant;
   loading?: boolean;
   moveTablePagination?: boolean;
   onLimitChange?: (limit) => void;
@@ -196,7 +114,7 @@ export interface Props<TRow> {
   onRowClick?: (row: TRow) => void;
   onSelectColumns?: (selectedColumnIds: Array<string>) => void;
   onSelectRows?: (rows: Array<TRow>) => void;
-  onSort?: (sortParams) => void;
+  onSort?: (sortParams: { sortField: string; sortOrder: SortOrder }) => void;
   paginated?: boolean;
   predefinedRowsSelection?: Array<PredefinedRowSelection>;
   rowColorConditions?: Array<RowColorCondition>;
@@ -204,9 +122,16 @@ export interface Props<TRow> {
   selectedRows?: Array<TRow>;
   sortField?: string;
   sortOrder?: SortOrder;
+  subItems?: {
+    canCheckSubItems: boolean;
+    enable: boolean;
+    getRowProperty: (row?) => string;
+    labelCollapse: string;
+    labelExpand: string;
+  };
   totalRows?: number;
-  viewMode?: ListingVariant;
   viewerModeConfiguration?: ViewerModeConfiguration;
+  visualizationActions?: JSX.Element;
   widthToMoveTablePagination?: number;
 }
 
@@ -216,11 +141,15 @@ const defaultColumnConfiguration = {
 
 export const performanceRowsLimit = 60;
 
-const Listing = <TRow extends { id: RowId }>({
+const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
+  customListingComponent,
+  displayCustomListing,
   limit = 10,
+  visualizationActions,
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
+  isResponsive = false,
   onResetColumns,
   onSelectColumns,
   rows = [],
@@ -247,10 +176,17 @@ const Listing = <TRow extends { id: RowId }>({
   predefinedRowsSelection = [],
   actionsBarMemoProps = [],
   moveTablePagination,
-  viewMode = ListingVariant.compact,
+  listingVariant = ListingVariant.compact,
   widthToMoveTablePagination,
   getHighlightRowCondition,
-  viewerModeConfiguration
+  viewerModeConfiguration,
+  subItems = {
+    canCheckSubItems: false,
+    enable: false,
+    getRowProperty: () => '',
+    labelCollapse: 'Collapse',
+    labelExpand: 'Expand'
+  }
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -259,20 +195,11 @@ const Listing = <TRow extends { id: RowId }>({
   const { dataStyle, getGridTemplateColumn } = useStyleTable({
     checkable,
     currentVisibleColumns,
-    viewMode
+    listingVariant
   });
 
-  const { classes } = useStyles({
-    checkable,
-    currentVisibleColumns,
-    dataStyle,
-    getGridTemplateColumn,
-    rows,
-    viewMode
-  });
   const { t } = useTranslation();
 
-  const [tableTopOffset, setTableTopOffset] = React.useState(0);
   const [hoveredRowId, setHoveredRowId] = React.useState<RowId | null>(null);
   const [shiftKeyDownRowPivot, setShiftKeyDownRowPivot] = React.useState<
     number | null
@@ -283,13 +210,74 @@ const Listing = <TRow extends { id: RowId }>({
   const containerRef = React.useRef<HTMLDivElement>();
   const actionBarRef = React.useRef<HTMLDivElement>();
 
-  const theme = useTheme();
+  const subItemsPivots = useAtomValue(subItemsPivotsAtom);
+
+  const allSubItemIds = React.useMemo(
+    () =>
+      reduce<TRow | number, Array<string | number>>(
+        (acc, row) => [
+          ...acc,
+          ...(row[subItems?.getRowProperty() || ''] || []).map(
+            ({ id }) => `${subItemPrefixKey}_${getId(row)}_${id}`
+          )
+        ],
+        [],
+        rows
+      ),
+    [rows, subItems]
+  );
+
+  const rowsToDisplay = React.useMemo(
+    () =>
+      subItems?.enable
+        ? reduce<TRow, Array<TRow>>(
+            (acc, row): Array<TRow> => {
+              if (
+                row[subItems.getRowProperty()] &&
+                subItemsPivots.includes(row.id)
+              ) {
+                return [
+                  ...acc,
+                  row,
+                  ...row[subItems.getRowProperty()].map((subRow) => ({
+                    ...subRow,
+                    internalListingParentId: row.id
+                  }))
+                ];
+              }
+
+              return [...acc, row];
+            },
+            [],
+            rows
+          )
+        : rows,
+    [rows, subItemsPivots, subItems]
+  );
 
-  useResizeObserver({
-    onResize: () => {
-      setTableTopOffset(getCumulativeOffset(containerRef.current));
+  const getSubItemRowId = React.useCallback((row: TRow) => {
+    return `${subItemPrefixKey}_${row.internalListingParentId}_${row.id}`;
+  }, []);
+
+  const getIsSubItem = React.useCallback(
+    (row: TRow) => {
+      return allSubItemIds.includes(getSubItemRowId(row));
+    },
+    [allSubItemIds]
+  );
+
+  const getRowId = React.useCallback(
+    (row: TRow) => {
+      return getIsSubItem(row) ? getSubItemRowId(row) : getId(row);
     },
-    ref: containerRef
+    [allSubItemIds]
+  );
+
+  const { classes } = useListingStyles({
+    dataStyle,
+    getGridTemplateColumn,
+    isResponsive,
+    rows: rowsToDisplay
   });
 
   const { isShiftKeyDown } = useKeyObserver();
@@ -308,7 +296,7 @@ const Listing = <TRow extends { id: RowId }>({
       event.target.checked &&
       event.target.getAttribute('data-indeterminate') === 'false'
     ) {
-      onSelectRows(reject(disableRowCheckCondition, rows));
+      onSelectRows(reject(disableRowCheckCondition, rowsToDisplay));
       setLastSelectionIndex(null);
 
       return;
@@ -380,7 +368,11 @@ const Listing = <TRow extends { id: RowId }>({
   const selectRowsWithShiftKey = (selectedRowIndex: number): void => {
     const lastSelectedIndex = lastSelectionIndex as number;
     if (isNil(shiftKeyDownRowPivot)) {
-      const selectedRowsFromTheStart = slice(0, selectedRowIndex + 1, rows);
+      const selectedRowsFromTheStart = slice(
+        0,
+        selectedRowIndex + 1,
+        rowsToDisplay
+      );
 
       onSelectRows(reject(disableRowCheckCondition, selectedRowsFromTheStart));
 
@@ -389,7 +381,10 @@ const Listing = <TRow extends { id: RowId }>({
 
     const selectedRowsIndex = map(
       (row) =>
-        findIndex((listingRow) => equals(getId(row), getId(listingRow)), rows),
+        findIndex(
+          (listingRow) => equals(getId(row), getId(listingRow)),
+          rowsToDisplay
+        ),
       selectedRows
     ).sort(subtract);
 
@@ -397,7 +392,7 @@ const Listing = <TRow extends { id: RowId }>({
       const newSelection = slice(
         selectedRowIndex,
         (lastSelectionIndex as number) + 1,
-        rows
+        rowsToDisplay
       );
       onSelectRows(
         reject(
@@ -416,7 +411,11 @@ const Listing = <TRow extends { id: RowId }>({
       return;
     }
 
-    const newSelection = slice(lastSelectedIndex, selectedRowIndex + 1, rows);
+    const newSelection = slice(
+      lastSelectedIndex,
+      selectedRowIndex + 1,
+      rowsToDisplay
+    );
     onSelectRows(
       reject(
         disableRowCheckCondition,
@@ -440,7 +439,7 @@ const Listing = <TRow extends { id: RowId }>({
 
     const selectedRowIndex = findIndex(
       (listingRow) => equals(getId(row), getId(listingRow)),
-      rows
+      rowsToDisplay
     );
 
     if (isShiftKeyDown) {
@@ -467,10 +466,10 @@ const Listing = <TRow extends { id: RowId }>({
   };
 
   const hoverRow = (row): void => {
-    if (equals(hoveredRowId, getId(row))) {
+    if (equals(hoveredRowId, getRowId(row))) {
       return;
     }
-    setHoveredRowId(getId(row));
+    setHoveredRowId(getRowId(row));
   };
 
   const clearHoveredRow = (): void => {
@@ -481,20 +480,6 @@ const Listing = <TRow extends { id: RowId }>({
     return selectedRowsInclude(row);
   };
 
-  const emptyRows = limit - Math.min(limit, totalRows - currentPage * limit);
-
-  const tableMaxHeight = (): string => {
-    if (innerScrollDisabled) {
-      return '100%';
-    }
-
-    return `calc(100vh - ${tableTopOffset}px - ${
-      actionBarRef.current?.offsetHeight
-    }px - ${headerHeight}px - ${loadingIndicatorHeight}px - ${theme.spacing(
-      1
-    )})`;
-  };
-
   const changeLimit = (updatedLimit: string): void => {
     onLimitChange?.(Number(updatedLimit));
   };
@@ -516,7 +501,7 @@ const Listing = <TRow extends { id: RowId }>({
   const areColumnsEditable = not(isNil(onSelectColumns));
 
   return (
-    <>
+    <div className={classes.listingContainer}>
       {loading && rows.length > 0 && (
         <LinearProgress className={classes.loadingIndicator} />
       )}
@@ -539,11 +524,12 @@ const Listing = <TRow extends { id: RowId }>({
             currentPage={currentPage}
             customPaginationClassName={customPaginationClassName}
             limit={limit}
+            listingVariant={listingVariant}
             moveTablePagination={moveTablePagination}
             paginated={paginated}
             totalRows={totalRows}
-            viewMode={viewMode}
             viewerModeConfiguration={viewerModeConfiguration}
+            visualizationActions={visualizationActions}
             widthToMoveTablePagination={widthToMoveTablePagination}
             onLimitChange={changeLimit}
             onPaginate={onPaginate}
@@ -551,141 +537,168 @@ const Listing = <TRow extends { id: RowId }>({
             onSelectColumns={onSelectColumns}
           />
         </div>
-        <Box
-          className={classes.tableWrapper}
-          component="div"
-          style={{
-            maxHeight: tableMaxHeight()
+
+        <ParentSize
+          parentSizeStyles={{
+            height: '100%',
+            overflowY: 'auto',
+            width: '100%'
           }}
         >
-          <Table
-            stickyHeader
-            className={classes.table}
-            component="div"
-            role={undefined}
-            size="small"
-          >
-            <ListingHeader
-              areColumnsEditable={areColumnsEditable}
-              checkable={checkable}
-              columnConfiguration={columnConfiguration}
-              columns={columns}
-              memoProps={headerMemoProps}
-              predefinedRowsSelection={predefinedRowsSelection}
-              rowCount={limit - emptyRows}
-              selectedRowCount={selectedRows.length}
-              sortField={sortField}
-              sortOrder={sortOrder}
-              viewMode={viewMode}
-              onSelectAllClick={selectAllRows}
-              onSelectColumns={onSelectColumns}
-              onSelectRowsWithCondition={onSelectRowsWithCondition}
-              onSort={onSort}
-            />
-
-            <TableBody
-              className={classes.tableBody}
+          {({ height }) => (
+            <Box
+              className={classes.tableWrapper}
               component="div"
-              onMouseLeave={clearHoveredRow}
+              style={{
+                height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
+              }}
             >
-              {rows.map((row, index) => {
-                const isRowSelected = isSelected(row);
-
-                const isRowHovered = equals(hoveredRowId, getId(row));
-
-                return (
-                  <ListingRow
+              {displayCustomListing ? (
+                customListingComponent
+              ) : (
+                <Table
+                  stickyHeader
+                  className={classes.table}
+                  component="div"
+                  role={undefined}
+                  size="small"
+                >
+                  <ListingHeader
+                    areColumnsEditable={areColumnsEditable}
                     checkable={checkable}
                     columnConfiguration={columnConfiguration}
-                    columnIds={columns.map(prop('id'))}
-                    disableRowCondition={disableRowCondition}
-                    isHovered={isRowHovered}
-                    isSelected={isRowSelected}
-                    isShiftKeyDown={isShiftKeyDown}
-                    key={
-                      gte(limit, performanceRowsLimit)
-                        ? `row_${index}`
-                        : getId(row)
-                    }
-                    lastSelectionIndex={lastSelectionIndex}
-                    limit={limit}
-                    row={row}
-                    rowColorConditions={rowColorConditions}
-                    shiftKeyDownRowPivot={shiftKeyDownRowPivot}
-                    tabIndex={-1}
-                    viewMode={viewMode}
-                    visibleColumns={visibleColumns}
-                    onClick={(): void => {
-                      onRowClick(row);
-                    }}
-                    onFocus={(): void => hoverRow(row)}
-                    onMouseOver={(): void => hoverRow(row)}
+                    columns={columns}
+                    listingVariant={listingVariant}
+                    memoProps={headerMemoProps}
+                    predefinedRowsSelection={predefinedRowsSelection}
+                    rowCount={rowsToDisplay.length}
+                    selectedRowCount={selectedRows.length}
+                    sortField={sortField}
+                    sortOrder={sortOrder}
+                    onSelectAllClick={selectAllRows}
+                    onSelectColumns={onSelectColumns}
+                    onSelectRowsWithCondition={onSelectRowsWithCondition}
+                    onSort={onSort}
+                  />
+
+                  <TableBody
+                    className={classes.tableBody}
+                    component="div"
+                    onMouseLeave={clearHoveredRow}
                   >
-                    {checkable && (
-                      <Cell
-                        align="left"
-                        className={classes.checkbox}
-                        disableRowCondition={disableRowCondition}
-                        isRowHovered={isRowHovered}
-                        row={row}
-                        rowColorConditions={rowColorConditions}
-                        onClick={(event): void => selectRow(event, row)}
-                      >
-                        <Checkbox
-                          checked={isRowSelected}
-                          disabled={
-                            disableRowCheckCondition(row) ||
-                            disableRowCondition(row)
+                    {rowsToDisplay.map((row, index) => {
+                      const isRowSelected = isSelected(row);
+                      const isSubItem = allSubItemIds.includes(
+                        getSubItemRowId(row)
+                      );
+                      const isRowHovered = equals(hoveredRowId, getRowId(row));
+
+                      return (
+                        <ListingRow
+                          checkable={
+                            checkable &&
+                            (!isSubItem || subItems.canCheckSubItems)
                           }
-                          inputProps={{
-                            'aria-label': `Select row ${getId(row)}`
-                          }}
-                        />
-                      </Cell>
-                    )}
-
-                    {visibleColumns.map((column) => (
-                      <DataCell
-                        areColumnsEditable={areColumnsEditable}
-                        column={column}
-                        disableRowCondition={disableRowCondition}
-                        getHighlightRowCondition={getHighlightRowCondition}
-                        isRowHovered={isRowHovered}
-                        isRowSelected={isRowSelected}
-                        key={`${getId(row)}-${column.id}`}
-                        row={row}
-                        rowColorConditions={rowColorConditions}
-                        viewMode={viewMode}
-                      />
-                    ))}
-                  </ListingRow>
-                );
-              })}
-              {rows.length < 1 && (
-                <TableRow
-                  className={classes.emptyDataRow}
-                  component="div"
-                  tabIndex={-1}
-                >
-                  <Cell
-                    align="center"
-                    className={classes.emptyDataCell}
-                    disableRowCondition={(): boolean => false}
-                    isRowHovered={false}
-                  >
-                    {loading ? (
-                      <ListingLoadingSkeleton />
-                    ) : (
-                      t(labelNoResultFound)
-                    )}
-                  </Cell>
-                </TableRow>
+                          columnConfiguration={columnConfiguration}
+                          columnIds={columns.map(prop('id'))}
+                          disableRowCondition={disableRowCondition}
+                          isHovered={isRowHovered}
+                          isSelected={isRowSelected}
+                          isShiftKeyDown={isShiftKeyDown}
+                          key={
+                            gte(limit, performanceRowsLimit)
+                              ? `row_${index}`
+                              : getRowId(row)
+                          }
+                          lastSelectionIndex={lastSelectionIndex}
+                          limit={limit}
+                          listingVariant={listingVariant}
+                          row={row}
+                          rowColorConditions={rowColorConditions}
+                          shiftKeyDownRowPivot={shiftKeyDownRowPivot}
+                          subItemsPivots={subItemsPivots}
+                          tabIndex={-1}
+                          visibleColumns={visibleColumns}
+                          onClick={
+                            isSubItem
+                              ? undefined
+                              : (): void => {
+                                  onRowClick(row);
+                                }
+                          }
+                          onFocus={(): void => hoverRow(row)}
+                          onMouseOver={(): void => hoverRow(row)}
+                        >
+                          {checkable &&
+                            (!isSubItem || subItems.canCheckSubItems ? (
+                              <Cell
+                                align="left"
+                                className={classes.checkbox}
+                                disableRowCondition={disableRowCondition}
+                                isRowHovered={isRowHovered}
+                                row={row}
+                                rowColorConditions={rowColorConditions}
+                                onClick={(event): void => selectRow(event, row)}
+                              >
+                                <Checkbox
+                                  checked={isRowSelected}
+                                  disabled={
+                                    disableRowCheckCondition(row) ||
+                                    disableRowCondition(row)
+                                  }
+                                  inputProps={{
+                                    'aria-label': `Select row ${getId(row)}`
+                                  }}
+                                />
+                              </Cell>
+                            ) : (
+                              <Cell
+                                align="left"
+                                disableRowCondition={disableRowCondition}
+                                isRowHovered={isRowHovered}
+                                row={row}
+                                rowColorConditions={rowColorConditions}
+                              />
+                            ))}
+
+                          {visibleColumns.map((column) => (
+                            <DataCell
+                              column={column}
+                              disableRowCondition={disableRowCondition}
+                              getHighlightRowCondition={
+                                getHighlightRowCondition
+                              }
+                              isRowHovered={isRowHovered}
+                              isRowSelected={isRowSelected}
+                              key={`${getId(row)}-${column.id}`}
+                              labelCollapse={subItems.labelCollapse}
+                              labelExpand={subItems.labelExpand}
+                              listingVariant={listingVariant}
+                              row={row}
+                              rowColorConditions={rowColorConditions}
+                              subItemsRowProperty={subItems?.getRowProperty(
+                                row
+                              )}
+                            />
+                          ))}
+                        </ListingRow>
+                      );
+                    })}
+
+                    {rows.length < 1 &&
+                      (loading ? (
+                        <SkeletonLoader rows={limit} />
+                      ) : (
+                        <EmptyResult label={t(labelNoResultFound)} />
+                      ))}
+                  </TableBody>
+                </Table>
               )}
-            </TableBody>
-          </Table>
-        </Box>
+            </Box>
+          )}
+        </ParentSize>
       </div>
-    </>
+    </div>
   );
 };
 
@@ -711,7 +724,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
   columnConfiguration,
   moveTablePagination,
   widthToMoveTablePagination,
-  viewMode,
+  listingVariant,
   ...props
 }: MemoizedListingProps<TRow>): JSX.Element =>
   useMemoComponent({
@@ -723,6 +736,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         currentPage={currentPage}
         innerScrollDisabled={innerScrollDisabled}
         limit={limit}
+        listingVariant={listingVariant}
         loading={loading}
         moveTablePagination={moveTablePagination}
         paginated={paginated}
@@ -732,7 +746,6 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         sortField={sortField}
         sortOrder={sortOrder}
         totalRows={totalRows}
-        viewMode={viewMode}
         widthToMoveTablePagination={widthToMoveTablePagination}
         {...props}
       />
@@ -756,7 +769,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
       sortOrder,
       sortField,
       innerScrollDisabled,
-      viewMode
+      listingVariant
     ]
   });