@centreon/ui 24.9.4 → 24.9.6

package/src/Listing/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 
-import { useAtomValue } from 'jotai';
+import * as React from 'react';
+
 import {
   concat,
   differenceWith,
@@ -9,7 +10,6 @@ import {
   findIndex,
   gt,
   gte,
-  identity,
   includes,
   isNil,
   last,
@@ -20,52 +20,49 @@ import {
   pick,
   prop,
   propEq,
-  reduce,
   reject,
   slice,
   subtract,
   uniqBy
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 
-import { Box, LinearProgress, Table, TableBody } from '@mui/material';
+import {
+  Box,
+  LinearProgress,
+  Table,
+  TableBody,
+  TableRow,
+  useTheme
+} from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import { ParentSize } from '..';
-import { useKeyObserver, useMemoComponent } from '../utils';
+import useKeyObserver from '../utils/useKeyObserver';
+import useMemoComponent from '../utils/useMemoComponent';
 
-import {
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
-import { EmptyResult } from './EmptyResult/EmptyResult';
-import { ListingHeader } from './Header';
-import { useListingStyles } from './Listing.styles';
-import ListingRow from './Row/Row';
-import { SkeletonLoader } from './Row/SkeletonLoaderRows';
+import getCumulativeOffset from './getCumulativeOffset';
+import ListingHeader, { headerHeight } from './Header/index';
 import {
   Column,
   ColumnConfiguration,
   PredefinedRowSelection,
   RowColorCondition,
   RowId,
-  SortOrder
+  SortOrder,
+  TableStyleAtom as TableStyle
 } from './models';
-import { subItemsPivotsAtom } from './tableAtoms';
+import ListingRow from './Row';
+import ListingLoadingSkeleton from './Skeleton';
 import { labelNoResultFound } from './translatedLabels';
+import useResizeObserver from './useResizeObserver';
 import useStyleTable from './useStyleTable';
 
-const subItemPrefixKey = 'listing';
-
 const getVisibleColumns = ({
   columnConfiguration,
   columns
@@ -76,11 +73,93 @@ const getVisibleColumns = ({
     return columns;
   }
 
-  return selectedColumnIds
-    .map((id) => columns.find(propEq(id, 'id')))
-    .filter(identity) as Array<Column>;
+  return selectedColumnIds.map((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;
@@ -101,18 +180,14 @@ 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;
@@ -121,7 +196,7 @@ export interface Props<TRow> {
   onRowClick?: (row: TRow) => void;
   onSelectColumns?: (selectedColumnIds: Array<string>) => void;
   onSelectRows?: (rows: Array<TRow>) => void;
-  onSort?: (sortParams: { sortField: string; sortOrder: SortOrder }) => void;
+  onSort?: (sortParams) => void;
   paginated?: boolean;
   predefinedRowsSelection?: Array<PredefinedRowSelection>;
   rowColorConditions?: Array<RowColorCondition>;
@@ -129,14 +204,8 @@ 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;
   widthToMoveTablePagination?: number;
 }
@@ -147,14 +216,11 @@ const defaultColumnConfiguration = {
 
 export const performanceRowsLimit = 60;
 
-const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
-  customListingComponent,
-  displayCustomListing,
+const Listing = <TRow extends { id: RowId }>({
   limit = 10,
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
-  isResponsive = false,
   onResetColumns,
   onSelectColumns,
   rows = [],
@@ -181,17 +247,10 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
   predefinedRowsSelection = [],
   actionsBarMemoProps = [],
   moveTablePagination,
-  listingVariant = ListingVariant.compact,
+  viewMode = ListingVariant.compact,
   widthToMoveTablePagination,
   getHighlightRowCondition,
-  viewerModeConfiguration,
-  subItems = {
-    canCheckSubItems: false,
-    enable: false,
-    getRowProperty: () => '',
-    labelCollapse: 'Collapse',
-    labelExpand: 'Expand'
-  }
+  viewerModeConfiguration
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -200,89 +259,37 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
   const { dataStyle, getGridTemplateColumn } = useStyleTable({
     checkable,
     currentVisibleColumns,
-    listingVariant
+    viewMode
   });
 
+  const { classes } = useStyles({
+    checkable,
+    currentVisibleColumns,
+    dataStyle,
+    getGridTemplateColumn,
+    rows,
+    viewMode
+  });
   const { t } = useTranslation();
 
-  const [hoveredRowId, setHoveredRowId] = useState<RowId | null>(null);
-  const [shiftKeyDownRowPivot, setShiftKeyDownRowPivot] = useState<
+  const [tableTopOffset, setTableTopOffset] = React.useState(0);
+  const [hoveredRowId, setHoveredRowId] = React.useState<RowId | null>(null);
+  const [shiftKeyDownRowPivot, setShiftKeyDownRowPivot] = React.useState<
     number | null
   >(null);
-  const [lastSelectionIndex, setLastSelectionIndex] = useState<number | null>(
-    null
-  );
-  const containerRef = useRef<HTMLDivElement>();
-  const actionBarRef = useRef<HTMLDivElement>();
-
-  const subItemsPivots = useAtomValue(subItemsPivotsAtom);
-
-  const allSubItemIds = useMemo(
-    () =>
-      reduce<TRow | number, Array<string | number>>(
-        (acc, row) => [
-          ...acc,
-          ...(row[subItems?.getRowProperty() || ''] || []).map(
-            ({ id }) => `${subItemPrefixKey}_${getId(row)}_${id}`
-          )
-        ],
-        [],
-        rows
-      ),
-    [rows, subItems]
-  );
-
-  const rowsToDisplay = 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]
-  );
+  const [lastSelectionIndex, setLastSelectionIndex] = React.useState<
+    number | null
+  >(null);
+  const containerRef = React.useRef<HTMLDivElement>();
+  const actionBarRef = React.useRef<HTMLDivElement>();
 
-  const getSubItemRowId = useCallback((row: TRow) => {
-    return `${subItemPrefixKey}_${row.internalListingParentId}_${row.id}`;
-  }, []);
+  const theme = useTheme();
 
-  const getIsSubItem = useCallback(
-    (row: TRow) => {
-      return allSubItemIds.includes(getSubItemRowId(row));
+  useResizeObserver({
+    onResize: () => {
+      setTableTopOffset(getCumulativeOffset(containerRef.current));
     },
-    [allSubItemIds]
-  );
-
-  const getRowId = useCallback(
-    (row: TRow) => {
-      return getIsSubItem(row) ? getSubItemRowId(row) : getId(row);
-    },
-    [allSubItemIds]
-  );
-
-  const { classes } = useListingStyles({
-    dataStyle,
-    getGridTemplateColumn,
-    isResponsive,
-    rows: rowsToDisplay
+    ref: containerRef
   });
 
   const { isShiftKeyDown } = useKeyObserver();
@@ -301,7 +308,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
       event.target.checked &&
       event.target.getAttribute('data-indeterminate') === 'false'
     ) {
-      onSelectRows(reject(disableRowCheckCondition, rowsToDisplay));
+      onSelectRows(reject(disableRowCheckCondition, rows));
       setLastSelectionIndex(null);
 
       return;
@@ -373,11 +380,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
   const selectRowsWithShiftKey = (selectedRowIndex: number): void => {
     const lastSelectedIndex = lastSelectionIndex as number;
     if (isNil(shiftKeyDownRowPivot)) {
-      const selectedRowsFromTheStart = slice(
-        0,
-        selectedRowIndex + 1,
-        rowsToDisplay
-      );
+      const selectedRowsFromTheStart = slice(0, selectedRowIndex + 1, rows);
 
       onSelectRows(reject(disableRowCheckCondition, selectedRowsFromTheStart));
 
@@ -386,10 +389,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
 
     const selectedRowsIndex = map(
       (row) =>
-        findIndex(
-          (listingRow) => equals(getId(row), getId(listingRow)),
-          rowsToDisplay
-        ),
+        findIndex((listingRow) => equals(getId(row), getId(listingRow)), rows),
       selectedRows
     ).sort(subtract);
 
@@ -397,7 +397,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
       const newSelection = slice(
         selectedRowIndex,
         (lastSelectionIndex as number) + 1,
-        rowsToDisplay
+        rows
       );
       onSelectRows(
         reject(
@@ -416,11 +416,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
       return;
     }
 
-    const newSelection = slice(
-      lastSelectedIndex,
-      selectedRowIndex + 1,
-      rowsToDisplay
-    );
+    const newSelection = slice(lastSelectedIndex, selectedRowIndex + 1, rows);
     onSelectRows(
       reject(
         disableRowCheckCondition,
@@ -436,7 +432,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
     );
   };
 
-  const selectRow = (event: MouseEvent, row): void => {
+  const selectRow = (event: React.MouseEvent, row): void => {
     event.preventDefault();
     event.stopPropagation();
     // This prevents unwanted text selection
@@ -444,7 +440,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
 
     const selectedRowIndex = findIndex(
       (listingRow) => equals(getId(row), getId(listingRow)),
-      rowsToDisplay
+      rows
     );
 
     if (isShiftKeyDown) {
@@ -471,10 +467,10 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
   };
 
   const hoverRow = (row): void => {
-    if (equals(hoveredRowId, getRowId(row))) {
+    if (equals(hoveredRowId, getId(row))) {
       return;
     }
-    setHoveredRowId(getRowId(row));
+    setHoveredRowId(getId(row));
   };
 
   const clearHoveredRow = (): void => {
@@ -485,6 +481,20 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: 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));
   };
@@ -494,7 +504,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
     columns
   });
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (not(isShiftKeyDown)) {
       setShiftKeyDownRowPivot(null);
 
@@ -506,7 +516,7 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
   const areColumnsEditable = not(isNil(onSelectColumns));
 
   return (
-    <div className={classes.listingContainer}>
+    <>
       {loading && rows.length > 0 && (
         <LinearProgress className={classes.loadingIndicator} />
       )}
@@ -515,11 +525,11 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
       )}
       <div
         className={classes.container}
-        ref={containerRef as RefObject<HTMLDivElement>}
+        ref={containerRef as React.RefObject<HTMLDivElement>}
       >
         <div
           className={classes.actionBar}
-          ref={actionBarRef as RefObject<HTMLDivElement>}
+          ref={actionBarRef as React.RefObject<HTMLDivElement>}
         >
           <ListingActionBar
             actions={actions}
@@ -529,10 +539,10 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
             currentPage={currentPage}
             customPaginationClassName={customPaginationClassName}
             limit={limit}
-            listingVariant={listingVariant}
             moveTablePagination={moveTablePagination}
             paginated={paginated}
             totalRows={totalRows}
+            viewMode={viewMode}
             viewerModeConfiguration={viewerModeConfiguration}
             widthToMoveTablePagination={widthToMoveTablePagination}
             onLimitChange={changeLimit}
@@ -541,167 +551,141 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
             onSelectColumns={onSelectColumns}
           />
         </div>
-
-        <ParentSize
-          parentSizeStyles={{
-            height: '100%',
-            overflowY: 'auto',
-            width: '100%'
+        <Box
+          className={classes.tableWrapper}
+          component="div"
+          style={{
+            maxHeight: tableMaxHeight()
           }}
         >
-          {({ height }) => (
-            <Box
-              className={classes.tableWrapper}
+          <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}
               component="div"
-              style={{
-                height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
-              }}
+              onMouseLeave={clearHoveredRow}
             >
-              {displayCustomListing ? (
-                customListingComponent
-              ) : (
-                <Table
-                  stickyHeader
-                  className={classes.table}
-                  component="div"
-                  size="small"
-                >
-                  <ListingHeader
-                    areColumnsEditable={areColumnsEditable}
+              {rows.map((row, index) => {
+                const isRowSelected = isSelected(row);
+
+                const isRowHovered = equals(hoveredRowId, getId(row));
+
+                return (
+                  <ListingRow
                     checkable={checkable}
                     columnConfiguration={columnConfiguration}
-                    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}
+                    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)}
                   >
-                    {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)
-                          }
-                          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);
-                                }
+                    {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)
                           }
-                          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>
+                          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>
               )}
-            </Box>
-          )}
-        </ParentSize>
+            </TableBody>
+          </Table>
+        </Box>
       </div>
-    </div>
+    </>
   );
 };
 
@@ -727,7 +711,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
   columnConfiguration,
   moveTablePagination,
   widthToMoveTablePagination,
-  listingVariant,
+  viewMode,
   ...props
 }: MemoizedListingProps<TRow>): JSX.Element =>
   useMemoComponent({
@@ -739,7 +723,6 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         currentPage={currentPage}
         innerScrollDisabled={innerScrollDisabled}
         limit={limit}
-        listingVariant={listingVariant}
         loading={loading}
         moveTablePagination={moveTablePagination}
         paginated={paginated}
@@ -749,6 +732,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         sortField={sortField}
         sortOrder={sortOrder}
         totalRows={totalRows}
+        viewMode={viewMode}
         widthToMoveTablePagination={widthToMoveTablePagination}
         {...props}
       />
@@ -772,7 +756,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
       sortOrder,
       sortField,
       innerScrollDisabled,
-      listingVariant
+      viewMode
     ]
   });