diff --git a/apps/vr-tests/src/stories/DetailsList.stories.tsx b/apps/vr-tests/src/stories/DetailsList.stories.tsx
index 5851066f8d261..0cbea1f5e945e 100644
--- a/apps/vr-tests/src/stories/DetailsList.stories.tsx
+++ b/apps/vr-tests/src/stories/DetailsList.stories.tsx
@@ -7,7 +7,8 @@ import {
   DetailsList,
   DetailsListLayoutMode,
   IColumn,
-  CheckboxVisibility
+  CheckboxVisibility,
+  SelectionMode
 } from 'office-ui-fabric-react';
 
 const items = [
@@ -150,6 +151,16 @@ storiesOf('DetailsList', module)
       isHeaderVisible={true}
     />
   ))
+  .addStory('Single Selection Mode', () => (
+    <DetailsList
+      items={items}
+      compact={false}
+      columns={columns}
+      selectionMode={SelectionMode.single}
+      layoutMode={DetailsListLayoutMode.justified}
+      isHeaderVisible={true}
+    />
+  ))
   .addStory('Grouped', () => (
     <DetailsList
       items={items}
diff --git a/common/changes/office-ui-fabric-react/detailsListSelectionColumnHeader_2019-01-25-06-58.json b/common/changes/office-ui-fabric-react/detailsListSelectionColumnHeader_2019-01-25-06-58.json
new file mode 100644
index 0000000000000..918d34457c2a0
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/detailsListSelectionColumnHeader_2019-01-25-06-58.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList: render a simple column header for checkboxes in single selection mode",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "natalie.ethell@microsoft.com"
+}
\ No newline at end of file
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
index ae878f535568f..637c6282e2b0a 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -210,6 +210,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
     });
 
     const classNames = this._classNames;
+
     const isRTL = getRTL();
     return (
       <FocusZone
@@ -232,7 +233,6 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                 onClick={!isCheckboxHidden ? this._onSelectAllClicked : undefined}
                 aria-colindex={1}
                 role={'columnheader'}
-                aria-hidden={isCheckboxHidden ? true : undefined}
               >
                 {onRenderColumnHeaderTooltip(
                   {
@@ -245,9 +245,15 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                         id={`${this._id}-check`}
                         aria-label={ariaLabelForSelectionColumn}
                         aria-describedby={
-                          ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? `${this._id}-checkTooltip` : undefined
+                          !isCheckboxHidden
+                            ? ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip
+                              ? `${this._id}-checkTooltip`
+                              : undefined
+                            : ariaLabelForSelectionColumn && !this.props.onRenderColumnHeaderTooltip
+                            ? `${this._id}-checkTooltip`
+                            : undefined
                         }
-                        data-is-focusable={!isCheckboxHidden}
+                        data-is-focusable={!isCheckboxHidden || undefined}
                         isHeader={true}
                         selected={isAllSelected}
                         anySelected={false}
@@ -259,10 +265,16 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
                   this._onRenderColumnHeaderTooltip
                 )}
               </div>,
-              ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? (
-                <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
-                  {ariaLabelForSelectAllCheckbox}
-                </label>
+              !this.props.onRenderColumnHeaderTooltip ? (
+                ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (
+                  <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
+                    {ariaLabelForSelectAllCheckbox}
+                  </label>
+                ) : ariaLabelForSelectionColumn && isCheckboxHidden ? (
+                  <label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
+                    {ariaLabelForSelectionColumn}
+                  </label>
+                ) : null
               ) : null
             ]
           : null}
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 db0a581d34fd0..347cb447c0943 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,6 +1,6 @@
 import * as React from 'react';
 import { DetailsHeader } from './DetailsHeader';
-import { IDetailsHeader, IDropHintDetails } from './DetailsHeader.types';
+import { IDetailsHeader, IDropHintDetails, SelectAllVisibility } from './DetailsHeader.types';
 import { DetailsListLayoutMode, IColumn, ColumnActionsMode } from './DetailsList.types';
 import { Selection, SelectionMode } from '../../utilities/selection/index';
 import { EventGroup } from '../../Utilities';
@@ -247,6 +247,19 @@ describe('DetailsHeader', () => {
     expect(component.toJSON()).toMatchSnapshot();
   });
 
+  it('can render a hidden select all checkbox in single selection mode', () => {
+    const component = renderer.create(
+      <DetailsHeader
+        selection={_selection}
+        selectionMode={SelectionMode.single}
+        layoutMode={DetailsListLayoutMode.fixedColumns}
+        selectAllVisibility={SelectAllVisibility.hidden}
+        columns={_columns}
+      />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
   it('can resize columns', () => {
     let lastResize = { size: -1, index: -1 };
 
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 583b8adc7da25..13a281411c307 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
@@ -22,7 +22,7 @@ export const getStyles = (props: IDetailsRowCheckStyleProps): IDetailsRowCheckSt
     root: [classNames.root, className],
 
     check: [
-      !canSelect && [classNames.isDisabled, { visibility: 'hidden' }],
+      !canSelect && classNames.isDisabled,
       isHeader && classNames.isHeader,
       getFocusStyle(theme),
       theme.fonts.small,
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 22dc1832b4826..89febd5b59042 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
@@ -46,7 +46,7 @@ const DetailsRowCheckBase = (props: IDetailsRowCheckProps) => {
     compact
   });
 
-  return (
+  return canSelect ? (
     <div
       {...buttonProps}
       role="checkbox"
@@ -57,6 +57,8 @@ const DetailsRowCheckBase = (props: IDetailsRowCheckProps) => {
     >
       <Check checked={isPressed} />
     </div>
+  ) : (
+    <div {...buttonProps} className={css(classNames.root, classNames.check)} />
   );
 };
 
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 1347b5f5aceb0..e362e35b5d97e 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
@@ -868,6 +868,776 @@ exports[`DetailsHeader can render 1`] = `
 </div>
 `;
 
+exports[`DetailsHeader can render a hidden select all checkbox in single selection mode 1`] = `
+<div
+  className=
+      ms-FocusZone
+      ms-DetailsHeader
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        background: #ffffff;
+        border-bottom: 1px solid #eaeaea;
+        box-sizing: content-box;
+        cursor: default;
+        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: 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;
+      }
+      & $cell$cellIsCheck {
+        visibility: hidden;
+      }
+  data-automationid="DetailsHeader"
+  data-focuszone-id="FocusZone3"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDownCapture={[Function]}
+  onMouseMove={[Function]}
+  role="row"
+  style={
+    Object {
+      "minWidth": 0,
+    }
+  }
+>
+  <div
+    aria-colindex={1}
+    aria-labelledby="header2-check"
+    className=
+        ms-DetailsHeader-cell
+        ms-DetailsHeader-cellIsCheck
+        {
+          align-items: center;
+          border: none;
+          box-sizing: border-box;
+          color: #333333;
+          display: inline-flex;
+          height: 32px;
+          line-height: inherit;
+          margin-bottom: 0px;
+          margin-left: 0px;
+          margin-right: 0px;
+          margin-top: 0px;
+          outline: transparent;
+          padding-bottom: 0px;
+          padding-left: 0px;
+          padding-right: 0px;
+          padding-top: 0px;
+          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;
+        }
+    role="columnheader"
+  >
+    <span
+      className=
+
+
+    >
+      <div
+        className=
+            ms-DetailsRow-check
+            ms-DetailsRow-check--isDisabled
+            ms-DetailsRow-check--isHeader
+            {
+              height: 32px;
+            }
+            .ms-Fabric--isFocusVisible &:focus {
+              opacity: 1;
+            }
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              align-items: center;
+              background-color: transparent;
+              background: none;
+              border: none;
+              box-sizing: border-box;
+              cursor: default;
+              display: flex;
+              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;
+              justify-content: center;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              opacity: 0;
+              outline: transparent;
+              padding-bottom: 0px;
+              padding-left: 0px;
+              padding-right: 0px;
+              padding-top: 0px;
+              position: relative;
+              vertical-align: top;
+              width: 40px;
+            }
+            &::-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 {
+              opacity: 1;
+            }
+        id="header2-check"
+      />
+    </span>
+  </div>
+  <div
+    aria-colindex={2}
+    aria-sort="none"
+    className=
+        ms-DetailsHeader-cell
+        is-actionable
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          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: 12px;
+          padding-right: 8px;
+          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 {
+          background: #f4f4f4;
+          color: #333333;
+        }
+        &:active {
+          background: #eaeaea;
+        }
+        &:hover i[data-icon-name="GripperBarVertical"] {
+          display: block;
+        }
+    data-automationid="ColumnsHeaderColumn"
+    data-is-draggable={false}
+    data-item-key="a"
+    draggable={false}
+    role="columnheader"
+    style={
+      Object {
+        "width": 220,
+      }
+    }
+  >
+    <span
+      className=
+
+          {
+            bottom: 0px;
+            display: block;
+            left: 0px;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
+    >
+      <span
+        aria-haspopup={false}
+        aria-labelledby="header2-a-name "
+        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="header2-a"
+        onClick={[Function]}
+        onContextMenu={[Function]}
+      >
+        <span
+          className=
+              ms-DetailsHeader-cellName
+              {
+                flex: 0 1 auto;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+          id="header2-a-name"
+        >
+          a
+        </span>
+      </span>
+    </span>
+  </div>
+  <div
+    aria-hidden={true}
+    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 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]}
+    onClick={[Function]}
+    onDoubleClick={[Function]}
+    role="button"
+  />
+  <div
+    aria-colindex={3}
+    aria-sort="ascending"
+    className=
+        ms-DetailsHeader-cell
+        is-actionable
+        is-icon-visible
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          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: 12px;
+          padding-right: 8px;
+          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 {
+          background: #f4f4f4;
+          color: #333333;
+        }
+        &:active {
+          background: #eaeaea;
+        }
+        &:hover i[data-icon-name="GripperBarVertical"] {
+          display: block;
+        }
+    data-automationid="ColumnsHeaderColumn"
+    data-is-draggable={false}
+    data-item-key="b"
+    draggable={false}
+    role="columnheader"
+    style={
+      Object {
+        "width": 220,
+      }
+    }
+  >
+    <span
+      className=
+
+          {
+            bottom: 0px;
+            display: block;
+            left: 0px;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
+    >
+      <span
+        aria-haspopup={false}
+        aria-labelledby="header2-b-name "
+        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="header2-b"
+        onClick={[Function]}
+        onContextMenu={[Function]}
+      >
+        <span
+          className=
+              ms-DetailsHeader-cellName
+              {
+                flex: 0 1 auto;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+          id="header2-b-name"
+        >
+          b
+        </span>
+        <i
+          className=
+
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                color: #666666;
+                display: inline-block;
+                font-family: "FabricMDL2Icons";
+                font-style: normal;
+                font-weight: normal;
+                opacity: 1;
+                padding-left: 4px;
+                position: relative;
+                speak: none;
+                top: 1px;
+              }
+          data-icon-name="SortUp"
+          role="presentation"
+        >
+          
+        </i>
+      </span>
+    </span>
+  </div>
+  <div
+    aria-hidden={true}
+    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 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={1}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDoubleClick={[Function]}
+    role="button"
+  />
+  <div
+    aria-colindex={4}
+    aria-sort="none"
+    className=
+        ms-DetailsHeader-cell
+        is-actionable
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          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: 12px;
+          padding-right: 8px;
+          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 {
+          background: #f4f4f4;
+          color: #333333;
+        }
+        &:active {
+          background: #eaeaea;
+        }
+        &:hover i[data-icon-name="GripperBarVertical"] {
+          display: block;
+        }
+    data-automationid="ColumnsHeaderColumn"
+    data-is-draggable={false}
+    data-item-key="c"
+    draggable={false}
+    role="columnheader"
+    style={
+      Object {
+        "width": 30,
+      }
+    }
+  >
+    <span
+      className=
+
+          {
+            bottom: 0px;
+            display: block;
+            left: 0px;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+          }
+    >
+      <span
+        aria-expanded={false}
+        aria-haspopup={true}
+        aria-labelledby="header2-c-name "
+        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="header2-c"
+        onClick={[Function]}
+        onContextMenu={[Function]}
+      >
+        <span
+          className=
+              ms-DetailsHeader-cellName
+              {
+                flex: 0 1 auto;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              }
+          id="header2-c-name"
+        >
+          c
+        </span>
+        <i
+          aria-hidden={true}
+          className=
+              ms-DetailsHeader-filterChevron
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                color: #a6a6a6;
+                display: inline-block;
+                font-family: "FabricMDL2Icons";
+                font-style: normal;
+                font-weight: normal;
+                padding-left: 4px;
+                speak: none;
+                vertical-align: middle;
+              }
+          data-icon-name="ChevronDown"
+          role="presentation"
+        >
+          
+        </i>
+      </span>
+    </span>
+  </div>
+  <div
+    aria-hidden={true}
+    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 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={2}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDoubleClick={[Function]}
+    role="button"
+  />
+</div>
+`;
+
 exports[`DetailsHeader renders accessible labels 1`] = `
 <div
   className=
@@ -900,7 +1670,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
         display: block;
       }
   data-automationid="DetailsHeader"
-  data-focuszone-id="FocusZone5"
+  data-focuszone-id="FocusZone7"
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}
@@ -914,7 +1684,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
 >
   <div
     aria-colindex={1}
-    aria-labelledby="header4-check"
+    aria-labelledby="header6-check"
     className=
         ms-DetailsHeader-cell
         ms-DetailsHeader-cellIsCheck
@@ -1024,7 +1794,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
         data-automationid="DetailsRowCheck"
         data-is-focusable={true}
         data-selection-toggle={true}
-        id="header4-check"
+        id="header6-check"
         role="checkbox"
       >
         <div
@@ -1205,7 +1975,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
     >
       <span
         aria-haspopup={false}
-        aria-labelledby="header4-a-name "
+        aria-labelledby="header6-a-name "
         className=
             ms-DetailsHeader-cellTitle
             {
@@ -1237,7 +2007,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
               z-index: 1;
             }
         data-is-focusable={true}
-        id="header4-a"
+        id="header6-a"
         onClick={[Function]}
         onContextMenu={[Function]}
       >
@@ -1249,7 +2019,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
                 overflow: hidden;
                 text-overflow: ellipsis;
               }
-          id="header4-a-name"
+          id="header6-a-name"
         >
           a
         </span>
@@ -1393,9 +2163,9 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           }
     >
       <span
-        aria-describedby="header4-b-tooltip"
+        aria-describedby="header6-b-tooltip"
         aria-haspopup={false}
-        aria-labelledby="header4-b-name "
+        aria-labelledby="header6-b-name "
         className=
             ms-DetailsHeader-cellTitle
             {
@@ -1427,7 +2197,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
               z-index: 1;
             }
         data-is-focusable={true}
-        id="header4-b"
+        id="header6-b"
         onClick={[Function]}
         onContextMenu={[Function]}
       >
@@ -1439,7 +2209,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
                 overflow: hidden;
                 text-overflow: ellipsis;
               }
-          id="header4-b-name"
+          id="header6-b-name"
         >
           b
         </span>
@@ -1486,7 +2256,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           position: absolute;
           width: 1px;
         }
-    id="header4-b-tooltip"
+    id="header6-b-tooltip"
   >
     Click to sort.
     Sorted up.
@@ -1628,10 +2398,10 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           }
     >
       <span
-        aria-describedby="header4-c-tooltip"
+        aria-describedby="header6-c-tooltip"
         aria-expanded={false}
         aria-haspopup={true}
-        aria-labelledby="header4-c-name "
+        aria-labelledby="header6-c-name "
         className=
             ms-DetailsHeader-cellTitle
             {
@@ -1663,7 +2433,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
               z-index: 1;
             }
         data-is-focusable={true}
-        id="header4-c"
+        id="header6-c"
         onClick={[Function]}
         onContextMenu={[Function]}
       >
@@ -1675,7 +2445,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
                 overflow: hidden;
                 text-overflow: ellipsis;
               }
-          id="header4-c-name"
+          id="header6-c-name"
         >
           c
         </span>
@@ -1761,7 +2531,7 @@ exports[`DetailsHeader renders accessible labels 1`] = `
           position: absolute;
           width: 1px;
         }
-    id="header4-c-tooltip"
+    id="header6-c-tooltip"
   >
     Click to sort, filter, or group.
     Filtered.