@centreon/ui 23.10.1 → 23.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1",
+  "version": "23.10.2",
   "description": "Centreon UI Components",
   "main": "src/index.ts",
   "scripts": {

package/src/Listing/Cell/DataCell.styles.ts

@@ -0,0 +1,24 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  cell: {
+    alignItems: 'center',
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  },
+  componentColumn: {
+    width: theme.spacing(2.75)
+  },
+  rowNotHovered: {
+    color: theme.palette.text.secondary
+  },
+  text: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+}));
+
+export { useStyles };

package/src/Listing/Cell/DataCell.tsx

@@ -1,13 +1,11 @@
 import { memo } from 'react';
 
 import { equals, props } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 
 import { Tooltip } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import DraggableIcon from '../Header/SortableCell/DraggableIcon';
 import {
   Column,
   ColumnType,
@@ -17,11 +15,11 @@ import {
 import useStyleTable from '../useStyleTable';
 
 import EllipsisTypography from './EllipsisTypography';
+import { useStyles } from './DataCell.styles';
 
 import Cell from '.';
 
 interface Props {
-  areColumnsEditable: boolean;
   column: Column;
   disableRowCondition: (row) => boolean;
   getHighlightRowCondition?: (row) => boolean;
@@ -32,31 +30,6 @@ interface Props {
   viewMode?: ListingVariant;
 }
 
-const useStyles = makeStyles()((theme) => ({
-  cell: {
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-    display: 'flex',
-    height: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap'
-  },
-  componentColumn: {
-    width: theme.spacing(2.75)
-  },
-  headerCell: {
-    padding: theme.spacing(0, 0, 0, 1)
-  },
-  rowNotHovered: {
-    color: theme.palette.text.secondary
-  },
-  text: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }
-}));
-
 const DataCell = ({
   row,
   column,
@@ -65,14 +38,12 @@ const DataCell = ({
   rowColorConditions,
   disableRowCondition,
   viewMode,
-  getHighlightRowCondition,
-  areColumnsEditable
+  getHighlightRowCondition
 }: Props): JSX.Element | null => {
-  const { dataStyle } = useStyleTable({ viewMode });
   const { classes } = useStyles();
+  const { dataStyle } = useStyleTable({ viewMode });
 
   const commonCellProps = {
-    align: 'left' as const,
     disableRowCondition,
     isRowHovered,
     row,
@@ -102,6 +73,7 @@ const DataCell = ({
 
       return (
         <Cell
+          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
           style={{
             gridColumn
@@ -112,10 +84,7 @@ const DataCell = ({
           {isTruncated && (
             <Tooltip title={formattedString}>{typography}</Tooltip>
           )}
-          <>
-            {areColumnsEditable && <DraggableIcon />}
-            {!isTruncated && typography}
-          </>
+          {!isTruncated && typography}
         </Cell>
       );
     },
@@ -133,6 +102,7 @@ const DataCell = ({
 
       return (
         <Cell
+          className={classes.cell}
           isRowHighlighted={isRowHighlighted}
           viewMode={viewMode}
           onClick={(e): void => {
@@ -144,31 +114,25 @@ const DataCell = ({
           }}
           {...commonCellProps}
         >
-          <>
-            {areColumnsEditable && (
-              <DraggableIcon className={classes.componentColumn} />
-            )}
-
-            <Component
-              isHovered={isRowHovered}
-              isSelected={isRowSelected}
-              renderEllipsisTypography={({
-                className,
-                formattedString
-              }): JSX.Element => {
-                return (
-                  <EllipsisTypography
-                    className={className}
-                    dataStyle={dataStyle}
-                    disableRowCondition={disableRowCondition(row)}
-                    formattedString={formattedString}
-                    isRowHovered={isRowHovered}
-                  />
-                );
-              }}
-              row={row}
-            />
-          </>
+          <Component
+            isHovered={isRowHovered}
+            isSelected={isRowSelected}
+            renderEllipsisTypography={({
+              className,
+              formattedString
+            }): JSX.Element => {
+              return (
+                <EllipsisTypography
+                  className={className}
+                  dataStyle={dataStyle}
+                  disableRowCondition={disableRowCondition(row)}
+                  formattedString={formattedString}
+                  isRowHovered={isRowHovered}
+                />
+              );
+            }}
+            row={row}
+          />
         </Cell>
       );
     }
@@ -280,8 +244,7 @@ const MemoizedDataCell = memo<Props>(
         nextProps.disableRowCondition(nextProps.row)
       ) &&
       equals(previousIsRowHighlighted, nextIsRowHighlighted) &&
-      equals(prevProps.viewMode, nextProps.viewMode) &&
-      equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable)
+      equals(prevProps.viewMode, nextProps.viewMode) // &&
     );
   }
 );

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -0,0 +1,71 @@
+import { makeStyles } from 'tss-react/mui';
+
+import { ListingVariant } from '@centreon/ui-context';
+
+import { getTextStyleByViewMode } from '../../useStyleTable';
+
+interface StylesProps {
+  isDragging?: boolean;
+  isInDragOverlay?: boolean;
+  viewMode?: ListingVariant;
+}
+
+const useStyles = makeStyles<StylesProps>()(
+  (theme, { isDragging, isInDragOverlay, viewMode }) => ({
+    active: {
+      '&, &:hover, &:focus': {
+        color: theme.palette.common.white
+      },
+      '&.Mui-active': {
+        '& .MuiTableSortLabel-icon': {
+          color: theme.palette.common.white
+        },
+        color: theme.palette.common.white
+      }
+    },
+    content: {
+      alignItems: 'center',
+      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
+      color: theme.palette.common.white,
+      display: 'flex',
+      height: '100%',
+      justifyContent: 'space-between'
+    },
+    dragHandle: {
+      '&, &.Mui-focus, &:focus': {
+        color: theme.palette.common.white
+      },
+      color: theme.palette.common.white,
+
+      cursor: isDragging ? 'grabbing' : 'grab',
+      opacity: 0,
+      padding: 0
+    },
+    simpleHeaderCellContent: {
+      alignItems: 'center',
+      display: 'inline-flex',
+      marginRight: theme.spacing(2),
+      userSelect: 'none'
+    },
+    tableCell: {
+      backgroundColor: isInDragOverlay
+        ? 'transparent'
+        : theme.palette.background.listingHeader,
+      borderBottom: 'none',
+      height: 'inherit',
+      padding: theme.spacing(0, 1),
+      ...getTextStyleByViewMode({ theme, viewMode }),
+      '&:hover, &:focus-within, &[data-isdragging=true]': {
+        '& .dragHandle': {
+          opacity: 1
+        }
+      },
+      '&[data-isindragoverlay=true]': {
+        display: 'block',
+        opacity: 0.7
+      }
+    }
+  })
+);
+
+export { useStyles, StylesProps };

package/src/Listing/Header/{SortableCell/Content.tsx → Cell/ListingHeaderCell.tsx}

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { always, and, equals, ifElse, isNil } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
 
 import {
   TableCell,
@@ -10,64 +9,12 @@ import {
   Tooltip
 } from '@mui/material';
 
-import { ListingVariant } from '@centreon/ui-context';
-
 import { Props as ListingProps } from '../..';
 import { Column } from '../../models';
-import HeaderLabel from '../Label';
-import { getTextStyleByViewMode } from '../../useStyleTable';
-
-import DraggableIcon from './DraggableIcon';
-
-type StylesProps = Pick<Props, 'isDragging' | 'isInDragOverlay' | 'viewMode'>;
+import HeaderLabel from '../_internals/Label';
+import { DraggableIconButton } from '../_internals/DraggableIconButton';
 
-const useStyles = makeStyles<StylesProps>()(
-  (theme, { isDragging, isInDragOverlay, viewMode }) => ({
-    active: {
-      '&.Mui-active': {
-        '& .MuiTableSortLabel-icon': {
-          color: theme.palette.common.white
-        },
-        color: theme.palette.common.white
-      },
-      '&:hover': {
-        '& .MuiTableSortLabel-icon': {
-          opacity: 1
-        },
-        color: theme.palette.common.white
-      }
-    },
-    content: {
-      alignItems: 'center',
-      borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
-      color: theme.palette.common.white,
-      display: 'flex',
-      height: '100%'
-    },
-    dragHandle: {
-      '&, &.Mui-focus, &:focus': {
-        outline: 'none'
-      },
-      alignSelf: 'center',
-      cursor: isDragging ? 'grabbing' : 'grab',
-      display: 'flex'
-    },
-    simpleHeaderCellContent: {
-      alignItems: 'center',
-      display: 'inline-flex',
-      marginRight: theme.spacing(2)
-    },
-    tableCell: {
-      backgroundColor: isInDragOverlay
-        ? 'transparent'
-        : theme.palette.background.listingHeader,
-      borderBottom: 'none',
-      height: 'inherit',
-      padding: theme.spacing(0, 1),
-      ...getTextStyleByViewMode({ theme, viewMode })
-    }
-  })
-);
+import { StylesProps, useStyles } from './ListingHeaderCell.styles';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -76,14 +23,11 @@ type Props = Pick<
   areColumnsEditable: boolean;
   className: string;
   column: Column;
-  isDragging?: boolean;
-  isInDragOverlay?: boolean;
   itemRef: React.RefObject<HTMLDivElement>;
   style;
-  viewMode?: ListingVariant;
-};
+} & StylesProps;
 
-const SortableHeaderCellContent = ({
+const ListingHeaderCell = ({
   column,
   columnConfiguration,
   sortField,
@@ -102,8 +46,6 @@ const SortableHeaderCellContent = ({
     isInDragOverlay,
     viewMode
   });
-  const [cellHovered, setCellHovered] = React.useState(false);
-
   const columnLabel = column.shortLabel || column.label;
 
   const columnSortField = column.sortField || column.id;
@@ -122,14 +64,6 @@ const SortableHeaderCellContent = ({
     });
   };
 
-  const mouseOver = (): void => {
-    setCellHovered(true);
-  };
-
-  const mouseOut = (): void => {
-    setCellHovered(false);
-  };
-
   const headerContent = (
     <Tooltip placement="top" title={getTooltipLabel(column.shortLabel)}>
       <HeaderLabel>{columnLabel}</HeaderLabel>
@@ -140,22 +74,12 @@ const SortableHeaderCellContent = ({
     <TableCell
       className={classes.tableCell}
       component={'div' as unknown as React.ElementType<TableCellBaseProps>}
+      data-isdragging={isDragging}
+      data-isindragoverlay={isInDragOverlay}
       ref={itemRef}
       style={style}
-      onMouseOut={mouseOut}
-      onMouseOver={mouseOver}
     >
       <div className={classes.content}>
-        {columnConfiguration?.sortable && areColumnsEditable && (
-          <DraggableIcon
-            visible={cellHovered}
-            {...props}
-            isInteractive
-            className={cx(classes.dragHandle)}
-            columnLabel={columnLabel}
-          />
-        )}
-
         {column.sortable ? (
           <TableSortLabel
             active={sortField === columnSortField}
@@ -169,9 +93,17 @@ const SortableHeaderCellContent = ({
         ) : (
           <div className={classes.simpleHeaderCellContent}>{headerContent}</div>
         )}
+
+        {columnConfiguration?.sortable && areColumnsEditable && (
+          <DraggableIconButton
+            {...props}
+            className={cx(classes.dragHandle, 'dragHandle')}
+            columnLabel={columnLabel}
+          />
+        )}
       </div>
     </TableCell>
   );
 };
 
-export default SortableHeaderCellContent;
+export default ListingHeaderCell;

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.styles.ts

@@ -0,0 +1,26 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  checkbox: {
+    '&.Mui-checked': {
+      color: theme.palette.common.white
+    },
+    '&.MuiCheckbox-indeterminate': {
+      color: theme.palette.common.white
+    },
+    color: theme.palette.common.white
+  },
+  checkboxHeaderCell: {
+    alignItems: 'center',
+    backgroundColor: theme.palette.background.listingHeader,
+    borderBottom: 'none',
+    display: 'flex',
+    justifyContent: 'start',
+    lineHeight: 'inherit'
+  },
+  predefinedRowsMenu: {
+    color: theme.palette.common.white
+  }
+}));
+
+export { useStyles };

package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { equals, isEmpty, not } from 'ramda';
+
+import { TableCell, TableCellBaseProps } from '@mui/material';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+import Checkbox from '../../Checkbox';
+import PopoverMenu from '../../../PopoverMenu';
+import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
+import PredefinedSelectionList from '../_internals/PredefinedSelectionList';
+import { PredefinedRowSelection } from '../../models';
+
+import { useStyles } from './SelectActionListingHeaderCell.styles';
+
+export interface SelectActionListingHeaderCellProps {
+  onSelectAllClick: (event) => void;
+  onSelectRowsWithCondition: (condition) => void;
+  predefinedRowsSelection: Array<PredefinedRowSelection>;
+  rowCount: number;
+  selectedRowCount: number;
+}
+
+const SelectActionListingHeaderCell = ({
+  rowCount,
+  onSelectAllClick,
+  selectedRowCount,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition
+}: SelectActionListingHeaderCellProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  const hasRows = not(equals(rowCount, 0));
+
+  return (
+    <TableCell
+      className={classes.checkboxHeaderCell}
+      component={'div' as unknown as React.ElementType<TableCellBaseProps>}
+    >
+      <Checkbox
+        checked={hasRows && selectedRowCount === rowCount}
+        className={classes.checkbox}
+        indeterminate={
+          hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
+        }
+        inputProps={{ 'aria-label': 'Select all' }}
+        onChange={onSelectAllClick}
+      />
+      {not(isEmpty(predefinedRowsSelection)) ? (
+        <PopoverMenu
+          className={classes.predefinedRowsMenu}
+          icon={<ArrowDropDownIcon />}
+          title={labelPredefinedRowsSelectionMenu}
+        >
+          {({ close }): JSX.Element => (
+            <PredefinedSelectionList
+              close={close}
+              predefinedRowsSelection={predefinedRowsSelection}
+              onSelectRowsWithCondition={onSelectRowsWithCondition}
+            />
+          )}
+        </PopoverMenu>
+      ) : (
+        <div className={classes.predefinedRowsMenu} />
+      )}
+    </TableCell>
+  );
+};
+
+export { SelectActionListingHeaderCell };

package/src/Listing/Header/ListingHeader.styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  headerLabelDragging: {
+    cursor: 'grabbing'
+  },
+  root: {
+    height: '100%',
+    padding: theme.spacing(0, 1)
+  },
+  row: {
+    display: 'contents'
+  }
+}));
+
+export { useStyles };

package/src/Listing/Header/{index.tsx → ListingHeader.tsx}

@@ -2,64 +2,22 @@ import * as React from 'react';
 
 import { closestCenter, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { equals, find, isEmpty, map, not, pick, propEq } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
+import { equals, find, map, pick, propEq } from 'ramda';
 
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import {
-  TableCell,
-  TableCellBaseProps,
-  TableHead,
-  TableRow
-} from '@mui/material';
+import { TableHead, TableRow } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
 import { getVisibleColumns, Props as ListingProps } from '..';
-import PopoverMenu from '../../PopoverMenu';
 import SortableItems from '../../SortableItems';
-import Checkbox from '../Checkbox';
-import { Column, PredefinedRowSelection } from '../models';
-import { labelPredefinedRowsSelectionMenu } from '../translatedLabels';
-
-import PredefinedSelectionList from './PredefinedSelectionList';
-import SortableHeaderCellContent from './SortableCell/Content';
+import { Column } from '../models';
 
-const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    '&.Mui-checked': {
-      color: theme.palette.common.white
-    },
-    '&.MuiCheckbox-indeterminate': {
-      color: theme.palette.common.white
-    },
-    color: theme.palette.common.white
-  },
-  checkboxHeaderCell: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.listingHeader,
-    borderBottom: 'none',
-    display: 'flex',
-    justifyContent: 'start',
-    lineHeight: 'inherit',
-    minWidth: theme.spacing(51 / 8),
-    padding: 0
-  },
-  headerLabelDragging: {
-    cursor: 'grabbing'
-  },
-  predefinedRowsMenu: {
-    color: theme.palette.common.white,
-    width: theme.spacing(2)
-  },
-  root: {
-    height: '100%',
-    padding: theme.spacing(0, 1)
-  },
-  row: {
-    display: 'contents'
-  }
-}));
+import ListingHeaderCell from './Cell/ListingHeaderCell';
+import { useStyles } from './ListingHeader.styles';
+import {
+  SelectActionListingHeaderCell,
+  SelectActionListingHeaderCellProps
+} from './Cell/SelectActionListingHeaderCell';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -74,13 +32,9 @@ type Props = Pick<
 > & {
   areColumnsEditable: boolean;
   memoProps: Array<unknown>;
-  onSelectAllClick: (event) => void;
-  onSelectRowsWithCondition: (condition) => void;
-  predefinedRowsSelection: Array<PredefinedRowSelection>;
   rowCount: number;
-  selectedRowCount: number;
   viewMode?: ListingVariant;
-};
+} & SelectActionListingHeaderCellProps;
 
 interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
   attributes;
@@ -93,21 +47,21 @@ interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
 }
 
 const ListingHeader = ({
-  onSelectAllClick,
   sortOrder,
   sortField,
-  selectedRowCount,
   rowCount,
   columns,
   columnConfiguration,
   onSort,
   onSelectColumns,
   checkable,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition,
   memoProps,
   areColumnsEditable,
-  viewMode
+  viewMode,
+  onSelectAllClick,
+  selectedRowCount,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
@@ -131,7 +85,7 @@ const ListingHeader = ({
       id
     }: ContentProps): JSX.Element => {
       return (
-        <SortableHeaderCellContent
+        <ListingHeaderCell
           areColumnsEditable={areColumnsEditable}
           column={getColumnById(id)}
           columnConfiguration={columnConfiguration}
@@ -151,45 +105,17 @@ const ListingHeader = ({
     [columnConfiguration, columns, sortField, sortOrder]
   );
 
-  const hasRows = not(equals(rowCount, 0));
-
   return (
     <TableHead className={cx(classes.row, 'listingHeader')} component="div">
       <TableRow className={classes.row} component="div">
         {checkable && (
-          <TableCell
-            className={classes.checkboxHeaderCell}
-            component={
-              'div' as unknown as React.ElementType<TableCellBaseProps>
-            }
-          >
-            <Checkbox
-              checked={hasRows && selectedRowCount === rowCount}
-              className={classes.checkbox}
-              indeterminate={
-                hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
-              }
-              inputProps={{ 'aria-label': 'Select all' }}
-              onChange={onSelectAllClick}
-            />
-            {not(isEmpty(predefinedRowsSelection)) ? (
-              <PopoverMenu
-                className={classes.predefinedRowsMenu}
-                icon={<ArrowDropDownIcon />}
-                title={labelPredefinedRowsSelectionMenu}
-              >
-                {({ close }): JSX.Element => (
-                  <PredefinedSelectionList
-                    close={close}
-                    predefinedRowsSelection={predefinedRowsSelection}
-                    onSelectRowsWithCondition={onSelectRowsWithCondition}
-                  />
-                )}
-              </PopoverMenu>
-            ) : (
-              <div className={classes.predefinedRowsMenu} />
-            )}
-          </TableCell>
+          <SelectActionListingHeaderCell
+            predefinedRowsSelection={predefinedRowsSelection}
+            rowCount={rowCount}
+            selectedRowCount={selectedRowCount}
+            onSelectAllClick={onSelectAllClick}
+            onSelectRowsWithCondition={onSelectRowsWithCondition}
+          />
         )}
         <SortableItems
           updateSortableItemsOnItemsChange
@@ -214,6 +140,7 @@ const columnMemoProps = [
   'label',
   'rowMemoProps',
   'sortField',
+  'sortOrder',
   'sortable',
   'type'
 ];
@@ -236,4 +163,4 @@ const MemoizedListingHeader = React.memo<Props>(
     equals(prevProps.viewMode, nextProps.viewMode)
 );
 
-export default MemoizedListingHeader;
+export { MemoizedListingHeader as ListingHeader };

package/src/Listing/Header/_internals/DraggableIconButton.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { SvgIcon, IconButton as MuiIconButton } from '@mui/material';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+import { labelDragHandle } from '../../translatedLabels';
+
+interface DraggableIconButtonProps {
+  className?: string;
+  columnLabel?: string;
+}
+
+const DraggableIconButton = ({
+  columnLabel,
+  className,
+  ...props
+}: DraggableIconButtonProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <MuiIconButton
+      className={className}
+      {...props}
+      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
+    >
+      <SvgIcon fontSize="small">
+        <DragIndicatorIcon />
+      </SvgIcon>
+    </MuiIconButton>
+  );
+};
+
+export { DraggableIconButton };

package/src/Listing/Header/{PredefinedSelectionList.tsx → _internals/PredefinedSelectionList.tsx}

@@ -1,6 +1,6 @@
 import { List, ListItem, ListItemText } from '@mui/material';
 
-import { PredefinedRowSelection } from '../models';
+import { PredefinedRowSelection } from '../../models';
 
 interface Props {
   close: () => void;

package/src/Listing/Header/index.ts

@@ -0,0 +1 @@
+export * from './ListingHeader';

package/src/Listing/Listing.styles.ts

@@ -37,7 +37,6 @@ const useStyles = makeStyles<StylesProps>()(
     table: {
       '.listingHeader': {
         backgroundColor: theme.palette.background.listingHeader,
-        boxShadow: `-1px 0px 0px 0px ${theme.palette.background.listingHeader}`,
         padding: theme.spacing(0, 1)
       },
       '.listingHeader > div > div': {
@@ -46,7 +45,7 @@ const useStyles = makeStyles<StylesProps>()(
       },
       '.listingHeader > div > div:first-of-type': {
         height: '100%',
-        paddingLeft: theme.spacing(1.5)
+        padding: theme.spacing(0, 0.5, 0, 1.5)
       },
       alignItems: 'center',
       display: 'grid',

package/src/Listing/index.stories.tsx

@@ -12,7 +12,7 @@ import { ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '..';
 
-import { Column, ColumnType } from './models';
+import { Column, ColumnType, SortOrder } from './models';
 
 import Listing from '.';
 
@@ -153,7 +153,7 @@ const Story = ({
         limit={listing.length}
         predefinedRowsSelection={predefinedRowsSelection}
         rowColorConditions={rowColorConditions}
-        rows={listing}
+        rows={props.rows ?? listing}
         selectedRows={selected}
         totalRows={listing.length}
         viewerModeConfiguration={viewerModeConfiguration}
@@ -214,12 +214,14 @@ const editableColumns = [
     getFormattedString: ({ name }): string => name,
     id: 'name',
     label: 'Name',
+    sortable: true,
     type: ColumnType.string
   },
   {
     getFormattedString: ({ description }): string => description,
     id: 'description',
     label: 'Description',
+    sortable: true,
     type: ColumnType.string
   },
   {
@@ -247,6 +249,26 @@ const ListingWithEditableColumns = (): JSX.Element => {
     setSelectedColumnIds(defaultColumnIds);
   };
 
+  const [sortedRows, setSortedRows] = useState(listing);
+  const [sortParams, setSortParams] = useState({
+    sortField: editableColumns[0].id,
+    sortOrder: 'desc'
+  });
+
+  const onSort = (params: {
+    sortField: string;
+    sortOrder: SortOrder;
+  }): void => {
+    const rows = [...sortedRows];
+    rows.sort((a, b) =>
+      params.sortOrder === 'desc'
+        ? a[params.sortField]?.localeCompare(b[params.sortField])
+        : b[params.sortField]?.localeCompare(a[params.sortField])
+    );
+    setSortedRows(rows);
+    setSortParams(params);
+  };
+
   return (
     <Story
       columnConfiguration={{
@@ -254,13 +276,17 @@ const ListingWithEditableColumns = (): JSX.Element => {
         sortable: true
       }}
       columns={editableColumns}
+      rows={sortedRows}
+      sortField={sortParams.sortField}
+      sortOrder={sortParams.sortOrder as SortOrder}
       onResetColumns={resetColumns}
       onSelectColumns={setSelectedColumnIds}
+      onSort={onSort}
     />
   );
 };
 
-export const withEditableColumns = (): JSX.Element => (
+export const withEditableAndSortableColumns = (): JSX.Element => (
   <ListingWithEditableColumns />
 );
 

package/src/Listing/index.tsx

@@ -27,7 +27,7 @@ import {
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { Box, LinearProgress, Table, TableBody, useTheme } from '@mui/material';
+import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
@@ -39,7 +39,6 @@ import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import getCumulativeOffset from './getCumulativeOffset';
-import ListingHeader from './Header/index';
 import {
   Column,
   ColumnConfiguration,
@@ -55,6 +54,7 @@ import useStyleTable from './useStyleTable';
 import { loadingIndicatorHeight, useStyles } from './Listing.styles';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { SkeletonLoader } from './Row/SkeletonLoaderRows';
+import { ListingHeader } from './Header';
 
 const getVisibleColumns = ({
   columnConfiguration,
@@ -107,7 +107,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>;
@@ -173,7 +173,7 @@ const Listing = <TRow extends { id: RowId }>({
     viewMode
   });
 
-  const { classes } = useStyles({
+  const { classes, theme } = useStyles({
     dataStyle,
     getGridTemplateColumn,
     limit,
@@ -193,8 +193,6 @@ const Listing = <TRow extends { id: RowId }>({
   const containerRef = React.useRef<HTMLDivElement>();
   const actionBarRef = React.useRef<HTMLDivElement>();
 
-  const theme = useTheme();
-
   useResizeObserver({
     onResize: () => {
       setTableTopOffset(getCumulativeOffset(containerRef.current));
@@ -556,7 +554,6 @@ const Listing = <TRow extends { id: RowId }>({
 
                     {visibleColumns.map((column) => (
                       <DataCell
-                        areColumnsEditable={areColumnsEditable}
                         column={column}
                         disableRowCondition={disableRowCondition}
                         getHighlightRowCondition={getHighlightRowCondition}

package/src/Listing/useStyleTable.ts

@@ -50,7 +50,7 @@ const useStyleTable = ({
   const updateStyleTable = useSetAtom(tableStyleDerivedAtom);
 
   const getGridTemplateColumn = (): string => {
-    const checkbox = checkable ? '50px ' : '';
+    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
 
     const columnTemplate = currentVisibleColumns
       ?.map(({ width, shortLabel }) => {

package/src/Listing/Header/SortableCell/DraggableIcon.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-
-import { useTranslation } from 'react-i18next';
-
-import SvgIcon from '@mui/material/SvgIcon';
-
-import { labelDragHandle } from '../../translatedLabels';
-
-interface Icon {
-  className?: string;
-  columnLabel?: string;
-  isInteractive?: boolean;
-  visible?: boolean;
-}
-
-const DraggableIcon = ({
-  visible = false,
-  columnLabel,
-  className,
-  isInteractive = false,
-  ...rest
-}: Icon): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <SvgIcon
-      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
-      fontSize="medium"
-      {...rest}
-      className={className}
-      role={isInteractive ? 'button' : undefined}
-      tabIndex={isInteractive ? 0 : undefined}
-    >
-      {visible && (
-        <path d="M 12 8 c 1.1 0 2 -0.9 2 -2 s -0.9 -2 -2 -2 s -2 0.9 -2 2 s 0.9 2 2 2 Z m 0 2 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z m 0 6 c -1.1 0 -2 0.9 -2 2 s 0.9 2 2 2 s 2 -0.9 2 -2 s -0.9 -2 -2 -2 Z" />
-      )}
-    </SvgIcon>
-  );
-};
-
-export default DraggableIcon;