@centreon/ui 23.10.40 → 23.10.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.40",
+  "version": "23.10.42",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -56,6 +56,7 @@
     "@storybook/addon-essentials": "^7.0.9",
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-styling": "^1.0.6",
+    "@storybook/blocks": "^7.0.26",
     "@storybook/builder-vite": "^7.0.9",
     "@storybook/jest": "^0.1.0",
     "@storybook/manager-api": "^7.0.9",

package/src/Listing/Cell/DataCell.tsx

@@ -25,8 +25,11 @@ interface Props {
   getHighlightRowCondition?: (row) => boolean;
   isRowHovered: boolean;
   isRowSelected: boolean;
+  labelCollapse?: string;
+  labelExpand?: string;
   row?;
   rowColorConditions?: Array<RowColorCondition>;
+  subItemsRowProperty?: string;
   viewMode?: ListingVariant;
 }
 
@@ -38,16 +41,23 @@ const DataCell = ({
   rowColorConditions,
   disableRowCondition,
   viewMode,
-  getHighlightRowCondition
+  getHighlightRowCondition,
+  subItemsRowProperty,
+  labelCollapse,
+  labelExpand
 }: Props): JSX.Element | null => {
   const { classes } = useStyles();
   const { dataStyle } = useStyleTable({ viewMode });
 
   const commonCellProps = {
     disableRowCondition,
+    displaySubItemsCaret: column.displaySubItemsCaret,
     isRowHovered,
+    labelCollapse,
+    labelExpand,
     row,
-    rowColorConditions
+    rowColorConditions,
+    subItemsRowProperty
   };
 
   const isRowHighlighted = getHighlightRowCondition?.(row);
@@ -106,7 +116,7 @@ const DataCell = ({
           isRowHighlighted={isRowHighlighted}
           viewMode={viewMode}
           onClick={(e): void => {
-            if (!clickable) {
+            if (!clickable || !column.displaySubItemsCaret) {
               return;
             }
             e.preventDefault();
@@ -223,6 +233,7 @@ const MemoizedDataCell = memo<Props>(
       : nextProps.row;
 
     return (
+      equals(prevProps.row, nextProps.row) &&
       equals(previousIsComponentHovered, nextIsComponentHovered) &&
       equals(prevProps.isRowHovered, nextProps.isRowHovered) &&
       equals(previousFormattedString, nextFormattedString) &&
@@ -244,7 +255,8 @@ const MemoizedDataCell = memo<Props>(
         nextProps.disableRowCondition(nextProps.row)
       ) &&
       equals(previousIsRowHighlighted, nextIsRowHighlighted) &&
-      equals(prevProps.viewMode, nextProps.viewMode) // &&
+      equals(prevProps.viewMode, nextProps.viewMode) &&
+      equals(prevProps.subItemsRowProperty, nextProps.subItemsRowProperty)
     );
   }
 );

package/src/Listing/Cell/index.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 
-import { isNil, omit } from 'ramda';
+import { append, equals, includes, isNil, omit, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 import { CSSObject } from 'tss-react';
+import { useAtom } from 'jotai';
 
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import {
   alpha,
   TableCell,
@@ -14,7 +16,9 @@ import {
 
 import { ListingVariant } from '@centreon/ui-context';
 
+import { IconButton } from '../..';
 import { getTextStyleByViewMode } from '../useStyleTable';
+import { subItemsPivotsAtom } from '../tableAtoms';
 
 import { Props as DataCellProps } from './DataCell';
 
@@ -80,6 +84,20 @@ const useStyles = makeStyles<StylesProps>()(
       viewMode
     }
   ) => ({
+    caret: {
+      transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.short
+      })
+    },
+    caretLess: {
+      transform: 'rotate3d(0,0,1,180deg)'
+    },
+    caretMore: {
+      transform: 'rotate3d(0,0,1,0deg)'
+    },
+    fakeCaret: {
+      marginLeft: theme.spacing(3)
+    },
     root: {
       alignItems: 'center',
       backgroundColor: getBackgroundColor({
@@ -111,15 +129,57 @@ interface Props
       'isRowHovered' | 'row' | 'rowColorConditions' | 'disableRowCondition'
     >,
     TableCellProps {
+  displaySubItemsCaret?: boolean;
   isRowHighlighted?: boolean;
+  labelCollapse?: string;
+  labelExpand?: string;
+  subItemsRowProperty?: string;
   viewMode?: ListingVariant;
 }
 
-const Cell = (props: Props): JSX.Element => {
+const isPivotExistInTheList = (
+  id
+): ((list: Array<number | string>) => boolean) => includes(id);
+
+const handleSubItems = ({
+  currentSubItemsPivots,
+  id
+}): Array<number | string> => {
+  if (isPivotExistInTheList(id)(currentSubItemsPivots)) {
+    return reject(equals(id), currentSubItemsPivots);
+  }
+
+  return append(id, currentSubItemsPivots);
+};
+
+const Cell = ({
+  displaySubItemsCaret,
+  subItemsRowProperty,
+  labelCollapse,
+  labelExpand,
+  ...props
+}: Props): JSX.Element => {
   const { classes, cx } = useStyles(props);
 
+  const [subItemsPivots, setSubItemsPivots] = useAtom(subItemsPivotsAtom);
+
   const { children } = props;
 
+  const rowId = props.row?.id;
+
+  const click = (e): void => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setSubItemsPivots((currentSubItemsPivots) =>
+      handleSubItems({ currentSubItemsPivots, id: rowId })
+    );
+  };
+
+  const isSubItemsExpanded = isPivotExistInTheList(rowId)(subItemsPivots);
+
+  const hasSubItems = subItemsRowProperty && props.row[subItemsRowProperty];
+
   return (
     <TableCell
       classes={{
@@ -138,6 +198,26 @@ const Cell = (props: Props): JSX.Element => {
         props
       )}
     >
+      {displaySubItemsCaret &&
+        (hasSubItems ? (
+          <IconButton
+            ariaLabel={`${isSubItemsExpanded ? labelCollapse : labelExpand} ${
+              props.row.id
+            }`}
+            size="small"
+            onClick={click}
+          >
+            <ExpandMoreIcon
+              className={cx(
+                classes.caret,
+                isSubItemsExpanded ? classes.caretMore : classes.caretLess
+              )}
+              fontSize="small"
+            />
+          </IconButton>
+        ) : (
+          <div className={classes.fakeCaret} />
+        ))}
       {children}
     </TableCell>
   );

package/src/Listing/Listing.cypress.spec.tsx

@@ -0,0 +1,120 @@
+import { Button } from '@mui/material';
+
+import { ColumnType } from './models';
+
+import Listing from '.';
+
+interface Props {
+  row: { name: string };
+}
+
+const ButtonColumn = ({ row }: Props): JSX.Element => (
+  <Button size="small">Click to reveal details about {row.name}</Button>
+);
+
+const generateSubItems = (parentIndex: number): Array<unknown> => {
+  return tenElements.map((__, subIndex) => ({
+    active: false,
+    description: `Sub item ${subIndex + (parentIndex + 10) * 10} description`,
+    disableCheckbox: false,
+    disableRow: false,
+    id: subIndex + (parentIndex + 10) * 10,
+    name: `Sub Item ${subIndex + (parentIndex + 10) * 10}`,
+    selected: false
+  }));
+};
+
+const tenElements = new Array(10).fill(0);
+
+const listingWithSubItems = tenElements.map((_, index) => ({
+  active: false,
+  description: `Entity ${index}`,
+  disableCheckbox: false,
+  disableRow: false,
+  id: index,
+  name: `E${index}`,
+  selected: false,
+  subItems: index % 2 === 0 ? generateSubItems(index) : undefined
+}));
+
+const columnsWithSubItems = [
+  {
+    getFormattedString: ({ name }): string => name,
+    id: 'name',
+    label: 'Name',
+    type: ColumnType.string
+  },
+  {
+    getFormattedString: ({ description }): string => description,
+    id: 'description',
+    label: 'Description',
+    type: ColumnType.string
+  },
+  {
+    Component: ButtonColumn,
+    displaySubItemsCaret: true,
+    id: '#',
+    label: 'Custom',
+    type: ColumnType.component,
+    width: '350px'
+  }
+];
+
+const expandedItems = [0, 8];
+
+const mountListing = (): void => {
+  cy.viewport('macbook-13');
+
+  cy.mount({
+    Component: (
+      <Listing
+        checkable
+        columns={columnsWithSubItems}
+        currentPage={1}
+        limit={10}
+        rows={listingWithSubItems}
+        subItems={{
+          canCheckSubItems: false,
+          enable: true,
+          labelCollapse: 'Collapse',
+          labelExpand: 'Expand',
+          rowProperty: 'subItems'
+        }}
+        totalRows={10}
+      />
+    )
+  });
+};
+
+describe('Listing', () => {
+  beforeEach(mountListing);
+
+  it('expands the row when the corresponding icon si clicked', () => {
+    cy.contains('E0').should('be.visible');
+
+    expandedItems.forEach((index) => {
+      const subItems = generateSubItems(index);
+
+      cy.findByLabelText(`Expand ${index}`).click();
+
+      cy.findByLabelText(`Collapse ${index}`).should('exist');
+
+      subItems.forEach(({ name, description }) => {
+        cy.contains(name).should('exist');
+        cy.contains(description).should('exist');
+      });
+    });
+
+    cy.matchImageSnapshot();
+  });
+
+  it('collapses the row when the corresponding icon si clicked', () => {
+    cy.contains('Sub item 100').should('be.visible');
+
+    cy.findByLabelText('Collapse 0').click();
+
+    cy.contains('Sub item 100').should('not.exist');
+
+    cy.matchImageSnapshot();
+  });
+});

package/src/Listing/Listing.styles.ts

@@ -14,7 +14,7 @@ interface StylesProps {
   viewMode: ListingVariant;
 }
 
-const useStyles = makeStyles<StylesProps>()(
+const useListingStyles = makeStyles<StylesProps>()(
   (theme, { dataStyle, getGridTemplateColumn, rows, limit }) => ({
     actionBar: {
       alignItems: 'center',
@@ -73,4 +73,4 @@ const useStyles = makeStyles<StylesProps>()(
   })
 );
 
-export { useStyles, loadingIndicatorHeight };
+export { useListingStyles, loadingIndicatorHeight };

package/src/Listing/ListingDocs.mdx

@@ -0,0 +1,61 @@
+{/* ListingDocs.mdx */}
+
+import { Meta, Story } from '@storybook/blocks';
+import * as ListingStories from './index.stories';
+
+<Meta of={ListingStories} />
+
+# Listing
+
+## Expand/collapse rows
+
+The listing supports rows expanding and collapsing.
+
+In order to use this feature, please follow the instructions:
+- (pre-requisite): Your data should have a child property that contains sub-items.
+```javascript
+[
+  {
+    "id": 1,
+    "festival": "Test",
+    "name": "Tom",
+    "counter": 3,
+    "description": "My description of Tom"
+  },
+  {
+    "id": 2,
+    "name": "Jane's group",
+    "festival": "fest",
+    "counter": 5,
+    "description": "My description of Jane's group",
+    "subItems": [
+      {
+        "id": 3,
+        "name": "Jane",
+        "counter": 0,
+        "description": "My description of Jane"
+      },
+    ]
+  }
+]
+```
+- Use the `subItems` property to configure how the component will handle your sub-items
+```javascript
+subItems={{
+  canCheckSubItems: false, // Display checkbox on sub items. Default: false
+  enable: true, // It enables or disable the row expand/collapse feature. Default: false
+  rowProperty: 'subItems' // Which property should be used to detect sub-items. Default: ''
+  labelExpand: 'Expand',
+  labelCollapse: 'Collapse'
+}}
+```
+- Finally, update the column configuration in order to display the expand/collapse caret
+```javascript
+{
+  Component: ButtonColumn,
+  displaySubItemsCaret: true, // Add this property
+  id: '#',
+  label: 'Custom',
+  type: ColumnType.component
+}
+```

package/src/Listing/Row/Row.tsx

@@ -49,6 +49,7 @@ type Props = {
   row;
   rowColorConditions: Array<RowColorCondition>;
   shiftKeyDownRowPivot: number | null;
+  subItemsPivots: Array<number | string>;
   viewMode?: ListingVariant;
   visibleColumns: Array<Column>;
 } & TableRowProps;
@@ -174,7 +175,8 @@ const Row = memo<RowProps>(
         equals(prevProps.row, nextProps.row) &&
         equals(previousRowConditions, nextRowConditions) &&
         equals(previousRowColors, nextRowColors) &&
-        equals(prevProps.className, nextProps.className)
+        equals(prevProps.className, nextProps.className) &&
+        equals(prevProps.subItemsPivots, nextProps.subItemsPivots)
       );
     }
 
@@ -189,7 +191,8 @@ const Row = memo<RowProps>(
       equals(prevIsShiftKeyDown, nextIsShiftKeyDown) &&
       equals(prevShiftKeyDownRowPivot, nextShiftKeyDownRowPivot) &&
       equals(prevLastSelectionIndex, nextLastSelectionIndex) &&
-      equals(prevViewMode, nextViewMode)
+      equals(prevViewMode, nextViewMode) &&
+      equals(prevProps.subItemsPivots, nextProps.subItemsPivots)
     );
   }
 );

package/src/Listing/index.stories.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable no-alert */
 /* eslint-disable react/prop-types */
 import { useState } from 'react';
 
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { equals, prop } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
@@ -16,7 +17,7 @@ import { Column, ColumnType, SortOrder } from './models';
 
 import Listing from '.';
 
-export default {
+const meta: Meta<typeof Listing> = {
   argTypes: {
     checkable: { control: 'boolean' },
     currentPage: { control: 'number' },
@@ -26,7 +27,10 @@ export default {
   },
   component: Listing,
   title: 'Listing'
-} as ComponentMeta<typeof Listing>;
+};
+export default meta;
+
+type Story = StoryObj<typeof Listing>;
 
 const useStyles = makeStyles()((theme) => ({
   listing: {
@@ -48,6 +52,12 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
   </>
 );
 
+const ButtonColumn = ({ row }): JSX.Element => (
+  <Button size="small" onClick={() => alert(JSON.stringify(row))}>
+    Click to reveal details about {row.name}
+  </Button>
+);
+
 const defaultColumns = [
   {
     getFormattedString: ({ name }): string => name,
@@ -131,7 +141,7 @@ const predefinedRowsSelection = [
   }
 ];
 
-const Story = ({
+const StoryTemplate = ({
   columns = defaultColumns,
   checkable = true,
   viewerModeConfiguration,
@@ -164,7 +174,7 @@ const Story = ({
   );
 };
 
-export const normal = (): JSX.Element => <Story />;
+export const normal = (): JSX.Element => <StoryTemplate />;
 
 export const WithSpecifiedViewMode = (): JSX.Element => {
   const [viewMode, setViewMode] = useState(ListingVariant.extended);
@@ -173,7 +183,7 @@ export const WithSpecifiedViewMode = (): JSX.Element => {
     : ListingVariant.compact;
 
   return (
-    <Story
+    <StoryTemplate
       viewMode={viewMode}
       viewerModeConfiguration={{
         onClick: () => setViewMode(newViewMode),
@@ -184,15 +194,15 @@ export const WithSpecifiedViewMode = (): JSX.Element => {
 };
 
 export const loadingWithNoData = (): JSX.Element => {
-  return <Story loading rows={[]} totalRows={0} />;
+  return <StoryTemplate loading rows={[]} totalRows={0} />;
 };
 
 export const loadingWithData = (): JSX.Element => {
-  return <Story loading />;
+  return <StoryTemplate loading />;
 };
 
 export const asEmptyState = (): JSX.Element => {
-  return <Story rows={[]} />;
+  return <StoryTemplate rows={[]} />;
 };
 
 const actions = (
@@ -201,12 +211,16 @@ const actions = (
   </Button>
 );
 
-export const withActions = (): JSX.Element => <Story actions={actions} />;
+export const withActions = (): JSX.Element => (
+  <StoryTemplate actions={actions} />
+);
 
-export const withoutCheckboxes = (): JSX.Element => <Story checkable={false} />;
+export const withoutCheckboxes = (): JSX.Element => (
+  <StoryTemplate checkable={false} />
+);
 
 export const withShortLabelColumns = (): JSX.Element => (
-  <Story columns={columnsWithShortLabel} />
+  <StoryTemplate columns={columnsWithShortLabel} />
 );
 
 const editableColumns = [
@@ -270,7 +284,7 @@ const ListingWithEditableColumns = (): JSX.Element => {
   };
 
   return (
-    <Story
+    <StoryTemplate
       columnConfiguration={{
         selectedColumnIds,
         sortable: true
@@ -290,23 +304,82 @@ export const withEditableAndSortableColumns = (): JSX.Element => (
   <ListingWithEditableColumns />
 );
 
-const TemplateListing: ComponentStory<typeof Listing> = (args) => (
-  <Listing
-    {...args}
-    columns={editableColumns}
-    disableRowCheckCondition={(row): boolean => row.disableCheckbox}
-    disableRowCondition={(row): boolean => row.disableRow}
-    predefinedRowsSelection={predefinedRowsSelection}
-    rowColorConditions={rowColorConditions}
-    rows={listing}
-  />
-);
+export const PlaygroundListing: Story = {
+  args: {
+    checkable: true,
+    columns: editableColumns,
+    currentPage: 1,
+    disableRowCheckCondition: (row): boolean => row.disableCheckbox,
+    disableRowCondition: (row): boolean => row.disableRow,
+    limit: 10,
+    loading: false,
+    predefinedRowsSelection,
+    rowColorConditions,
+    rows: listing,
+    totalRows: 10
+  }
+};
+
+const listingWithSubItems = [...tenElements].map((_, index) => ({
+  active: false,
+  description: `Entity ${index}`,
+  disableCheckbox: false,
+  disableRow: false,
+  id: index,
+  name: `E${index}`,
+  selected: false,
+  subItems:
+    index % 2 === 0
+      ? [...tenElements].map((__, subIndex) => ({
+          active: false,
+          description: `Sub item ${subIndex + (index + 10) * 10} description`,
+          disableCheckbox: false,
+          disableRow: false,
+          id: subIndex + (index + 10) * 10,
+          name: `Sub Item ${subIndex + (index + 10) * 10}`,
+          selected: false
+        }))
+      : undefined
+}));
+
+const columnsWithSubItems = [
+  {
+    getFormattedString: ({ name }): string => name,
+    id: 'name',
+    label: 'Name',
+    type: ColumnType.string
+  },
+  {
+    getFormattedString: ({ description }): string => description,
+    id: 'description',
+    label: 'Description',
+    type: ColumnType.string
+  },
+  {
+    Component: ButtonColumn,
+    displaySubItemsCaret: true,
+    id: '#',
+    label: 'Custom',
+    type: ColumnType.component,
+    width: '350px'
+  }
+];
 
-export const PlaygroundListing = TemplateListing.bind({});
-PlaygroundListing.args = {
-  checkable: true,
-  currentPage: 1,
-  limit: 10,
-  loading: false,
-  totalRows: 10
+export const ListingWithSubItems = {
+  args: {
+    checkable: true,
+    columns: columnsWithSubItems,
+    currentPage: 1,
+    limit: 10,
+    loading: false,
+    rows: listingWithSubItems,
+    subItems: {
+      canCheckSubItems: false,
+      enable: true,
+      labelCollapse: 'Collapse',
+      labelExpand: 'Expand',
+      rowProperty: 'subItems'
+    },
+    totalRows: 10
+  }
 };

package/src/Listing/index.tsx

@@ -18,14 +18,17 @@ import {
   map,
   not,
   pick,
+  pluck,
   prop,
   propEq,
+  reduce,
   reject,
   slice,
   subtract,
   uniqBy
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import { useAtomValue } from 'jotai';
 
 import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 
@@ -50,10 +53,11 @@ import ListingRow from './Row/Row';
 import { labelNoResultFound } from './translatedLabels';
 import useResizeObserver from './useResizeObserver';
 import useStyleTable from './useStyleTable';
-import { loadingIndicatorHeight, useStyles } from './Listing.styles';
+import { loadingIndicatorHeight, useListingStyles } from './Listing.styles';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import { ListingHeader } from './Header';
+import { subItemsPivotsAtom } from './tableAtoms';
 
 const getVisibleColumns = ({
   columnConfiguration,
@@ -114,6 +118,13 @@ export interface Props<TRow> {
   selectedRows?: Array<TRow>;
   sortField?: string;
   sortOrder?: SortOrder;
+  subItems?: {
+    canCheckSubItems: boolean;
+    enable: boolean;
+    labelCollapse: string;
+    labelExpand: string;
+    rowProperty: string;
+  };
   totalRows?: number;
   viewMode?: ListingVariant;
   viewerModeConfiguration?: ViewerModeConfiguration;
@@ -160,7 +171,14 @@ const Listing = <TRow extends { id: RowId }>({
   viewMode = ListingVariant.compact,
   widthToMoveTablePagination,
   getHighlightRowCondition,
-  viewerModeConfiguration
+  viewerModeConfiguration,
+  subItems = {
+    canCheckSubItems: false,
+    enable: false,
+    labelCollapse: 'Collapse',
+    labelExpand: 'Expand',
+    rowProperty: ''
+  }
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -172,13 +190,6 @@ const Listing = <TRow extends { id: RowId }>({
     viewMode
   });
 
-  const { classes, theme } = useStyles({
-    dataStyle,
-    getGridTemplateColumn,
-    limit,
-    rows,
-    viewMode
-  });
   const { t } = useTranslation();
 
   const [tableTopOffset, setTableTopOffset] = React.useState(0);
@@ -192,6 +203,37 @@ const Listing = <TRow extends { id: RowId }>({
   const containerRef = React.useRef<HTMLDivElement>();
   const actionBarRef = React.useRef<HTMLDivElement>();
 
+  const subItemsPivots = useAtomValue(subItemsPivotsAtom);
+
+  const rowsToDisplay = React.useMemo(
+    () =>
+      subItems?.enable
+        ? reduce<TRow, Array<TRow>>(
+            (acc, row): Array<TRow> => {
+              if (
+                row[subItems.rowProperty] &&
+                subItemsPivots.includes(row.id)
+              ) {
+                return [...acc, row, ...row[subItems.rowProperty]];
+              }
+
+              return [...acc, row];
+            },
+            [],
+            rows
+          )
+        : rows,
+    [rows, subItemsPivots, subItems]
+  );
+
+  const { classes, theme } = useListingStyles({
+    dataStyle,
+    getGridTemplateColumn,
+    limit,
+    rows: rowsToDisplay,
+    viewMode
+  });
+
   useResizeObserver({
     onResize: () => {
       setTableTopOffset(getCumulativeOffset(containerRef.current));
@@ -422,6 +464,19 @@ const Listing = <TRow extends { id: RowId }>({
 
   const areColumnsEditable = not(isNil(onSelectColumns));
 
+  const allSubItemIds = React.useMemo(
+    () =>
+      reduce<TRow | number, Array<string | number>>(
+        (acc, row) => [
+          ...acc,
+          ...pluck('id', row[subItems?.rowProperty || ''] || [])
+        ],
+        [],
+        rows
+      ),
+    [rows, subItems]
+  );
+
   return (
     <>
       {loading && rows.length > 0 && (
@@ -495,14 +550,16 @@ const Listing = <TRow extends { id: RowId }>({
               component="div"
               onMouseLeave={clearHoveredRow}
             >
-              {rows.map((row, index) => {
+              {rowsToDisplay.map((row, index) => {
                 const isRowSelected = isSelected(row);
-
                 const isRowHovered = equals(hoveredRowId, getId(row));
+                const isSubItem = allSubItemIds.includes(row.id);
 
                 return (
                   <ListingRow
-                    checkable={checkable}
+                    checkable={
+                      checkable && (!isSubItem || subItems.canCheckSubItems)
+                    }
                     columnConfiguration={columnConfiguration}
                     columnIds={columns.map(prop('id'))}
                     disableRowCondition={disableRowCondition}
@@ -519,6 +576,7 @@ const Listing = <TRow extends { id: RowId }>({
                     row={row}
                     rowColorConditions={rowColorConditions}
                     shiftKeyDownRowPivot={shiftKeyDownRowPivot}
+                    subItemsPivots={subItemsPivots}
                     tabIndex={-1}
                     viewMode={viewMode}
                     visibleColumns={visibleColumns}
@@ -528,28 +586,37 @@ const Listing = <TRow extends { id: RowId }>({
                     onFocus={(): void => hoverRow(row)}
                     onMouseOver={(): void => hoverRow(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)
-                          }
-                          inputProps={{
-                            'aria-label': `Select row ${getId(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}
                         />
-                      </Cell>
-                    )}
+                      ))}
 
                     {visibleColumns.map((column) => (
                       <DataCell
@@ -559,8 +626,11 @@ const Listing = <TRow extends { id: RowId }>({
                         isRowHovered={isRowHovered}
                         isRowSelected={isRowSelected}
                         key={`${getId(row)}-${column.id}`}
+                        labelCollapse={subItems.labelCollapse}
+                        labelExpand={subItems.labelExpand}
                         row={row}
                         rowColorConditions={rowColorConditions}
+                        subItemsRowProperty={subItems?.rowProperty}
                         viewMode={viewMode}
                       />
                     ))}

package/src/Listing/models.ts

@@ -19,6 +19,7 @@ export interface Column {
   compact?: boolean;
   disablePadding?: boolean;
   disabled?: boolean;
+  displaySubItemsCaret?: boolean;
   getColSpan?: (isSelected) => number | undefined;
   getFormattedString?: (row) => string | null;
   getHiddenCondition?: (isSelected) => boolean;

package/src/Listing/tableAtoms.ts

@@ -43,3 +43,5 @@ export const tableStyleDerivedAtom = atom(null, (get, set, { viewMode }) => {
     header: isExtendedMode ? extendedTableHeader : compactTableHeader
   });
 });
+
+export const subItemsPivotsAtom = atom<Array<number | string>>([]);

package/src/Panel/index.tsx

@@ -86,7 +86,7 @@ export interface Tab {
 
 export interface Props {
   className?: string;
-  header: React.ReactElement;
+  header?: React.ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
   minWidth?: number;