How to use the @patternfly/react-styles/css/components/Table/table.modifiers function in @patternfly/react-styles

const {
    extraParams: { onExpand }
  } = column;
  const extraData = {
    rowIndex,
    columnIndex,
    column,
    property
  };

  function onToggle(event: React.MouseEvent) {
    // tslint:disable-next-line:no-unused-expression
    onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
  }
  return {
    className: css(styles.tableCompoundExpansionToggle, props.isOpen && styles.modifiers.expanded),
    children: props.isOpen !== undefined && (
      <button aria-controls="{props.ariaControls}" aria-expanded="{props.isOpen}">
        {title}
      </button>
    )
  };
};

import { css, pickProperties } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Table/table';
import { ITransform } from '../../Table';

export const Visibility = pickProperties(styles.modifiers, [
  'hidden',
  'hiddenOnSm',
  'hiddenOnMd',
  'hiddenOnLg',
  'hiddenOnXl',
  'hiddenOn_2xl',
  'visibleOnSm',
  'visibleOnMd',
  'visibleOnLg',
  'visibleOnXl',
  'visibleOn_2xl'
]);

// tslint:disable-next-line:no-shadowed-variable
export const classNames = (...classNames: string[]): ITransform => () => ({
  className: css(...classNames)

colSpan,
  component = 'td',
  isVisible,
  parentId,
  textCenter = false,
  isOpen,
  ariaControls = '',
  ...props
}: BodyCellProps) => {
  const Component = component as any;
  const mappedProps = {
    ...(dataLabel ? { 'data-label': dataLabel } : {}),
    ...props
  };
  return (parentId !== undefined && colSpan === undefined) || !isVisible ? null : (
    
  );
};

{mapOpenedRows(mappedRows, this.props.children).map((oneRow, key) => (
            
              {oneRow.rows}
            
          ))}

const HeaderCell = ({
  'data-label': dataLabel,
  className,
  component: Component,
  isVisible,
  scope,
  textCenter,
  ...props
}) => {
  const mappedProps = {
    ...(scope ? { scope } : {}),
    ...props
  };
  return ;
};

export const CollapseColumn: React.FunctionComponent = ({
  className = '' as string,
  children = null as React.ReactNode,
  isOpen,
  onToggle,
  ...props
}: CollapseColumnProps) => {
  return (
    
      {isOpen !== undefined && (
        <button aria-expanded="{isOpen}" aria-label="Details">
          
        </button>
      )}
      {children}
    
  );
};

wrapper: bodyWrapper || BodyWrapper,
              row: rowWrapper || RowWrapper,
              cell: BodyCell
            },
            header: {
              cell: HeaderCell
            }
          }}
          columns={headerData}
          role={role}
          className={css(
            styles.table,
            gridBreakPoint && getModifier(stylesGrid, gridBreakPoint),
            getModifier(styles, variant),
            ((onCollapse && variant === TableVariant.compact) || onExpand) && styles.modifiers.expandable,
            variant === TableVariant.compact && borders === false ? styles.modifiers.noBorderRows : null,
            className
          )}
          {...ouiaContext.isOuia && {
            'data-ouia-component-type': 'Table',
            'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
          }}
        >
          {caption && {caption}}
          {children}
        
      
    );
  }
}

export const HeaderCell: React.FunctionComponent = ({
  className = '',
  component = 'th',
  isVisible,
  scope = '',
  textCenter = false,
  dataLabel = '',
  ...props
}: HeaderCellProps) => {
  const Component = component as any;
  const mappedProps = {
    ...(scope ? { scope } : {}),
    ...props
  };
  return ;
};

className,
  colSpan,
  component: Component,
  isVisible,
  parentId,
  textCenter,
  isOpen,
  ariaControls,
  ...props
}) => {
  const mappedProps = {
    ...(dataLabel ? { 'data-label': dataLabel } : {}),
    ...props
  };
  return (parentId !== undefined && colSpan === undefined) || !isVisible ? null : (
    
  );
};

onResize,
      row: { isExpanded, isHeightAuto },
      rowProps,
      ouiaContext,
      ouiaId,
      ...props
    } = this.props;

    return (
      }
        className={css(
          className,
          isExpanded !== undefined && styles.tableExpandableRow,
          isExpanded && styles.modifiers.expanded,
          isHeightAuto && styles.modifiers.heightAuto
        )}
        hidden={isExpanded !== undefined && !isExpanded}
        {...ouiaContext.isOuia && {
          'data-ouia-component-type': 'TableRow',
          'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
        }}
      />
    );
  }
}