diff --git a/common/changes/office-ui-fabric-react/laxmi-backport_2018-07-10-12-30.json b/common/changes/office-ui-fabric-react/laxmi-backport_2018-07-10-12-30.json
new file mode 100644
index 0000000000000..4acc13895d47c
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/laxmi-backport_2018-07-10-12-30.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Added column reorder with DragAndDrop support in Details List. As part of this feature, a new component DetailsColumn has been added inside the header, for each  column.  An optional new prop(ColumnReorderOptions) has been added to DetailsList to handle the column reorder. Have added column level drag subscriptions to be able to drag the columns, and added one header level subscription, to handle the drops. All the drag drop events are being handled at header level",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "laxmika@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
new file mode 100644
index 0000000000000..9186d90a3eeac
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.tsx
@@ -0,0 +1,258 @@
+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 { IColumn, ColumnActionsMode } from './DetailsList.types';
+
+import { ITooltipHostProps } from '../../Tooltip';
+import { IDragDropHelper, IDragDropOptions } from './../../utilities/dragdrop/interfaces';
+
+const INNER_PADDING = 16; // Account for padding around the cell.
+const ISPADDED_WIDTH = 24;
+const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
+
+export interface IDetailsColumnProps extends React.Props<DetailsColumn> {
+  componentRef?: () => void;
+  column: IColumn;
+  columnIndex: number;
+  parentId?: string;
+  onRenderColumnHeaderTooltip?: IRenderFunction<ITooltipHostProps>;
+  onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
+  onColumnContextMenu?: (column: IColumn, ev: React.MouseEvent<HTMLElement>) => void;
+  dragDropHelper?: IDragDropHelper | null;
+  isDraggable?: boolean;
+  setDraggedItemIndex?: (itemIndex: number) => void;
+  isDropped?: boolean;
+}
+
+export class DetailsColumn extends BaseComponent<IDetailsColumnProps> {
+  private _root: any;
+  private _dragDropSubscription: IDisposable;
+
+  constructor(props: IDetailsColumnProps) {
+    super(props);
+
+    this._root = createRef();
+    this._onDragStart = this._onDragStart.bind(this);
+    this._onDragEnd = this._onDragEnd.bind(this);
+    this._onRootMouseDown = this._onRootMouseDown.bind(this);
+  }
+
+  public render() {
+    const { column, columnIndex, parentId, isDraggable } = this.props;
+    const { onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip } = this.props;
+
+    return [
+      (
+        <div
+          key={ column.key }
+          ref={ this._root }
+          role={ 'columnheader' }
+          aria-sort={ column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none' }
+          aria-disabled={ column.columnActionsMode === ColumnActionsMode.disabled }
+          aria-colindex={ columnIndex }
+          className={ css(
+            'ms-DetailsHeader-cell',
+            styles.cell,
+            column.headerClassName,
+            column.columnActionsMode !== ColumnActionsMode.disabled && 'is-actionable ' + styles.cellIsActionable,
+            !column.name && 'is-empty ' + styles.cellIsEmpty,
+            (column.isSorted || column.isGrouped || column.isFiltered) && 'is-icon-visible',
+            column.isPadded && styles.cellWrapperPadded
+          ) }
+          data-is-draggable={ isDraggable }
+          draggable={ isDraggable }
+          style={ { width: column.calculatedWidth! + INNER_PADDING + (column.isPadded ? ISPADDED_WIDTH : 0) } }
+          data-automationid={ 'ColumnsHeaderColumn' }
+          data-item-key={ column.key }
+        >
+          { isDraggable && <Icon iconName={ 'GripperBarVertical' } className={ css(styles.gripperBarVerticalStyle) } /> }
+          { onRenderColumnHeaderTooltip(
+            {
+              hostClassName: css(styles.cellTooltip),
+              id: `${parentId}-${column.key}-tooltip`,
+              setAriaDescribedBy: false,
+              content: column.columnActionsMode !== ColumnActionsMode.disabled ? column.ariaLabel : '',
+              children: (
+                <span
+                  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) }
+                  data-is-focusable={ column.columnActionsMode !== ColumnActionsMode.disabled }
+                  role={ column.columnActionsMode !== ColumnActionsMode.disabled ? 'button' : undefined }
+                  aria-describedby={
+                    this.props.onRenderColumnHeaderTooltip ? `${parentId}-${column.key}-tooltip` : undefined
+                  }
+                  onContextMenu={ this._onColumnContextMenu.bind(this, column) }
+                  onClick={ this._onColumnClick.bind(this, column) }
+                  aria-haspopup={ column.columnActionsMode === ColumnActionsMode.hasDropdown }
+                >
+                  <span
+                    id={ `${parentId}-${column.key}-name` }
+                    className={ css('ms-DetailsHeader-cellName', styles.cellName, {
+                      [styles.iconOnlyHeader]: column.isIconOnly
+                    }) }
+                  >
+                    { (column.iconName || column.iconClassName) && (
+                      <Icon className={ css(styles.nearIcon, column.iconClassName) } iconName={ column.iconName } />
+                    ) }
+
+                    { !column.isIconOnly ? column.name : undefined }
+                  </span>
+
+                  { column.isFiltered && <Icon className={ styles.nearIcon } iconName={ 'Filter' } /> }
+
+                  { column.isSorted && (
+                    <Icon
+                      className={ css(styles.nearIcon, styles.sortIcon) }
+                      iconName={ column.isSortedDescending ? 'SortDown' : 'SortUp' }
+                    />
+                  ) }
+
+                  { column.isGrouped && <Icon className={ styles.nearIcon } iconName={ 'GroupedDescending' } /> }
+
+                  { column.columnActionsMode === ColumnActionsMode.hasDropdown &&
+                    !column.isIconOnly && (
+                      <Icon
+                        className={ css('ms-DetailsHeader-filterChevron', styles.filterChevron) }
+                        iconName={ 'ChevronDown' }
+                      />
+                    ) }
+                </span>
+              )
+            },
+            this._onRenderColumnHeaderTooltip
+          ) }
+        </div>
+      ),
+      (
+        column.ariaLabel && !this.props.onRenderColumnHeaderTooltip ? (
+          <label key={ `${column.key}_label` } id={ `${parentId}-${column.key}-tooltip` } className={ styles.accessibleLabel }>
+            { column.ariaLabel }
+          </label>
+        ) : null
+      )
+    ];
+  }
+
+  public componentDidMount(): void {
+    if (this._dragDropSubscription) {
+      this._dragDropSubscription.dispose();
+      delete this._dragDropSubscription;
+    }
+
+    if (this.props.dragDropHelper && this.props.isDraggable!) {
+      this._dragDropSubscription = this.props.dragDropHelper.subscribe(
+        this._root.current as HTMLElement,
+        this._events,
+        this._getColumnDragDropOptions()
+      );
+
+      // 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);
+    }
+    if (this.props.isDropped) {
+      if (this._root!.current!) {
+        this._root!.current!.classList!.add(styles.borderAfterDropping);
+      }
+      setTimeout(() => {
+        if (this._root!.current!) {
+          this._root!.current!.classList!.remove(styles.borderAfterDropping);
+        }
+      }, 1500);
+    }
+  }
+
+  public componentWillUnmount(): void {
+    if (this._dragDropSubscription) {
+      this._dragDropSubscription.dispose();
+      delete this._dragDropSubscription;
+    }
+  }
+
+  public componentDidUpdate(): void {
+    if (!this._dragDropSubscription && this.props.dragDropHelper && this.props.isDraggable!) {
+      this._dragDropSubscription = this.props.dragDropHelper.subscribe(
+        this._root.value as HTMLElement,
+        this._events,
+        this._getColumnDragDropOptions()
+      );
+
+      // 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);
+    }
+    if (this._dragDropSubscription && !this.props.isDraggable!) {
+      this._dragDropSubscription.dispose();
+      this._events.off(this._root.current, 'mousedown');
+      delete this._dragDropSubscription;
+    }
+  }
+
+  private _onRenderColumnHeaderTooltip = (
+    tooltipHostProps: ITooltipHostProps,
+    defaultRender?: IRenderFunction<ITooltipHostProps>
+  ): JSX.Element => {
+    return <span className={ tooltipHostProps.hostClassName }>{ tooltipHostProps.children }</span>;
+  }
+
+  private _onColumnClick(column: IColumn, ev: React.MouseEvent<HTMLElement>): void {
+    const { onColumnClick } = this.props;
+    if (column.onColumnClick) {
+      column.onColumnClick(ev, column);
+    }
+    if (onColumnClick) {
+      onColumnClick(ev, column);
+    }
+  }
+
+  private _getColumnDragDropOptions(): IDragDropOptions {
+    const { columnIndex } = this.props;
+    const options = {
+      selectionIndex: columnIndex,
+      context: { data: columnIndex, index: columnIndex },
+      canDrag: () => this.props.isDraggable!,
+      canDrop: () => false,
+      onDragStart: this._onDragStart,
+      updateDropState: () => undefined,
+      onDrop: () => undefined,
+      onDragEnd: this._onDragEnd
+    };
+    return options;
+  }
+
+  private _onDragStart(item?: any, itemIndex?: number, selectedItems?: any[], event?: MouseEvent): void {
+    if (itemIndex && this.props.setDraggedItemIndex) {
+      this.props.setDraggedItemIndex(itemIndex);
+      this._root.current.classList.add(styles.borderWhileDragging);
+    }
+  }
+
+  private _onDragEnd(item?: any, event?: MouseEvent): void {
+    if (this.props.setDraggedItemIndex) {
+      this.props.setDraggedItemIndex(-1);
+      this._root.current.classList.remove(styles.borderWhileDragging);
+    }
+  }
+
+  private _onColumnContextMenu(column: IColumn, ev: React.MouseEvent<HTMLElement>): void {
+    const { onColumnContextMenu } = this.props;
+    if (column.onColumnContextMenu) {
+      column.onColumnContextMenu(column, ev);
+      ev.preventDefault();
+    }
+    if (onColumnContextMenu) {
+      onColumnContextMenu(column, ev);
+      ev.preventDefault();
+    }
+  }
+
+  private _onRootMouseDown(ev: MouseEvent): void {
+    const { isDraggable } = this.props;
+    // Ignore anything except the primary button.
+    if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {
+      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
index 9d2e4137ded60..3cc616353371c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
@@ -75,6 +75,18 @@ $isPaddedMargin: 24px;
   &.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 {
@@ -123,6 +135,7 @@ $isPaddedMargin: 24px;
   @include margin-left(-16px);
 }
 
+
 .collapseButton {
   text-align: center;
   transform: rotate(-180deg);
@@ -169,7 +182,7 @@ $isPaddedMargin: 24px;
   overflow: hidden;
   max-width: 100%;
   @include focus-border($position: auto);
-  padding: 0 8px;
+  padding: 0 8px 0 12px;
 }
 
 .cellName {
@@ -213,3 +226,66 @@ $isPaddedMargin: 24px;
 .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.test.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
index 57ccecef075c9..71b31f82d1c94 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
@@ -12,6 +12,10 @@ const _columns: IColumn[] = [
   { key: 'a', name: 'a', fieldName: 'a', minWidth: 200, maxWidth: 400, calculatedWidth: 200, isResizable: true },
   { key: 'b', name: 'b', fieldName: 'a', minWidth: 200, maxWidth: 400, calculatedWidth: 200, isResizable: true }
 ];
+const _columnReorderOptions = {
+  frozenColumnCountFromStart: 1,
+  handleColumnReorder: this._dummyFunction
+};
 
 _selection.setItems(_items);
 
@@ -20,10 +24,10 @@ describe('DetailsHeader', () => {
   it('can render', () => {
     const component = renderer.create(
       <DetailsHeader
-        selection={ _selection }
-        selectionMode={ SelectionMode.multiple }
-        layoutMode={ DetailsListLayoutMode.fixedColumns }
-        columns={ _columns }
+        selection={_selection}
+        selectionMode={SelectionMode.multiple}
+        layoutMode={DetailsListLayoutMode.fixedColumns}
+        columns={_columns}
       />
     );
     expect(component.toJSON()).toMatchSnapshot();
@@ -41,12 +45,13 @@ describe('DetailsHeader', () => {
 
     const wrapper = mount(
       <DetailsHeader
-        componentRef={ headerRef }
-        selection={ _selection }
-        selectionMode={ SelectionMode.multiple }
-        layoutMode={ DetailsListLayoutMode.fixedColumns }
-        columns={ _columns }
-        onColumnResized={ onColumnResized }
+        componentRef={headerRef}
+        selection={_selection}
+        selectionMode={SelectionMode.multiple}
+        layoutMode={DetailsListLayoutMode.fixedColumns}
+        columns={_columns}
+        onColumnResized={onColumnResized}
+        columnReorderOptions={_columnReorderOptions}
       />
     );
 
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 25a76aa132e93..7b948f4d9641f 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import { findDOMNode } from 'react-dom';
-import {
-  BaseComponent,
-  css,
-  getRTL,
-  getId,
-  KeyCodes,
-  IRenderFunction,
-  createRef
-} from '../../Utilities';
-import { IColumn, DetailsListLayoutMode, ColumnActionsMode } from './DetailsList.types';
+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';
@@ -20,13 +12,15 @@ import { ITooltipHostProps } from '../../Tooltip';
 import * as checkStylesModule from './DetailsRowCheck.scss';
 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';
+
 const styles: any = stylesImport;
 const checkStyles: any = checkStylesModule;
 
 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
-const INNER_PADDING = 16;
-const ISPADDED_WIDTH = 24;
 
 export interface IDetailsHeader {
   focus: () => boolean;
@@ -54,6 +48,8 @@ export interface IDetailsHeaderProps extends React.Props<DetailsHeader> {
   ariaLabelForSelectAllCheckbox?: string;
   ariaLabelForSelectionColumn?: string;
   selectAllVisibility?: SelectAllVisibility;
+  columnReorderOptions?: IColumnReorderOptions | null;
+  minimumPixelsForDrag?: number;
 }
 
 export enum SelectAllVisibility {
@@ -76,16 +72,33 @@ export interface IColumnResizeDetails {
   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 _root = createRef<IFocusZone>();
-
+  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);
 
@@ -97,20 +110,70 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
 
     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 } = this.props;
-    const focusZone = this._root.current;
-    const rootElement = findDOMNode(focusZone as any);
+    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(rootElement, 'mousedown', this._onRootMouseDown);
+    this._events.on(this._rootElement!, 'mousedown', this._onRootMouseDown);
 
-    this._events.on(rootElement, 'keydown', this._onRootKeyDown);
+    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 {
@@ -121,15 +184,46 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
+  public componentWillUnmount(): void {
+    if (this._subscriptionObject) {
+      this._subscriptionObject.dispose();
+      delete this._subscriptionObject;
+    }
+  }
+
   public render(): JSX.Element {
-    const { columns, ariaLabel, ariaLabelForSelectAllCheckbox, selectAllVisibility, ariaLabelForSelectionColumn } = this.props;
+    const {
+      columns,
+      ariaLabel,
+      ariaLabelForSelectAllCheckbox,
+      selectAllVisibility,
+      ariaLabelForSelectionColumn,
+      columnReorderOptions,
+      onColumnClick,
+      onColumnContextMenu
+    } = this.props;
     const { isAllSelected, columnResizeDetails, isSizing, groupNestingDepth, isAllCollapsed } = this.state;
-
     const showCheckbox = selectAllVisibility !== SelectAllVisibility.none;
 
-    const {
-      onRenderColumnHeaderTooltip = this._onRenderColumnHeaderTooltip
-    } = this.props;
+    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
@@ -138,17 +232,18 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
         className={ css(
           'ms-DetailsHeader',
           styles.root,
-          isAllSelected && ('is-allSelected ' + styles.rootIsAllSelected),
-          (selectAllVisibility === SelectAllVisibility.hidden) && ('is-selectAllHidden ' + styles.rootIsSelectAllHidden),
-          (!!columnResizeDetails && isSizing) && 'is-resizingColumn'
+          isAllSelected && 'is-allSelected ' + styles.rootIsAllSelected,
+          selectAllVisibility === SelectAllVisibility.hidden && 'is-selectAllHidden ' + styles.rootIsSelectAllHidden,
+          !!columnResizeDetails && isSizing && 'is-resizingColumn'
         ) }
-        componentRef={ this._root }
+        componentRef={ this._rootComponent }
+        ref={ this._onRootRef }
         onMouseMove={ this._onRootMouseMove }
         data-automationid='DetailsHeader'
         direction={ FocusZoneDirection.horizontal }
       >
-        { showCheckbox ? (
-          [
+        { showCheckbox
+          ? [
             <div
               key='__checkbox'
               className={ css(
@@ -164,8 +259,8 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
               aria-colindex={ 0 }
               role='columnheader'
             >
-              {
-                onRenderColumnHeaderTooltip({
+              { onRenderColumnHeaderTooltip(
+                {
                   hostClassName: css(styles.checkTooltip),
                   id: `${this._id}-checkTooltip`,
                   setAriaDescribedBy: false,
@@ -182,151 +277,276 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                       canSelect={ true }
                     />
                   )
-                }, this._onRenderColumnHeaderTooltip)
-              }
+                },
+                this._onRenderColumnHeaderTooltip
+              ) }
             </div>,
             ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? (
-              <label
-                key='__checkboxLabel'
-                id={ `${this._id}-checkTooltip` }
-                className={ styles.accessibleLabel }
-              >
+              <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)
-        }
+          : 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({ count: groupNestingDepth! - 1 }) }
-        {
-          columns.map((column: IColumn, columnIndex: number) => {
-            return (
-              [
-                <div
-                  key={ column.key }
-                  role='columnheader'
-                  aria-sort={ column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none' }
-                  aria-disabled={ column.columnActionsMode === ColumnActionsMode.disabled }
-                  aria-colindex={ (showCheckbox ? 1 : 0) + columnIndex }
-                  className={ css(
-                    'ms-DetailsHeader-cell',
-                    styles.cell,
-                    column.headerClassName,
-                    (column.columnActionsMode !== ColumnActionsMode.disabled) && ('is-actionable ' + styles.cellIsActionable),
-                    !column.name && ('is-empty ' + styles.cellIsEmpty),
-                    (column.isSorted || column.isGrouped || column.isFiltered) && 'is-icon-visible',
-                    column.isPadded && styles.cellWrapperPadded
-                  ) }
-                  style={ { width: column.calculatedWidth! + INNER_PADDING + (column.isPadded ? ISPADDED_WIDTH : 0) } }
-                  data-automationid='ColumnsHeaderColumn'
-                  data-item-key={ column.key }
-                >
-                  {
-                    onRenderColumnHeaderTooltip({
-                      hostClassName: css(styles.cellTooltip),
-                      id: `${this._id}-${column.key}-tooltip`,
-                      setAriaDescribedBy: false,
-                      content: column.columnActionsMode !== ColumnActionsMode.disabled ? column.ariaLabel : '',
-                      children: (
-                        <span
-                          id={ `${this._id}-${column.key}` }
-                          aria-label={ column.isIconOnly ? column.name : undefined }
-                          aria-labelledby={ column.isIconOnly ? undefined : `${this._id}-${column.key}-name ` }
-                          className={ css('ms-DetailsHeader-cellTitle', styles.cellTitle) }
-                          data-is-focusable={ column.columnActionsMode !== ColumnActionsMode.disabled }
-                          role={ column.columnActionsMode !== ColumnActionsMode.disabled ? 'button' : undefined }
-                          aria-describedby={ this.props.onRenderColumnHeaderTooltip ? `${this._id}-${column.key}-tooltip` : undefined }
-                          onContextMenu={ this._onColumnContextMenu.bind(this, column) }
-                          onClick={ this._onColumnClick.bind(this, column) }
-                          aria-haspopup={ column.columnActionsMode === ColumnActionsMode.hasDropdown }
-                        >
-                          <span
-                            id={ `${this._id}-${column.key}-name` }
-                            className={ css('ms-DetailsHeader-cellName',
-                              styles.cellName, {
-                                [styles.iconOnlyHeader]: column.isIconOnly
-                              }) }
-                          >
-                            { (column.iconName || column.iconClassName) && (
-                              <Icon className={ css(styles.nearIcon, column.iconClassName) } iconName={ column.iconName } />
-                            ) }
-
-                            { !column.isIconOnly ? column.name : undefined }
-                          </span>
-
-                          { column.isFiltered && (
-                            <Icon className={ styles.nearIcon } iconName='Filter' />
-                          ) }
-
-                          { column.isSorted && (
-                            <Icon className={ css(styles.nearIcon, styles.sortIcon) } iconName={ column.isSortedDescending ? 'SortDown' : 'SortUp' } />
-                          ) }
-
-                          { column.isGrouped && (
-                            <Icon className={ styles.nearIcon } iconName='GroupedDescending' />
-                          ) }
-
-                          { column.columnActionsMode === ColumnActionsMode.hasDropdown && !column.isIconOnly && (
-                            <Icon
-                              className={ css('ms-DetailsHeader-filterChevron', styles.filterChevron) }
-                              iconName='ChevronDown'
-                            />
-                          ) }
-                        </span>
-                      )
-                    }, this._onRenderColumnHeaderTooltip)
-                  }
-                </div>,
-                column.ariaLabel && !this.props.onRenderColumnHeaderTooltip ? (
-                  <label
-                    key={ `${column.key}_label` }
-                    id={ `${this._id}-${column.key}-tooltip` }
-                    className={ styles.accessibleLabel }
-                  >
-                    { column.ariaLabel }
-                  </label>
-                ) : null,
-                (column.isResizable) && this._renderColumnSizer(columnIndex)
-              ]
-            );
-          })
-        }
-        {
-          isSizing && (
-            <Layer>
-              <div
-                className={ css(isSizing && styles.sizingOverlay) }
-                onMouseMove={ this._onSizerMouseMove }
-                onMouseUp={ this._onSizerMouseUp }
-              />
-            </Layer>
-          )
-        }
+        { 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 ? 1 : 0) + 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._root.current && this._root.current.focus());
+    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 - 1 : itemIndex - 0;
+      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 {
@@ -348,20 +568,41 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
           styles.cellSizer,
           columnIndex < columns.length - 1 ? styles.cellSizerStart : styles.cellSizerEnd,
           {
-            ['is-resizing ' + styles.cellIsResizing]: columnResizeDetails && columnResizeDetails.columnIndex === columnIndex
-          }) }
+            ['is-resizing ' + styles.cellIsResizing]:
+              columnResizeDetails && columnResizeDetails.columnIndex === columnIndex
+          }
+        ) }
         onDoubleClick={ this._onSizerDoubleClick.bind(this, columnIndex) }
       />
     );
   }
 
-  private _onRenderColumnHeaderTooltip = (tooltipHostProps: ITooltipHostProps, defaultRender?: IRenderFunction<ITooltipHostProps>): JSX.Element => {
+  private _renderDropHint(dropHintIndex: number): JSX.Element {
     return (
-      <span className={ tooltipHostProps.hostClassName }>
-        { tooltipHostProps.children }
-      </span >
+      <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
@@ -417,6 +658,15 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
+  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;
@@ -520,7 +770,6 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
         columnResizeDetails!.columnIndex
       );
     }
-
   }
 
   private _onSizerBlur = (ev: React.FocusEvent<HTMLElement>): void => {
@@ -566,34 +815,6 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     }
   }
 
-  private _onColumnClick(column: IColumn, ev: React.MouseEvent<HTMLElement>): void {
-    const { onColumnClick } = this.props;
-
-    if (column.onColumnClick) {
-      column.onColumnClick(ev, column);
-    }
-
-    if (onColumnClick) {
-      onColumnClick(ev, column);
-    }
-  }
-
-  private _onColumnContextMenu(column: IColumn, ev: React.MouseEvent<HTMLElement>): void {
-    const { onColumnContextMenu } = this.props;
-
-    if (column.onColumnContextMenu) {
-      column.onColumnContextMenu(column, ev);
-
-      ev.preventDefault();
-    }
-
-    if (onColumnContextMenu) {
-      onColumnContextMenu(column, ev);
-
-      ev.preventDefault();
-    }
-  }
-
   private _onToggleCollapseAll(): void {
     const { onToggleCollapseAll } = this.props;
     const newCollapsed = !this.state.isAllCollapsed;
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 dd157edca88fd..1252e60c08398 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -128,10 +128,12 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
 
     this._selection = props.selection || new Selection({ onSelectionChanged: undefined, getKey: props.getKey });
     this._selection.setItems(props.items as IObjectWithKey[], false);
-    this._dragDropHelper = props.dragDropEvents ? new DragDropHelper({
-      selection: this._selection,
-      minimumPixelsForDrag: props.minimumPixelsForDrag
-    }) : null;
+    this._dragDropHelper = props.dragDropEvents
+      ? new DragDropHelper({
+        selection: this._selection,
+        minimumPixelsForDrag: props.minimumPixelsForDrag
+      })
+      : null;
     this._initialFocusedIndex = props.initialFocusedIndex;
   }
 
@@ -286,7 +288,9 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       listProps,
       usePageCache,
       onShouldVirtualize,
-      enableShimmer
+      enableShimmer,
+      columnReorderOptions,
+      minimumPixelsForDrag
     } = this.props;
     const {
       adjustedColumns,
@@ -338,9 +342,10 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
           'ms-DetailsList',
           styles.root,
           className,
-          (layoutMode === DetailsListLayoutMode.fixedColumns) && 'is-fixed',
-          (constrainMode === ConstrainMode.horizontalConstrained) && ('is-horizontalConstrained ' + styles.rootIsHorizontalConstrained),
-          !!compact && ('ms-DetailsList--Compact ' + styles.rootCompact)
+          layoutMode === DetailsListLayoutMode.fixedColumns && 'is-fixed',
+          constrainMode === ConstrainMode.horizontalConstrained &&
+          'is-horizontalConstrained ' + styles.rootIsHorizontalConstrained,
+          !!compact && 'ms-DetailsList--Compact ' + styles.rootCompact
         ) }
         data-automationid='DetailsList'
         data-is-scrollable='false'
@@ -355,26 +360,32 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
           aria-readonly='true'
         >
           <div onKeyDown={ this._onHeaderKeyDown } role='presentation'>
-            { isHeaderVisible && onRenderDetailsHeader({
-              componentRef: this._header,
-              selectionMode: selectionMode!,
-              layoutMode: layoutMode!,
-              selection: selection,
-              columns: adjustedColumns as IColumn[],
-              onColumnClick: onColumnHeaderClick,
-              onColumnContextMenu: onColumnHeaderContextMenu,
-              onColumnResized: this._onColumnResized,
-              onColumnIsSizingChanged: this._onColumnIsSizingChanged,
-              onColumnAutoResized: this._onColumnAutoResized,
-              groupNestingDepth: groupNestingDepth,
-              isAllCollapsed: isCollapsed,
-              onToggleCollapseAll: this._onToggleCollapse,
-              ariaLabel: ariaLabelForListHeader,
-              ariaLabelForSelectAllCheckbox: ariaLabelForSelectAllCheckbox,
-              ariaLabelForSelectionColumn: ariaLabelForSelectionColumn,
-              selectAllVisibility: selectAllVisibility,
-              collapseAllVisibility: groupProps && groupProps.collapseAllVisibility
-            }, this._onRenderDetailsHeader) }
+            { isHeaderVisible &&
+              onRenderDetailsHeader(
+                {
+                  componentRef: this._header,
+                  selectionMode: selectionMode!,
+                  layoutMode: layoutMode!,
+                  selection: selection,
+                  columns: adjustedColumns as IColumn[],
+                  onColumnClick: onColumnHeaderClick,
+                  onColumnContextMenu: onColumnHeaderContextMenu,
+                  onColumnResized: this._onColumnResized,
+                  onColumnIsSizingChanged: this._onColumnIsSizingChanged,
+                  onColumnAutoResized: this._onColumnAutoResized,
+                  groupNestingDepth: groupNestingDepth,
+                  isAllCollapsed: isCollapsed,
+                  onToggleCollapseAll: this._onToggleCollapse,
+                  ariaLabel: ariaLabelForListHeader,
+                  ariaLabelForSelectAllCheckbox: ariaLabelForSelectAllCheckbox,
+                  ariaLabelForSelectionColumn: ariaLabelForSelectionColumn,
+                  selectAllVisibility: selectAllVisibility,
+                  collapseAllVisibility: groupProps && groupProps.collapseAllVisibility,
+                  columnReorderOptions: columnReorderOptions,
+                  minimumPixelsForDrag: minimumPixelsForDrag
+                },
+                this._onRenderDetailsHeader
+              ) }
           </div>
           <div onKeyDown={ this._onContentKeyDown } role='presentation'>
             <FocusZone
@@ -422,8 +433,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
                       onShouldVirtualize={ onShouldVirtualize }
                       { ...additionalListProps }
                     />
-                  )
-                }
+                  ) }
               </SelectionZone>
             </FocusZone>
           </div>
@@ -799,10 +809,10 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
    * column to the max cell width.
    *
    * @private
-   * @param {IColumn} column (double clicked column definition)
-   * @param {number} columnIndex (double clicked column index)
-   * @todo min width 100 should be changed to const value and should be consistent with the value used on _onSizerMove method in DetailsHeader
-   */
+* @param { IColumn } column (double clicked column definition)
+* @param { number } columnIndex (double clicked column index)
+       * @todo min width 100 should be changed to const value and should be consistent with the value used on _onSizerMove method in DetailsHeader
+       */
   private _onColumnAutoResized(column: IColumn, columnIndex: number): void {
     let max = 0;
     let count = 0;
@@ -827,9 +837,9 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
    * and call onActiveItemChanged callback if specified.
    *
    * @private
-   * @param {el} row element that became active in Focus Zone
-   * @param {ev} focus event from Focus Zone
-   */
+* @param { el } row element that became active in Focus Zone
+* @param { ev } focus event from Focus Zone
+                                             */
   private _onActiveRowChanged(el?: HTMLElement, ev?: React.FocusEvent<HTMLElement>): void {
     const { items, onActiveItemChanged } = this.props;
 
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
index b8c9d410efc44..0a7531930b017 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
@@ -157,7 +157,7 @@ export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewpo
    */
   onRenderItemColumn?: (item?: any, index?: number, column?: IColumn) => any;
 
-  /** Map of callback functions related to drag and drop functionality. */
+  /** Map of callback functions related to row drag and drop functionality. */
   dragDropEvents?: IDragDropEvents;
 
   /** Callback for what to render when the item is missing. */
@@ -245,6 +245,12 @@ export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewpo
    * Whether or not the selection zone should enter modal state on touch.
    */
   enterModalSelectionOnTouch?: boolean;
+
+  /**
+   * Options for column re-order using drag and drop
+   *
+   */
+  columnReorderOptions?: IColumnReorderOptions;
 }
 
 export interface IColumn {
@@ -423,6 +429,27 @@ export enum ConstrainMode {
   horizontalConstrained = 1
 }
 
+export interface IColumnReorderOptions {
+  /**
+   * Specifies the number fixed columns from left(0th index)
+   * @default 0
+   */
+  frozenColumnCountFromStart?: number;
+
+  /**
+   * Specifies the number fixed columns from right
+   * @default 0
+   */
+  frozenColumnCountFromEnd?: number;
+
+  /**
+   * Callback to handle the column reorder
+   * draggedIndex is the source column index, that need to be placed in targetIndex
+   */
+  handleColumnReorder: (draggedIndex: number, targetIndex: number) => void;
+
+}
+
 export enum DetailsListLayoutMode {
   /**
    * Lets the user resize columns and makes not attempt to fit them.
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
index 4b2dcf541f7d2..9ac3af0666d7d 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.scss
@@ -51,7 +51,7 @@ $detailsList-item-focus-meta-text-color: $ms-color-neutralDark;
 
   .cell {
     min-height: $compactRowHeight;
-    padding: $compactRowVerticalPadding $rowHorizontalPadding;
+    padding: $compactRowVerticalPadding $rowHorizontalPadding $compactRowVerticalPadding 12px;
 
     // Masking the running shimmer background with borders
     &.shimmer {
@@ -214,7 +214,7 @@ $detailsList-item-focus-meta-text-color: $ms-color-neutralDark;
   display: inline-block;
   position: relative;
   box-sizing: border-box;
-  padding: $rowVerticalPadding $rowHorizontalPadding;
+  padding: $rowVerticalPadding $rowHorizontalPadding $rowVerticalPadding 12px;
   min-height: $rowHeight;
   vertical-align: top;
   white-space: nowrap;
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 2c6c2b5192e38..720bfeb835bce 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
@@ -135,7 +135,9 @@ exports[`DetailsHeader can render 1`] = `
     aria-sort="none"
     className="ms-DetailsHeader-cell is-actionable undefined"
     data-automationid="ColumnsHeaderColumn"
+    data-is-draggable={false}
     data-item-key="a"
+    draggable={false}
     role="columnheader"
     style={
       Object {
@@ -183,7 +185,9 @@ exports[`DetailsHeader can render 1`] = `
     aria-sort="none"
     className="ms-DetailsHeader-cell is-actionable undefined"
     data-automationid="ColumnsHeaderColumn"
+    data-is-draggable={false}
     data-item-key="b"
+    draggable={false}
     role="columnheader"
     style={
       Object {
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 5359f39bb9550..b8efe84f99e23 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
@@ -161,7 +161,9 @@ exports[`DetailsList renders List correctly 1`] = `
             aria-sort="none"
             className="ms-DetailsHeader-cell is-actionable undefined"
             data-automationid="ColumnsHeaderColumn"
+            data-is-draggable={false}
             data-item-key="key"
+            draggable={false}
             role="columnheader"
             style={
               Object {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx
index dfc6dc79749a5..bbf729513a6b9 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx
@@ -1,57 +1,143 @@
 import * as React from 'react';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { DetailsList, Selection } from 'office-ui-fabric-react/lib/DetailsList';
-import { IColumn } from 'office-ui-fabric-react/lib/DetailsList';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
-import {
-  IDragDropEvents,
-  IDragDropContext
-} from 'office-ui-fabric-react/lib/utilities/dragdrop/interfaces';
-import { createListItems } from '@uifabric/example-app-base';
+import { IColumn, buildColumns } from 'office-ui-fabric-react/lib/DetailsList';
+import { IDragDropEvents, IDragDropContext } from 'office-ui-fabric-react/lib/utilities/dragdrop/interfaces';
 import './DetailsList.DragDrop.Example.scss';
+import { IColumnReorderOptions } from 'office-ui-fabric-react/lib/components/DetailsList';
+import { createListItems } from '@uifabric/example-app-base';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 
 let _draggedItem: any = null;
 let _draggedIndex = -1;
-
-export class DetailsListDragDropExample extends React.Component<{}, {
-  items: {}[];
-  selectionDetails?: string;
-}> {
+let _items: any[];
+let _columns: IColumn[];
+export class DetailsListDragDropExample extends React.Component<
+  {},
+  {
+    items: {}[];
+    selectionDetails?: string;
+    columns: IColumn[];
+    isColumnReorderEnabled: boolean;
+    frozenColumnCountFromStart: string;
+    frozenColumnCountFromEnd: string;
+  }
+  > {
   private _selection: Selection;
 
   constructor(props: {}) {
     super(props);
 
     this._onRenderItemColumn = this._onRenderItemColumn.bind(this);
+    this._handleColumnReorder = this._handleColumnReorder.bind(this);
+    this._getColumnReorderOptions = this._getColumnReorderOptions.bind(this);
+    this._onChangeColumnReorderEnabled = this._onChangeColumnReorderEnabled.bind(this);
+    this._onChangeStartCountText = this._onChangeStartCountText.bind(this);
+    this._onChangeEndCountText = this._onChangeEndCountText.bind(this);
 
     this._selection = new Selection();
 
+    _items = _items || createListItems(10, 0);
+    _columns = buildColumns(_items, true);
+
     this.state = {
-      items: createListItems(10)
+      items: createListItems(10),
+      columns: _columns,
+      isColumnReorderEnabled: false,
+      frozenColumnCountFromStart: '1',
+      frozenColumnCountFromEnd: '0'
     };
   }
 
   public render(): JSX.Element {
-    const { items, selectionDetails } = this.state;
+    const {
+      items,
+      selectionDetails,
+      columns,
+      isColumnReorderEnabled,
+      frozenColumnCountFromStart,
+      frozenColumnCountFromEnd
+    } = this.state;
 
     return (
-      <div className='detailsListDragDropExample'>
+      <div className={ 'detailsListDragDropExample' }>
+        <Toggle
+          label={ 'Enable Column Reorder' }
+          checked={ isColumnReorderEnabled }
+          onChanged={ this._onChangeColumnReorderEnabled }
+          onText={ 'Enabled' }
+          offText={ 'Disabled' }
+        />
+        <TextField
+          label={ 'Number of Left frozen columns:' }
+          onGetErrorMessage={ this._validateNumber }
+          value={ frozenColumnCountFromStart }
+          onChanged={ this._onChangeStartCountText }
+        />
+        <TextField
+          label={ 'Number of Right frozen columns:' }
+          onGetErrorMessage={ this._validateNumber }
+          value={ frozenColumnCountFromEnd }
+          onChanged={ this._onChangeEndCountText }
+        />
         <div>{ selectionDetails }</div>
         <MarqueeSelection selection={ this._selection }>
           <DetailsList
-            setKey='items'
+            setKey={ 'items' }
             items={ items }
+            columns={ columns }
             selection={ this._selection }
             selectionPreservedOnEmptyClick={ true }
             onItemInvoked={ this._onItemInvoked }
             onRenderItemColumn={ this._onRenderItemColumn }
             dragDropEvents={ this._getDragDropEvents() }
+            columnReorderOptions={ this.state.isColumnReorderEnabled ? this._getColumnReorderOptions() : undefined }
           />
         </MarqueeSelection>
       </div>
     );
   }
 
+  private _handleColumnReorder(draggedIndex: number, targetIndex: number): void {
+    const draggedItems = this.state.columns[draggedIndex];
+    const newColumns: IColumn[] = [...this.state.columns];
+
+    // insert before the dropped item
+    newColumns.splice(draggedIndex, 1);
+    newColumns.splice(targetIndex, 0, draggedItems);
+    this.setState({ columns: newColumns });
+  }
+
+  private _getColumnReorderOptions(): IColumnReorderOptions {
+    return {
+      frozenColumnCountFromStart: !isNaN(Number(this.state.frozenColumnCountFromStart))
+        ? parseInt(this.state.frozenColumnCountFromStart, 10)
+        : undefined,
+      frozenColumnCountFromEnd: !isNaN(Number(this.state.frozenColumnCountFromEnd))
+        ? parseInt(this.state.frozenColumnCountFromEnd, 10)
+        : undefined,
+      handleColumnReorder: this._handleColumnReorder
+    };
+  }
+
+  private _validateNumber(value: string): string {
+    return isNaN(Number(value)) ? `The value should be a number, actual is ${value}.` : '';
+  }
+
+  private _onChangeStartCountText(text: any): void {
+    this.setState({ frozenColumnCountFromStart: text });
+  }
+
+  private _onChangeEndCountText(text: any): void {
+    this.setState({ frozenColumnCountFromEnd: text });
+  }
+
+  private _onChangeColumnReorderEnabled(checked: boolean): void {
+    this.setState({ isColumnReorderEnabled: checked });
+  }
+
   private _getDragDropEvents(): IDragDropEvents {
     return {
       canDrop: (dropContext?: IDragDropContext, dragContext?: IDragDropContext) => { return true; },
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.DragDrop.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.DragDrop.Example.tsx.shot
new file mode 100644
index 0000000000000..fb54309e69ebc
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.DragDrop.Example.tsx.shot
@@ -0,0 +1,281 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component Examples renders DetailsList.DragDrop.Example.tsx correctly 1`] = `
+<div
+  className="detailsListDragDropExample"
+>
+  <div
+    className=
+        ms-Toggle
+        is-enabled
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          margin-bottom: 8px;
+        }
+  >
+    <label
+      className=
+          ms-Label
+          ms-Toggle-label
+          {
+            box-shadow: none;
+            box-sizing: border-box;
+            color: #333333;
+            display: block;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            overflow-wrap: break-word;
+            padding-bottom: 5px;
+            padding-left: 0;
+            padding-right: 0;
+            padding-top: 5px;
+            word-wrap: break-word;
+          }
+      htmlFor="Toggle0"
+    >
+      Enable Column Reorder
+    </label>
+    <div
+      className=
+          ms-Toggle-innerContainer
+          {
+            display: inline-flex;
+            position: relative;
+          }
+    >
+      <button
+        aria-disabled={undefined}
+        aria-label="Enable Column Reorder"
+        aria-pressed={false}
+        checked={false}
+        className=
+            ms-Toggle-background
+            {
+              align-items: center;
+              background: #ffffff;
+              border-color: #666666;
+              border-radius: 1em;
+              border-style: solid;
+              border-width: 1px;
+              box-sizing: border-box;
+              cursor: pointer;
+              display: flex;
+              font-size: 20px;
+              height: 1em;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: .2em;
+              padding-right: .2em;
+              padding-top: 0;
+              position: relative;
+              transition: all 0.1s ease;
+              width: 2.2em;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: -2px;
+              content: "";
+              left: -2px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: -2px;
+              top: -2px;
+              z-index: 1;
+            }
+            &:hover {
+              border-color: #212121;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+              border-color: Highlight;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover {
+              border-color: Highlight;
+            }
+        data-is-focusable={true}
+        disabled={undefined}
+        id="Toggle0"
+        onChange={[Function]}
+        onClick={[Function]}
+        type="button"
+      >
+        <div
+          className=
+              ms-Toggle-thumb
+              {
+                background-color: #212121;
+                border-color: transparent;
+                border-radius: .5em;
+                border-style: solid;
+                border-width: .28em;
+                box-sizing: border-box;
+                height: .5em;
+                transition: all 0.1s ease;
+                width: .5em;
+              }
+        />
+      </button>
+      <label
+        className=
+            ms-Label
+            ms-Toggle-stateText
+            {
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
+            }
+            && {
+              margin-bottom: 0;
+              margin-left: 10px;
+              margin-right: 10px;
+              margin-top: 0;
+              padding-bottom: 0;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 0;
+              user-select: none;
+            }
+        htmlFor="Toggle0"
+      >
+        Disabled
+      </label>
+    </div>
+  </div>
+  <div
+    className="ms-TextField"
+  >
+    <div
+      className="ms-TextField-wrapper"
+    >
+      <label
+        className=
+            ms-Label
+            {
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
+            }
+        htmlFor="TextField1"
+      >
+        Number of Left frozen columns:
+      </label>
+      <div
+        className="ms-TextField-fieldGroup"
+      >
+        <input
+          aria-describedby={undefined}
+          aria-invalid={false}
+          aria-label={undefined}
+          className="ms-TextField-field"
+          id="TextField1"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onInput={[Function]}
+          readOnly={undefined}
+          type="text"
+          value="1"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="ms-TextField"
+  >
+    <div
+      className="ms-TextField-wrapper"
+    >
+      <label
+        className=
+            ms-Label
+            {
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
+            }
+        htmlFor="TextField3"
+      >
+        Number of Right frozen columns:
+      </label>
+      <div
+        className="ms-TextField-fieldGroup"
+      >
+        <input
+          aria-describedby={undefined}
+          aria-invalid={false}
+          aria-label={undefined}
+          className="ms-TextField-field"
+          id="TextField3"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onInput={[Function]}
+          readOnly={undefined}
+          type="text"
+          value="0"
+        />
+      </div>
+    </div>
+  </div>
+  <div />
+  <div
+    className=
+
+        {
+          cursor: default;
+          position: relative;
+        }
+  >
+    <div
+      className="ms-Viewport"
+      style={
+        Object {
+          "minHeight": 1,
+          "minWidth": 1,
+        }
+      }
+    />
+  </div>
+</div>
+`;