diff --git a/examples/scripts/example08-sortable-cols.js b/examples/scripts/example08-sortable-cols.js
index 4beaf961bd..8d9f279958 100644
--- a/examples/scripts/example08-sortable-cols.js
+++ b/examples/scripts/example08-sortable-cols.js
@@ -87,7 +87,7 @@ class Example extends React.Component {
 
     const rows = sortDirection === 'NONE' ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer);
 
-    this.setState({ rows });
+    this.setState({ rows, sortColumn, sortDirection });
   };
 
   rowGetter = (i) => {
@@ -101,6 +101,8 @@ class Example extends React.Component {
         columns={this._columns}
         rowGetter={this.rowGetter}
         rowsCount={this.state.rows.length}
+        sortDirection={this.state.sortDirection}
+        sortColumn={this.state.sortColumn}
         minHeight={500}
       />
     );
diff --git a/examples/scripts/example16-filterable-sortable-grid.js b/examples/scripts/example16-filterable-sortable-grid.js
index 12c47d979d..dacdeff19d 100644
--- a/examples/scripts/example16-filterable-sortable-grid.js
+++ b/examples/scripts/example16-filterable-sortable-grid.js
@@ -112,6 +112,8 @@ class Example extends React.Component {
     return (
       <ReactDataGrid
         onGridSort={this.handleGridSort}
+        sortDirection={this.state.sortDirection}
+        sortColumn={this.state.sortColumn}
         enableCellSelect
         columns={this._columns}
         rowGetter={this.rowGetter}
diff --git a/examples/scripts/example29-descendingFirstSortable.js b/examples/scripts/example29-descendingFirstSortable.js
index 56e6369fae..5b22c601a9 100644
--- a/examples/scripts/example29-descendingFirstSortable.js
+++ b/examples/scripts/example29-descendingFirstSortable.js
@@ -88,7 +88,7 @@ class Example extends React.Component {
 
     const rows = sortDirection === 'NONE' ? this.state.originalRows.slice(0) : this.state.rows.sort(comparer);
 
-    this.setState({ rows });
+    this.setState({ rows, sortColumn, sortDirection });
   };
 
   rowGetter = (i) => {
@@ -102,6 +102,8 @@ class Example extends React.Component {
         columns={this._columns}
         rowGetter={this.rowGetter}
         rowsCount={this.state.rows.length}
+        sortDirection={this.state.sortDirection}
+        sortColumn={this.state.sortColumn}
         minHeight={500}
       />
     );
diff --git a/packages/react-data-grid/src/Grid.tsx b/packages/react-data-grid/src/Grid.tsx
index 49e78a427d..f013698a84 100644
--- a/packages/react-data-grid/src/Grid.tsx
+++ b/packages/react-data-grid/src/Grid.tsx
@@ -27,6 +27,8 @@ type SharedDataGridProps<R> = Pick<ReactDataGridProps<R>,
 | 'enableIsScrolling'
 | 'selectedRows'
 | 'onSelectedRowsChange'
+| 'sortColumn'
+| 'sortDirection'
 > & Required<Pick<ReactDataGridProps<R>,
 | 'rowKey'
 | 'enableCellSelect'
@@ -35,19 +37,16 @@ type SharedDataGridProps<R> = Pick<ReactDataGridProps<R>,
 | 'cellNavigationMode'
 | 'enableCellAutoFocus'
 | 'editorPortalTarget'
->> & {
-  sortColumn?: keyof R;
-  sortDirection?: DEFINE_SORT;
-  columnMetrics: ColumnMetrics<R>;
-};
+>>;
 
 export interface GridProps<R> extends SharedDataGridProps<R> {
+  columnMetrics: ColumnMetrics<R>;
   headerRows: [HeaderRowData<R>, HeaderRowData<R> | undefined];
   cellMetaData: CellMetaData<R>;
   rowOffsetHeight: number;
   eventBus: EventBus;
   interactionMasksMetaData: InteractionMasksMetaData<R>;
-  onSort(columnKey: keyof R, sortDirection: DEFINE_SORT): void;
+  onSort?(columnKey: keyof R, direction: DEFINE_SORT): void;
   onViewportKeydown?(e: React.KeyboardEvent<HTMLDivElement>): void;
   onViewportKeyup?(e: React.KeyboardEvent<HTMLDivElement>): void;
   onColumnResize(idx: number, width: number): void;
diff --git a/packages/react-data-grid/src/ReactDataGrid.tsx b/packages/react-data-grid/src/ReactDataGrid.tsx
index c544d3b7ae..175f6e8eff 100644
--- a/packages/react-data-grid/src/ReactDataGrid.tsx
+++ b/packages/react-data-grid/src/ReactDataGrid.tsx
@@ -192,8 +192,6 @@ const ReactDataGridBase = forwardRef(function ReactDataGrid<R extends {}>({
   ...props
 }: ReactDataGridProps<R>, ref: React.Ref<ReactDataGridHandle>) {
   const [canFilter, setCanFilter] = useState(false);
-  const [sortColumn, setSortColumn] = useState(props.sortColumn);
-  const [sortDirection, setSortDirection] = useState(props.sortDirection);
   const [columnWidths, setColumnWidths] = useState(() => new Map<keyof R, number>());
   const [eventBus] = useState(() => new EventBus());
   const [gridWidth, setGridWidth] = useState(0);
@@ -326,14 +324,6 @@ const ReactDataGridBase = forwardRef(function ReactDataGrid<R extends {}>({
     handleGridRowsUpdated(commit.cellKey, targetRow, targetRow, commit.updated, UpdateActions.CELL_UPDATE);
   }
 
-  function handleSort(sortColumn: keyof R, sortDirection: DEFINE_SORT) {
-    setSortColumn(sortColumn);
-    setSortDirection(sortDirection);
-    if (props.onGridSort) {
-      props.onGridSort(sortColumn, sortDirection);
-    }
-  }
-
   function getHeaderRows(): [HeaderRowData<R>, HeaderRowData<R> | undefined] {
     const { headerRowHeight, onAddFilter } = props;
     return [
@@ -424,9 +414,9 @@ const ReactDataGridBase = forwardRef(function ReactDataGrid<R extends {}>({
           selectedRows={selectedRows}
           onSelectedRowsChange={onSelectedRowsChange}
           rowOffsetHeight={rowOffsetHeight}
-          sortColumn={sortColumn}
-          sortDirection={sortDirection}
-          onSort={handleSort}
+          sortColumn={props.sortColumn}
+          sortDirection={props.sortDirection}
+          onSort={props.onGridSort}
           minHeight={minHeight}
           onViewportKeydown={props.onGridKeyDown}
           onViewportKeyup={props.onGridKeyUp}
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 269c30330e..961bc331f0 100644
--- a/packages/react-data-grid/src/common/cells/headerCells/SortableHeaderCell.tsx
+++ b/packages/react-data-grid/src/common/cells/headerCells/SortableHeaderCell.tsx
@@ -12,7 +12,7 @@ const SORT_TEXT = {
 export interface Props<R> {
   column: CalculatedColumn<R>;
   rowType: HeaderRowType;
-  onSort(columnKey: keyof R, direction: DEFINE_SORT): void;
+  onSort?(columnKey: keyof R, direction: DEFINE_SORT): void;
   sortDirection: DEFINE_SORT;
   sortDescendingFirst: boolean;
   allRowsSelected: boolean;
@@ -22,6 +22,7 @@ export interface Props<R> {
 export default function SortableHeaderCell<R>(props: Props<R>) {
   const { column, rowType, onSort, sortDirection, sortDescendingFirst, allRowsSelected, onAllRowsSelectionChange } = props;
   function onClick() {
+    if (!onSort) return;
     let direction;
     switch (sortDirection) {
       case DEFINE_SORT.ASC: