diff --git a/common/changes/office-ui-fabric-react/detailslist_2018-07-09-18-04.json b/common/changes/office-ui-fabric-react/detailslist_2018-07-09-18-04.json
new file mode 100644
index 00000000000000..e6c91d5e8ce67c
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/detailslist_2018-07-09-18-04.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsHeader css-in-js conversion",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "kchau@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ComponentExamples.test.tsx b/packages/office-ui-fabric-react/src/components/ComponentExamples.test.tsx
index a7c08fafb6c07e..497605773ecb43 100644
--- a/packages/office-ui-fabric-react/src/components/ComponentExamples.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComponentExamples.test.tsx
@@ -77,7 +77,7 @@ const excludedExampleFiles: string[] = [
 declare const global: any;
 
 /**
- * Automatically connsume and test any component examples that are added to the codebase.
+ * Automatically consume and test any component examples that are added to the codebase.
  *
  * If you are here and are getting a failure due to a component you recently added,
  *    here are some options:
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
index 892c5ce28e0bc5..ca43b11df46c5d 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import * as stylesImport from './DetailsHeader.scss';
-const styles: any = stylesImport;
 import { Icon } from '../../Icon';
-import { BaseComponent, css, IRenderFunction, createRef, IDisposable } from '../../Utilities';
+import { BaseComponent, css, IRenderFunction, createRef, IDisposable, IClassNames } from '../../Utilities';
 import { IColumn, ColumnActionsMode } from './DetailsList.types';
 
 import { ITooltipHostProps } from '../../Tooltip';
 import { IDragDropHelper, IDragDropOptions } from './../../utilities/dragdrop/interfaces';
+import { IDetailsHeaderStyles } from './DetailsHeader.types';
 
 const INNER_PADDING = 16; // Account for padding around the cell.
 const ISPADDED_WIDTH = 24;
@@ -24,6 +23,7 @@ export interface IDetailsColumnProps extends React.Props<DetailsColumn> {
   isDraggable?: boolean;
   setDraggedItemIndex?: (itemIndex: number) => void;
   isDropped?: boolean;
+  headerClassNames: IClassNames<IDetailsHeaderStyles>;
 }
 
 export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
@@ -40,7 +40,7 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
   }
 
   public render() {
-    const { column, columnIndex, parentId, isDraggable } = this.props;
+    const { column, columnIndex, parentId, isDraggable, headerClassNames } = this.props;
     const { onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip } = this.props;
 
     return [
@@ -51,13 +51,13 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
         aria-sort={column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none'}
         aria-colindex={columnIndex}
         className={css(
-          'ms-DetailsHeader-cell',
-          styles.cell,
+          headerClassNames.cell,
           column.headerClassName,
-          column.columnActionsMode !== ColumnActionsMode.disabled && 'is-actionable ' + styles.cellIsActionable,
-          !column.name && 'is-empty ' + styles.cellIsEmpty,
+          column.columnActionsMode !== ColumnActionsMode.disabled &&
+            'is-actionable ' + headerClassNames.cellIsActionable,
+          !column.name && 'is-empty ' + headerClassNames.cellIsEmpty,
           (column.isSorted || column.isGrouped || column.isFiltered) && 'is-icon-visible',
-          column.isPadded && styles.cellWrapperPadded
+          column.isPadded && headerClassNames.cellWrapperPadded
         )}
         data-is-draggable={isDraggable}
         draggable={isDraggable}
@@ -65,10 +65,10 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
         data-automationid={'ColumnsHeaderColumn'}
         data-item-key={column.key}
       >
-        {isDraggable && <Icon iconName={'GripperBarVertical'} className={css(styles.gripperBarVerticalStyle)} />}
+        {isDraggable && <Icon iconName={'GripperBarVertical'} className={headerClassNames.gripperBarVerticalStyle} />}
         {onRenderColumnHeaderTooltip(
           {
-            hostClassName: css(styles.cellTooltip),
+            hostClassName: headerClassNames.cellTooltip,
             id: `${parentId}-${column.key}-tooltip`,
             setAriaDescribedBy: false,
             content: column.columnActionsMode !== ColumnActionsMode.disabled ? column.ariaLabel : '',
@@ -77,7 +77,7 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
                 id={`${parentId}-${column.key}`}
                 aria-label={column.isIconOnly ? column.name : undefined}
                 aria-labelledby={column.isIconOnly ? undefined : `${parentId}-${column.key}-name `}
-                className={css('ms-DetailsHeader-cellTitle', styles.cellTitle)}
+                className={headerClassNames.cellTitle}
                 data-is-focusable={column.columnActionsMode !== ColumnActionsMode.disabled}
                 role={column.columnActionsMode !== ColumnActionsMode.disabled ? 'button' : undefined}
                 aria-describedby={
@@ -89,35 +89,30 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
               >
                 <span
                   id={`${parentId}-${column.key}-name`}
-                  className={css('ms-DetailsHeader-cellName', styles.cellName, {
-                    [styles.iconOnlyHeader]: column.isIconOnly
+                  className={css(headerClassNames.cellName, {
+                    [headerClassNames.iconOnlyHeader]: column.isIconOnly
                   })}
                 >
                   {(column.iconName || column.iconClassName) && (
-                    <Icon className={css(styles.nearIcon, column.iconClassName)} iconName={column.iconName} />
+                    <Icon className={css(headerClassNames.nearIcon, column.iconClassName)} iconName={column.iconName} />
                   )}
 
                   {!column.isIconOnly ? column.name : undefined}
                 </span>
 
-                {column.isFiltered && <Icon className={styles.nearIcon} iconName={'Filter'} />}
+                {column.isFiltered && <Icon className={headerClassNames.nearIcon} iconName={'Filter'} />}
 
                 {column.isSorted && (
                   <Icon
-                    className={css(styles.nearIcon, styles.sortIcon)}
+                    className={css(headerClassNames.nearIcon, headerClassNames.sortIcon)}
                     iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'}
                   />
                 )}
 
-                {column.isGrouped && <Icon className={styles.nearIcon} iconName={'GroupedDescending'} />}
+                {column.isGrouped && <Icon className={headerClassNames.nearIcon} iconName={'GroupedDescending'} />}
 
                 {column.columnActionsMode === ColumnActionsMode.hasDropdown &&
-                  !column.isIconOnly && (
-                    <Icon
-                      className={css('ms-DetailsHeader-filterChevron', styles.filterChevron)}
-                      iconName={'ChevronDown'}
-                    />
-                  )}
+                  !column.isIconOnly && <Icon className={headerClassNames.filterChevron} iconName={'ChevronDown'} />}
               </span>
             )
           },
@@ -125,7 +120,11 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
         )}
       </div>,
       column.ariaLabel && !this.props.onRenderColumnHeaderTooltip ? (
-        <label key={`${column.key}_label`} id={`${parentId}-${column.key}-tooltip`} className={styles.accessibleLabel}>
+        <label
+          key={`${column.key}_label`}
+          id={`${parentId}-${column.key}-tooltip`}
+          className={headerClassNames.accessibleLabel}
+        >
           {column.ariaLabel}
         </label>
       ) : null
@@ -148,13 +147,16 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
       // We need to use native on this to avoid MarqueeSelection from handling the event before us.
       this._events.on(this._root.current, 'mousedown', this._onRootMouseDown);
     }
+
+    const { headerClassNames } = this.props;
+
     if (this.props.isDropped) {
       if (this._root!.current!) {
-        this._root!.current!.classList!.add(styles.borderAfterDropping);
+        this._root!.current!.classList!.add(headerClassNames.borderAfterDropping);
       }
       setTimeout(() => {
         if (this._root!.current!) {
-          this._root!.current!.classList!.remove(styles.borderAfterDropping);
+          this._root!.current!.classList!.remove(headerClassNames.borderAfterDropping);
         }
       }, 1500);
     }
@@ -218,16 +220,20 @@ export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
   }
 
   private _onDragStart(item?: any, itemIndex?: number, selectedItems?: any[], event?: MouseEvent): void {
+    const { headerClassNames } = this.props;
+
     if (itemIndex && this.props.setDraggedItemIndex) {
       this.props.setDraggedItemIndex(itemIndex);
-      this._root.current.classList.add(styles.borderWhileDragging);
+      this._root.current.classList.add(headerClassNames.borderWhileDragging);
     }
   }
 
   private _onDragEnd(item?: any, event?: MouseEvent): void {
+    const { headerClassNames } = this.props;
+
     if (this.props.setDraggedItemIndex) {
       this.props.setDraggedItemIndex(-1);
-      this._root.current.classList.remove(styles.borderWhileDragging);
+      this._root.current.classList.remove(headerClassNames.borderWhileDragging);
     }
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
new file mode 100644
index 00000000000000..267ce035879d6d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -0,0 +1,785 @@
+import * as React from 'react';
+import { findDOMNode } from 'react-dom';
+import { BaseComponent, css, getRTL, getId, KeyCodes, IRenderFunction, createRef, IClassNames } from '../../Utilities';
+import { IColumn, IDetailsHeaderProps } from './DetailsList.types';
+import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone';
+import { Icon } from '../../Icon';
+import { Layer } from '../../Layer';
+import { GroupSpacer } from '../GroupedList/GroupSpacer';
+import { CollapseAllVisibility } from '../../GroupedList';
+import { DetailsRowCheck } from './DetailsRowCheck';
+import { ITooltipHostProps } from '../../Tooltip';
+import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
+import { IDragDropOptions } from '../../utilities/dragdrop/interfaces';
+import { DragDropHelper } from '../../utilities/dragdrop';
+import { DetailsColumn } from '../../components/DetailsList/DetailsColumn';
+import { IColumnResizeDetails, SelectAllVisibility, IDropHintDetails } from './DetailsHeader.types';
+import { IDetailsHeaderStyleProps, IDetailsHeaderStyles } from './DetailsHeader.types';
+import { classNamesFunction } from '../../Utilities';
+
+export const getClassNames = classNamesFunction<IDetailsHeaderStyleProps, IDetailsHeaderStyles>();
+
+const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
+const MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
+
+export interface IDetailsHeader {
+  focus: () => boolean;
+}
+
+export interface IDetailsHeaderState {
+  columnResizeDetails?: IColumnResizeDetails;
+  isAllSelected?: boolean;
+  isSizing?: boolean;
+  groupNestingDepth?: number;
+  isAllCollapsed?: boolean;
+}
+
+export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderProps, IDetailsHeaderState>
+  implements IDetailsHeader {
+  public static defaultProps = {
+    selectAllVisibility: SelectAllVisibility.visible,
+    collapseAllVisibility: CollapseAllVisibility.visible
+  };
+  private _classNames: IClassNames<IDetailsHeaderStyles>;
+  private _rootElement: HTMLElement | undefined;
+  private _rootComponent = createRef<IFocusZone>();
+  private _id: string;
+  private _draggedColumnIndex = -1;
+  private _dropHintDetails: { [key: number]: IDropHintDetails } = {};
+  private _dragDropHelper: DragDropHelper | null;
+  private _currentDropHintIndex: number;
+  private _subscriptionObject: {
+    key: string;
+    dispose(): void;
+  };
+  private _onDropIndexInfo: {
+    sourceIndex: number;
+    targetIndex: number;
+  };
+  constructor(props: IDetailsHeaderProps) {
+    super(props);
+
+    this.state = {
+      columnResizeDetails: undefined,
+      groupNestingDepth: this.props.groupNestingDepth,
+      isAllCollapsed: this.props.isAllCollapsed
+    };
+
+    this._onToggleCollapseAll = this._onToggleCollapseAll.bind(this);
+    this._onSelectAllClicked = this._onSelectAllClicked.bind(this);
+    this._setDraggedItemIndex = this._setDraggedItemIndex.bind(this);
+    this._onDragOver = this._onDragOver.bind(this);
+    this._onDrop = this._onDrop.bind(this);
+    this._getHeaderDragDropOptions = this._getHeaderDragDropOptions.bind(this);
+    this._updateDroppingState = this._updateDroppingState.bind(this);
+    this._getDropHintPositions = this._getDropHintPositions.bind(this);
+    this._computeDropHintToBeShown = this._computeDropHintToBeShown.bind(this);
+    this._resetDropHints = this._resetDropHints.bind(this);
+    this._isValidCurrentDropHintIndex = this._isValidCurrentDropHintIndex.bind(this);
+    this._onRootRef = this._onRootRef.bind(this);
+    this._onDropIndexInfo = {
+      sourceIndex: Number.MIN_SAFE_INTEGER,
+      targetIndex: Number.MIN_SAFE_INTEGER
+    };
+    this._id = getId('header');
+    this._currentDropHintIndex = Number.MIN_SAFE_INTEGER;
+  }
+
+  public componentDidMount(): void {
+    const { selection, columnReorderOptions } = this.props;
+
+    this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);
+
+    // We need to use native on this to avoid MarqueeSelection from handling the event before us.
+    this._events.on(this._rootElement!, 'mousedown', this._onRootMouseDown);
+
+    this._events.on(this._rootElement!, 'keydown', this._onRootKeyDown);
+
+    if (columnReorderOptions) {
+      this._subscriptionObject = this._dragDropHelper!.subscribe(
+        this._rootElement!,
+        this._events,
+        this._getHeaderDragDropOptions()
+      );
+    }
+  }
+
+  public componentDidUpdate(prevProps: IDetailsHeaderProps): void {
+    const { columnReorderOptions } = this.props;
+
+    if (!columnReorderOptions) {
+      if (this._subscriptionObject) {
+        this._subscriptionObject.dispose();
+        delete this._subscriptionObject;
+      }
+    } else if (!this._subscriptionObject) {
+      this._subscriptionObject = this._dragDropHelper!.subscribe(
+        this._rootElement!,
+        this._events,
+        this._getHeaderDragDropOptions()
+      );
+    }
+
+    if (this.props !== prevProps && this._onDropIndexInfo.sourceIndex >= 0 && this._onDropIndexInfo.targetIndex >= 0) {
+      if (
+        prevProps.columns[this._onDropIndexInfo.sourceIndex].key ===
+        this.props.columns[this._onDropIndexInfo.targetIndex].key
+      ) {
+        this._onDropIndexInfo = {
+          sourceIndex: Number.MIN_SAFE_INTEGER,
+          targetIndex: Number.MIN_SAFE_INTEGER
+        };
+      }
+    }
+  }
+
+  public componentWillReceiveProps(newProps: IDetailsHeaderProps): void {
+    const { groupNestingDepth } = this.state;
+
+    if (newProps.groupNestingDepth !== groupNestingDepth) {
+      this.setState({ groupNestingDepth: newProps.groupNestingDepth });
+    }
+  }
+
+  public componentWillUnmount(): void {
+    if (this._subscriptionObject) {
+      this._subscriptionObject.dispose();
+      delete this._subscriptionObject;
+    }
+  }
+
+  public render(): JSX.Element {
+    const {
+      columns,
+      ariaLabel,
+      ariaLabelForSelectAllCheckbox,
+      selectAllVisibility,
+      ariaLabelForSelectionColumn,
+      indentWidth,
+      viewport,
+      columnReorderOptions,
+      onColumnClick,
+      onColumnContextMenu,
+      styles,
+      theme
+    } = this.props;
+    const { isAllSelected, columnResizeDetails, isSizing, groupNestingDepth, isAllCollapsed } = this.state;
+    const showCheckbox = selectAllVisibility !== SelectAllVisibility.none;
+    const isCheckboxHidden = selectAllVisibility === SelectAllVisibility.hidden;
+
+    const { onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip } = this.props;
+    if (!this._dragDropHelper && this.props.columnReorderOptions) {
+      this._dragDropHelper = new DragDropHelper({
+        selection: {
+          getSelection: () => {
+            return;
+          }
+        } as ISelection,
+        minimumPixelsForDrag: this.props.minimumPixelsForDrag
+      });
+    }
+    const frozenColumnCountFromStart =
+      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromStart
+        ? columnReorderOptions!.frozenColumnCountFromStart!
+        : 0;
+    const frozenColumnCountFromEnd =
+      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromEnd
+        ? columnReorderOptions!.frozenColumnCountFromEnd!
+        : 0;
+
+    this._classNames = getClassNames(styles, {
+      theme: theme!,
+      isAllSelected,
+      isSelectAllHidden: selectAllVisibility === SelectAllVisibility.hidden,
+      isResizingColumn: !!columnResizeDetails && isSizing,
+      isSizing,
+      isAllCollapsed,
+      isCheckboxHidden
+    });
+
+    const classNames = this._classNames;
+
+    return (
+      <FocusZone
+        role="row"
+        aria-label={ariaLabel}
+        className={classNames.root}
+        componentRef={this._rootComponent}
+        ref={this._onRootRef}
+        onMouseMove={this._onRootMouseMove}
+        data-automationid="DetailsHeader"
+        style={{ minWidth: viewport ? viewport.width : 0 }}
+        direction={FocusZoneDirection.horizontal}
+      >
+        {showCheckbox
+          ? [
+              <div
+                key="__checkbox"
+                className={css(classNames.cell, classNames.cellIsCheck)}
+                aria-labelledby={`${this._id}-check`}
+                onClick={this._onSelectAllClicked}
+                aria-colindex={!isCheckboxHidden ? 1 : undefined}
+                role={!isCheckboxHidden ? 'columnheader' : undefined}
+              >
+                {onRenderColumnHeaderTooltip(
+                  {
+                    hostClassName: css(classNames.checkTooltip),
+                    id: `${this._id}-checkTooltip`,
+                    setAriaDescribedBy: false,
+                    content: ariaLabelForSelectAllCheckbox,
+                    children: (
+                      <DetailsRowCheck
+                        id={`${this._id}-check`}
+                        aria-label={ariaLabelForSelectionColumn}
+                        aria-describedby={`${this._id}-checkTooltip`}
+                        data-is-focusable={!isCheckboxHidden}
+                        isHeader={true}
+                        selected={isAllSelected}
+                        anySelected={false}
+                        canSelect={!isCheckboxHidden}
+                        className={classNames.check}
+                      />
+                    )
+                  },
+                  this._onRenderColumnHeaderTooltip
+                )}
+              </div>,
+              ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? (
+                <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
+                  {ariaLabelForSelectAllCheckbox}
+                </label>
+              ) : null
+            ]
+          : null}
+        {groupNestingDepth! > 0 && this.props.collapseAllVisibility === CollapseAllVisibility.visible ? (
+          <div className={classNames.cell} onClick={this._onToggleCollapseAll} data-is-focusable={true}>
+            <Icon className={classNames.collapseButton} iconName="ChevronDown" />
+          </div>
+        ) : null}
+        <GroupSpacer indentWidth={indentWidth} count={groupNestingDepth! - 1} />
+        {columns.map((column: IColumn, columnIndex: number) => {
+          const _isDraggable = columnReorderOptions
+            ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd
+            : false;
+          return [
+            columnReorderOptions &&
+              (_isDraggable || columnIndex === columns.length - frozenColumnCountFromEnd) &&
+              this._renderDropHint(columnIndex),
+            <DetailsColumn
+              column={column}
+              key={column.key}
+              columnIndex={(showCheckbox ? 2 : 1) + columnIndex}
+              parentId={this._id}
+              isDraggable={_isDraggable}
+              setDraggedItemIndex={this._setDraggedItemIndex}
+              dragDropHelper={this._dragDropHelper}
+              onColumnClick={onColumnClick}
+              onColumnContextMenu={onColumnContextMenu}
+              isDropped={this._onDropIndexInfo.targetIndex === columnIndex}
+              headerClassNames={classNames}
+            />,
+            column.isResizable && this._renderColumnSizer(columnIndex)
+          ];
+        })}
+        {columnReorderOptions && frozenColumnCountFromEnd === 0 && this._renderDropHint(columns.length)}
+        {isSizing && (
+          <Layer>
+            <div
+              className={classNames.sizingOverlay}
+              onMouseMove={this._onSizerMouseMove}
+              onMouseUp={this._onSizerMouseUp}
+            />
+          </Layer>
+        )}
+      </FocusZone>
+    );
+  }
+
+  /** Set focus to the active thing in the focus area. */
+  public focus(): boolean {
+    return Boolean(this._rootComponent.current && this._rootComponent.current.focus());
+  }
+
+  private _getHeaderDragDropOptions(): IDragDropOptions {
+    const options = {
+      selectionIndex: 1,
+      context: { data: this, index: 0 },
+      canDrag: () => false,
+      canDrop: () => true,
+      onDragStart: () => undefined,
+      updateDropState: this._updateDroppingState,
+      onDrop: this._onDrop,
+      onDragEnd: () => undefined,
+      onDragOver: this._onDragOver
+    };
+    return options;
+  }
+
+  private _updateDroppingState(newValue: boolean, event: DragEvent): void {
+    if (this._draggedColumnIndex >= 0 && event.type !== 'drop') {
+      if (!newValue) {
+        this._resetDropHints();
+      }
+    }
+  }
+
+  private _isValidCurrentDropHintIndex() {
+    return this._currentDropHintIndex! >= 0;
+  }
+
+  private _onDragOver(item: any, event: DragEvent): void {
+    if (this._draggedColumnIndex >= 0) {
+      event.stopPropagation();
+      this._computeDropHintToBeShown(event.clientX);
+    }
+  }
+
+  private _onDrop(item?: any, event?: DragEvent): void {
+    const draggedColumnIndex = this._draggedColumnIndex;
+    // Target index will not get changed if draggeditem is after target item.
+    const targetIndex =
+      draggedColumnIndex > this._currentDropHintIndex! ? this._currentDropHintIndex! : this._currentDropHintIndex! - 1;
+    let isValidDrop = false;
+    if (this._draggedColumnIndex >= 0 && event! instanceof DragEvent) {
+      event!.stopPropagation();
+      if (this._isValidCurrentDropHintIndex()) {
+        isValidDrop = true;
+        this._onDropIndexInfo.sourceIndex = draggedColumnIndex;
+        this._onDropIndexInfo.targetIndex = targetIndex;
+      }
+      this._resetDropHints();
+      this._dropHintDetails = {};
+      this._draggedColumnIndex = -1;
+      if (isValidDrop) {
+        this.props.columnReorderOptions!.handleColumnReorder(draggedColumnIndex, targetIndex);
+      }
+    }
+  }
+
+  private _setDraggedItemIndex(itemIndex: number) {
+    if (itemIndex >= 0) {
+      // Column index is set based on the checkbox
+      this._draggedColumnIndex = this.props.selectionMode !== SelectionMode.none ? itemIndex - 2 : itemIndex - 1;
+      this._getDropHintPositions();
+    } else {
+      this._resetDropHints();
+      this._draggedColumnIndex = -1;
+      this._dropHintDetails = {};
+    }
+  }
+
+  private _resetDropHints(): void {
+    if (this._currentDropHintIndex >= 0) {
+      this._updateDropHintElement(this._dropHintDetails[this._currentDropHintIndex].dropHintElementRef, 'hidden');
+      this._currentDropHintIndex = Number.MIN_SAFE_INTEGER;
+    }
+  }
+
+  private _updateDropHintElement(element: HTMLElement, property: string) {
+    (element.childNodes[1] as HTMLElement).style.visibility = property;
+    (element.childNodes[0] as HTMLElement).style.visibility = property;
+  }
+
+  private _getDropHintPositions = (): void => {
+    const { columnReorderOptions, columns } = this.props;
+    let prevX = 0;
+    let prevMid = 0;
+    let prevRef: HTMLElement;
+    const frozenColumnCountFromStart =
+      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromStart
+        ? columnReorderOptions!.frozenColumnCountFromStart
+        : 0;
+    const frozenColumnCountFromEnd =
+      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromEnd
+        ? columnReorderOptions!.frozenColumnCountFromEnd
+        : 0;
+    for (let i = frozenColumnCountFromStart!; i < columns.length - frozenColumnCountFromEnd! + 1; i++) {
+      const dropHintElement = this._rootElement!.querySelectorAll('#columnDropHint_' + i)[0] as HTMLElement;
+      if (dropHintElement) {
+        if (i === frozenColumnCountFromStart!) {
+          prevX = dropHintElement!.offsetLeft;
+          prevMid = dropHintElement!.offsetLeft;
+          prevRef = dropHintElement;
+        } else {
+          const newMid = (dropHintElement!.offsetLeft + prevX!) / 2;
+          this._dropHintDetails[i - 1] = {
+            originX: prevX,
+            startX: prevMid!,
+            endX: newMid,
+            dropHintElementRef: prevRef!
+          };
+          prevMid = newMid;
+          prevRef = dropHintElement;
+          prevX = dropHintElement!.offsetLeft;
+          if (i === columns.length - frozenColumnCountFromEnd!) {
+            this._dropHintDetails[i] = {
+              originX: prevX,
+              startX: prevMid!,
+              endX: dropHintElement!.offsetLeft,
+              dropHintElementRef: prevRef
+            };
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible
+   *
+   */
+  private _computeDropHintToBeShown = (clientX: number): void => {
+    const clientRect = this._rootElement!.getBoundingClientRect();
+    const headerOriginX = clientRect.left;
+    const eventXRelativePosition = clientX - headerOriginX;
+    const currentDropHintIndex = this._currentDropHintIndex!;
+    if (this._isValidCurrentDropHintIndex()) {
+      if (
+        eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex!].startX &&
+        eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex!].endX
+      ) {
+        return;
+      }
+    }
+    const { columnReorderOptions, columns } = this.props;
+    const frozenColumnCountFromStart =
+      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromStart
+        ? columnReorderOptions!.frozenColumnCountFromStart
+        : 0;
+    const frozenColumnCountFromEnd =
+      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromEnd
+        ? columnReorderOptions!.frozenColumnCountFromEnd
+        : 0;
+    const currentIndex: number = frozenColumnCountFromStart!;
+    const lastValidColumn = columns.length - frozenColumnCountFromEnd!;
+    let indexToUpdate = -1;
+    if (eventXRelativePosition <= this._dropHintDetails[currentIndex].endX) {
+      indexToUpdate = currentIndex;
+    } else if (eventXRelativePosition >= this._dropHintDetails[lastValidColumn]!.startX) {
+      indexToUpdate = lastValidColumn;
+    } else if (this._isValidCurrentDropHintIndex()) {
+      if (
+        this._dropHintDetails[currentDropHintIndex! + 1] &&
+        eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex! + 1].startX &&
+        eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex! + 1].endX
+      ) {
+        indexToUpdate = currentDropHintIndex! + 1;
+      } else if (
+        this._dropHintDetails[currentDropHintIndex! - 1] &&
+        eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex! - 1].startX &&
+        eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex! - 1].endX
+      ) {
+        indexToUpdate = currentDropHintIndex! - 1;
+      }
+    }
+    if (indexToUpdate === -1) {
+      let startIndex = frozenColumnCountFromStart!;
+      let endIndex = lastValidColumn;
+      while (startIndex < endIndex) {
+        const middleIndex = Math.ceil((endIndex + startIndex!) / 2);
+        if (
+          eventXRelativePosition >= this._dropHintDetails[middleIndex].startX &&
+          eventXRelativePosition <= this._dropHintDetails[middleIndex].endX
+        ) {
+          indexToUpdate = middleIndex;
+          break;
+        } else if (eventXRelativePosition < this._dropHintDetails[middleIndex]!.originX) {
+          endIndex = middleIndex;
+        } else if (eventXRelativePosition > this._dropHintDetails[middleIndex]!.originX) {
+          startIndex = middleIndex;
+        }
+      }
+    }
+
+    if (indexToUpdate === this._draggedColumnIndex || indexToUpdate === this._draggedColumnIndex + 1) {
+      if (this._isValidCurrentDropHintIndex()) {
+        this._resetDropHints();
+      }
+    } else if (currentDropHintIndex !== indexToUpdate && indexToUpdate >= 0) {
+      this._resetDropHints();
+      this._updateDropHintElement(this._dropHintDetails[indexToUpdate].dropHintElementRef, 'visible');
+      this._currentDropHintIndex = indexToUpdate;
+    }
+  };
+
+  private _renderColumnSizer(columnIndex: number): JSX.Element {
+    const { columns } = this.props;
+    const column = this.props.columns[columnIndex];
+    const { columnResizeDetails } = this.state;
+    const classNames = this._classNames;
+
+    return (
+      <div
+        key={`${column.key}_sizer`}
+        aria-hidden={true}
+        role="button"
+        data-is-focusable={false}
+        onClick={stopPropagation}
+        data-sizer-index={columnIndex}
+        onBlur={this._onSizerBlur}
+        className={css(
+          classNames.cellSizer,
+          columnIndex < columns.length - 1 ? classNames.cellSizerStart : classNames.cellSizerEnd,
+          {
+            [classNames.cellIsResizing]: columnResizeDetails && columnResizeDetails.columnIndex === columnIndex
+          }
+        )}
+        onDoubleClick={this._onSizerDoubleClick.bind(this, columnIndex)}
+      />
+    );
+  }
+
+  private _renderDropHint(dropHintIndex: number): JSX.Element {
+    const classNames = this._classNames;
+    return (
+      <div key={'dropHintKey'} className={classNames.dropHintStyle} id={`columnDropHint_${dropHintIndex}`}>
+        <div
+          key={`dropHintCircleKey`}
+          aria-hidden={true}
+          data-is-focusable={false}
+          data-sizer-index={dropHintIndex}
+          className={classNames.dropHintCircleStyle}
+        />
+        <div
+          key={`dropHintLineKey`}
+          aria-hidden={true}
+          data-is-focusable={false}
+          data-sizer-index={dropHintIndex}
+          className={classNames.dropHintLineStyle}
+        />
+      </div>
+    );
+  }
+  private _onRenderColumnHeaderTooltip = (
+    tooltipHostProps: ITooltipHostProps,
+    defaultRender?: IRenderFunction<ITooltipHostProps>
+  ): JSX.Element => {
+    return <span className={tooltipHostProps.hostClassName}>{tooltipHostProps.children}</span>;
+  };
+
+  /**
+   * double click on the column sizer will auto ajust column width
+   * to fit the longest content among current rendered rows.
+   *
+   * @private
+   * @param {number} columnIndex (index of the column user double clicked)
+   * @param {React.MouseEvent} ev (mouse double click event)
+   */
+  private _onSizerDoubleClick(columnIndex: number, ev: React.MouseEvent<HTMLElement>): void {
+    const { onColumnAutoResized, columns } = this.props;
+    if (onColumnAutoResized) {
+      onColumnAutoResized(columns[columnIndex], columnIndex);
+    }
+  }
+
+  /**
+   * Called when the select all toggle is clicked.
+   */
+  private _onSelectAllClicked = (): void => {
+    const { selection } = this.props;
+
+    selection.toggleAllSelected();
+  };
+
+  private _onRootMouseDown = (ev: MouseEvent): void => {
+    const columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');
+    const columnIndex = Number(columnIndexAttr);
+    const { columns } = this.props;
+
+    if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {
+      // Ignore anything except the primary button.
+      return;
+    }
+
+    this.setState({
+      columnResizeDetails: {
+        columnIndex: columnIndex,
+        columnMinWidth: columns[columnIndex].calculatedWidth!,
+        originX: ev.clientX
+      }
+    });
+
+    ev.preventDefault();
+    ev.stopPropagation();
+  };
+
+  private _onRootMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { columnResizeDetails, isSizing } = this.state;
+
+    if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
+      this.setState({ isSizing: true });
+    }
+  };
+
+  private _onRootRef = (focusZone: FocusZone): void => {
+    if (focusZone) {
+      // Need to resolve the actual DOM node, not the component. The element itself will be used for drag/drop and focusing.
+      this._rootElement = findDOMNode(focusZone) as HTMLElement;
+    } else {
+      this._rootElement = undefined;
+    }
+  };
+
+  private _onRootKeyDown = (ev: KeyboardEvent): void => {
+    const { columnResizeDetails, isSizing } = this.state;
+    const { columns, onColumnResized } = this.props;
+
+    const columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');
+
+    if (!columnIndexAttr || isSizing) {
+      return;
+    }
+
+    const columnIndex = Number(columnIndexAttr);
+
+    if (!columnResizeDetails) {
+      if (ev.which === KeyCodes.enter) {
+        this.setState({
+          columnResizeDetails: {
+            columnIndex: columnIndex,
+            columnMinWidth: columns[columnIndex].calculatedWidth!
+          }
+        });
+
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+    } else {
+      let increment: number | undefined;
+
+      if (ev.which === KeyCodes.enter) {
+        this.setState({
+          columnResizeDetails: undefined
+        });
+
+        ev.preventDefault();
+        ev.stopPropagation();
+      } else if (ev.which === KeyCodes.left) {
+        increment = getRTL() ? 1 : -1;
+      } else if (ev.which === KeyCodes.right) {
+        increment = getRTL() ? -1 : 1;
+      }
+
+      if (increment) {
+        if (!ev.shiftKey) {
+          increment *= 10;
+        }
+
+        this.setState({
+          columnResizeDetails: {
+            ...columnResizeDetails,
+            columnMinWidth: columnResizeDetails.columnMinWidth + increment
+          }
+        });
+
+        if (onColumnResized) {
+          onColumnResized(columns[columnIndex], columnResizeDetails.columnMinWidth + increment, columnIndex);
+        }
+
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+    }
+  };
+
+  /**
+   * mouse move event handler in the header
+   * it will set isSizing state to true when user clicked on the sizer and move the mouse.
+   *
+   * @private
+   * @param {React.MouseEvent} ev (mouse move event)
+   */
+  private _onSizerMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
+    const {
+      // use buttons property here since ev.button in some edge case is not upding well during the move.
+      // but firefox doesn't support it, so we set the default value when it is not defined.
+      buttons
+    } = ev;
+    const { onColumnIsSizingChanged, onColumnResized, columns } = this.props;
+    const { columnResizeDetails } = this.state;
+
+    if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
+      // cancel mouse down event and return early when the primary button is not pressed
+      this._onSizerMouseUp(ev);
+      return;
+    }
+
+    if (ev.clientX !== columnResizeDetails!.originX) {
+      if (onColumnIsSizingChanged) {
+        onColumnIsSizingChanged(columns[columnResizeDetails!.columnIndex], true);
+      }
+    }
+
+    if (onColumnResized) {
+      let movement = ev.clientX - columnResizeDetails!.originX!;
+
+      if (getRTL()) {
+        movement = -movement;
+      }
+
+      onColumnResized(
+        columns[columnResizeDetails!.columnIndex],
+        columnResizeDetails!.columnMinWidth + movement,
+        columnResizeDetails!.columnIndex
+      );
+    }
+  };
+
+  private _onSizerBlur = (ev: React.FocusEvent<HTMLElement>): void => {
+    const { columnResizeDetails } = this.state;
+
+    if (columnResizeDetails) {
+      this.setState({
+        columnResizeDetails: undefined,
+        isSizing: false
+      });
+    }
+  };
+
+  /**
+   * mouse up event handler in the header
+   * clear the resize related state.
+   * This is to ensure we can catch double click event
+   *
+   * @private
+   * @param {React.MouseEvent} ev (mouse up event)
+   */
+  private _onSizerMouseUp = (ev: React.MouseEvent<HTMLElement>): void => {
+    const { columns, onColumnIsSizingChanged } = this.props;
+    const { columnResizeDetails } = this.state;
+
+    this.setState({
+      columnResizeDetails: undefined,
+      isSizing: false
+    });
+
+    if (onColumnIsSizingChanged) {
+      onColumnIsSizingChanged(columns[columnResizeDetails!.columnIndex], false);
+    }
+  };
+
+  private _onSelectionChanged(): void {
+    const isAllSelected = this.props.selection.isAllSelected();
+
+    if (this.state.isAllSelected !== isAllSelected) {
+      this.setState({
+        isAllSelected: isAllSelected
+      });
+    }
+  }
+
+  private _onToggleCollapseAll(): void {
+    const { onToggleCollapseAll } = this.props;
+    const newCollapsed = !this.state.isAllCollapsed;
+    this.setState({
+      isAllCollapsed: newCollapsed
+    });
+    if (onToggleCollapseAll) {
+      onToggleCollapseAll(newCollapsed);
+    }
+  }
+}
+
+function stopPropagation(ev: React.MouseEvent<HTMLElement>): void {
+  ev.stopPropagation();
+}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
deleted file mode 100644
index 69ceaa962c540e..00000000000000
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
+++ /dev/null
@@ -1,304 +0,0 @@
-@import '../../common/common';
-
-$iconForegroundColor: $bodySubtextColor;
-$headerForegroundColor: $bodyTextColor;
-$headerBackgroundColor: $bodyBackgroundColor;
-$dropdownChevronForegroundColor: $ms-color-neutralTertiary;
-$rowHeight: 32px;
-$resizerColor: $ms-color-neutralTertiaryAlt;
-$cellPadding: 8px;
-$isPaddedMargin: 24px;
-
-.root {
-  display: inline-block;
-  background: $headerBackgroundColor;
-  position: relative;
-  min-width: 100%;
-  vertical-align: top;
-  height: $rowHeight;
-  line-height: $rowHeight;
-  white-space: nowrap;
-  box-sizing: content-box;
-  padding-bottom: 1px;
-  border-bottom: 1px solid $bodyDividerColor;
-  cursor: default;
-  user-select: none;
-
-  &.rootIsSelectAllHidden {
-    .cell.cellIsCheck {
-      visibility: hidden;
-    }
-  }
-
-  &:hover .check {
-    opacity: 1;
-  }
-}
-
-.cellWrapperPadded {
-  @include ms-padding-right($isPaddedMargin + $cellPadding);
-}
-
-.cell {
-  @include ms-font-s;
-  color: $headerForegroundColor;
-  @include focus-border();
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  padding: 0 $cellPadding;
-  border: none;
-  line-height: inherit;
-  margin: 0;
-  height: $rowHeight;
-  vertical-align: top;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  @include ms-text-align(left);
-
-  &.cellIsCheck {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-
-    &.isSelected {
-      opacity: 1;
-    }
-  }
-
-  &.cellIsActionable {
-    &:hover {
-      color: $bodyTextColor;
-      background: $listHeaderBackgroundHoveredColor;
-    }
-
-    &:active {
-      background: $listHeaderBackgroundPressedColor;
-    }
-  }
-
-  &.cellIsEmpty {
-    text-overflow: clip;
-  }
-
-  &:hover .gripperBarVerticalStyle {
-    display: block;
-  }
-}
-
-.gripperBarVerticalStyle {
-  display: none;
-  position: absolute;
-  @include ms-text-align(left);
-  color: $ms-color-neutralTertiary;
-  @include ms-left(1px);
-}
-
-.cellSizer {
-  @include focus-clear();
-
-  display: inline-block;
-  position: relative;
-  cursor: ew-resize;
-  bottom: 0;
-  top: 0;
-  overflow: hidden;
-  height: inherit;
-  background: transparent;
-  z-index: 1;
-  width: 16px;
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background: $resizerColor;
-    opacity: 0;
-    left: 50%;
-  }
-
-  &:focus:after,
-  &:hover:after,
-  &.cellIsResizing:after {
-    opacity: 1;
-    transition: opacity 0.3s linear;
-  }
-
-  &.cellIsResizing:after {
-    @include ms-drop-shadow();
-  }
-}
-
-.cellSizerStart {
-  margin: 0 -8px;
-}
-
-.cellSizerEnd {
-  margin: 0;
-  @include margin-left(-16px);
-}
-
-.collapseButton {
-  text-align: center;
-  transform: rotate(-180deg);
-  transform-origin: 50% 50%;
-  transition: transform 0.1s linear;
-  width: 20px;
-  outline: 0;
-
-  &.collapseButtonIsCollapsed {
-    transform: rotate(0deg);
-  }
-}
-
-.iconOnlyHeader {
-  .nearIcon {
-    @include ms-padding-left(0);
-  }
-}
-
-.nearIcon {
-  color: $iconForegroundColor;
-  opacity: 1;
-  @include ms-padding-left(8px);
-
-  &.sortIcon {
-    @include ms-padding-left(4px);
-    position: relative;
-    top: 1px;
-  }
-}
-
-.cell .filterChevron {
-  color: $dropdownChevronForegroundColor;
-  @include ms-padding-left(4px);
-  vertical-align: middle;
-}
-
-.cellTitle {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: stretch;
-  box-sizing: border-box;
-  overflow: hidden;
-  @include focus-border($position: auto);
-  padding: 0 8px 0 12px;
-}
-
-.cellName {
-  flex: 0 1 auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-:global(.ms-TooltipHost).checkTooltip {
-  display: block;
-}
-
-.cellTooltip {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.sizingOverlay {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  cursor: ew-resize;
-  background: rgba(255, 255, 255, 0);
-
-  @include high-contrast {
-    background: transparent;
-    -ms-high-contrast-adjust: none;
-  }
-}
-
-.cell .collapseButton {
-  @include ms-padding-right(0);
-}
-
-.accessibleLabel {
-  @include ms-screenReaderOnly;
-}
-
-.borderWhileDragging {
-  border-style: solid;
-  border-width: 1px;
-  border-color: $ms-color-themePrimary;
-  -webkit-animation: fadeOut 0.2s forwards;
-  animation: fadeOut 0.2s forwards;
-}
-
-.dropHintCircleStyle {
-  display: inline-block;
-  visibility: hidden;
-  position: absolute;
-  bottom: 0;
-  top: -27px;
-  height: 9px;
-  width: 9px;
-  border-radius: 50%;
-  @include ms-margin-left(-5px);
-  top: 34px;
-  overflow: visible;
-  z-index: 10;
-  border: 1px solid $ms-color-themePrimary;
-  background: $ms-color-white;
-}
-
-.dropHintLineStyle {
-  display: inline-block;
-  visibility: hidden;
-  position: absolute;
-  bottom: 0;
-  top: -3px;
-  overflow: hidden;
-  height: 37px;
-  width: 1px;
-  background: $ms-color-themePrimary;
-  z-index: 10;
-}
-
-.dropHintStyle {
-  display: inline-block;
-  position: absolute;
-}
-
-.borderAfterDropping {
-  border-style: solid;
-  border-width: 1px;
-  border-color: $ms-color-themePrimary;
-  -webkit-animation: fadeOut 1.5s forwards;
-  animation: fadeOut 1.5s forwards;
-  @include ms-left(-1px);
-  line-height: 31px;
-}
-
-@-webkit-keyframes fadeOut {
-  from {
-    border-color: $ms-color-themePrimary;
-  }
-  to {
-    border-color: white;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    border-color: $ms-color-themePrimary;
-  }
-  to {
-    border-color: white;
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts
new file mode 100644
index 00000000000000..9abca249f0a5d6
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.styles.ts
@@ -0,0 +1,427 @@
+import { IDetailsHeaderStyleProps, IDetailsHeaderStyles } from './DetailsHeader.types';
+import {
+  getFocusStyle,
+  focusClear,
+  FontClassNames,
+  IStyle,
+  getGlobalClassNames,
+  HighContrastSelector,
+  hiddenContentStyle,
+  keyframes
+} from '../../Styling';
+import { IsFocusVisibleClassName } from '../../Utilities';
+
+const GlobalClassNames = {
+  tooltipHost: 'ms-TooltipHost',
+  root: 'ms-DetailsHeader',
+  cell: 'ms-DetailsHeader-cell',
+  cellIsCheck: 'ms-DetailsHeader-cellIsCheck',
+  collapseButton: 'ms-DetailsHeader-collapseButton',
+  isCollapsed: 'is-collapsed',
+  isAllSelected: 'is-allSelected',
+  isSelectAllHidden: 'is-selectAllHidden',
+  isResizingColumn: 'is-resizingColumn',
+  cellSizer: 'ms-DetailsHeader-cellSizer',
+  isResizing: 'is-resizing',
+  dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',
+  dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',
+  cellTitle: 'ms-DetailsHeader-cellTitle',
+  cellName: 'ms-DetailsHeader-cellName',
+  filterChevron: 'ms-DetailsHeader-filterChevron'
+};
+
+const values = {
+  rowHeight: 32,
+  cellPadding: 8,
+  isPaddedMargin: 24
+};
+
+export const getStyles = (props: IDetailsHeaderStyleProps): IDetailsHeaderStyles => {
+  const { theme, className, isSelectAllHidden, isAllSelected, isResizingColumn, isSizing, isAllCollapsed } = props;
+  const { semanticColors, palette } = theme;
+  const classNames = getGlobalClassNames(GlobalClassNames, theme);
+
+  const colors = {
+    iconForegroundColor: semanticColors.bodySubtext,
+    headerForegroundColor: semanticColors.bodyText,
+    headerBackgroundColor: semanticColors.bodyBackground,
+    dropdownChevronForegroundColor: palette.neutralTertiary,
+    resizerColor: palette.neutralTertiaryAlt
+  };
+
+  const cellSizerFadeInStyles: IStyle = {
+    opacity: 1,
+    transition: 'opacity 0.3s linear'
+  };
+
+  const fadeOut: string = keyframes({
+    from: {
+      borderColor: palette.themePrimary
+    },
+    to: {
+      borderColor: palette.white
+    }
+  });
+
+  const fadeOutAnimation = {
+    animationName: fadeOut,
+    animationDuration: '0.2s',
+    animationDirection: 'forwards'
+  };
+
+  const slowFadeOutAnimation = {
+    animationName: fadeOut,
+    animationDuration: '1.5s',
+    animationDirection: 'forwards'
+  };
+
+  return {
+    root: [
+      classNames.root,
+      {
+        display: 'inline-block',
+        background: colors.headerBackgroundColor,
+        position: 'relative',
+        minWidth: '100%',
+        verticalAlign: 'top',
+        height: values.rowHeight,
+        lineHeight: values.rowHeight,
+        whiteSpace: 'nowrap',
+        boxSizing: 'content-box',
+        paddingBottom: '1px',
+        borderBottom: `1px solid ${semanticColors.bodyDivider}`,
+        cursor: 'default',
+        userSelect: 'none',
+        selectors: {
+          '&:hover $check': {
+            opacity: 1
+          },
+          [`${classNames.tooltipHost} $checkTooltip`]: {
+            display: 'block'
+          }
+        }
+      },
+      isAllSelected && classNames.isAllSelected,
+      isSelectAllHidden && {
+        selectors: {
+          $cell$cellIsCheck: {
+            visibility: 'hidden'
+          }
+        }
+      },
+      isResizingColumn && classNames.isResizingColumn,
+      className
+    ],
+
+    check: [
+      {
+        height: 32
+      },
+      {
+        selectors: {
+          [`.${IsFocusVisibleClassName} &:focus`]: {
+            opacity: 1
+          }
+        }
+      }
+    ],
+
+    cellWrapperPadded: [
+      {
+        paddingRight: values.isPaddedMargin + values.cellPadding
+      }
+    ],
+
+    cellIsCheck: [
+      classNames.cellIsCheck,
+      {
+        position: 'relative',
+        padding: 0,
+        margin: 0,
+        display: 'inline-flex',
+        alignItems: 'center'
+      },
+      isAllSelected && {
+        opacity: 1
+      }
+    ],
+    cellIsActionable: [
+      {
+        selectors: {
+          '&:hover': {
+            color: semanticColors.bodyText,
+            background: semanticColors.listHeaderBackgroundHovered
+          },
+          '&:active': {
+            background: semanticColors.listHeaderBackgroundPressed
+          }
+        }
+      }
+    ],
+    cellIsEmpty: [
+      {
+        textOverflow: 'clip'
+      }
+    ],
+    cell: [
+      classNames.cell,
+      getFocusStyle(theme),
+      FontClassNames.small,
+      {
+        color: colors.headerForegroundColor,
+        position: 'relative',
+        display: 'inline-block;',
+        boxSizing: 'border-box',
+        padding: `0 ${values.cellPadding}`,
+        border: 'none',
+        lineHeight: 'inherit',
+        margin: '0',
+        height: values.rowHeight,
+        verticalAlign: 'top',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        textAlign: 'left',
+        selectors: {
+          '&:hover $gripperBarVerticalStyle': {
+            display: 'block'
+          },
+          '& $filterChevron': {
+            color: colors.dropdownChevronForegroundColor,
+            paddingLeft: 4,
+            verticalAlign: 'middle'
+          },
+          $collapseButton: {
+            paddingRight: 0
+          }
+        }
+      }
+    ],
+
+    gripperBarVerticalStyle: [
+      {
+        display: 'none',
+        position: 'absolute',
+        textAlign: 'left',
+        color: palette.neutralTertiary,
+        left: 1
+      }
+    ],
+
+    cellSizer: [
+      classNames.cellSizer,
+      focusClear(),
+      {
+        display: 'inline-block',
+        position: 'relative',
+        cursor: 'ew-resize',
+        bottom: 0,
+        top: 0,
+        overflow: 'hidden',
+        height: 'inherit',
+        background: 'transparent',
+        zIndex: 1,
+        width: 16,
+
+        selectors: {
+          '&:after': {
+            content: '',
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            width: 1,
+            background: colors.resizerColor,
+            opacity: 0,
+            left: '50%'
+          },
+
+          '&:focus:after': cellSizerFadeInStyles,
+          '&:hover:after': cellSizerFadeInStyles,
+          '&$cellIsResizing:after': [
+            cellSizerFadeInStyles,
+            {
+              boxShadow: '0 0 5px 0 0 rgba(0, 0, 0, 0.4)'
+            }
+          ]
+        }
+      }
+    ],
+
+    cellIsResizing: [classNames.isResizing],
+
+    cellSizerStart: [
+      {
+        margin: '0 -8px'
+      }
+    ],
+
+    cellSizerEnd: [
+      {
+        margin: 0,
+        marginLeft: -16
+      }
+    ],
+
+    collapseButton: [
+      classNames.collapseButton,
+      {
+        textAlign: 'center',
+        transform: 'rotate(-180deg)',
+        transformOrigin: '50% 50%',
+        transition: 'transform 0.1s linear',
+        width: 20,
+        outline: 0
+      },
+      isAllCollapsed && {
+        transform: 'rotate(0deg)'
+      },
+      isAllCollapsed && classNames.isCollapsed
+    ],
+
+    iconOnlyHeader: [
+      {
+        selectors: {
+          $nearIcon: {
+            paddingLeft: 0
+          }
+        }
+      }
+    ],
+
+    nearIcon: [
+      {
+        color: colors.iconForegroundColor,
+        opacity: 1,
+        paddingLeft: 8,
+        selectors: {
+          '&$sortIcon': {
+            paddingLeft: 4,
+            position: 'relative',
+            top: 1
+          }
+        }
+      }
+    ],
+
+    sortIcon: [],
+
+    filterChevron: [classNames.filterChevron],
+
+    cellTitle: [
+      classNames.cellTitle,
+      getFocusStyle(theme),
+      {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'stretch',
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+        padding: '0 8px 0 12px'
+      }
+    ],
+
+    cellName: [
+      classNames.cellName,
+      {
+        flex: '0 1 auto',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    ],
+
+    checkTooltip: [],
+
+    cellTooltip: [
+      {
+        display: 'block',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0
+      }
+    ],
+
+    sizingOverlay: [
+      isSizing && {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        cursor: 'ew-resize',
+        background: 'rgba(255, 255, 255, 0)',
+        selectors: {
+          [HighContrastSelector]: {
+            background: 'transparent',
+            '-ms-high-contrast-adjust': 'none'
+          }
+        }
+      }
+    ],
+
+    accessibleLabel: [hiddenContentStyle],
+
+    borderWhileDragging: [
+      {
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: palette.themePrimary
+      },
+      fadeOutAnimation
+    ],
+
+    dropHintCircleStyle: [
+      classNames.dropHintCircleStyle,
+      {
+        display: 'inline-block',
+        visibility: 'hidden',
+        position: 'absolute',
+        bottom: 0,
+        height: 9,
+        width: 9,
+        borderRadius: '50%',
+        marginLeft: -5,
+        top: 34,
+        overflow: 'visible',
+        zIndex: 10,
+        border: `1px solid ${palette.themePrimary}`,
+        background: palette.white
+      }
+    ],
+
+    dropHintLineStyle: [
+      classNames.dropHintLineStyle,
+      {
+        display: 'inline-block',
+        visibility: 'hidden',
+        position: 'absolute',
+        bottom: 0,
+        top: -3,
+        overflow: 'hidden',
+        height: 37,
+        width: 1,
+        background: palette.themePrimary,
+        zIndex: 10
+      }
+    ],
+
+    dropHintStyle: [
+      {
+        display: 'inline-block',
+        position: 'absolute'
+      }
+    ],
+
+    borderAfterDropping: [
+      {
+        borderStyle: 'solid',
+        borderWidth: 1,
+        borderColor: palette.themePrimary,
+        left: -1,
+        lineHeight: 31
+      },
+      slowFadeOutAnimation
+    ]
+  };
+};
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
index 32274815514d7e..068b8c8f3b76b0 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { IDetailsHeader, DetailsHeader } from './DetailsHeader';
+import { DetailsHeader } from './DetailsHeader';
+import { IDetailsHeader } from './DetailsHeader.types';
 import { DetailsListLayoutMode, IColumn } from './DetailsList.types';
 import { Selection, SelectionMode } from '../../utilities/selection/index';
 import { EventGroup, createRef } from '../../Utilities';
@@ -51,6 +52,7 @@ describe('DetailsHeader', () => {
       />
     );
 
+    const headerBase = wrapper.find('DetailsHeaderBase').instance();
     const sizerElement = wrapper.find('[data-sizer-index=0]').getDOMNode();
     const header: any = headerRef.current;
 
@@ -67,11 +69,11 @@ describe('DetailsHeader', () => {
 
     // Validate we go into resize mode.
     expect(sizerElement.classList.contains('is-resizing')).toBe(true);
-    expect(!!wrapper.state().isSizing).toBe(false);
+    expect(!!headerBase.state.isSizing).toBe(false);
 
     // Mouse move 1 pixel to the right to get into sizing mode.
     wrapper.simulate('mousemove', { clientX: 1 });
-    expect(!!wrapper.state().isSizing).toBe(true);
+    expect(!!headerBase.state.isSizing).toBe(true);
 
     // The header is 200; move mouse 100 to the right, the header should be 300.
     header._onSizerMouseMove({ clientX: 100 });
@@ -83,6 +85,6 @@ describe('DetailsHeader', () => {
 
     // Complete sizing.
     header._onSizerMouseUp();
-    expect(!!wrapper.state().isSizing).toBe(false);
+    expect(!!headerBase.state.isSizing).toBe(false);
   });
 });
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
index d2bcadc8351678..7d33743fa67bf2 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
@@ -1,836 +1,11 @@
-import * as React from 'react';
-import { findDOMNode } from 'react-dom';
-import { BaseComponent, css, getRTL, getId, KeyCodes, IRenderFunction, createRef } from '../../Utilities';
-import { IColumn, DetailsListLayoutMode, IColumnReorderOptions } from './DetailsList.types';
-import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone';
-import { Icon } from '../../Icon';
-import { Layer } from '../../Layer';
-import { GroupSpacer } from '../GroupedList/GroupSpacer';
-import { CollapseAllVisibility } from '../../GroupedList';
-import { DetailsRowCheck } from './DetailsRowCheck';
-import { ITooltipHostProps } from '../../Tooltip';
-import { IViewport } from '../../utilities/decorators/withViewport';
-import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
-import * as stylesImport from './DetailsHeader.scss';
-import { IDragDropOptions } from './../../utilities/dragdrop/interfaces';
-import { DragDropHelper } from './../../utilities/dragdrop';
-import { DetailsColumn } from './../../components/DetailsList/DetailsColumn';
+import { styled } from '../../Utilities';
+import { IDetailsHeaderProps, IDetailsHeaderStyleProps, IDetailsHeaderStyles } from './DetailsHeader.types';
+import { DetailsHeaderBase } from './DetailsHeader.base';
+import { getStyles } from './DetailsHeader.styles';
 
-const styles: any = stylesImport;
+export { IDetailsHeaderProps };
 
-const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
-const MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
-
-export interface IDetailsHeader {
-  focus: () => boolean;
-}
-
-export interface IDetailsHeaderProps extends React.Props<DetailsHeader> {
-  componentRef?: (component: IDetailsHeader | null) => void;
-  columns: IColumn[];
-  selection: ISelection;
-  selectionMode: SelectionMode;
-  layoutMode: DetailsListLayoutMode;
-  onColumnIsSizingChanged?: (column: IColumn, isSizing: boolean) => void;
-  onColumnResized?: (column: IColumn, newWidth: number, columnIndex: number) => void;
-  onColumnAutoResized?: (column: IColumn, columnIndex: number) => void;
-  onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
-  onColumnContextMenu?: (column: IColumn, ev: React.MouseEvent<HTMLElement>) => void;
-  onRenderColumnHeaderTooltip?: IRenderFunction<ITooltipHostProps>;
-  groupNestingDepth?: number;
-  indentWidth?: number;
-  collapseAllVisibility?: CollapseAllVisibility;
-  isAllCollapsed?: boolean;
-  onToggleCollapseAll?: (isAllCollapsed: boolean) => void;
-  /** ariaLabel for the entire header */
-  ariaLabel?: string;
-  /** ariaLabel for the header checkbox that selects or deselects everything */
-  ariaLabelForSelectAllCheckbox?: string;
-  ariaLabelForSelectionColumn?: string;
-  selectAllVisibility?: SelectAllVisibility;
-  viewport?: IViewport;
-  columnReorderOptions?: IColumnReorderOptions | null;
-  minimumPixelsForDrag?: number;
-}
-
-export enum SelectAllVisibility {
-  none = 0,
-  hidden = 1,
-  visible = 2
-}
-
-export interface IDetailsHeaderState {
-  columnResizeDetails?: IColumnResizeDetails;
-  isAllSelected?: boolean;
-  isSizing?: boolean;
-  groupNestingDepth?: number;
-  isAllCollapsed?: boolean;
-}
-
-export interface IColumnResizeDetails {
-  columnIndex: number;
-  originX?: number;
-  columnMinWidth: number;
-}
-
-export interface IDropHintDetails {
-  originX: number; // X index of dropHint Element relative to header
-  startX: number; // start index of the range for the current drophint
-  endX: number; // end index of the range for the current drophint
-  dropHintElementRef: HTMLElement; // Reference for drophint to change the style when needed
-}
-
-export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHeaderState> implements IDetailsHeader {
-  public static defaultProps = {
-    selectAllVisibility: SelectAllVisibility.visible,
-    collapseAllVisibility: CollapseAllVisibility.visible
-  };
-  private _rootElement: HTMLElement | undefined;
-  private _rootComponent = createRef<IFocusZone>();
-  private _id: string;
-  private _draggedColumnIndex = -1;
-  private _dropHintDetails: { [key: number]: IDropHintDetails } = {};
-  private _dragDropHelper: DragDropHelper | null;
-  private _currentDropHintIndex: number;
-  private _subscriptionObject: {
-    key: string;
-    dispose(): void;
-  };
-  private _onDropIndexInfo: {
-    sourceIndex: number;
-    targetIndex: number;
-  };
-  constructor(props: IDetailsHeaderProps) {
-    super(props);
-
-    this.state = {
-      columnResizeDetails: undefined,
-      groupNestingDepth: this.props.groupNestingDepth,
-      isAllCollapsed: this.props.isAllCollapsed
-    };
-
-    this._onToggleCollapseAll = this._onToggleCollapseAll.bind(this);
-    this._onSelectAllClicked = this._onSelectAllClicked.bind(this);
-    this._setDraggedItemIndex = this._setDraggedItemIndex.bind(this);
-    this._onDragOver = this._onDragOver.bind(this);
-    this._onDrop = this._onDrop.bind(this);
-    this._getHeaderDragDropOptions = this._getHeaderDragDropOptions.bind(this);
-    this._updateDroppingState = this._updateDroppingState.bind(this);
-    this._getDropHintPositions = this._getDropHintPositions.bind(this);
-    this._computeDropHintToBeShown = this._computeDropHintToBeShown.bind(this);
-    this._resetDropHints = this._resetDropHints.bind(this);
-    this._isValidCurrentDropHintIndex = this._isValidCurrentDropHintIndex.bind(this);
-    this._onRootRef = this._onRootRef.bind(this);
-    this._onDropIndexInfo = {
-      sourceIndex: Number.MIN_SAFE_INTEGER,
-      targetIndex: Number.MIN_SAFE_INTEGER
-    };
-    this._id = getId('header');
-    this._currentDropHintIndex = Number.MIN_SAFE_INTEGER;
-  }
-
-  public componentDidMount(): void {
-    const { selection, columnReorderOptions } = this.props;
-
-    this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);
-
-    // We need to use native on this to avoid MarqueeSelection from handling the event before us.
-    this._events.on(this._rootElement!, 'mousedown', this._onRootMouseDown);
-
-    this._events.on(this._rootElement!, 'keydown', this._onRootKeyDown);
-
-    if (columnReorderOptions) {
-      this._subscriptionObject = this._dragDropHelper!.subscribe(
-        this._rootElement!,
-        this._events,
-        this._getHeaderDragDropOptions()
-      );
-    }
-  }
-
-  public componentDidUpdate(prevProps: IDetailsHeaderProps): void {
-    const { columnReorderOptions } = this.props;
-
-    if (!columnReorderOptions) {
-      if (this._subscriptionObject) {
-        this._subscriptionObject.dispose();
-        delete this._subscriptionObject;
-      }
-    } else if (!this._subscriptionObject) {
-      this._subscriptionObject = this._dragDropHelper!.subscribe(
-        this._rootElement!,
-        this._events,
-        this._getHeaderDragDropOptions()
-      );
-    }
-
-    if (this.props !== prevProps && this._onDropIndexInfo.sourceIndex >= 0 && this._onDropIndexInfo.targetIndex >= 0) {
-      if (
-        prevProps.columns[this._onDropIndexInfo.sourceIndex].key ===
-        this.props.columns[this._onDropIndexInfo.targetIndex].key
-      ) {
-        this._onDropIndexInfo = {
-          sourceIndex: Number.MIN_SAFE_INTEGER,
-          targetIndex: Number.MIN_SAFE_INTEGER
-        };
-      }
-    }
-  }
-
-  public componentWillReceiveProps(newProps: IDetailsHeaderProps): void {
-    const { groupNestingDepth } = this.state;
-
-    if (newProps.groupNestingDepth !== groupNestingDepth) {
-      this.setState({ groupNestingDepth: newProps.groupNestingDepth });
-    }
-  }
-
-  public componentWillUnmount(): void {
-    if (this._subscriptionObject) {
-      this._subscriptionObject.dispose();
-      delete this._subscriptionObject;
-    }
-  }
-
-  public render(): JSX.Element {
-    const {
-      columns,
-      ariaLabel,
-      ariaLabelForSelectAllCheckbox,
-      selectAllVisibility,
-      ariaLabelForSelectionColumn,
-      indentWidth,
-      viewport,
-      columnReorderOptions,
-      onColumnClick,
-      onColumnContextMenu
-    } = this.props;
-    const { isAllSelected, columnResizeDetails, isSizing, groupNestingDepth, isAllCollapsed } = this.state;
-    const showCheckbox = selectAllVisibility !== SelectAllVisibility.none;
-    const isCheckboxHidden = selectAllVisibility === SelectAllVisibility.hidden;
-
-    const { onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip } = this.props;
-    if (!this._dragDropHelper && this.props.columnReorderOptions) {
-      this._dragDropHelper = new DragDropHelper({
-        selection: {
-          getSelection: () => {
-            return;
-          }
-        } as ISelection,
-        minimumPixelsForDrag: this.props.minimumPixelsForDrag
-      });
-    }
-    const frozenColumnCountFromStart =
-      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromStart
-        ? columnReorderOptions!.frozenColumnCountFromStart!
-        : 0;
-    const frozenColumnCountFromEnd =
-      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromEnd
-        ? columnReorderOptions!.frozenColumnCountFromEnd!
-        : 0;
-
-    return (
-      <FocusZone
-        role="row"
-        aria-label={ariaLabel}
-        className={css(
-          'ms-DetailsHeader',
-          styles.root,
-          isAllSelected && 'is-allSelected ' + styles.rootIsAllSelected,
-          selectAllVisibility === SelectAllVisibility.hidden && 'is-selectAllHidden ' + styles.rootIsSelectAllHidden,
-          !!columnResizeDetails && isSizing && 'is-resizingColumn'
-        )}
-        componentRef={this._rootComponent}
-        ref={this._onRootRef}
-        onMouseMove={this._onRootMouseMove}
-        data-automationid="DetailsHeader"
-        style={{ minWidth: viewport ? viewport.width : 0 }}
-        direction={FocusZoneDirection.horizontal}
-      >
-        {showCheckbox
-          ? [
-              <div
-                key="__checkbox"
-                className={css(
-                  'ms-DetailsHeader-cell',
-                  'ms-DetailsHeader-cellIsCheck',
-                  styles.cell,
-                  styles.cellIsCheck
-                )}
-                aria-labelledby={`${this._id}-check`}
-                onClick={this._onSelectAllClicked}
-                aria-colindex={!isCheckboxHidden ? 1 : undefined}
-                role={!isCheckboxHidden ? 'columnheader' : undefined}
-              >
-                {onRenderColumnHeaderTooltip(
-                  {
-                    hostClassName: css(styles.checkTooltip),
-                    id: `${this._id}-checkTooltip`,
-                    setAriaDescribedBy: false,
-                    content: ariaLabelForSelectAllCheckbox,
-                    children: (
-                      <DetailsRowCheck
-                        id={`${this._id}-check`}
-                        aria-label={ariaLabelForSelectionColumn}
-                        aria-describedby={`${this._id}-checkTooltip`}
-                        data-is-focusable={!isCheckboxHidden}
-                        isHeader={true}
-                        selected={isAllSelected}
-                        anySelected={false}
-                        canSelect={!isCheckboxHidden}
-                        className={styles.check}
-                      />
-                    )
-                  },
-                  this._onRenderColumnHeaderTooltip
-                )}
-              </div>,
-              ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? (
-                <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={styles.accessibleLabel}>
-                  {ariaLabelForSelectAllCheckbox}
-                </label>
-              ) : null
-            ]
-          : null}
-        {groupNestingDepth! > 0 && this.props.collapseAllVisibility === CollapseAllVisibility.visible ? (
-          <div
-            className={css('ms-DetailsHeader-cell', styles.cell)}
-            onClick={this._onToggleCollapseAll}
-            data-is-focusable={true}
-          >
-            <Icon
-              className={css(
-                'ms-DetailsHeader-collapseButton',
-                styles.collapseButton,
-                isAllCollapsed && 'is-collapsed ' + styles.collapseButtonIsCollapsed
-              )}
-              iconName="ChevronDown"
-            />
-          </div>
-        ) : null}
-        <GroupSpacer indentWidth={indentWidth} count={groupNestingDepth! - 1} />
-        {columns.map((column: IColumn, columnIndex: number) => {
-          const _isDraggable = columnReorderOptions
-            ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd
-            : false;
-          return [
-            columnReorderOptions &&
-              (_isDraggable || columnIndex === columns.length - frozenColumnCountFromEnd) &&
-              this._renderDropHint(columnIndex),
-            <DetailsColumn
-              column={column}
-              key={column.key}
-              columnIndex={(showCheckbox ? 2 : 1) + columnIndex}
-              parentId={this._id}
-              isDraggable={_isDraggable}
-              setDraggedItemIndex={this._setDraggedItemIndex}
-              dragDropHelper={this._dragDropHelper}
-              onColumnClick={onColumnClick}
-              onColumnContextMenu={onColumnContextMenu}
-              isDropped={this._onDropIndexInfo.targetIndex === columnIndex}
-            />,
-            column.isResizable && this._renderColumnSizer(columnIndex)
-          ];
-        })}
-        {columnReorderOptions && frozenColumnCountFromEnd === 0 && this._renderDropHint(columns.length)}
-        {isSizing && (
-          <Layer>
-            <div
-              className={css(isSizing && styles.sizingOverlay)}
-              onMouseMove={this._onSizerMouseMove}
-              onMouseUp={this._onSizerMouseUp}
-            />
-          </Layer>
-        )}
-      </FocusZone>
-    );
-  }
-
-  /** Set focus to the active thing in the focus area. */
-  public focus(): boolean {
-    return Boolean(this._rootComponent.current && this._rootComponent.current.focus());
-  }
-
-  private _getHeaderDragDropOptions(): IDragDropOptions {
-    const options = {
-      selectionIndex: 1,
-      context: { data: this, index: 0 },
-      canDrag: () => false,
-      canDrop: () => true,
-      onDragStart: () => undefined,
-      updateDropState: this._updateDroppingState,
-      onDrop: this._onDrop,
-      onDragEnd: () => undefined,
-      onDragOver: this._onDragOver
-    };
-    return options;
-  }
-
-  private _updateDroppingState(newValue: boolean, event: DragEvent): void {
-    if (this._draggedColumnIndex >= 0 && event.type !== 'drop') {
-      if (!newValue) {
-        this._resetDropHints();
-      }
-    }
-  }
-
-  private _isValidCurrentDropHintIndex() {
-    return this._currentDropHintIndex! >= 0;
-  }
-
-  private _onDragOver(item: any, event: DragEvent): void {
-    if (this._draggedColumnIndex >= 0) {
-      event.stopPropagation();
-      this._computeDropHintToBeShown(event.clientX);
-    }
-  }
-
-  private _onDrop(item?: any, event?: DragEvent): void {
-    const draggedColumnIndex = this._draggedColumnIndex;
-    // Target index will not get changed if draggeditem is after target item.
-    const targetIndex =
-      draggedColumnIndex > this._currentDropHintIndex! ? this._currentDropHintIndex! : this._currentDropHintIndex! - 1;
-    let isValidDrop = false;
-    if (this._draggedColumnIndex >= 0 && event! instanceof DragEvent) {
-      event!.stopPropagation();
-      if (this._isValidCurrentDropHintIndex()) {
-        isValidDrop = true;
-        this._onDropIndexInfo.sourceIndex = draggedColumnIndex;
-        this._onDropIndexInfo.targetIndex = targetIndex;
-      }
-      this._resetDropHints();
-      this._dropHintDetails = {};
-      this._draggedColumnIndex = -1;
-      if (isValidDrop) {
-        this.props.columnReorderOptions!.handleColumnReorder(draggedColumnIndex, targetIndex);
-      }
-    }
-  }
-
-  private _setDraggedItemIndex(itemIndex: number) {
-    if (itemIndex >= 0) {
-      // Column index is set based on the checkbox
-      this._draggedColumnIndex = this.props.selectionMode !== SelectionMode.none ? itemIndex - 2 : itemIndex - 1;
-      this._getDropHintPositions();
-    } else {
-      this._resetDropHints();
-      this._draggedColumnIndex = -1;
-      this._dropHintDetails = {};
-    }
-  }
-
-  private _resetDropHints(): void {
-    if (this._currentDropHintIndex >= 0) {
-      this._updateDropHintElement(this._dropHintDetails[this._currentDropHintIndex].dropHintElementRef, 'hidden');
-      this._currentDropHintIndex = Number.MIN_SAFE_INTEGER;
-    }
-  }
-
-  private _updateDropHintElement(element: HTMLElement, property: string) {
-    (element.childNodes[1] as HTMLElement).style.visibility = property;
-    (element.childNodes[0] as HTMLElement).style.visibility = property;
-  }
-
-  private _getDropHintPositions = (): void => {
-    const { columnReorderOptions, columns } = this.props;
-    let prevX = 0;
-    let prevMid = 0;
-    let prevRef: HTMLElement;
-    const frozenColumnCountFromStart =
-      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromStart
-        ? columnReorderOptions!.frozenColumnCountFromStart
-        : 0;
-    const frozenColumnCountFromEnd =
-      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromEnd
-        ? columnReorderOptions!.frozenColumnCountFromEnd
-        : 0;
-    for (let i = frozenColumnCountFromStart!; i < columns.length - frozenColumnCountFromEnd! + 1; i++) {
-      const dropHintElement = this._rootElement!.querySelectorAll('#columnDropHint_' + i)[0] as HTMLElement;
-      if (dropHintElement) {
-        if (i === frozenColumnCountFromStart!) {
-          prevX = dropHintElement!.offsetLeft;
-          prevMid = dropHintElement!.offsetLeft;
-          prevRef = dropHintElement;
-        } else {
-          const newMid = (dropHintElement!.offsetLeft + prevX!) / 2;
-          this._dropHintDetails[i - 1] = {
-            originX: prevX,
-            startX: prevMid!,
-            endX: newMid,
-            dropHintElementRef: prevRef!
-          };
-          prevMid = newMid;
-          prevRef = dropHintElement;
-          prevX = dropHintElement!.offsetLeft;
-          if (i === columns.length - frozenColumnCountFromEnd!) {
-            this._dropHintDetails[i] = {
-              originX: prevX,
-              startX: prevMid!,
-              endX: dropHintElement!.offsetLeft,
-              dropHintElementRef: prevRef
-            };
-          }
-        }
-      }
-    }
-  };
-
-  /**
-   * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible
-   *
-   */
-  private _computeDropHintToBeShown = (clientX: number): void => {
-    const clientRect = this._rootElement!.getBoundingClientRect();
-    const headerOriginX = clientRect.left;
-    const eventXRelativePosition = clientX - headerOriginX;
-    const currentDropHintIndex = this._currentDropHintIndex!;
-    if (this._isValidCurrentDropHintIndex()) {
-      if (
-        eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex!].startX &&
-        eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex!].endX
-      ) {
-        return;
-      }
-    }
-    const { columnReorderOptions, columns } = this.props;
-    const frozenColumnCountFromStart =
-      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromStart
-        ? columnReorderOptions!.frozenColumnCountFromStart
-        : 0;
-    const frozenColumnCountFromEnd =
-      columnReorderOptions && columnReorderOptions!.frozenColumnCountFromEnd
-        ? columnReorderOptions!.frozenColumnCountFromEnd
-        : 0;
-    const currentIndex: number = frozenColumnCountFromStart!;
-    const lastValidColumn = columns.length - frozenColumnCountFromEnd!;
-    let indexToUpdate = -1;
-    if (eventXRelativePosition <= this._dropHintDetails[currentIndex].endX) {
-      indexToUpdate = currentIndex;
-    } else if (eventXRelativePosition >= this._dropHintDetails[lastValidColumn]!.startX) {
-      indexToUpdate = lastValidColumn;
-    } else if (this._isValidCurrentDropHintIndex()) {
-      if (
-        this._dropHintDetails[currentDropHintIndex! + 1] &&
-        eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex! + 1].startX &&
-        eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex! + 1].endX
-      ) {
-        indexToUpdate = currentDropHintIndex! + 1;
-      } else if (
-        this._dropHintDetails[currentDropHintIndex! - 1] &&
-        eventXRelativePosition >= this._dropHintDetails[currentDropHintIndex! - 1].startX &&
-        eventXRelativePosition <= this._dropHintDetails[currentDropHintIndex! - 1].endX
-      ) {
-        indexToUpdate = currentDropHintIndex! - 1;
-      }
-    }
-    if (indexToUpdate === -1) {
-      let startIndex = frozenColumnCountFromStart!;
-      let endIndex = lastValidColumn;
-      while (startIndex < endIndex) {
-        const middleIndex = Math.ceil((endIndex + startIndex!) / 2);
-        if (
-          eventXRelativePosition >= this._dropHintDetails[middleIndex].startX &&
-          eventXRelativePosition <= this._dropHintDetails[middleIndex].endX
-        ) {
-          indexToUpdate = middleIndex;
-          break;
-        } else if (eventXRelativePosition < this._dropHintDetails[middleIndex]!.originX) {
-          endIndex = middleIndex;
-        } else if (eventXRelativePosition > this._dropHintDetails[middleIndex]!.originX) {
-          startIndex = middleIndex;
-        }
-      }
-    }
-
-    if (indexToUpdate === this._draggedColumnIndex || indexToUpdate === this._draggedColumnIndex + 1) {
-      if (this._isValidCurrentDropHintIndex()) {
-        this._resetDropHints();
-      }
-    } else if (currentDropHintIndex !== indexToUpdate && indexToUpdate >= 0) {
-      this._resetDropHints();
-      this._updateDropHintElement(this._dropHintDetails[indexToUpdate].dropHintElementRef, 'visible');
-      this._currentDropHintIndex = indexToUpdate;
-    }
-  };
-
-  private _renderColumnSizer(columnIndex: number): JSX.Element {
-    const { columns } = this.props;
-    const column = this.props.columns[columnIndex];
-    const { columnResizeDetails } = this.state;
-
-    return (
-      <div
-        key={`${column.key}_sizer`}
-        aria-hidden={true}
-        role="button"
-        data-is-focusable={false}
-        onClick={stopPropagation}
-        data-sizer-index={columnIndex}
-        onBlur={this._onSizerBlur}
-        className={css(
-          'ms-DetailsHeader-cellSizer',
-          styles.cellSizer,
-          columnIndex < columns.length - 1 ? styles.cellSizerStart : styles.cellSizerEnd,
-          {
-            ['is-resizing ' + styles.cellIsResizing]:
-              columnResizeDetails && columnResizeDetails.columnIndex === columnIndex
-          }
-        )}
-        onDoubleClick={this._onSizerDoubleClick.bind(this, columnIndex)}
-      />
-    );
-  }
-
-  private _renderDropHint(dropHintIndex: number): JSX.Element {
-    return (
-      <div key={'dropHintKey'} className={styles.dropHintStyle} id={`columnDropHint_${dropHintIndex}`}>
-        <div
-          key={`dropHintCircleKey`}
-          aria-hidden={true}
-          data-is-focusable={false}
-          data-sizer-index={dropHintIndex}
-          className={css('ms-DetailsHeader-dropHintCircleStyle', styles.dropHintCircleStyle)}
-        />
-        <div
-          key={`dropHintLineKey`}
-          aria-hidden={true}
-          data-is-focusable={false}
-          data-sizer-index={dropHintIndex}
-          className={css('ms-DetailsHeader-dropHintLineStyle', styles.dropHintLineStyle)}
-        />
-      </div>
-    );
-  }
-  private _onRenderColumnHeaderTooltip = (
-    tooltipHostProps: ITooltipHostProps,
-    defaultRender?: IRenderFunction<ITooltipHostProps>
-  ): JSX.Element => {
-    return <span className={tooltipHostProps.hostClassName}>{tooltipHostProps.children}</span>;
-  };
-
-  /**
-   * double click on the column sizer will auto ajust column width
-   * to fit the longest content among current rendered rows.
-   *
-   * @private
-   * @param {number} columnIndex (index of the column user double clicked)
-   * @param {React.MouseEvent} ev (mouse double click event)
-   */
-  private _onSizerDoubleClick(columnIndex: number, ev: React.MouseEvent<HTMLElement>): void {
-    const { onColumnAutoResized, columns } = this.props;
-    if (onColumnAutoResized) {
-      onColumnAutoResized(columns[columnIndex], columnIndex);
-    }
-  }
-
-  /**
-   * Called when the select all toggle is clicked.
-   */
-  private _onSelectAllClicked = (): void => {
-    const { selection } = this.props;
-
-    selection.toggleAllSelected();
-  };
-
-  private _onRootMouseDown = (ev: MouseEvent): void => {
-    const columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');
-    const columnIndex = Number(columnIndexAttr);
-    const { columns } = this.props;
-
-    if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {
-      // Ignore anything except the primary button.
-      return;
-    }
-
-    this.setState({
-      columnResizeDetails: {
-        columnIndex: columnIndex,
-        columnMinWidth: columns[columnIndex].calculatedWidth!,
-        originX: ev.clientX
-      }
-    });
-
-    ev.preventDefault();
-    ev.stopPropagation();
-  };
-
-  private _onRootMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { columnResizeDetails, isSizing } = this.state;
-
-    if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
-      this.setState({ isSizing: true });
-    }
-  };
-
-  private _onRootRef = (focusZone: FocusZone): void => {
-    if (focusZone) {
-      // Need to resolve the actual DOM node, not the component. The element itself will be used for drag/drop and focusing.
-      this._rootElement = findDOMNode(focusZone) as HTMLElement;
-    } else {
-      this._rootElement = undefined;
-    }
-  };
-
-  private _onRootKeyDown = (ev: KeyboardEvent): void => {
-    const { columnResizeDetails, isSizing } = this.state;
-    const { columns, onColumnResized } = this.props;
-
-    const columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');
-
-    if (!columnIndexAttr || isSizing) {
-      return;
-    }
-
-    const columnIndex = Number(columnIndexAttr);
-
-    if (!columnResizeDetails) {
-      if (ev.which === KeyCodes.enter) {
-        this.setState({
-          columnResizeDetails: {
-            columnIndex: columnIndex,
-            columnMinWidth: columns[columnIndex].calculatedWidth!
-          }
-        });
-
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-    } else {
-      let increment: number | undefined;
-
-      if (ev.which === KeyCodes.enter) {
-        this.setState({
-          columnResizeDetails: undefined
-        });
-
-        ev.preventDefault();
-        ev.stopPropagation();
-      } else if (ev.which === KeyCodes.left) {
-        increment = getRTL() ? 1 : -1;
-      } else if (ev.which === KeyCodes.right) {
-        increment = getRTL() ? -1 : 1;
-      }
-
-      if (increment) {
-        if (!ev.shiftKey) {
-          increment *= 10;
-        }
-
-        this.setState({
-          columnResizeDetails: {
-            ...columnResizeDetails,
-            columnMinWidth: columnResizeDetails.columnMinWidth + increment
-          }
-        });
-
-        if (onColumnResized) {
-          onColumnResized(columns[columnIndex], columnResizeDetails.columnMinWidth + increment, columnIndex);
-        }
-
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-    }
-  };
-
-  /**
-   * mouse move event handler in the header
-   * it will set isSizing state to true when user clicked on the sizer and move the mouse.
-   *
-   * @private
-   * @param {React.MouseEvent} ev (mouse move event)
-   */
-  private _onSizerMouseMove = (ev: React.MouseEvent<HTMLElement>): void => {
-    const {
-      // use buttons property here since ev.button in some edge case is not upding well during the move.
-      // but firefox doesn't support it, so we set the default value when it is not defined.
-      buttons
-    } = ev;
-    const { onColumnIsSizingChanged, onColumnResized, columns } = this.props;
-    const { columnResizeDetails } = this.state;
-
-    if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
-      // cancel mouse down event and return early when the primary button is not pressed
-      this._onSizerMouseUp(ev);
-      return;
-    }
-
-    if (ev.clientX !== columnResizeDetails!.originX) {
-      if (onColumnIsSizingChanged) {
-        onColumnIsSizingChanged(columns[columnResizeDetails!.columnIndex], true);
-      }
-    }
-
-    if (onColumnResized) {
-      let movement = ev.clientX - columnResizeDetails!.originX!;
-
-      if (getRTL()) {
-        movement = -movement;
-      }
-
-      onColumnResized(
-        columns[columnResizeDetails!.columnIndex],
-        columnResizeDetails!.columnMinWidth + movement,
-        columnResizeDetails!.columnIndex
-      );
-    }
-  };
-
-  private _onSizerBlur = (ev: React.FocusEvent<HTMLElement>): void => {
-    const { columnResizeDetails } = this.state;
-
-    if (columnResizeDetails) {
-      this.setState({
-        columnResizeDetails: undefined,
-        isSizing: false
-      });
-    }
-  };
-
-  /**
-   * mouse up event handler in the header
-   * clear the resize related state.
-   * This is to ensure we can catch double click event
-   *
-   * @private
-   * @param {React.MouseEvent} ev (mouse up event)
-   */
-  private _onSizerMouseUp = (ev: React.MouseEvent<HTMLElement>): void => {
-    const { columns, onColumnIsSizingChanged } = this.props;
-    const { columnResizeDetails } = this.state;
-
-    this.setState({
-      columnResizeDetails: undefined,
-      isSizing: false
-    });
-
-    if (onColumnIsSizingChanged) {
-      onColumnIsSizingChanged(columns[columnResizeDetails!.columnIndex], false);
-    }
-  };
-
-  private _onSelectionChanged(): void {
-    const isAllSelected = this.props.selection.isAllSelected();
-
-    if (this.state.isAllSelected !== isAllSelected) {
-      this.setState({
-        isAllSelected: isAllSelected
-      });
-    }
-  }
-
-  private _onToggleCollapseAll(): void {
-    const { onToggleCollapseAll } = this.props;
-    const newCollapsed = !this.state.isAllCollapsed;
-    this.setState({
-      isAllCollapsed: newCollapsed
-    });
-    if (onToggleCollapseAll) {
-      onToggleCollapseAll(newCollapsed);
-    }
-  }
-}
-
-function stopPropagation(ev: React.MouseEvent<HTMLElement>): void {
-  ev.stopPropagation();
-}
+export const DetailsHeader = styled<IDetailsHeaderProps, IDetailsHeaderStyleProps, IDetailsHeaderStyles>(
+  DetailsHeaderBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.types.ts
new file mode 100644
index 00000000000000..710111db638303
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.types.ts
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
+import { CollapseAllVisibility } from '../../GroupedList';
+import { ITooltipHostProps } from '../../Tooltip';
+import { IViewport } from '../../utilities/decorators/withViewport';
+import { ISelection, SelectionMode } from '../../utilities/selection/interfaces';
+import { ITheme, IStyle } from '../../Styling';
+import { DetailsHeaderBase } from './DetailsHeader.base';
+import { IColumn, DetailsListLayoutMode, IColumnReorderOptions } from './DetailsList.types';
+
+export interface IDetailsHeader {
+  focus: () => boolean;
+}
+
+export interface IDetailsHeaderProps extends React.Props<DetailsHeaderBase> {
+  theme?: ITheme;
+  styles?: IStyleFunctionOrObject<IDetailsHeaderStyleProps, IDetailsHeaderStyles>;
+  componentRef?: (component: IDetailsHeader | null) => void;
+  columns: IColumn[];
+  selection: ISelection;
+  selectionMode: SelectionMode;
+  layoutMode: DetailsListLayoutMode;
+  onColumnIsSizingChanged?: (column: IColumn, isSizing: boolean) => void;
+  onColumnResized?: (column: IColumn, newWidth: number, columnIndex: number) => void;
+  onColumnAutoResized?: (column: IColumn, columnIndex: number) => void;
+  onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
+  onColumnContextMenu?: (column: IColumn, ev: React.MouseEvent<HTMLElement>) => void;
+  onRenderColumnHeaderTooltip?: IRenderFunction<ITooltipHostProps>;
+  groupNestingDepth?: number;
+  indentWidth?: number;
+  collapseAllVisibility?: CollapseAllVisibility;
+  isAllCollapsed?: boolean;
+  onToggleCollapseAll?: (isAllCollapsed: boolean) => void;
+  /** ariaLabel for the entire header */
+  ariaLabel?: string;
+  /** ariaLabel for the header checkbox that selects or deselects everything */
+  ariaLabelForSelectAllCheckbox?: string;
+  ariaLabelForSelectionColumn?: string;
+  selectAllVisibility?: SelectAllVisibility;
+  viewport?: IViewport;
+  columnReorderOptions?: IColumnReorderOptions | null;
+  minimumPixelsForDrag?: number;
+  className?: string;
+}
+
+export enum SelectAllVisibility {
+  none = 0,
+  hidden = 1,
+  visible = 2
+}
+
+export interface IDetailsHeaderState {
+  columnResizeDetails?: IColumnResizeDetails;
+  isAllSelected?: boolean;
+  isSizing?: boolean;
+  groupNestingDepth?: number;
+  isAllCollapsed?: boolean;
+}
+
+export interface IColumnResizeDetails {
+  columnIndex: number;
+  originX?: number;
+  columnMinWidth: number;
+}
+
+export interface IDropHintDetails {
+  originX: number; // X index of dropHint Element relative to header
+  startX: number; // start index of the range for the current drophint
+  endX: number; // end index of the range for the current drophint
+  dropHintElementRef: HTMLElement; // Reference for drophint to change the style when needed
+}
+
+export type IDetailsHeaderStyleProps = Required<Pick<IDetailsHeaderProps, 'theme'>> &
+  Pick<IDetailsHeaderProps, 'className'> & {
+    isSelectAllHidden?: boolean;
+    isAllSelected?: boolean;
+    isResizingColumn?: boolean;
+    isAllCollapsed?: boolean;
+    isSizing?: boolean;
+    isCheckboxHidden?: boolean;
+  };
+
+export interface IDetailsHeaderStyles {
+  root: IStyle;
+  check: IStyle;
+  cellWrapperPadded: IStyle;
+  cellIsCheck: IStyle;
+  cellIsActionable: IStyle;
+  cellIsEmpty: IStyle;
+  cell: IStyle;
+  gripperBarVerticalStyle: IStyle;
+  cellSizer: IStyle;
+  cellSizerStart: IStyle;
+  cellSizerEnd: IStyle;
+  cellIsResizing: IStyle;
+  collapseButton: IStyle;
+  iconOnlyHeader: IStyle;
+  nearIcon: IStyle;
+  sortIcon: IStyle;
+  filterChevron: IStyle;
+  cellTitle: IStyle;
+  cellName: IStyle;
+  checkTooltip: IStyle;
+  cellTooltip: IStyle;
+  sizingOverlay: IStyle;
+  borderWhileDragging: IStyle;
+  dropHintCircleStyle: IStyle;
+  dropHintLineStyle: IStyle;
+  dropHintStyle: IStyle;
+  borderAfterDropping: IStyle;
+  accessibleLabel: IStyle;
+}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index 981a73ef249cc9..eba70a6eaf1419 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -20,7 +20,8 @@ import {
   IDetailsList,
   IDetailsListProps
 } from '../DetailsList/DetailsList.types';
-import { DetailsHeader, IDetailsHeader, SelectAllVisibility, IDetailsHeaderProps } from '../DetailsList/DetailsHeader';
+import { DetailsHeader } from '../DetailsList/DetailsHeader';
+import { IDetailsHeader, SelectAllVisibility, IDetailsHeaderProps } from '../DetailsList/DetailsHeader.types';
 import { DetailsRowBase } from '../DetailsList/DetailsRow.base';
 import { DetailsRow } from '../DetailsList/DetailsRow';
 import { IDetailsRowProps } from '../DetailsList/DetailsRow.types';
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
index 43ba897c4d4007..20e93e6779c63c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
@@ -15,7 +15,7 @@ const GlobalClassNames = {
   cellCheck: 'ms-DetailsRow-cellCheck',
   cellMeasurer: 'ms-DetailsRow-cellMeasurer',
   listCellFirstChild: 'ms-List-cell:first-child',
-  isFocusable: "data-is-focusable='true'",
+  isFocusable: "[data-is-focusable='true']",
   isContentUnselectable: 'is-contentUnselectable',
   isSelected: 'is-selected',
   isCheckVisible: 'is-check-visible',
@@ -106,7 +106,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
   const thickBorderStyle = `${values.rowShimmerHorizontalBorder * 4}px solid ${colors.defaultBackgroundColor}`;
   const thinBorderStyle = `${values.rowShimmerHorizontalBorder}px solid ${colors.defaultBackgroundColor}`;
   const selectedStyles: IStyleBaseArray = [
-    getFocusStyle(theme, 0, undefined, undefined, themePrimary),
+    getFocusStyle(theme, -1, undefined, undefined, themePrimary, white),
     classNames.isSelected,
     checkClassNames && checkClassNames.isSelected,
     {
@@ -233,7 +233,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
   };
 
   const defaultCellStyles: IStyle = [
-    getFocusStyle(theme),
+    getFocusStyle(theme, -1),
     classNames.cell,
     {
       display: 'inline-block',
@@ -252,7 +252,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
           maxWidth: '100%'
         },
 
-        [classNames.isFocusable!]: getFocusStyle(theme, 0, undefined, undefined, neutralSecondary),
+        [classNames.isFocusable!]: getFocusStyle(theme, -1, undefined, undefined, neutralSecondary, white),
 
         '&.$shimmer': {
           padding: 0,
@@ -309,7 +309,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
       anySelected && checkClassNames && checkClassNames.anySelected,
       isCheckVisible && checkClassNames && checkClassNames.isVisible,
       isCheckVisible && classNames.isCheckVisible,
-      getFocusStyle(theme, 0, undefined, undefined, isSelected ? neutralSecondary : themePrimary),
+      getFocusStyle(theme, 0, undefined, undefined, isSelected ? neutralSecondary : themePrimary, white),
       {
         borderBottom: `1px solid ${neutralLighter}`,
         background: colors.defaultBackgroundColor,
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
index 23b5eed438b80b..f39ebcd54c4787 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
@@ -1,6 +1,5 @@
 import { IDetailsRowCheckStyleProps, IDetailsRowCheckStyles } from './DetailsRowCheck.types';
 import { getGlobalClassNames, getFocusStyle } from '../../Styling';
-import { IsFocusVisibleClassName } from '@uifabric/utilities';
 
 const GlobalClassNames = {
   root: 'ms-DetailsRow-check',
@@ -36,19 +35,13 @@ export const getStyles = (props: IDetailsRowCheckStyleProps): IDetailsRowCheckSt
         backgroundColor: 'transparent',
         border: 'none',
         opacity: 0,
-        height: compact ? 32 : 40,
+        height: compact || isHeader ? 32 : 40,
         width: 40,
         padding: 0,
         margin: 0,
         selectors: {
           '&:hover': {
             opacity: 1
-          },
-          '&.isHeader': {
-            height: 32
-          },
-          [`.${IsFocusVisibleClassName} &`]: {
-            opacity: 1
           }
         }
       },
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
index 3eecb24deb75b6..77e437455e3c19 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
@@ -39,6 +39,7 @@ const DetailsRowCheckBase = (props: IDetailsRowCheckProps) => {
     selected: isPressed,
     anySelected,
     className,
+    isHeader,
     compact
   });
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
index 384a62afd45101..51b30bde55d9aa 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
@@ -5,7 +5,30 @@ exports[`DetailsHeader can render 1`] = `
   aria-describedby={undefined}
   aria-label={undefined}
   aria-labelledby={undefined}
-  className="ms-FocusZone ms-DetailsHeader"
+  className=
+      ms-FocusZone
+      ms-DetailsHeader
+      {
+        background: #ffffff;
+        border-bottom: 1px solid #c8c8c8;
+        box-sizing: content-box;
+        cursor: default;
+        display: inline-block;
+        height: 32px;
+        line-height: 32px;
+        min-width: 100%;
+        padding-bottom: 1px;
+        position: relative;
+        user-select: none;
+        vertical-align: top;
+        white-space: nowrap;
+      }
+      &:hover $check {
+        opacity: 1;
+      }
+      & ms-TooltipHost $checkTooltip {
+        display: block;
+      }
   data-automationid="DetailsHeader"
   data-focuszone-id="FocusZone1"
   onFocus={[Function]}
@@ -22,12 +45,81 @@ exports[`DetailsHeader can render 1`] = `
   <div
     aria-colindex={1}
     aria-labelledby="header0-check"
-    className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
+    className=
+        ms-DetailsHeader-cell
+        ms-DetailsHeader-cellIsCheck
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          border: none;
+          box-sizing: border-box;
+          color: #333333;
+          display: inline-block;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          height: 32px;
+          line-height: inherit;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          outline: transparent;
+          padding-bottom: 0;
+          padding-left: 8;
+          padding-right: 8;
+          padding-top: 0;
+          position: relative;
+          text-align: left;
+          text-overflow: ellipsis;
+          vertical-align: top;
+          white-space: nowrap;
+        }
+        &::-moz-focus-inner {
+          border: 0;
+        }
+        .ms-Fabric--isFocusVisible &:focus:after {
+          border: 1px solid #ffffff;
+          bottom: 1px;
+          content: "";
+          left: 1px;
+          outline: 1px solid #666666;
+          position: absolute;
+          right: 1px;
+          top: 1px;
+          z-index: 1;
+        }
+        &:hover $gripperBarVerticalStyle {
+          display: block;
+        }
+        & $filterChevron {
+          color: #a6a6a6;
+          padding-left: 4px;
+          vertical-align: middle;
+        }
+        & $collapseButton {
+          padding-right: 0px;
+        }
+        {
+          align-items: center;
+          display: inline-flex;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+          position: relative;
+        }
     onClick={[Function]}
     role="columnheader"
   >
     <span
-      className=""
+      className=
+
+
     >
       <div
         aria-checked={undefined}
@@ -35,7 +127,13 @@ exports[`DetailsHeader can render 1`] = `
         aria-label={undefined}
         className=
             ms-DetailsRow-check
-
+            ms-DetailsRow-check--isHeader
+            {
+              height: 32px;
+            }
+            .ms-Fabric--isFocusVisible &:focus {
+              opacity: 1;
+            }
             {
               align-items: center;
               background-color: transparent;
@@ -44,7 +142,7 @@ exports[`DetailsHeader can render 1`] = `
               box-sizing: border-box;
               cursor: default;
               display: flex;
-              height: 40px;
+              height: 32px;
               justify-content: center;
               margin-bottom: 0px;
               margin-left: 0px;
@@ -77,12 +175,6 @@ exports[`DetailsHeader can render 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-is-focusable={true}
@@ -187,7 +279,68 @@ exports[`DetailsHeader can render 1`] = `
   <div
     aria-colindex={2}
     aria-sort="none"
-    className="ms-DetailsHeader-cell is-actionable undefined"
+    className=
+        ms-DetailsHeader-cell
+        is-actionable
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          border: none;
+          box-sizing: border-box;
+          color: #333333;
+          display: inline-block;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          height: 32px;
+          line-height: inherit;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          outline: transparent;
+          padding-bottom: 0;
+          padding-left: 8;
+          padding-right: 8;
+          padding-top: 0;
+          position: relative;
+          text-align: left;
+          text-overflow: ellipsis;
+          vertical-align: top;
+          white-space: nowrap;
+        }
+        &::-moz-focus-inner {
+          border: 0;
+        }
+        .ms-Fabric--isFocusVisible &:focus:after {
+          border: 1px solid #ffffff;
+          bottom: 1px;
+          content: "";
+          left: 1px;
+          outline: 1px solid #666666;
+          position: absolute;
+          right: 1px;
+          top: 1px;
+          z-index: 1;
+        }
+        &:hover $gripperBarVerticalStyle {
+          display: block;
+        }
+        & $filterChevron {
+          color: #a6a6a6;
+          padding-left: 4px;
+          vertical-align: middle;
+        }
+        & $collapseButton {
+          padding-right: 0px;
+        }
+        &:hover {
+          background: #f4f4f4;
+          color: #333333;
+        }
+        &:active {
+          background: #eaeaea;
+        }
     data-automationid="ColumnsHeaderColumn"
     data-is-draggable={false}
     data-item-key="a"
@@ -200,14 +353,52 @@ exports[`DetailsHeader can render 1`] = `
     }
   >
     <span
-      className=""
+      className=
+
+          {
+            bottom: 0px;
+            display: block;
+            left: 0px;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
     >
       <span
         aria-describedby={undefined}
         aria-haspopup={false}
         aria-label={undefined}
         aria-labelledby="header0-a-name "
-        className="ms-DetailsHeader-cellTitle"
+        className=
+            ms-DetailsHeader-cellTitle
+            {
+              align-items: stretch;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              outline: transparent;
+              overflow: hidden;
+              padding-bottom: 0;
+              padding-left: 12px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
         data-is-focusable={true}
         id="header0-a"
         onClick={[Function]}
@@ -215,7 +406,13 @@ exports[`DetailsHeader can render 1`] = `
         role="button"
       >
         <span
-          className="ms-DetailsHeader-cellName"
+          className=
+              ms-DetailsHeader-cellName
+              {
+                flex: 0 1 auto;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
           id="header0-a-name"
         >
           a
@@ -225,7 +422,53 @@ exports[`DetailsHeader can render 1`] = `
   </div>
   <div
     aria-hidden={true}
-    className="ms-DetailsHeader-cellSizer"
+    className=
+        ms-DetailsHeader-cellSizer
+        {
+          background: transparent;
+          bottom: 0px;
+          cursor: ew-resize;
+          display: inline-block;
+          height: inherit;
+          outline: transparent;
+          overflow: hidden;
+          position: relative;
+          top: 0px;
+          width: 16px;
+          z-index: 1;
+        }
+        &::-moz-focus-inner {
+          border: 0px;
+        }
+        &:after {
+          background: #c8c8c8;
+          bottom: 0px;
+          content: ;
+          left: 50%;
+          opacity: 0;
+          position: absolute;
+          top: 0px;
+          width: 1px;
+        }
+        &:focus:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &:hover:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &$cellIsResizing:after {
+          box-shadow: 0 0 5px 0 0 rgba(0, 0, 0, 0.4);
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        {
+          margin-bottom: 0;
+          margin-left: -8px;
+          margin-right: -8px;
+          margin-top: 0;
+        }
     data-is-focusable={false}
     data-sizer-index={0}
     onBlur={[Function]}
@@ -236,7 +479,68 @@ exports[`DetailsHeader can render 1`] = `
   <div
     aria-colindex={3}
     aria-sort="none"
-    className="ms-DetailsHeader-cell is-actionable undefined"
+    className=
+        ms-DetailsHeader-cell
+        is-actionable
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          border: none;
+          box-sizing: border-box;
+          color: #333333;
+          display: inline-block;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          height: 32px;
+          line-height: inherit;
+          margin-bottom: 0;
+          margin-left: 0;
+          margin-right: 0;
+          margin-top: 0;
+          outline: transparent;
+          padding-bottom: 0;
+          padding-left: 8;
+          padding-right: 8;
+          padding-top: 0;
+          position: relative;
+          text-align: left;
+          text-overflow: ellipsis;
+          vertical-align: top;
+          white-space: nowrap;
+        }
+        &::-moz-focus-inner {
+          border: 0;
+        }
+        .ms-Fabric--isFocusVisible &:focus:after {
+          border: 1px solid #ffffff;
+          bottom: 1px;
+          content: "";
+          left: 1px;
+          outline: 1px solid #666666;
+          position: absolute;
+          right: 1px;
+          top: 1px;
+          z-index: 1;
+        }
+        &:hover $gripperBarVerticalStyle {
+          display: block;
+        }
+        & $filterChevron {
+          color: #a6a6a6;
+          padding-left: 4px;
+          vertical-align: middle;
+        }
+        & $collapseButton {
+          padding-right: 0px;
+        }
+        &:hover {
+          background: #f4f4f4;
+          color: #333333;
+        }
+        &:active {
+          background: #eaeaea;
+        }
     data-automationid="ColumnsHeaderColumn"
     data-is-draggable={false}
     data-item-key="b"
@@ -249,14 +553,52 @@ exports[`DetailsHeader can render 1`] = `
     }
   >
     <span
-      className=""
+      className=
+
+          {
+            bottom: 0px;
+            display: block;
+            left: 0px;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
     >
       <span
         aria-describedby={undefined}
         aria-haspopup={false}
         aria-label={undefined}
         aria-labelledby="header0-b-name "
-        className="ms-DetailsHeader-cellTitle"
+        className=
+            ms-DetailsHeader-cellTitle
+            {
+              align-items: stretch;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              outline: transparent;
+              overflow: hidden;
+              padding-bottom: 0;
+              padding-left: 12px;
+              padding-right: 8px;
+              padding-top: 0;
+              position: relative;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 1px;
+              content: "";
+              left: 1px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 1px;
+              top: 1px;
+              z-index: 1;
+            }
         data-is-focusable={true}
         id="header0-b"
         onClick={[Function]}
@@ -264,7 +606,13 @@ exports[`DetailsHeader can render 1`] = `
         role="button"
       >
         <span
-          className="ms-DetailsHeader-cellName"
+          className=
+              ms-DetailsHeader-cellName
+              {
+                flex: 0 1 auto;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
           id="header0-b-name"
         >
           b
@@ -274,7 +622,53 @@ exports[`DetailsHeader can render 1`] = `
   </div>
   <div
     aria-hidden={true}
-    className="ms-DetailsHeader-cellSizer"
+    className=
+        ms-DetailsHeader-cellSizer
+        {
+          background: transparent;
+          bottom: 0px;
+          cursor: ew-resize;
+          display: inline-block;
+          height: inherit;
+          outline: transparent;
+          overflow: hidden;
+          position: relative;
+          top: 0px;
+          width: 16px;
+          z-index: 1;
+        }
+        &::-moz-focus-inner {
+          border: 0px;
+        }
+        &:after {
+          background: #c8c8c8;
+          bottom: 0px;
+          content: ;
+          left: 50%;
+          opacity: 0;
+          position: absolute;
+          top: 0px;
+          width: 1px;
+        }
+        &:focus:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &:hover:after {
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        &$cellIsResizing:after {
+          box-shadow: 0 0 5px 0 0 rgba(0, 0, 0, 0.4);
+          opacity: 1;
+          transition: opacity 0.3s linear;
+        }
+        {
+          margin-bottom: 0px;
+          margin-left: -16px;
+          margin-right: 0px;
+          margin-top: 0px;
+        }
     data-is-focusable={false}
     data-sizer-index={1}
     onBlur={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
index 9959512ba7fc51..5ca8b9aa0b3b2d 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
@@ -31,7 +31,30 @@ exports[`DetailsList renders List correctly 1`] = `
           aria-describedby={undefined}
           aria-label={undefined}
           aria-labelledby={undefined}
-          className="ms-FocusZone ms-DetailsHeader"
+          className=
+              ms-FocusZone
+              ms-DetailsHeader
+              {
+                background: #ffffff;
+                border-bottom: 1px solid #c8c8c8;
+                box-sizing: content-box;
+                cursor: default;
+                display: inline-block;
+                height: 32px;
+                line-height: 32px;
+                min-width: 100%;
+                padding-bottom: 1px;
+                position: relative;
+                user-select: none;
+                vertical-align: top;
+                white-space: nowrap;
+              }
+              &:hover $check {
+                opacity: 1;
+              }
+              & ms-TooltipHost $checkTooltip {
+                display: block;
+              }
           data-automationid="DetailsHeader"
           data-focuszone-id="FocusZone1"
           onFocus={[Function]}
@@ -48,12 +71,81 @@ exports[`DetailsList renders List correctly 1`] = `
           <div
             aria-colindex={1}
             aria-labelledby="header0-check"
-            className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
+            className=
+                ms-DetailsHeader-cell
+                ms-DetailsHeader-cellIsCheck
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                {
+                  align-items: center;
+                  display: inline-flex;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  position: relative;
+                }
             onClick={[Function]}
             role="columnheader"
           >
             <span
-              className=""
+              className=
+
+
             >
               <div
                 aria-checked={undefined}
@@ -61,7 +153,13 @@ exports[`DetailsList renders List correctly 1`] = `
                 aria-label={undefined}
                 className=
                     ms-DetailsRow-check
-
+                    ms-DetailsRow-check--isHeader
+                    {
+                      height: 32px;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus {
+                      opacity: 1;
+                    }
                     {
                       align-items: center;
                       background-color: transparent;
@@ -70,7 +168,7 @@ exports[`DetailsList renders List correctly 1`] = `
                       box-sizing: border-box;
                       cursor: default;
                       display: flex;
-                      height: 40px;
+                      height: 32px;
                       justify-content: center;
                       margin-bottom: 0px;
                       margin-left: 0px;
@@ -103,12 +201,6 @@ exports[`DetailsList renders List correctly 1`] = `
                     &:hover {
                       opacity: 1;
                     }
-                    &.isHeader {
-                      height: 32px;
-                    }
-                    .ms-Fabric--isFocusVisible & {
-                      opacity: 1;
-                    }
 
                 data-automationid="DetailsRowCheck"
                 data-is-focusable={true}
@@ -213,7 +305,68 @@ exports[`DetailsList renders List correctly 1`] = `
           <div
             aria-colindex={2}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="key"
@@ -226,14 +379,52 @@ exports[`DetailsList renders List correctly 1`] = `
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header0-key-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header0-key"
                 onClick={[Function]}
@@ -241,7 +432,13 @@ exports[`DetailsList renders List correctly 1`] = `
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header0-key-name"
                 >
                   key
@@ -251,7 +448,53 @@ exports[`DetailsList renders List correctly 1`] = `
           </div>
           <div
             aria-hidden={true}
-            className="ms-DetailsHeader-cellSizer"
+            className=
+                ms-DetailsHeader-cellSizer
+                {
+                  background: transparent;
+                  bottom: 0px;
+                  cursor: ew-resize;
+                  display: inline-block;
+                  height: inherit;
+                  outline: transparent;
+                  overflow: hidden;
+                  position: relative;
+                  top: 0px;
+                  width: 16px;
+                  z-index: 1;
+                }
+                &::-moz-focus-inner {
+                  border: 0px;
+                }
+                &:after {
+                  background: #c8c8c8;
+                  bottom: 0px;
+                  content: ;
+                  left: 50%;
+                  opacity: 0;
+                  position: absolute;
+                  top: 0px;
+                  width: 1px;
+                }
+                &:focus:after {
+                  opacity: 1;
+                  transition: opacity 0.3s linear;
+                }
+                &:hover:after {
+                  opacity: 1;
+                  transition: opacity 0.3s linear;
+                }
+                &$cellIsResizing:after {
+                  box-shadow: 0 0 5px 0 0 rgba(0, 0, 0, 0.4);
+                  opacity: 1;
+                  transition: opacity 0.3s linear;
+                }
+                {
+                  margin-bottom: 0px;
+                  margin-left: -16px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                }
             data-is-focusable={false}
             data-sizer-index={0}
             onBlur={[Function]}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
index 397a2b87090fd2..1da9c3980a9954 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
@@ -31,7 +31,30 @@ exports[`DetailsRow renders details list row correctly 1`] = `
           aria-describedby={undefined}
           aria-label={undefined}
           aria-labelledby={undefined}
-          className="ms-FocusZone ms-DetailsHeader"
+          className=
+              ms-FocusZone
+              ms-DetailsHeader
+              {
+                background: #ffffff;
+                border-bottom: 1px solid #c8c8c8;
+                box-sizing: content-box;
+                cursor: default;
+                display: inline-block;
+                height: 32px;
+                line-height: 32px;
+                min-width: 100%;
+                padding-bottom: 1px;
+                position: relative;
+                user-select: none;
+                vertical-align: top;
+                white-space: nowrap;
+              }
+              &:hover $check {
+                opacity: 1;
+              }
+              & ms-TooltipHost $checkTooltip {
+                display: block;
+              }
           data-automationid="DetailsHeader"
           data-focuszone-id="FocusZone1"
           onFocus={[Function]}
@@ -48,12 +71,81 @@ exports[`DetailsRow renders details list row correctly 1`] = `
           <div
             aria-colindex={1}
             aria-labelledby="header0-check"
-            className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
+            className=
+                ms-DetailsHeader-cell
+                ms-DetailsHeader-cellIsCheck
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                {
+                  align-items: center;
+                  display: inline-flex;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  position: relative;
+                }
             onClick={[Function]}
             role="columnheader"
           >
             <span
-              className=""
+              className=
+
+
             >
               <div
                 aria-checked={undefined}
@@ -61,7 +153,13 @@ exports[`DetailsRow renders details list row correctly 1`] = `
                 aria-label={undefined}
                 className=
                     ms-DetailsRow-check
-
+                    ms-DetailsRow-check--isHeader
+                    {
+                      height: 32px;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus {
+                      opacity: 1;
+                    }
                     {
                       align-items: center;
                       background-color: transparent;
@@ -70,7 +168,7 @@ exports[`DetailsRow renders details list row correctly 1`] = `
                       box-sizing: border-box;
                       cursor: default;
                       display: flex;
-                      height: 40px;
+                      height: 32px;
                       justify-content: center;
                       margin-bottom: 0px;
                       margin-left: 0px;
@@ -103,12 +201,6 @@ exports[`DetailsRow renders details list row correctly 1`] = `
                     &:hover {
                       opacity: 1;
                     }
-                    &.isHeader {
-                      height: 32px;
-                    }
-                    .ms-Fabric--isFocusVisible & {
-                      opacity: 1;
-                    }
 
                 data-automationid="DetailsRowCheck"
                 data-is-focusable={true}
@@ -213,7 +305,68 @@ exports[`DetailsRow renders details list row correctly 1`] = `
           <div
             aria-colindex={2}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="key"
@@ -226,14 +379,52 @@ exports[`DetailsRow renders details list row correctly 1`] = `
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header0-key-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header0-key"
                 onClick={[Function]}
@@ -241,7 +432,13 @@ exports[`DetailsRow renders details list row correctly 1`] = `
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header0-key-name"
                 >
                   key
@@ -252,7 +449,68 @@ exports[`DetailsRow renders details list row correctly 1`] = `
           <div
             aria-colindex={3}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="name"
@@ -265,14 +523,52 @@ exports[`DetailsRow renders details list row correctly 1`] = `
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header0-name-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header0-name"
                 onClick={[Function]}
@@ -280,7 +576,13 @@ exports[`DetailsRow renders details list row correctly 1`] = `
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header0-name-name"
                 >
                   name
@@ -291,7 +593,68 @@ exports[`DetailsRow renders details list row correctly 1`] = `
           <div
             aria-colindex={4}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="value"
@@ -304,14 +667,52 @@ exports[`DetailsRow renders details list row correctly 1`] = `
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header0-value-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header0-value"
                 onClick={[Function]}
@@ -319,7 +720,13 @@ exports[`DetailsRow renders details list row correctly 1`] = `
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header0-value-name"
                 >
                   value
@@ -461,7 +868,30 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
           aria-describedby={undefined}
           aria-label={undefined}
           aria-labelledby={undefined}
-          className="ms-FocusZone ms-DetailsHeader"
+          className=
+              ms-FocusZone
+              ms-DetailsHeader
+              {
+                background: #ffffff;
+                border-bottom: 1px solid #c8c8c8;
+                box-sizing: content-box;
+                cursor: default;
+                display: inline-block;
+                height: 32px;
+                line-height: 32px;
+                min-width: 100%;
+                padding-bottom: 1px;
+                position: relative;
+                user-select: none;
+                vertical-align: top;
+                white-space: nowrap;
+              }
+              &:hover $check {
+                opacity: 1;
+              }
+              & ms-TooltipHost $checkTooltip {
+                display: block;
+              }
           data-automationid="DetailsHeader"
           data-focuszone-id="FocusZone10"
           onFocus={[Function]}
@@ -478,12 +908,81 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
           <div
             aria-colindex={1}
             aria-labelledby="header9-check"
-            className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
+            className=
+                ms-DetailsHeader-cell
+                ms-DetailsHeader-cellIsCheck
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                {
+                  align-items: center;
+                  display: inline-flex;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  position: relative;
+                }
             onClick={[Function]}
             role="columnheader"
           >
             <span
-              className=""
+              className=
+
+
             >
               <div
                 aria-checked={undefined}
@@ -491,7 +990,13 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
                 aria-label={undefined}
                 className=
                     ms-DetailsRow-check
-
+                    ms-DetailsRow-check--isHeader
+                    {
+                      height: 32px;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus {
+                      opacity: 1;
+                    }
                     {
                       align-items: center;
                       background-color: transparent;
@@ -500,7 +1005,7 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
                       box-sizing: border-box;
                       cursor: default;
                       display: flex;
-                      height: 40px;
+                      height: 32px;
                       justify-content: center;
                       margin-bottom: 0px;
                       margin-left: 0px;
@@ -533,12 +1038,6 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
                     &:hover {
                       opacity: 1;
                     }
-                    &.isHeader {
-                      height: 32px;
-                    }
-                    .ms-Fabric--isFocusVisible & {
-                      opacity: 1;
-                    }
 
                 data-automationid="DetailsRowCheck"
                 data-is-focusable={true}
@@ -643,7 +1142,68 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
           <div
             aria-colindex={2}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="key"
@@ -656,14 +1216,52 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header9-key-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header9-key"
                 onClick={[Function]}
@@ -671,7 +1269,13 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header9-key-name"
                 >
                   key
@@ -682,7 +1286,68 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
           <div
             aria-colindex={3}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="name"
@@ -695,14 +1360,52 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header9-name-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header9-name"
                 onClick={[Function]}
@@ -710,7 +1413,13 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header9-name-name"
                 >
                   name
@@ -721,7 +1430,68 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
           <div
             aria-colindex={4}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="value"
@@ -734,14 +1504,52 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header9-value-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header9-value"
                 onClick={[Function]}
@@ -749,7 +1557,13 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header9-value-name"
                 >
                   value
@@ -891,7 +1705,30 @@ exports[`DetailsRow renders details list row with multiple selections correctly
           aria-describedby={undefined}
           aria-label={undefined}
           aria-labelledby={undefined}
-          className="ms-FocusZone ms-DetailsHeader"
+          className=
+              ms-FocusZone
+              ms-DetailsHeader
+              {
+                background: #ffffff;
+                border-bottom: 1px solid #c8c8c8;
+                box-sizing: content-box;
+                cursor: default;
+                display: inline-block;
+                height: 32px;
+                line-height: 32px;
+                min-width: 100%;
+                padding-bottom: 1px;
+                position: relative;
+                user-select: none;
+                vertical-align: top;
+                white-space: nowrap;
+              }
+              &:hover $check {
+                opacity: 1;
+              }
+              & ms-TooltipHost $checkTooltip {
+                display: block;
+              }
           data-automationid="DetailsHeader"
           data-focuszone-id="FocusZone4"
           onFocus={[Function]}
@@ -908,12 +1745,81 @@ exports[`DetailsRow renders details list row with multiple selections correctly
           <div
             aria-colindex={1}
             aria-labelledby="header3-check"
-            className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
+            className=
+                ms-DetailsHeader-cell
+                ms-DetailsHeader-cellIsCheck
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                {
+                  align-items: center;
+                  display: inline-flex;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  position: relative;
+                }
             onClick={[Function]}
             role="columnheader"
           >
             <span
-              className=""
+              className=
+
+
             >
               <div
                 aria-checked={undefined}
@@ -921,7 +1827,13 @@ exports[`DetailsRow renders details list row with multiple selections correctly
                 aria-label={undefined}
                 className=
                     ms-DetailsRow-check
-
+                    ms-DetailsRow-check--isHeader
+                    {
+                      height: 32px;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus {
+                      opacity: 1;
+                    }
                     {
                       align-items: center;
                       background-color: transparent;
@@ -930,7 +1842,7 @@ exports[`DetailsRow renders details list row with multiple selections correctly
                       box-sizing: border-box;
                       cursor: default;
                       display: flex;
-                      height: 40px;
+                      height: 32px;
                       justify-content: center;
                       margin-bottom: 0px;
                       margin-left: 0px;
@@ -963,12 +1875,6 @@ exports[`DetailsRow renders details list row with multiple selections correctly
                     &:hover {
                       opacity: 1;
                     }
-                    &.isHeader {
-                      height: 32px;
-                    }
-                    .ms-Fabric--isFocusVisible & {
-                      opacity: 1;
-                    }
 
                 data-automationid="DetailsRowCheck"
                 data-is-focusable={true}
@@ -1073,7 +1979,68 @@ exports[`DetailsRow renders details list row with multiple selections correctly
           <div
             aria-colindex={2}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="key"
@@ -1086,14 +2053,52 @@ exports[`DetailsRow renders details list row with multiple selections correctly
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header3-key-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header3-key"
                 onClick={[Function]}
@@ -1101,7 +2106,13 @@ exports[`DetailsRow renders details list row with multiple selections correctly
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header3-key-name"
                 >
                   key
@@ -1112,7 +2123,68 @@ exports[`DetailsRow renders details list row with multiple selections correctly
           <div
             aria-colindex={3}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="name"
@@ -1125,14 +2197,52 @@ exports[`DetailsRow renders details list row with multiple selections correctly
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header3-name-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header3-name"
                 onClick={[Function]}
@@ -1140,7 +2250,13 @@ exports[`DetailsRow renders details list row with multiple selections correctly
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header3-name-name"
                 >
                   name
@@ -1151,7 +2267,68 @@ exports[`DetailsRow renders details list row with multiple selections correctly
           <div
             aria-colindex={4}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="value"
@@ -1164,14 +2341,52 @@ exports[`DetailsRow renders details list row with multiple selections correctly
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header3-value-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header3-value"
                 onClick={[Function]}
@@ -1179,7 +2394,13 @@ exports[`DetailsRow renders details list row with multiple selections correctly
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header3-value-name"
                 >
                   value
@@ -1321,7 +2542,30 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
           aria-describedby={undefined}
           aria-label={undefined}
           aria-labelledby={undefined}
-          className="ms-FocusZone ms-DetailsHeader"
+          className=
+              ms-FocusZone
+              ms-DetailsHeader
+              {
+                background: #ffffff;
+                border-bottom: 1px solid #c8c8c8;
+                box-sizing: content-box;
+                cursor: default;
+                display: inline-block;
+                height: 32px;
+                line-height: 32px;
+                min-width: 100%;
+                padding-bottom: 1px;
+                position: relative;
+                user-select: none;
+                vertical-align: top;
+                white-space: nowrap;
+              }
+              &:hover $check {
+                opacity: 1;
+              }
+              & ms-TooltipHost $checkTooltip {
+                display: block;
+              }
           data-automationid="DetailsHeader"
           data-focuszone-id="FocusZone7"
           onFocus={[Function]}
@@ -1338,12 +2582,81 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
           <div
             aria-colindex={1}
             aria-labelledby="header6-check"
-            className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
+            className=
+                ms-DetailsHeader-cell
+                ms-DetailsHeader-cellIsCheck
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                {
+                  align-items: center;
+                  display: inline-flex;
+                  margin-bottom: 0px;
+                  margin-left: 0px;
+                  margin-right: 0px;
+                  margin-top: 0px;
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                  position: relative;
+                }
             onClick={[Function]}
             role="columnheader"
           >
             <span
-              className=""
+              className=
+
+
             >
               <div
                 aria-checked={undefined}
@@ -1351,7 +2664,13 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
                 aria-label={undefined}
                 className=
                     ms-DetailsRow-check
-
+                    ms-DetailsRow-check--isHeader
+                    {
+                      height: 32px;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus {
+                      opacity: 1;
+                    }
                     {
                       align-items: center;
                       background-color: transparent;
@@ -1360,7 +2679,7 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
                       box-sizing: border-box;
                       cursor: default;
                       display: flex;
-                      height: 40px;
+                      height: 32px;
                       justify-content: center;
                       margin-bottom: 0px;
                       margin-left: 0px;
@@ -1393,12 +2712,6 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
                     &:hover {
                       opacity: 1;
                     }
-                    &.isHeader {
-                      height: 32px;
-                    }
-                    .ms-Fabric--isFocusVisible & {
-                      opacity: 1;
-                    }
 
                 data-automationid="DetailsRowCheck"
                 data-is-focusable={true}
@@ -1503,7 +2816,68 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
           <div
             aria-colindex={2}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="key"
@@ -1516,14 +2890,52 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header6-key-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header6-key"
                 onClick={[Function]}
@@ -1531,7 +2943,13 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header6-key-name"
                 >
                   key
@@ -1542,7 +2960,68 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
           <div
             aria-colindex={3}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="name"
@@ -1555,14 +3034,52 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header6-name-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header6-name"
                 onClick={[Function]}
@@ -1570,7 +3087,13 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header6-name-name"
                 >
                   name
@@ -1581,7 +3104,68 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
           <div
             aria-colindex={4}
             aria-sort="none"
-            className="ms-DetailsHeader-cell is-actionable undefined"
+            className=
+                ms-DetailsHeader-cell
+                is-actionable
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  border: none;
+                  box-sizing: border-box;
+                  color: #333333;
+                  display: inline-block;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 12px;
+                  font-weight: 400;
+                  height: 32px;
+                  line-height: inherit;
+                  margin-bottom: 0;
+                  margin-left: 0;
+                  margin-right: 0;
+                  margin-top: 0;
+                  outline: transparent;
+                  padding-bottom: 0;
+                  padding-left: 8;
+                  padding-right: 8;
+                  padding-top: 0;
+                  position: relative;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  vertical-align: top;
+                  white-space: nowrap;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+                .ms-Fabric--isFocusVisible &:focus:after {
+                  border: 1px solid #ffffff;
+                  bottom: 1px;
+                  content: "";
+                  left: 1px;
+                  outline: 1px solid #666666;
+                  position: absolute;
+                  right: 1px;
+                  top: 1px;
+                  z-index: 1;
+                }
+                &:hover $gripperBarVerticalStyle {
+                  display: block;
+                }
+                & $filterChevron {
+                  color: #a6a6a6;
+                  padding-left: 4px;
+                  vertical-align: middle;
+                }
+                & $collapseButton {
+                  padding-right: 0px;
+                }
+                &:hover {
+                  background: #f4f4f4;
+                  color: #333333;
+                }
+                &:active {
+                  background: #eaeaea;
+                }
             data-automationid="ColumnsHeaderColumn"
             data-is-draggable={false}
             data-item-key="value"
@@ -1594,14 +3178,52 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
             }
           >
             <span
-              className=""
+              className=
+
+                  {
+                    bottom: 0px;
+                    display: block;
+                    left: 0px;
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                  }
             >
               <span
                 aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header6-value-name "
-                className="ms-DetailsHeader-cellTitle"
+                className=
+                    ms-DetailsHeader-cellTitle
+                    {
+                      align-items: stretch;
+                      box-sizing: border-box;
+                      display: flex;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      outline: transparent;
+                      overflow: hidden;
+                      padding-bottom: 0;
+                      padding-left: 12px;
+                      padding-right: 8px;
+                      padding-top: 0;
+                      position: relative;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                    .ms-Fabric--isFocusVisible &:focus:after {
+                      border: 1px solid #ffffff;
+                      bottom: 1px;
+                      content: "";
+                      left: 1px;
+                      outline: 1px solid #666666;
+                      position: absolute;
+                      right: 1px;
+                      top: 1px;
+                      z-index: 1;
+                    }
                 data-is-focusable={true}
                 id="header6-value"
                 onClick={[Function]}
@@ -1609,7 +3231,13 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
                 role="button"
               >
                 <span
-                  className="ms-DetailsHeader-cellName"
+                  className=
+                      ms-DetailsHeader-cellName
+                      {
+                        flex: 0 1 auto;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                      }
                   id="header6-value-name"
                 >
                   value
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot
index 2570f331eb42d1..8b4db2c539be42 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot
@@ -50,7 +50,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -110,23 +110,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -193,12 +193,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -334,23 +328,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -405,23 +399,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -514,23 +508,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -729,7 +723,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -789,23 +783,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -872,12 +866,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -1013,23 +1001,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -1084,23 +1072,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -1193,23 +1181,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -1408,7 +1396,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -1468,23 +1456,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -1551,12 +1539,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -1692,23 +1674,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -1763,23 +1745,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -1872,23 +1854,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -2087,7 +2069,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -2147,23 +2129,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -2230,12 +2212,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -2371,23 +2347,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -2442,23 +2418,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -2551,23 +2527,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -2766,7 +2742,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -2826,23 +2802,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -2909,12 +2885,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -3050,23 +3020,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -3121,23 +3091,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -3230,23 +3200,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -3445,7 +3415,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -3505,23 +3475,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -3588,12 +3558,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -3729,23 +3693,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -3800,23 +3764,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -3909,23 +3873,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -4124,7 +4088,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -4184,23 +4148,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -4267,12 +4231,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -4408,23 +4366,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -4479,23 +4437,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -4588,23 +4546,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -4803,7 +4761,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -4863,23 +4821,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -4946,12 +4904,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -5087,23 +5039,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -5158,23 +5110,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -5267,23 +5219,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -5482,7 +5434,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -5542,23 +5494,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -5625,12 +5577,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -5766,23 +5712,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -5837,23 +5783,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -5946,23 +5892,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -6161,7 +6107,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           bottom: 1px;
           content: "";
           left: 1px;
-          outline: 1px solid #666666;
+          outline: 1px solid #ffffff;
           position: absolute;
           right: 1px;
           top: 1px;
@@ -6221,23 +6167,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
           }
           .ms-Fabric--isFocusVisible &:focus:after {
             border: 1px solid #666666;
-            bottom: 1px;
+            bottom: 0px;
             content: "";
-            left: 1px;
-            outline: 1px solid #666666;
+            left: 0px;
+            outline: 1px solid #ffffff;
             position: absolute;
-            right: 1px;
-            top: 1px;
+            right: 0px;
+            top: 0px;
             z-index: 1;
           }
           & > button {
             max-width: 100%;
           }
-          & data-is-focusable='true' {
+          & [data-is-focusable='true'] {
             outline: transparent;
             position: relative;
           }
-          & data-is-focusable='true'::-moz-focus-inner {
+          & [data-is-focusable='true']::-moz-focus-inner {
             border: 0;
           }
           &.$shimmer {
@@ -6304,12 +6250,6 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             &:hover {
               opacity: 1;
             }
-            &.isHeader {
-              height: 32px;
-            }
-            .ms-Fabric--isFocusVisible & {
-              opacity: 1;
-            }
 
         data-automationid="DetailsRowCheck"
         data-selection-toggle={true}
@@ -6445,23 +6385,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -6516,23 +6456,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {
@@ -6625,23 +6565,23 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
             }
             .ms-Fabric--isFocusVisible &:focus:after {
               border: 1px solid #666666;
-              bottom: 1px;
+              bottom: 0px;
               content: "";
-              left: 1px;
-              outline: 1px solid #666666;
+              left: 0px;
+              outline: 1px solid #ffffff;
               position: absolute;
-              right: 1px;
-              top: 1px;
+              right: 0px;
+              top: 0px;
               z-index: 1;
             }
             & > button {
               max-width: 100%;
             }
-            & data-is-focusable='true' {
+            & [data-is-focusable='true'] {
               outline: transparent;
               position: relative;
             }
-            & data-is-focusable='true'::-moz-focus-inner {
+            & [data-is-focusable='true']::-moz-focus-inner {
               border: 0;
             }
             &.$shimmer {