diff --git a/examples/demos/example08-sortable-cols.js b/examples/demos/example08-sortable-cols.js
index 715b8284fb..c367295569 100644
--- a/examples/demos/example08-sortable-cols.js
+++ b/examples/demos/example08-sortable-cols.js
@@ -14,37 +14,31 @@ export default class extends React.Component {
       {
         key: 'task',
         name: 'Title',
-        width: 200,
         sortable: true
       },
       {
         key: 'priority',
         name: 'Priority',
-        width: 200,
         sortable: true
       },
       {
         key: 'issueType',
         name: 'Issue Type',
-        width: 200,
         sortable: true
       },
       {
         key: 'complete',
         name: '% Complete',
-        width: 200,
         sortable: true
       },
       {
         key: 'startDate',
         name: 'Start Date',
-        width: 200,
         sortable: true
       },
       {
         key: 'completeDate',
         name: 'Expected Complete',
-        width: 200,
         sortable: true
       }
     ];
diff --git a/examples/demos/example27-cell-actions.js b/examples/demos/example27-cell-actions.js
index 87164fc0b8..71e82ee9f6 100644
--- a/examples/demos/example27-cell-actions.js
+++ b/examples/demos/example27-cell-actions.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDataGrid from 'react-data-grid';
 import { Data, Formatters } from 'react-data-grid-addons';
+import { Clear, Link, FileCopy } from '@material-ui/icons';
 import faker from 'faker';
 import Wrapper from './Wrapper';
 
@@ -133,18 +134,18 @@ export default class extends React.Component {
     if (column.key === 'county' && row.id === 'id_0') {
       return [
         {
-          icon: <span className="glyphicon glyphicon-remove" />,
+          icon: <Clear />,
           callback() { alert('Deleting'); }
         },
         {
-          icon: <span className="glyphicon glyphicon-link" />,
+          icon: <Link />,
           actions: [
             {
               text: 'Edit Cell',
               callback() { alert('Edit Cell'); }
             },
             {
-              text: <><span className="fa fa-copy" /> Copy Cell</>,
+              text: <><FileCopy /> Copy Cell</>,
               callback() { alert('Copied'); }
             }
           ]
diff --git a/jest.config.js b/jest.config.js
index 91fec3a368..7721538ef7 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -23,6 +23,7 @@ module.exports = {
   moduleNameMapper: {
     '^react-data-grid$': '<rootDir>/packages/react-data-grid/src/',
     '^react-data-grid-addons$': '<rootDir>/packages/react-data-grid-addons/src/',
+    '^@material-ui/icons$': '<rootDir>/test/iconsMock.ts',
     '\\.css$': '<rootDir>/test/fileMock.js'
   },
   setupFiles: [
diff --git a/packages/react-data-grid-addons/package.json b/packages/react-data-grid-addons/package.json
index 3bc52559b2..5f2ec7b75c 100644
--- a/packages/react-data-grid-addons/package.json
+++ b/packages/react-data-grid-addons/package.json
@@ -25,7 +25,7 @@
     "build": "tsc"
   },
   "dependencies": {
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
     "react-contextmenu": "^2.11.0",
     "react-data-grid": "^7.0.0-alpha.20",
diff --git a/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.tsx b/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.tsx
index abc2cf8008..97c87ae3c9 100644
--- a/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.tsx
+++ b/packages/react-data-grid-addons/src/cells/headerCells/filters/NumericFilter.tsx
@@ -45,31 +45,19 @@ export default function NumericFilter<R>({ column, onChange }: Props<R>) {
   }
 
   const inputKey = `header-filter-${column.key as keyof R}`;
-  const columnStyle: React.CSSProperties = {
-    float: 'left',
-    marginRight: 5,
-    maxWidth: '80%'
-  };
-  const badgeStyle: React.CSSProperties = {
-    cursor: 'help'
-  };
 
   const tooltipText = 'Input Methods: Range (x-y), Greater Then (>x), Less Then (<y)';
 
   return (
-    <div>
-      <div style={columnStyle}>
-        <input
-          key={inputKey}
-          placeholder="e.g. 3,10-15,>20"
-          className="form-control input-sm"
-          onChange={handleChange}
-          onKeyPress={handleKeyPress}
-        />
-      </div>
-      <div className="input-sm">
-        <span className="badge" style={badgeStyle} title={tooltipText}>?</span>
-      </div>
+    <div className="rdg-filter-container">
+      <input
+        key={inputKey}
+        className="rdg-filter"
+        placeholder="e.g. 3,10-15,>20"
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+      />
+      <span className="rdg-filter-badge" title={tooltipText}>?</span>
     </div>
   );
 }
diff --git a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js
index d81e1ef17b..aa40e90ea2 100644
--- a/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js
+++ b/packages/react-data-grid-addons/src/draggable-header/DraggableHeaderCell.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { DragSource, DropTarget } from 'react-dnd';
 
 class DraggableHeaderCell extends React.Component {
@@ -21,18 +22,13 @@ class DraggableHeaderCell extends React.Component {
       canDrop
     } = this.props;
 
-    let opacity = 1;
-    if (isDragging) {
-      opacity = 0.2;
-    }
-
     // set drag source and drop target on header cell
     // width: 0 - otherwise drag clone was wrongly positioned
     return connectDragSource(
       connectDropTarget(
         <div
-          style={{ width: 0, cursor: 'move', opacity }}
-          className={isOver && canDrop ? 'rdg-can-drop' : ''}
+          className={classNames('rdg-draggable-header-cell', { 'rdg-can-drop': isOver && canDrop })}
+          style={{ opacity: isDragging ? 0.2 : 1 }}
         >
           {this.props.children}
         </div>
diff --git a/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js b/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js
index b7c4f9ba33..ddc8454d89 100644
--- a/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js
+++ b/packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js
@@ -23,7 +23,7 @@ class DraggableHeaderCell extends Component {
     if (isDragging) {
       return null;
     }
-    return connectDragSource(<div style={{ cursor: 'move' }}>{this.props.children}</div>);
+    return connectDragSource(<div className="rdg-draggable-header-cell">{this.props.children}</div>);
   }
 }
 
diff --git a/packages/react-data-grid-addons/src/draggable/RowDragLayer.js b/packages/react-data-grid-addons/src/draggable/RowDragLayer.js
index 16e4b4706c..576478180e 100644
--- a/packages/react-data-grid-addons/src/draggable/RowDragLayer.js
+++ b/packages/react-data-grid-addons/src/draggable/RowDragLayer.js
@@ -69,9 +69,9 @@ class CustomDragLayer extends Component {
           if (c.formatter) {
             const Formatter = c.formatter;
             const dependentValues = typeof c.getRowMetaData === 'function' ? c.getRowMetaData(item, c) : {};
-            cells.push(<td key={`dragged-cell-${rowIdx}-${c.key}`} className="react-grid-Cell" style={{ padding: '5px' }}><Formatter dependentValues={dependentValues} value={item[c.key]} /></td>);
+            cells.push(<td key={`dragged-cell-${rowIdx}-${c.key}`} className="rdg-cell" style={{ padding: '5px' }}><Formatter dependentValues={dependentValues} value={item[c.key]} /></td>);
           } else {
-            cells.push(<td key={`dragged-cell-${rowIdx}-${c.key}`} className="react-grid-Cell" style={{ padding: '5px' }}>{item[c.key]}</td>);
+            cells.push(<td key={`dragged-cell-${rowIdx}-${c.key}`} className="rdg-cell" style={{ padding: '5px' }}>{item[c.key]}</td>);
           }
         }
       });
diff --git a/packages/react-data-grid-addons/src/editors/DropDownEditor.js b/packages/react-data-grid-addons/src/editors/DropDownEditor.js
index d8be16c4e6..0f1f731600 100644
--- a/packages/react-data-grid-addons/src/editors/DropDownEditor.js
+++ b/packages/react-data-grid-addons/src/editors/DropDownEditor.js
@@ -63,7 +63,7 @@ export default class DropDownEditor extends React.Component {
     return (
       <select
         ref={this.setSelectRef}
-        style={{ width: '100%' }}
+        className="rdg-select-editor"
         defaultValue={this.props.value}
         onBlur={this.props.onBlur}
       >
diff --git a/packages/react-data-grid-addons/src/editors/__tests__/DropDownEditor.spec.js b/packages/react-data-grid-addons/src/editors/__tests__/DropDownEditor.spec.js
index e42e6b3380..1da18ee854 100644
--- a/packages/react-data-grid-addons/src/editors/__tests__/DropDownEditor.spec.js
+++ b/packages/react-data-grid-addons/src/editors/__tests__/DropDownEditor.spec.js
@@ -23,11 +23,6 @@ describe('DropDownEditor', () => {
       );
     });
 
-    it('should pass width=100% to the select node as an inline style', () => {
-      const Select = TestUtils.findRenderedDOMComponentWithTag(component, 'select');
-      expect(Select.style.width).toBe('100%');
-    });
-
     it('should pass the value to the select node as an inline value', () => {
       const Select = TestUtils.findRenderedDOMComponentWithTag(component, 'select');
       expect(Select.value).toBe('option2');
diff --git a/packages/react-data-grid-addons/src/toolbars/GroupedColumnButton.tsx b/packages/react-data-grid-addons/src/toolbars/GroupedColumnButton.tsx
index b1daf9d704..8a75509a2d 100644
--- a/packages/react-data-grid-addons/src/toolbars/GroupedColumnButton.tsx
+++ b/packages/react-data-grid-addons/src/toolbars/GroupedColumnButton.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { Delete } from '@material-ui/icons';
 
 interface Props {
   name: string;
@@ -13,9 +14,8 @@ export default function GroupedColumnButton({ name, columnKey, onColumnGroupDele
   );
 
   return (
-    <div className="grouped-col-btn btn btn-sm">
-      <span className="grouped-col-btn__name">{name}</span>
-      <span className="grouped-col-btn__remove glyphicon glyphicon-trash" onClick={onClick} />
+    <div className="grouped-col-btn btn">
+      {name} <Delete onClick={onClick} />
     </div>
   );
 }
diff --git a/packages/react-data-grid-addons/style/rdg-contextmenu.less b/packages/react-data-grid-addons/style/rdg-contextmenu.less
new file mode 100644
index 0000000000..2a55f1cb72
--- /dev/null
+++ b/packages/react-data-grid-addons/style/rdg-contextmenu.less
@@ -0,0 +1,39 @@
+.react-contextmenu {
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.24);
+
+  font-size: 14px;
+  line-height: 2;
+  white-space: nowrap;
+
+  > .react-contextmenu-item:not(:last-child) {
+    border-bottom: 1px solid #ddd;
+  }
+
+  .react-contextmenu-submenu > & {
+    margin-top: -1px;
+  }
+}
+
+.react-contextmenu-item:not(.react-contextmenu-submenu) {
+  padding: 0 12px;
+}
+
+.react-contextmenu-item--selected {
+  background-color: darken(#fff, 4%);
+}
+
+.react-contextmenu-submenu > .react-contextmenu-item {
+  &::after {
+    content: "▶";
+    margin-left: 12px;
+    margin-right: -6px;
+  }
+
+  &:not(.react-contextmenu-item--active) + .react-contextmenu {
+    display: none;
+  }
+}
diff --git a/packages/react-data-grid-addons/style/rdg-image.less b/packages/react-data-grid-addons/style/rdg-image.less
index 2449ae3f16..df9ae6f1a1 100644
--- a/packages/react-data-grid-addons/style/rdg-image.less
+++ b/packages/react-data-grid-addons/style/rdg-image.less
@@ -4,4 +4,5 @@
   display: inline-block;
   height: 40px;
   width: 40px;
-}
\ No newline at end of file
+  vertical-align: middle;
+}
diff --git a/packages/react-data-grid-addons/style/rdg-toolbar.less b/packages/react-data-grid-addons/style/rdg-toolbar.less
index e5adc1e2d3..1de5d8fc88 100644
--- a/packages/react-data-grid-addons/style/rdg-toolbar.less
+++ b/packages/react-data-grid-addons/style/rdg-toolbar.less
@@ -15,7 +15,7 @@
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 400;
-  line-height: 1.42857143;
+  line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -43,9 +43,12 @@
 .react-grid-Toolbar .grouped-col-btn + .grouped-col-btn {
   margin-left: 5px;
 }
-.react-grid-Toolbar .grouped-col-btn__remove {
-  margin-left: 5px;
+
+.grouped-col-btn > .MuiSvgIcon-root {
+  font-size: 18px;
+  vertical-align: middle;
 }
+
 .react-grid-Toolbar .tools {
   float: right;
   position: relative;
diff --git a/packages/react-data-grid-addons/style/react-data-grid-addons.less b/packages/react-data-grid-addons/style/react-data-grid-addons.less
index ae82e5a876..8ff5c3176c 100644
--- a/packages/react-data-grid-addons/style/react-data-grid-addons.less
+++ b/packages/react-data-grid-addons/style/react-data-grid-addons.less
@@ -1,3 +1,19 @@
+@import 'rdg-contextmenu.less';
 @import 'rdg-drop-target.less';
 @import 'rdg-image.less';
 @import 'rdg-toolbar.less';
+
+.rdg-dragging {
+  cursor: grabbing;
+}
+
+.rdg-draggable-header-cell {
+  cursor: move;
+  display: inline-block;
+  height: inherit;
+  background-color: inherit;
+}
+
+.rdg-can-drop {
+  background-color: #ececec;
+}
diff --git a/packages/react-data-grid/package.json b/packages/react-data-grid/package.json
index 8786e72b74..7bcaddbfc7 100644
--- a/packages/react-data-grid/package.json
+++ b/packages/react-data-grid/package.json
@@ -27,8 +27,10 @@
     "build": "tsc"
   },
   "dependencies": {
+    "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.5.1",
     "classnames": "^2.2.6",
-    "react-is": "^16.8.4",
+    "react-is": "^16.10.2",
     "shallowequal": "^1.1.0",
     "tslib": "^1.10.0"
   },
diff --git a/packages/react-data-grid/src/Canvas.tsx b/packages/react-data-grid/src/Canvas.tsx
index 3e2f46fa0c..c412df58ad 100644
--- a/packages/react-data-grid/src/Canvas.tsx
+++ b/packages/react-data-grid/src/Canvas.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { isElement } from 'react-is';
 
 import Row from './Row';
@@ -80,7 +80,7 @@ export default function Canvas<R>({
   rowHeight,
   rowKey,
   rowRenderer,
-  RowsContainer = Fragment,
+  RowsContainer,
   rowsCount,
   scrollToRowIndex,
   selectedRows
@@ -275,12 +275,26 @@ export default function Canvas<R>({
     );
   }
 
-  const paddingTop = rowOverscanStartIdx * rowHeight;
-  const paddingBottom = (rowsCount - 1 - rowOverscanEndIdx) * rowHeight;
+  let grid = (
+    <div
+      className="rdg-grid"
+      style={{
+        width: columnMetrics.totalColumnWidth,
+        paddingTop: rowOverscanStartIdx * rowHeight,
+        paddingBottom: (rowsCount - 1 - rowOverscanEndIdx) * rowHeight
+      }}
+    >
+      {getRows()}
+    </div>
+  );
+
+  if (RowsContainer !== undefined) {
+    grid = <RowsContainer id={contextMenu ? contextMenu.props.id : 'rowsContainer'}>{grid}</RowsContainer>;
+  }
 
   return (
     <div
-      className="react-grid-Canvas"
+      className="rdg-viewport"
       style={{ height }}
       ref={canvas}
       onScroll={handleScroll}
@@ -311,11 +325,7 @@ export default function Canvas<R>({
         editorPortalTarget={editorPortalTarget}
         {...interactionMasksMetaData}
       />
-      <RowsContainer id={contextMenu ? contextMenu.props.id : 'rowsContainer'}>
-        <div className="rdg-rows-container" style={{ width: columnMetrics.totalColumnWidth, paddingTop, paddingBottom }}>
-          {getRows()}
-        </div>
-      </RowsContainer>
+      {grid}
     </div>
   );
 }
diff --git a/packages/react-data-grid/src/Cell.tsx b/packages/react-data-grid/src/Cell.tsx
index c8856a5a86..49035127a8 100644
--- a/packages/react-data-grid/src/Cell.tsx
+++ b/packages/react-data-grid/src/Cell.tsx
@@ -79,24 +79,27 @@ export default class Cell<R> extends React.Component<CellProps<R>> implements Ce
   };
 
   getStyle(): React.CSSProperties {
-    const { column, height, scrollLeft } = this.props;
+    const { column } = this.props;
 
-    return {
-      height,
+    const style: React.CSSProperties = {
       width: column.width,
-      left: column.left,
-      transform: !isPositionStickySupported() && isFrozen(column) ? `translateX(${scrollLeft}px)` : 'none'
+      left: column.left
     };
+
+    if (!isPositionStickySupported() && isFrozen(column)) {
+      style.transform = `translateX(${this.props.scrollLeft}px)`;
+    }
+
+    return style;
   }
 
   getCellClass() {
-    const { idx, column, lastFrozenColumnIndex, tooltip, expandableOptions } = this.props;
+    const { column, tooltip, expandableOptions } = this.props;
     return classNames(
       column.cellClass,
-      'react-grid-Cell',
+      'rdg-cell',
       this.props.className, {
-        'react-grid-Cell--frozen': isFrozen(column),
-        'rdg-last--frozen': lastFrozenColumnIndex === idx,
+        'rdg-cell-frozen': isFrozen(column),
         'has-tooltip': !!tooltip,
         'rdg-child-cell': expandableOptions && expandableOptions.subRowDetails && expandableOptions.treeDepth > 0
       }
diff --git a/packages/react-data-grid/src/Cell/CellContent.tsx b/packages/react-data-grid/src/Cell/CellContent.tsx
index dc9813fa06..ac8a74b705 100644
--- a/packages/react-data-grid/src/Cell/CellContent.tsx
+++ b/packages/react-data-grid/src/Cell/CellContent.tsx
@@ -38,7 +38,7 @@ export default function CellContent<R>({
 }: CellContentProps<R>) {
   const isExpandCell = expandableOptions ? expandableOptions.field === column.key : false;
   const treeDepth = expandableOptions ? expandableOptions.treeDepth : 0;
-  const marginLeft = expandableOptions && isExpandCell ? expandableOptions.treeDepth * 30 : 0;
+  const style = expandableOptions && isExpandCell ? { marginLeft: expandableOptions.treeDepth * 30 } : undefined;
 
   function handleDeleteSubRow() {
     if (onDeleteSubRow) {
@@ -60,27 +60,25 @@ export default function CellContent<R>({
     />
   );
 
-  const classes = classNames('react-grid-Cell__value',
-    { 'cell-tooltip': !!tooltip }
+  const classes = classNames('rdg-cell-value',
+    { 'rdg-cell-tooltip': !!tooltip }
   );
 
   return (
     <div className={classes}>
       {cellDeleter}
-      <div className="react-grid-Cell__container" style={{ marginLeft }}>
-        <span>
-          <CellValue<R>
-            rowIdx={rowIdx}
-            rowData={rowData}
-            column={column}
-            value={value}
-            isRowSelected={isRowSelected}
-            onRowSelectionChange={onRowSelectionChange}
-          />
-        </span>
+      <div style={style}>
+        <CellValue<R>
+          rowIdx={rowIdx}
+          rowData={rowData}
+          column={column}
+          value={value}
+          isRowSelected={isRowSelected}
+          onRowSelectionChange={onRowSelectionChange}
+        />
         {cellControls}
       </div>
-      {tooltip && <span className="cell-tooltip-text">{tooltip}</span>}
+      {tooltip && <span className="rdg-cell-tooltip-text">{tooltip}</span>}
     </div>
   );
 }
diff --git a/packages/react-data-grid/src/ChildRowDeleteButton.tsx b/packages/react-data-grid/src/ChildRowDeleteButton.tsx
index 00e99baf57..b364dafbb0 100644
--- a/packages/react-data-grid/src/ChildRowDeleteButton.tsx
+++ b/packages/react-data-grid/src/ChildRowDeleteButton.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { RemoveCircle } from '@material-ui/icons';
 
 export interface ChildRowDeleteButtonProps {
   treeDepth: number;
@@ -15,7 +16,7 @@ export default function ChildRowDeleteButton({ treeDepth, cellHeight, onDeleteSu
       <div className="rdg-child-row-action-cross" />
       {isDeleteSubRowEnabled && (
         <div style={{ left, top }} className="rdg-child-row-btn" onClick={onDeleteSubRow}>
-          <div className="glyphicon glyphicon-remove-sign" />
+          <RemoveCircle />
         </div>
       )}
     </>
diff --git a/packages/react-data-grid/src/Header.tsx b/packages/react-data-grid/src/Header.tsx
index 3a3c020316..4fff9a474d 100644
--- a/packages/react-data-grid/src/Header.tsx
+++ b/packages/react-data-grid/src/Header.tsx
@@ -1,9 +1,8 @@
 import React, { forwardRef, useRef, useState, useMemo, useImperativeHandle } from 'react';
-import classNames from 'classnames';
 
 import HeaderRow from './HeaderRow';
 import { getColumnMetrics } from './utils/columnUtils';
-import { getScrollbarSize } from './utils';
+import { getScrollbarSize, isPositionStickySupported } from './utils';
 import { CalculatedColumn, HeaderRowData, ColumnMetrics, CellMetaData } from './common/types';
 import { DEFINE_SORT } from './common/enums';
 import { ReactDataGridProps } from './ReactDataGrid';
@@ -26,7 +25,6 @@ export interface HeaderProps<R> extends SharedDataGridProps<R> {
   columnMetrics: ColumnMetrics<R>;
   headerRows: [HeaderRowData<R>, HeaderRowData<R> | undefined];
   cellMetaData: CellMetaData<R>;
-  rowOffsetHeight: number;
   onSort?(columnKey: keyof R, direction: DEFINE_SORT): void;
   onColumnResize(idx: number, width: number): void;
 }
@@ -36,6 +34,7 @@ export interface HeaderHandle {
 }
 
 export default forwardRef(function Header<R>(props: HeaderProps<R>, ref: React.Ref<HeaderHandle>) {
+  const headerRef = useRef<HTMLDivElement>(null);
   const rowRef = useRef<HeaderRow<R>>(null);
   const filterRowRef = useRef<HeaderRow<R>>(null);
 
@@ -55,6 +54,8 @@ export default forwardRef(function Header<R>(props: HeaderProps<R>, ref: React.R
 
   useImperativeHandle(ref, () => ({
     setScrollLeft(scrollLeft: number): void {
+      headerRef.current!.scrollLeft = scrollLeft;
+      if (isPositionStickySupported()) return;
       rowRef.current!.setScrollLeft(scrollLeft);
       if (filterRowRef.current) {
         filterRowRef.current.setScrollLeft(scrollLeft);
@@ -85,7 +86,7 @@ export default forwardRef(function Header<R>(props: HeaderProps<R>, ref: React.R
     props.onSelectedRowsChange(newSelectedRows);
   }
 
-  function getHeaderRow(row: HeaderRowData<R>, ref: React.RefObject<HeaderRow<R>>) {
+  function getHeaderRow(row: HeaderRowData<R>, ref?: React.RefObject<HeaderRow<R>>) {
     return (
       <HeaderRow<R>
         key={row.rowType}
@@ -93,6 +94,7 @@ export default forwardRef(function Header<R>(props: HeaderProps<R>, ref: React.R
         rowType={row.rowType}
         onColumnResize={onColumnResize}
         onColumnResizeEnd={onColumnResizeEnd}
+        width={columnMetrics.totalColumnWidth + getScrollbarSize()}
         height={row.height}
         columns={columnMetrics.columns}
         draggableHeaderCell={props.draggableHeaderCell}
@@ -110,10 +112,11 @@ export default forwardRef(function Header<R>(props: HeaderProps<R>, ref: React.R
   }
 
   function getHeaderRows() {
+    const setRef = !isPositionStickySupported();
     const { headerRows } = props;
-    const rows = [getHeaderRow(headerRows[0], rowRef)];
+    const rows = [getHeaderRow(headerRows[0], setRef ? rowRef : undefined)];
     if (headerRows[1]) {
-      rows.push(getHeaderRow(headerRows[1], filterRowRef));
+      rows.push(getHeaderRow(headerRows[1], setRef ? filterRowRef : undefined));
     }
 
     return rows;
@@ -124,17 +127,10 @@ export default forwardRef(function Header<R>(props: HeaderProps<R>, ref: React.R
     props.cellMetaData.onCellClick({ rowIdx: -1, idx: -1 });
   }
 
-  const className = classNames('react-grid-Header', {
-    'react-grid-Header--resizing': resizing !== null
-  });
-
   return (
     <div
-      style={{
-        height: props.rowOffsetHeight,
-        paddingRight: getScrollbarSize()
-      }}
-      className={className}
+      ref={headerRef}
+      className="rdg-header"
       onClick={onHeaderClick}
     >
       {getHeaderRows()}
diff --git a/packages/react-data-grid/src/HeaderCell.tsx b/packages/react-data-grid/src/HeaderCell.tsx
index 8553c4474e..7650e6ac9c 100644
--- a/packages/react-data-grid/src/HeaderCell.tsx
+++ b/packages/react-data-grid/src/HeaderCell.tsx
@@ -7,7 +7,7 @@ import { CalculatedColumn, HeaderRowProps } from './common/types';
 
 function SimpleCellRenderer<R>({ column, rowType }: HeaderRowProps<R>) {
   const headerText = rowType === HeaderRowType.HEADER ? column.name : '';
-  return <div>{headerText}</div>;
+  return <>{headerText}</>;
 }
 
 interface Props<R> {
@@ -132,24 +132,21 @@ export default class HeaderCell<R> extends React.Component<Props<R>> {
   }
 
   render() {
-    const { column, rowType, height } = this.props;
+    const { column, rowType } = this.props;
 
-    const className = classNames('react-grid-HeaderCell', {
+    const className = classNames('rdg-cell', {
       'rdg-header-cell-resizable': column.resizable,
-      'react-grid-HeaderCell--frozen': isFrozen(column)
+      'rdg-cell-frozen': isFrozen(column)
     }, this.props.className, column.cellClass);
 
-    const style: React.CSSProperties = {
-      width: column.width,
-      left: column.left,
-      height
-    };
-
     const cell = (
       <div
-        className={className}
-        style={style}
         ref={this.cell}
+        className={className}
+        style={{
+          width: column.width,
+          left: column.left
+        }}
         onMouseDown={column.resizable ? this.onMouseDown : undefined}
         onTouchStart={column.resizable ? this.onTouchStart : undefined}
       >
diff --git a/packages/react-data-grid/src/HeaderRow.tsx b/packages/react-data-grid/src/HeaderRow.tsx
index d04e028548..0dfad7a8ff 100644
--- a/packages/react-data-grid/src/HeaderRow.tsx
+++ b/packages/react-data-grid/src/HeaderRow.tsx
@@ -4,6 +4,7 @@ import HeaderCell from './HeaderCell';
 import SortableHeaderCell from './common/cells/headerCells/SortableHeaderCell';
 import FilterableHeaderCell from './common/cells/headerCells/FilterableHeaderCell';
 import { isFrozen } from './utils/columnUtils';
+import { isPositionStickySupported } from './utils';
 import { HeaderRowType, HeaderCellType, DEFINE_SORT } from './common/enums';
 import { CalculatedColumn, AddFilterEvent } from './common/types';
 import { HeaderProps } from './Header';
@@ -19,6 +20,7 @@ type SharedHeaderProps<R> = Pick<HeaderProps<R>,
 >;
 
 export interface HeaderRowProps<R> extends SharedHeaderProps<R> {
+  width: number;
   height: number;
   columns: CalculatedColumn<R>[];
   onColumnResize(column: CalculatedColumn<R>, width: number): void;
@@ -32,7 +34,6 @@ export interface HeaderRowProps<R> extends SharedHeaderProps<R> {
 export default class HeaderRow<R> extends React.Component<HeaderRowProps<R>> {
   static displayName = 'HeaderRow';
 
-  private readonly headerRow = React.createRef<HTMLDivElement>();
   private readonly cells = new Map<keyof R, HeaderCell<R>>();
 
   getHeaderCellType(column: CalculatedColumn<R>): HeaderCellType {
@@ -93,6 +94,7 @@ export default class HeaderRow<R> extends React.Component<HeaderRowProps<R>> {
     const cells = [];
     const frozenCells = [];
     const { columns, rowType } = this.props;
+    const setRef = !isPositionStickySupported();
 
     for (const column of columns) {
       const { key } = column;
@@ -101,7 +103,9 @@ export default class HeaderRow<R> extends React.Component<HeaderRowProps<R>> {
       const cell = (
         <HeaderCell<R>
           key={key as string}
-          ref={node => node ? this.cells.set(key, node) : this.cells.delete(key)}
+          ref={setRef
+            ? node => node ? this.cells.set(key, node) : this.cells.delete(key)
+            : undefined}
           column={column}
           rowType={rowType}
           height={this.props.height}
@@ -126,7 +130,6 @@ export default class HeaderRow<R> extends React.Component<HeaderRowProps<R>> {
   }
 
   setScrollLeft(scrollLeft: number): void {
-    this.headerRow.current!.scrollLeft = scrollLeft;
     this.props.columns.forEach(column => {
       const { key } = column;
       if (!this.cells.has(key)) return;
@@ -140,15 +143,10 @@ export default class HeaderRow<R> extends React.Component<HeaderRowProps<R>> {
   }
 
   render() {
-    const { height, rowType } = this.props;
-
     return (
       <div
-        ref={this.headerRow}
-        style={{
-          height: rowType === HeaderRowType.FILTER ? 500 : height
-        }}
-        className="react-grid-HeaderRow"
+        className="rdg-header-row"
+        style={{ width: this.props.width, height: this.props.height }}
       >
         {this.getCells()}
       </div>
diff --git a/packages/react-data-grid/src/ReactDataGrid.tsx b/packages/react-data-grid/src/ReactDataGrid.tsx
index a180ba508d..3fa291303e 100644
--- a/packages/react-data-grid/src/ReactDataGrid.tsx
+++ b/packages/react-data-grid/src/ReactDataGrid.tsx
@@ -398,12 +398,11 @@ const ReactDataGridBase = forwardRef(function ReactDataGrid<R extends {}>({
 
   const headerRows = getHeaderRows();
   const rowOffsetHeight = headerRows[0].height + (headerRows[1] ? headerRows[1].height : 0);
-  const style = width ? { width } : undefined;
 
   return (
     <div
       className="rdg-root"
-      style={style}
+      style={{ width, lineHeight: `${rowHeight}px` }}
       ref={gridRef}
     >
       {columnMetrics && (
@@ -416,7 +415,6 @@ const ReactDataGridBase = forwardRef(function ReactDataGrid<R extends {}>({
             columnMetrics={columnMetrics}
             onColumnResize={handleColumnResize}
             headerRows={headerRows}
-            rowOffsetHeight={rowOffsetHeight}
             sortColumn={props.sortColumn}
             sortDirection={props.sortDirection}
             draggableHeaderCell={props.draggableHeaderCell}
@@ -427,11 +425,7 @@ const ReactDataGridBase = forwardRef(function ReactDataGrid<R extends {}>({
             getValidFilterValues={props.getValidFilterValues}
             cellMetaData={cellMetaData}
           />
-          {rowsCount === 0 && isValidElementType(props.emptyRowsView) ? (
-            <div className="react-grid-Empty">
-              {createElement(props.emptyRowsView)}
-            </div>
-          ) : (
+          {rowsCount === 0 && isValidElementType(props.emptyRowsView) ? createElement(props.emptyRowsView) : (
             <Canvas<R>
               rowKey={rowKey}
               rowHeight={rowHeight}
diff --git a/packages/react-data-grid/src/Row.tsx b/packages/react-data-grid/src/Row.tsx
index c4fb85d785..8146bc29ba 100644
--- a/packages/react-data-grid/src/Row.tsx
+++ b/packages/react-data-grid/src/Row.tsx
@@ -45,7 +45,7 @@ export default class Row<R> extends React.Component<RowRendererProps<R>> impleme
 
   getCell(column: CalculatedColumn<R>) {
     const Renderer = this.props.cellRenderer!;
-    const { idx, cellMetaData, row, lastFrozenColumnIndex, scrollLeft, isRowSelected, onRowSelectionChange } = this.props;
+    const { idx, cellMetaData, row, scrollLeft, isRowSelected, onRowSelectionChange } = this.props;
     const { key } = column;
 
     const cellProps: CellRendererProps<R> & { ref: (cell: CellRenderer | null) => void } = {
@@ -59,7 +59,6 @@ export default class Row<R> extends React.Component<RowRendererProps<R>> impleme
       rowData: row,
       expandableOptions: this.getExpandableOptions(key),
       scrollLeft,
-      lastFrozenColumnIndex,
       isRowSelected,
       onRowSelectionChange
     };
@@ -109,9 +108,9 @@ export default class Row<R> extends React.Component<RowRendererProps<R>> impleme
 
   render() {
     const className = classNames(
-      'react-grid-Row',
-      `react-grid-Row--${this.props.idx % 2 === 0 ? 'even' : 'odd'}`,
-      { 'row-selected': this.props.isRowSelected },
+      'rdg-row',
+      `rdg-row-${this.props.idx % 2 === 0 ? 'even' : 'odd'}`,
+      { 'rdg-row-selected': this.props.isRowSelected },
       this.props.extraClasses
     );
 
diff --git a/packages/react-data-grid/src/RowGroup.tsx b/packages/react-data-grid/src/RowGroup.tsx
index 13fd6ae733..b2e7b60ef2 100644
--- a/packages/react-data-grid/src/RowGroup.tsx
+++ b/packages/react-data-grid/src/RowGroup.tsx
@@ -45,12 +45,10 @@ export default forwardRef<HTMLDivElement, Props<any>>(function RowGroup(props, r
     props.eventBus.dispatch(EventTypes.SELECT_CELL, { rowIdx: props.idx, idx: 0 });
   }
 
-  const lastColumn = props.columns[props.columns.length - 1];
-  const style = { width: lastColumn!.left + lastColumn!.width };
   const Renderer = props.renderer || DefaultBase;
 
   return (
-    <div className="react-grid-row-group" style={style} onClick={onClick}>
+    <div onClick={onClick}>
       <Renderer {...props} ref={ref} onRowExpandClick={onRowExpandClick} onRowExpandToggle={onRowExpandToggle} />
     </div>
   );
@@ -80,14 +78,14 @@ const DefaultBase = forwardRef<HTMLDivElement, DefaultBaseProps>(function Defaul
 
   return (
     <div
-      className="rdg-row-group-default"
+      className="rdg-row-group"
       style={{ height }}
       onKeyDown={onKeyDown}
       tabIndex={0}
       ref={ref}
     >
       <span
-        className="row-expand-icon"
+        className="rdg-row-expand-icon"
         style={{ marginLeft }}
         onClick={onRowExpandClick}
       >
diff --git a/packages/react-data-grid/src/__tests__/Canvas.spec.tsx b/packages/react-data-grid/src/__tests__/Canvas.spec.tsx
index b7838e842d..36c714fcaa 100644
--- a/packages/react-data-grid/src/__tests__/Canvas.spec.tsx
+++ b/packages/react-data-grid/src/__tests__/Canvas.spec.tsx
@@ -14,7 +14,7 @@ interface Row {
 }
 
 const noop = () => null;
-const getRows = (wrp: ReturnType<typeof renderComponent>) => wrp.find('.rdg-rows-container').props().children as JSX.Element[];
+const getRows = (wrp: ReturnType<typeof renderComponent>) => wrp.find('.rdg-grid').props().children as JSX.Element[];
 
 const testProps: CanvasProps<Row> = {
   rowKey: 'row',
diff --git a/packages/react-data-grid/src/__tests__/Cell.spec.tsx b/packages/react-data-grid/src/__tests__/Cell.spec.tsx
index 208eab0995..4f99ee99cc 100644
--- a/packages/react-data-grid/src/__tests__/Cell.spec.tsx
+++ b/packages/react-data-grid/src/__tests__/Cell.spec.tsx
@@ -46,8 +46,7 @@ const testProps: CellProps<Row> = {
   height: 40,
   isRowSelected: false,
   onRowSelectionChange() {},
-  scrollLeft: 0,
-  lastFrozenColumnIndex: -1
+  scrollLeft: 0
 };
 
 const renderComponent = (extraProps?: PropsWithChildren<Partial<CellProps<Row>>>) => {
@@ -95,14 +94,13 @@ describe('Cell Tests', () => {
       expandableOptions,
       isRowSelected: false,
       onRowSelectionChange() {},
-      scrollLeft: 0,
-      lastFrozenColumnIndex: -1
+      scrollLeft: 0
     };
 
     it('passes classname property', () => {
       const wrapper = shallowRenderComponent(requiredProperties);
       const cellDiv = wrapper.find('div').at(0);
-      expect(cellDiv.hasClass('react-grid-Cell'));
+      expect(cellDiv.hasClass('rdg-cell'));
     });
     it('passes style property', () => {
       const wrapper = shallowRenderComponent(requiredProperties);
@@ -130,7 +128,6 @@ describe('Cell Tests', () => {
         isRowSelected: false,
         onRowSelectionChange() {},
         scrollLeft: 0,
-        lastFrozenColumnIndex: -1,
         ...propsOverride
       };
 
diff --git a/packages/react-data-grid/src/__tests__/Header.spec.tsx b/packages/react-data-grid/src/__tests__/Header.spec.tsx
index 16a03dbee5..2f9bccb8d8 100644
--- a/packages/react-data-grid/src/__tests__/Header.spec.tsx
+++ b/packages/react-data-grid/src/__tests__/Header.spec.tsx
@@ -33,8 +33,7 @@ describe('Header Unit Tests', () => {
       onColumnResize: jest.fn(),
       onSort: () => null,
       onHeaderDrop() { },
-      draggableHeaderCell: () => null,
-      rowOffsetHeight: 30
+      draggableHeaderCell: () => null
     };
   }
 
@@ -88,8 +87,7 @@ describe('Header Unit Tests', () => {
       onHeaderDrop() { },
       cellMetaData: fakeCellMetaData,
       draggableHeaderCell: () => null,
-      onColumnResize() { },
-      rowOffsetHeight: 30
+      onColumnResize() { }
     };
     const testAllProps: HeaderProps<Row> = {
       rowKey: 'id',
@@ -116,25 +114,14 @@ describe('Header Unit Tests', () => {
       draggableHeaderCell: jest.fn(),
       getValidFilterValues: jest.fn(),
       cellMetaData: fakeCellMetaData,
-      onHeaderDrop() { },
-      rowOffsetHeight: 30
+      onHeaderDrop() { }
     };
     it('passes classname property', () => {
       const wrapper = renderComponent(testAllProps);
       const headerDiv = wrapper.find('div');
-      expect(headerDiv.hasClass('react-grid-Header'));
-    });
-    it('passes style property', () => {
-      const wrapper = renderComponent(testAllProps);
-      const headerDiv = wrapper.find('div');
-      expect(headerDiv.props().style).toBeDefined();
+      expect(headerDiv.hasClass('rdg-header'));
     });
 
-    it('should account for scrollbar size in header', () => {
-      const wrapper = renderComponent(testAllProps);
-      const headerDiv = wrapper.find('div');
-      expect(headerDiv.props().style!.paddingRight).toBe(SCROLL_BAR_SIZE);
-    });
     it('does not pass onScroll properties if it is not available from props', () => {
       const wrapper = renderComponent(testRequiredProps);
       const headerDiv = wrapper.find('div');
diff --git a/packages/react-data-grid/src/__tests__/HeaderRow.spec.tsx b/packages/react-data-grid/src/__tests__/HeaderRow.spec.tsx
index b5fbe3df01..2dd228a71c 100644
--- a/packages/react-data-grid/src/__tests__/HeaderRow.spec.tsx
+++ b/packages/react-data-grid/src/__tests__/HeaderRow.spec.tsx
@@ -16,6 +16,7 @@ describe('Header Row Unit Tests', () => {
     onColumnResizeEnd() { },
     onSort: jest.fn(),
     sortDirection: DEFINE_SORT.NONE,
+    width: 1000,
     height: 35,
     allRowsSelected: false,
     onAllRowsSelectionChange() {},
@@ -130,6 +131,7 @@ describe('Header Row Unit Tests', () => {
     };
 
     const requiredProps: HeaderRowProps<Row> = {
+      width: 1000,
       height: 35,
       columns: helpers.columns,
       onSort: jest.fn(),
@@ -146,7 +148,7 @@ describe('Header Row Unit Tests', () => {
     it('passes classname property', () => {
       const wrapper = renderComponent(requiredProps);
       const headerRowDiv = wrapper.find('div').at(0);
-      expect(headerRowDiv.hasClass('react-grid-HeaderRow'));
+      expect(headerRowDiv.hasClass('rdg-header-row'));
     });
     it('does not pass width if not available from props', () => {
       const wrapper = renderComponent(requiredProps);
@@ -156,7 +158,7 @@ describe('Header Row Unit Tests', () => {
     it('does pass the height if available from props', () => {
       const wrapper = renderComponent(requiredProps);
       const headerRowDiv = wrapper.find('div').at(0);
-      expect(headerRowDiv.props().style).toEqual({ height: 35 });
+      expect(headerRowDiv.props().style).toEqual({ height: 35, width: 1000 });
     });
   });
 });
diff --git a/packages/react-data-grid/src/__tests__/Row.spec.tsx b/packages/react-data-grid/src/__tests__/Row.spec.tsx
index 9d4c0ace57..4f8ee7fa5f 100644
--- a/packages/react-data-grid/src/__tests__/Row.spec.tsx
+++ b/packages/react-data-grid/src/__tests__/Row.spec.tsx
@@ -55,7 +55,7 @@ describe('Row', () => {
   it('passes classname property', () => {
     const { wrapper } = setup(requiredProperties);
     const draggableDiv = wrapper.find('div').at(0);
-    expect(draggableDiv.hasClass('react-grid-Row'));
+    expect(draggableDiv.hasClass('rdg-row'));
   });
   it('passes style property', () => {
     const { wrapper } = setup(requiredProperties);
diff --git a/packages/react-data-grid/src/common/cells/headerCells/FilterableHeaderCell.tsx b/packages/react-data-grid/src/common/cells/headerCells/FilterableHeaderCell.tsx
index d87933c65c..0bb0d071dc 100644
--- a/packages/react-data-grid/src/common/cells/headerCells/FilterableHeaderCell.tsx
+++ b/packages/react-data-grid/src/common/cells/headerCells/FilterableHeaderCell.tsx
@@ -12,15 +12,11 @@ export default function FilterableHeaderCell<R>({ column, onChange }: FilterRend
     }
   }
 
-  if (column.filterable === false) {
-    return <div />;
-  }
-
   return (
-    <div className="form-group">
+    <div className="rdg-filter-container">
       <input
         key={`header-filter-${column.key as keyof R}`}
-        className="form-control input-sm"
+        className="rdg-filter"
         placeholder="Search"
         value={filterTerm}
         onChange={handleChange}
diff --git a/packages/react-data-grid/src/common/cells/headerCells/SortableHeaderCell.tsx b/packages/react-data-grid/src/common/cells/headerCells/SortableHeaderCell.tsx
index 961bc331f0..c0403827e2 100644
--- a/packages/react-data-grid/src/common/cells/headerCells/SortableHeaderCell.tsx
+++ b/packages/react-data-grid/src/common/cells/headerCells/SortableHeaderCell.tsx
@@ -51,9 +51,9 @@ export default function SortableHeaderCell<R>(props: Props<R>) {
       });
 
   return (
-    <div className="rdg-sortable-header-cell" onClick={onClick}>
-      <span className="pull-right">{SORT_TEXT[sortDirection]}</span>
-      {content}
-    </div>
+    <span className="rdg-header-sort-cell" onClick={onClick}>
+      <span className="rdg-header-sort-name">{content}</span>
+      <span>{SORT_TEXT[sortDirection]}</span>
+    </span>
   );
 }
diff --git a/packages/react-data-grid/src/common/editors/ClickOutside.tsx b/packages/react-data-grid/src/common/editors/ClickOutside.tsx
index 09d0f27b53..128ea104a3 100644
--- a/packages/react-data-grid/src/common/editors/ClickOutside.tsx
+++ b/packages/react-data-grid/src/common/editors/ClickOutside.tsx
@@ -12,20 +12,20 @@ import React, { useRef, useEffect } from 'react';
  *
  *
  * SimpleEditor for example Texbox (No Portals)
- *   <div react-data-grid>..<div>
+ *   <div react-data-grid>..</div>
  *   <div portal-created-by-the-grid-for-editors>
  *      <div editor-container>
  *        <div simple-editor>..</div>
  *      </div>
- *   <div>
+ *   </div>
  *
  * ComplexEditor for example Modals (using Portals)
- *   <div react-data-grid>..<div>
+ *   <div react-data-grid>..</div>
  *   <div portal-created-by-the-grid-for-editors>
  *      <div editor-container>
  *        // Nothing here
  *      </div>
- *   <div>
+ *   </div>
  *   <div portal-created-by-the-editor>
  *     <div complex-editor>..</div>
  *   </div>
diff --git a/packages/react-data-grid/src/common/editors/EditorContainer.tsx b/packages/react-data-grid/src/common/editors/EditorContainer.tsx
index faa697364f..59ec2cae08 100644
--- a/packages/react-data-grid/src/common/editors/EditorContainer.tsx
+++ b/packages/react-data-grid/src/common/editors/EditorContainer.tsx
@@ -1,6 +1,7 @@
 import React, { KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import { isElement, isValidElementType } from 'react-is';
+import { Clear } from '@material-ui/icons';
 
 import { CalculatedColumn, Editor, EditorProps, CommitEvent, Dimension, Omit } from '../types';
 import SimpleTextEditor from './SimpleTextEditor';
@@ -39,10 +40,6 @@ export default class EditorContainer<R> extends React.Component<Props<R>, State>
     const inputNode = this.getInputNode();
     if (inputNode instanceof HTMLElement) {
       inputNode.focus();
-      if (!this.getEditor().disableContainerStyles) {
-        inputNode.className += ' editor-main';
-        inputNode.style.height = `${this.props.height - 1}px`;
-      }
     }
     if (inputNode instanceof HTMLInputElement) {
       inputNode.select();
@@ -251,13 +248,13 @@ export default class EditorContainer<R> extends React.Component<Props<R>, State>
 
   renderStatusIcon() {
     return this.state.isInvalid
-      && <span className="glyphicon glyphicon-remove form-control-feedback" />;
+      && <Clear className="form-control-feedback" />;
   }
 
   render() {
     const { width, height, left, top } = this.props;
     const className = classNames('rdg-editor-container', {
-      'has-error': this.state.isInvalid === true
+      'has-error': this.state.isInvalid
     });
 
     return (
diff --git a/packages/react-data-grid/src/common/editors/SimpleTextEditor.tsx b/packages/react-data-grid/src/common/editors/SimpleTextEditor.tsx
index c87de85f57..51477f7960 100644
--- a/packages/react-data-grid/src/common/editors/SimpleTextEditor.tsx
+++ b/packages/react-data-grid/src/common/editors/SimpleTextEditor.tsx
@@ -19,7 +19,7 @@ export default class SimpleTextEditor extends React.Component<Props> implements
   render() {
     return (
       <input
-        className="form-control"
+        className="rdg-text-editor"
         ref={this.input}
         defaultValue={this.props.value}
         onBlur={this.props.onBlur}
diff --git a/packages/react-data-grid/src/common/types.ts b/packages/react-data-grid/src/common/types.ts
index 7b68a464b4..8e58a1b1e0 100644
--- a/packages/react-data-grid/src/common/types.ts
+++ b/packages/react-data-grid/src/common/types.ts
@@ -157,7 +157,6 @@ export interface CellRendererProps<TRow, TValue = unknown> {
   cellMetaData: CellMetaData<TRow>;
   scrollLeft: number;
   expandableOptions?: ExpandableOptions;
-  lastFrozenColumnIndex: number;
   isRowSelected: boolean;
   onRowSelectionChange(rowIdx: number, row: TRow, checked: boolean, isShiftClick: boolean): void;
 }
diff --git a/packages/react-data-grid/src/formatters/SelectCellFormatter.tsx b/packages/react-data-grid/src/formatters/SelectCellFormatter.tsx
index 01c96f37a4..43891a2707 100644
--- a/packages/react-data-grid/src/formatters/SelectCellFormatter.tsx
+++ b/packages/react-data-grid/src/formatters/SelectCellFormatter.tsx
@@ -11,14 +11,14 @@ export default function SelectCellFormatter({ value, onChange }: SelectCellForma
   }
 
   return (
-    <label className="react-grid-checkbox-container checkbox-align">
+    <label className="rdg-checkbox-label">
       <input
         type="checkbox"
-        className="react-grid-checkbox"
+        className="rdg-checkbox-input"
         onChange={handleChange}
         checked={value}
       />
-      <span className="react-grid-checkbox-label" />
+      <div className="rdg-checkbox" />
     </label>
   );
 }
diff --git a/packages/react-data-grid/style/rdg-cell.less b/packages/react-data-grid/style/rdg-cell.less
index 1e4aaff261..3c052a10b7 100644
--- a/packages/react-data-grid/style/rdg-cell.less
+++ b/packages/react-data-grid/style/rdg-cell.less
@@ -1,68 +1,51 @@
-.react-grid-Cell {
+.rdg-cell {
+  display: inline-block;
   position: absolute;
-  background-color: #ffffff;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-right: 1px solid #eee;
-  border-bottom: 1px solid #dddddd;
-}
-
-.rdg-selected {
-  border: 2px solid #66afe9;
-}
+  height: inherit;
+  padding: 0 8px;
+  border-right: 1px solid @borderColor;
+  border-bottom: 1px solid @borderColor;
+  background-color: inherit;
 
-.rdg-selected-range {
-  border: 1px solid #66afe9;
-  background-color: #66afe930;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.react-grid-Cell--frozen {
+.rdg-cell-frozen {
   /* Should have a higher value than 1 to show in front of cell masks */
   z-index: 2;
-}
-.rdg-last--frozen {
-  border-right: 1px solid #dddddd;
-  box-shadow: 2px 0 5px -2px rgba(136, 136, 136, .3) !important;
-}
 
-/* cell which have tooltips need to have a higher z-index on hover so that the tooltip appears above the other cells*/
-.react-grid-Cell.has-tooltip:hover {
-  z-index: 1;
-}
+  &.has-tooltip:hover {
+    z-index: 3
+  }
 
-.react-grid-Cell.react-grid-Cell--frozen.has-tooltip:hover  {
-  z-index: 3
-}
+  &:last-child {
+    box-shadow: 2px 0 5px -2px rgba(136, 136, 136, .3);
+  }
 
-@supports (position: sticky) or (position: -webkit-sticky) {
-  .react-grid-Cell--frozen {
-    display: inline-block;
-    position: -webkit-sticky;
-    position: sticky;
+  @supports (position: sticky) or (position: -webkit-sticky) {
+    & {
+      position: -webkit-sticky;
+      position: sticky;
+    }
   }
 }
 
-.react-contextmenu--visible {
-  z-index: 1000;
+/* cell which have tooltips need to have a higher z-index on hover so that the tooltip appears above the other cells*/
+.rdg-cell.has-tooltip:hover {
+  z-index: 1;
 }
 
-.react-grid-Cell:not(.editing) .react-grid-Cell__value {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  height: inherit;
+.react-contextmenu--visible {
+  z-index: 1000;
 }
 
-.react-grid-Cell.readonly {
+.rdg-cell.readonly {
   background-color : black;
 }
 
-
-.react-grid-Cell:hover {
-  background: #eee;
-}
-
-.react-grid-cell .form-control-feedback {
+.rdg-cell .form-control-feedback {
   color: #a94442;
   position: absolute;
   top: 0px;
@@ -73,37 +56,27 @@
   height: 34px;
 }
 
-.react-grid-Row.row-selected .react-grid-Cell{
- background-color: #DBECFA;
-}
-
-.react-grid-Cell.editing {
+.rdg-cell.editing {
   padding: 0;
   overflow: visible !important;
 }
 
-.react-grid-Cell.editing .has-error input {
+.rdg-cell.editing .has-error input {
   border: 2px red solid !important;
   border-radius: 2px !important;
 }
 
-.react-grid-Cell__value ul {
+.rdg-cell-value ul {
   margin-top: 0;
   margin-bottom: 0;
   display: inline-block;
 }
 
-.react-grid-Cell__value .btn-sm {
+.rdg-cell-value .btn-sm {
   padding: 0;
 }
 
-.react-grid-Cell__container {
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.cell-tooltip .cell-tooltip-text {
+.rdg-cell-tooltip .rdg-cell-tooltip-text {
     white-space: normal;
     visibility: hidden;
     width: 150px;
@@ -120,12 +93,12 @@
     margin-left: -75px
 }
 
-.cell-tooltip:hover .cell-tooltip-text {
+.rdg-cell-tooltip:hover .rdg-cell-tooltip-text {
     visibility: visible;
     opacity: 0.8;
 }
 
-.cell-tooltip .cell-tooltip-text::after {
+.rdg-cell-tooltip .rdg-cell-tooltip-text::after {
     content: " ";
     position: absolute;
     bottom: 100%;  /* At the top of the tooltip */
@@ -185,23 +158,18 @@
    background: white;
 }
 
-.rdg-child-row-btn div {
-  font-size: 12px;
-  text-align:center;
-  line-height:19px;
+.rdg-child-row-btn .MuiSvgIcon-root {
+  font-size: 16px;
   color: grey;
-  height:20px;
-  width:20px;
-  position:absolute;
-  top:60%;
-  left:53%;
-  margin-top:-10px;
-  margin-left:-10px;
-
-}
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -8px;
+  margin-left: -8px;
 
-.rdg-child-row-btn .glyphicon-remove-sign:hover {
-  color: red;
+  &:hover {
+    color: red;
+  }
 }
 
 .rdg-cell-action {
@@ -268,3 +236,20 @@
   pointer-events: none;
   outline: none;
 }
+
+.rdg-filter-container {
+  display: flex;
+  height: inherit;
+  align-items: center;
+}
+
+.rdg-filter {
+  width: 100%;
+  padding: 4px;
+  font-size: 14px;
+}
+
+.rdg-filter-badge {
+  cursor: help;
+  padding-left: 4px;
+}
diff --git a/packages/react-data-grid/style/rdg-checkbox.less b/packages/react-data-grid/style/rdg-checkbox.less
index f4c4141296..9314dce126 100644
--- a/packages/react-data-grid/style/rdg-checkbox.less
+++ b/packages/react-data-grid/style/rdg-checkbox.less
@@ -1,58 +1,34 @@
-.react-grid-checkbox {
-    opacity: 0;
-    position: absolute;
-}
-
-.react-grid-checkbox, .react-grid-checkbox-label {
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
-}
-
-.react-grid-checkbox-label {
-    position: relative;
-}
-
-.react-grid-checkbox + .react-grid-checkbox-label:before {
-    content: '';
-    background: #fff;
-    border: 2px solid #ddd;
-    display: inline-block;
-    vertical-align: middle;
-    width: 20px;
-    height: 20px;
-    text-align: center;
-}
-
-.react-grid-checkbox:checked + .react-grid-checkbox-label:before {
+.rdg-checkbox-label {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.rdg-checkbox-input {
+  all: unset;
+  width: 0;
+  margin: 0;
+}
+
+.rdg-checkbox {
+  content: '';
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ddd;
+  background: #fff;
+
+  .rdg-checkbox-input:checked + & {
     background: #005295;
     box-shadow: inset 0px 0px 0px 4px #fff;
-}
-
-.react-grid-checkbox:focus + .react-grid-checkbox-label {
-  outline: 1px solid #ddd; /* focus style */
-}
-
-.react-grid-HeaderCell input[type='checkbox'] {
-  z-index: 99999;
-}
-
-.react-grid-checkbox-container {
-    display: block;
-    margin: 0;
-}
-.react-grid-HeaderCell > .react-grid-checkbox-container {
-    height: 100%
-}
-
-
-.react-grid-HeaderCell > .react-grid-checkbox-container > .react-grid-checkbox-label {
-   margin : 0;
-   position: relative;
-   top: 50%;
-   transform: translateY(-50%);
-}
+  }
 
-.checkbox-align {
-    text-align: center;
+  .rdg-checkbox-input:focus + & {
+    border-color: lighten(#005295, 40%);
+  }
 }
diff --git a/packages/react-data-grid/style/rdg-core.less b/packages/react-data-grid/style/rdg-core.less
index 8e9bdeb9a6..e2cea947cf 100644
--- a/packages/react-data-grid/style/rdg-core.less
+++ b/packages/react-data-grid/style/rdg-core.less
@@ -5,8 +5,9 @@
   // We set a stacking context so internal components don't render above external components.
   position: relative;
   z-index: 0;
-  border: 1px solid #ddd;
+  border: 1px solid @borderColor;
   .user-select();
+  font-size: 14px;
 
   *,
   *::before,
@@ -15,7 +16,7 @@
   }
 }
 
-.react-grid-Canvas {
+.rdg-viewport {
   position: relative;
   overflow-x: auto;
   overflow-y: scroll;
@@ -24,7 +25,7 @@
   will-change: transform;
 }
 
-.rdg-rows-container {
+.rdg-grid {
   // min-height is here to show the horizontal scrollbar when there are no rows
   min-height: 1px;
 }
diff --git a/packages/react-data-grid/style/rdg-editor.less b/packages/react-data-grid/style/rdg-editor.less
new file mode 100644
index 0000000000..cf3931b509
--- /dev/null
+++ b/packages/react-data-grid/style/rdg-editor.less
@@ -0,0 +1,26 @@
+.rdg-editor-container {
+  position: absolute;
+}
+
+.rdg-text-editor,
+.rdg-select-editor {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  box-sizing: border-box;
+  width: calc(100% + 1px);
+  height: calc(100% + 1px);
+  padding: 1px 7px 0 7px;
+  margin: -1px 0 0 -1px;
+  border: 2px solid #ccc;
+  background-color: #fff;
+
+  font-size: 14px;
+  line-height: 1.2;
+  .placeholder-color(#999);
+
+  &:focus {
+    border-color: #66afe9;
+  }
+}
diff --git a/packages/react-data-grid/style/rdg-header.less b/packages/react-data-grid/style/rdg-header.less
index 9e643f5f72..d8ae523ce8 100644
--- a/packages/react-data-grid/style/rdg-header.less
+++ b/packages/react-data-grid/style/rdg-header.less
@@ -1,30 +1,14 @@
 @import './variables.less';
 
-.react-grid-Header {
-  box-shadow: 0 0 4px 0 #ddd;
+.rdg-header {
   background: #f9f9f9;
-}
-
-.react-grid-Header--resizing {
-  cursor: ew-resize;
-}
-
-.react-grid-HeaderRow {
-  position: relative;
   overflow: hidden;
-  .user-select();
+  font-weight: bold;
 }
 
-.react-grid-HeaderCell {
-  position: absolute;
-  padding: 8px;
-  margin: 0;
-  font-weight: bold;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background: #f9f9f9;
-  border-right: 1px solid #dddddd;
-  border-bottom: 1px solid #dddddd;
+.rdg-header-row {
+  position: relative;
+  background-color: inherit;
   .user-select();
 }
 
@@ -38,97 +22,96 @@
   width: 10px;
 }
 
-.react-grid-HeaderCell--frozen:last-of-type {
-    box-shadow: 2px 0 5px -2px rgba(136, 136, 136, .3);
-}
-
-.rdg-can-drop > .react-grid-HeaderCell {
-  background: #ececec;
-}
-
-.react-grid-HeaderCell .Select {
+.rdg-cell .Select {
     max-height: 30px;
     font-size: 12px;
     font-weight: normal;
 }
 
-.react-grid-HeaderCell .Select-control {
+.rdg-cell .Select-control {
     max-height: 30px;
     border: 1px solid #cccccc;
     color: #555;
     border-radius: 3px;
 }
 
-.react-grid-HeaderCell .is-focused:not(.is-open) > .Select-control {
+.rdg-cell .is-focused:not(.is-open) > .Select-control {
     border-color: #66afe9;
     outline: 0;
     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
 }
 
-.react-grid-HeaderCell .Select-control .Select-placeholder {
+.rdg-cell .Select-control .Select-placeholder {
     line-height: 20px;
     color: #999;
     padding: 4px;
 }
 
-.react-grid-HeaderCell .Select-control .Select-input {
+.rdg-cell .Select-control .Select-input {
     max-height: 28px;
     padding: 4px;
     margin-left: 0px
 }
 
-.react-grid-HeaderCell .Select-control .Select-input input {
+.rdg-cell .Select-control .Select-input input {
     padding: 0px;
     height: 100%;
 }
 
-.react-grid-HeaderCell .Select-control .Select-arrow-zone .Select-arrow {
+.rdg-cell .Select-control .Select-arrow-zone .Select-arrow {
     border-color: gray transparent transparent;
     border-width: 4px 4px 2.5px;
 }
 
 
-.react-grid-HeaderCell .Select-control .Select-value {
+.rdg-cell .Select-control .Select-value {
     padding: 4px;
     line-height: 20px !important;
 }
 
-.react-grid-HeaderCell .Select--multi .Select-control .Select-value {
+.rdg-cell .Select--multi .Select-control .Select-value {
     padding: 0px;
     line-height: 16px !important;
     max-height: 20px;
 }
 
-.react-grid-HeaderCell .Select--multi .Select-control .Select-value .Select-value-icon {
+.rdg-cell .Select--multi .Select-control .Select-value .Select-value-icon {
     max-height: 20px;
 }
 
-.react-grid-HeaderCell .Select--multi .Select-control .Select-value .Select-value-label {
+.rdg-cell .Select--multi .Select-control .Select-value .Select-value-label {
     max-height: 20px;
 }
 
-.react-grid-HeaderCell .Select-control .Select-value .Select-value-label {
+.rdg-cell .Select-control .Select-value .Select-value-label {
     color: #555555 !important;
 }
 
-.react-grid-HeaderCell .Select-menu-outer {
+.rdg-cell .Select-menu-outer {
   z-index: 2;
 }
 
-.react-grid-HeaderCell .Select-menu-outer .Select-option {
+.rdg-cell .Select-menu-outer .Select-option {
     padding: 4px;
     line-height: 20px;
 }
 
-.react-grid-HeaderCell .Select-menu-outer .Select-menu .Select-option.is-selected {
+.rdg-cell .Select-menu-outer .Select-menu .Select-option.is-selected {
     color: #555555;
 }
 
-.react-grid-HeaderCell .Select-menu-outer .Select-menu .Select-option.is-focused {
+.rdg-cell .Select-menu-outer .Select-menu .Select-option.is-focused {
     color: #555555;
 }
 
-.rdg-sortable-header-cell {
+.rdg-header-sort-cell {
   cursor: pointer;
+  display: flex;
+}
+
+.rdg-header-sort-name {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
diff --git a/packages/react-data-grid/style/rdg-interaction-masks.less b/packages/react-data-grid/style/rdg-interaction-masks.less
index 339b2bae70..64dcfd0224 100644
--- a/packages/react-data-grid/style/rdg-interaction-masks.less
+++ b/packages/react-data-grid/style/rdg-interaction-masks.less
@@ -28,8 +28,9 @@
   border: 1px solid #66afe9;
 }
 
-.rdg-selected:hover .drag-handle .glyphicon-arrow-down {
-  display: 'block'
+.rdg-selected-range {
+  border: 1px solid #66afe9;
+  background-color: #66afe930;
 }
 
 .react-grid-cell-dragged-over-up, .react-grid-cell-dragged-over-down {
@@ -48,54 +49,3 @@
 .react-grid-cell-copied {
   background: rgba(0, 0, 255, 0.2) !important;
 }
-
-.rdg-editor-container {
-  position: absolute;
-  z-index: 2;
-}
-
-.rdg-editor-container input.editor-main,
-select.editor-main {
-  display: block;
-  width: 100%;
-  height: 34px;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  color: #555555;
-  background-color: #ffffff;
-  background-image: none;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-input.editor-main:focus,
-select.editor-main:focus {
-  border-color: #66afe9;
-  border: 2px solid #66afe9;
-  background: #eee;
-  border-radius: 4px;
-}
-
-.rdg-editor-container input.editor-main:-ms-input-placeholder,
-select.editor-main:-ms-input-placeholder {
-  color: #999999;
-}
-
-.rdg-editor-container input.editor-main::placeholder,
-select.editor-main::placeholder {
-  color: #999999;
-}
-
-.rdg-editor-container input.editor-main[disabled],
-select.editor-main[disabled],
-.rdg-editor-container input.editor-main[readonly],
-select.editor-main[readonly],
-fieldset[disabled] .rdg-editor-container input.editor-main,
-fieldset[disabled] select.editor-main {
-  cursor: not-allowed;
-  background-color: #eeeeee;
-  opacity: 1;
-}
diff --git a/packages/react-data-grid/style/rdg-row.less b/packages/react-data-grid/style/rdg-row.less
index 651ae40c12..3189043d19 100644
--- a/packages/react-data-grid/style/rdg-row.less
+++ b/packages/react-data-grid/style/rdg-row.less
@@ -1,71 +1,30 @@
-.react-grid-Row {
-  position: relative;
-}
-
-.react-grid-Row:hover .react-grid-Cell,
-.react-grid-Row.row-context-menu .react-grid-Cell {
-  background-color: #f9f9f9;
-}
-
-.react-grid-Row:hover .rdg-row-index {
-  display: none;
-}
+.rdg-row {
+  @bg: #fff;
+  background-color: @bg;
 
-.react-grid-Row:hover .rdg-actions-checkbox {
-  display: block;
+  &:hover {
+    background-color: darken(@bg, 4%);
+  }
 }
 
-.react-grid-Row:hover .rdg-drag-row-handle {
-  cursor: move; /* fallback if grab cursor is unsupported */
-  cursor: grab;
-  width: 12px;
-  height: 30px;
-  margin-left: 0px;
-  background-image: url("data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjlweCIgaGVpZ2h0PSIyOXB4IiB2aWV3Qm94PSIwIDAgOSAyOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkgKDMxNjY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5kcmFnIGljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQWN0dWFsaXNhdGlvbi12MiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkRlc2t0b3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNS4wMDAwMDAsIC0yNjIuMDAwMDAwKSIgZmlsbD0iI0Q4RDhEOCI+CiAgICAgICAgICAgIDxnIGlkPSJJbnRlcmFjdGlvbnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1LjAwMDAwMCwgMjU4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJvdy1Db250cm9scyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImRyYWctaWNvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMTIiIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjEyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjIiIGN5PSIxNyIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSI3IiBjeT0iMTciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iMiIgY3k9IjIyIiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zMCIgY3g9IjciIGN5PSIyMiIgcj0iMiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtMzAiIGN4PSIyIiBjeT0iMjciIHI9IjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMwIiBjeD0iNyIgY3k9IjI3IiByPSIyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==");
-  background-repeat: no-repeat;
-}
-
-.react-grid-Row.row-selected {
- background-color: #DBECFA;
-}
+.rdg-row-selected {
+  @bg: #dbecfa;
+  background-color: @bg;
 
-.react-grid-Row .row-selected {
- background-color: #DBECFA;
+  &:hover {
+    background-color: darken(@bg, 4%);
+  }
 }
 
-.row-expand-icon {
+.rdg-row-expand-icon {
   cursor: pointer;
-  float: left;
-}
-
-.react-grid-row-group .row-expand-icon:hover {
-  color: #777777;
-}
-
-.rdg-row-index {
-  display: block;
-  text-align: center;
-}
-
-.rdg-row-actions-cell {
-  padding: 0px;
-}
-
-.rdg-actions-checkbox {
-  display: none;
-  text-align: center;
-}
-
-.rdg-actions-checkbox.selected {
-  display: block;
-}
 
-.rdg-dragging {
-  cursor: grabbing;
+  &:hover {
+    color: #777;
+  }
 }
 
-.rdg-row-group-default {
-  padding-top: 15px;
-  padding-left: 5px;
-  border: 1px solid #ddd;
+.rdg-row-group {
+  padding: 0 8px;
+  border-bottom: 1px solid @borderColor;
 }
diff --git a/packages/react-data-grid/style/react-data-grid.less b/packages/react-data-grid/style/react-data-grid.less
index ff25dee049..74f55957ee 100644
--- a/packages/react-data-grid/style/react-data-grid.less
+++ b/packages/react-data-grid/style/react-data-grid.less
@@ -1,6 +1,7 @@
 @import 'rdg-cell.less';
 @import 'rdg-checkbox.less';
 @import 'rdg-core.less';
+@import 'rdg-editor.less';
 @import 'rdg-header.less';
 @import 'rdg-interaction-masks.less';
 @import 'rdg-row.less';
diff --git a/packages/react-data-grid/style/variables.less b/packages/react-data-grid/style/variables.less
index 388b69a3e8..4955d70b33 100644
--- a/packages/react-data-grid/style/variables.less
+++ b/packages/react-data-grid/style/variables.less
@@ -1,6 +1,24 @@
+@borderColor: #ddd;
+
 .user-select(@value: none) {
   -webkit-user-select: @value;
   -moz-user-select: @value;
   -ms-user-select: @value;
   user-select: @value;
 }
+
+.placeholder-color(@color) {
+  &::placeholder {
+    color: @color;
+    opacity: 1;
+  }
+
+  // IE
+  &:-ms-input-placeholder {
+    color: @color;
+  }
+  // Edge
+  &::-ms-input-placeholder {
+    color: @color;
+  }
+}
diff --git a/test/iconsMock.ts b/test/iconsMock.ts
new file mode 100644
index 0000000000..96fc94c962
--- /dev/null
+++ b/test/iconsMock.ts
@@ -0,0 +1,7 @@
+module.exports = new Proxy({}, {
+  get(obj, prop) {
+    if (prop === '__esModule') return false;
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require(`@material-ui/icons/${prop as string}`).default;
+  }
+});