diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3146ff8c83e5..b62402f390ec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.64](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.64) (2020-07-27)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
+## [0.1.63](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.63) (2020-07-27)
+
+**Note:** Version bump only for package material-ui-x
+
+
+
+
+
 ## [0.1.62](https://github.com/mui-org/material-ui-x/compare/v0.1.61...v0.1.62) (2020-07-22)
 
 **Note:** Version bump only for package material-ui-x
diff --git a/lerna.json b/lerna.json
index 545d26456e3a..a63fda0bdef1 100644
--- a/lerna.json
+++ b/lerna.json
@@ -6,7 +6,7 @@
     }
   },
   "packages": ["!packages/grid", "packages/*", "packages/grid/*"],
-  "version": "0.1.62",
+  "version": "0.1.64",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
index 29ef66ffe37b..77eaaf23b5b7 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.4.0",
-    "eslint-config-airbnb-typescript": "^8.0.2",
+    "eslint-config-airbnb-typescript": "^9.0.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
diff --git a/packages/demo-app/CHANGELOG.md b/packages/demo-app/CHANGELOG.md
index ec67b15720c7..8cb09c7798c1 100644
--- a/packages/demo-app/CHANGELOG.md
+++ b/packages/demo-app/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.64](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.64) (2020-07-27)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
+## [0.1.63](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.63) (2020-07-27)
+
+**Note:** Version bump only for package demo-app
+
+
+
+
+
 ## [0.1.62](https://github.com/mui-org/material-ui-x/compare/v0.1.61...v0.1.62) (2020-07-22)
 
 **Note:** Version bump only for package demo-app
diff --git a/packages/demo-app/package.json b/packages/demo-app/package.json
index 692bd88667b0..60eb79d41b91 100644
--- a/packages/demo-app/package.json
+++ b/packages/demo-app/package.json
@@ -1,12 +1,12 @@
 {
   "name": "demo-app",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.9.12",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.54",
-    "@material-ui/x-grid": "^0.1.62",
+    "@material-ui/x-grid": "^0.1.64",
     "@material-ui/x-grid-data-generator": "^0.1.62",
     "@trendmicro/react-interpolate": "^0.5.5",
     "react": "^16.13.1",
diff --git a/packages/demo-app/public/ag-logo.png b/packages/demo-app/public/ag-logo.png
index 9a2df080f53d..0369afd54cba 100644
Binary files a/packages/demo-app/public/ag-logo.png and b/packages/demo-app/public/ag-logo.png differ
diff --git a/packages/demo-app/public/aggrid.png b/packages/demo-app/public/aggrid.png
index a1966c13703d..5a8cabeac7b2 100644
Binary files a/packages/demo-app/public/aggrid.png and b/packages/demo-app/public/aggrid.png differ
diff --git a/packages/demo-app/public/android-icon-144x144.png b/packages/demo-app/public/android-icon-144x144.png
index ba9ec2131dcc..7f81327d260d 100644
Binary files a/packages/demo-app/public/android-icon-144x144.png and b/packages/demo-app/public/android-icon-144x144.png differ
diff --git a/packages/demo-app/public/android-icon-192x192.png b/packages/demo-app/public/android-icon-192x192.png
index d8e64e3d8e9d..62da11cb6e60 100644
Binary files a/packages/demo-app/public/android-icon-192x192.png and b/packages/demo-app/public/android-icon-192x192.png differ
diff --git a/packages/demo-app/public/android-icon-36x36.png b/packages/demo-app/public/android-icon-36x36.png
index 4f0aca2e6339..ee0eb5489a99 100644
Binary files a/packages/demo-app/public/android-icon-36x36.png and b/packages/demo-app/public/android-icon-36x36.png differ
diff --git a/packages/demo-app/public/android-icon-48x48.png b/packages/demo-app/public/android-icon-48x48.png
index 919db060fdf7..cb1bc9709f35 100644
Binary files a/packages/demo-app/public/android-icon-48x48.png and b/packages/demo-app/public/android-icon-48x48.png differ
diff --git a/packages/demo-app/public/android-icon-72x72.png b/packages/demo-app/public/android-icon-72x72.png
index ae703fc30dfd..baa18dc4252f 100644
Binary files a/packages/demo-app/public/android-icon-72x72.png and b/packages/demo-app/public/android-icon-72x72.png differ
diff --git a/packages/demo-app/public/android-icon-96x96.png b/packages/demo-app/public/android-icon-96x96.png
index 3d1442d641c2..b1682d7e05df 100644
Binary files a/packages/demo-app/public/android-icon-96x96.png and b/packages/demo-app/public/android-icon-96x96.png differ
diff --git a/packages/demo-app/public/apple-icon-114x114.png b/packages/demo-app/public/apple-icon-114x114.png
index 222bf4c1ff66..7d95a1fd09a4 100644
Binary files a/packages/demo-app/public/apple-icon-114x114.png and b/packages/demo-app/public/apple-icon-114x114.png differ
diff --git a/packages/demo-app/public/apple-icon-120x120.png b/packages/demo-app/public/apple-icon-120x120.png
index 52899a415ec7..9998848e6015 100644
Binary files a/packages/demo-app/public/apple-icon-120x120.png and b/packages/demo-app/public/apple-icon-120x120.png differ
diff --git a/packages/demo-app/public/apple-icon-144x144.png b/packages/demo-app/public/apple-icon-144x144.png
index ba9ec2131dcc..7f81327d260d 100644
Binary files a/packages/demo-app/public/apple-icon-144x144.png and b/packages/demo-app/public/apple-icon-144x144.png differ
diff --git a/packages/demo-app/public/apple-icon-152x152.png b/packages/demo-app/public/apple-icon-152x152.png
index dcb8ab87a1c5..b12ad4aaef56 100644
Binary files a/packages/demo-app/public/apple-icon-152x152.png and b/packages/demo-app/public/apple-icon-152x152.png differ
diff --git a/packages/demo-app/public/apple-icon-180x180.png b/packages/demo-app/public/apple-icon-180x180.png
index 13c4c34bb4b0..e7a459ac7ac6 100644
Binary files a/packages/demo-app/public/apple-icon-180x180.png and b/packages/demo-app/public/apple-icon-180x180.png differ
diff --git a/packages/demo-app/public/apple-icon-57x57.png b/packages/demo-app/public/apple-icon-57x57.png
index 50a7ca670f06..fbacc64d37fc 100644
Binary files a/packages/demo-app/public/apple-icon-57x57.png and b/packages/demo-app/public/apple-icon-57x57.png differ
diff --git a/packages/demo-app/public/apple-icon-60x60.png b/packages/demo-app/public/apple-icon-60x60.png
index b01cd02dbe69..f494b2b7585e 100644
Binary files a/packages/demo-app/public/apple-icon-60x60.png and b/packages/demo-app/public/apple-icon-60x60.png differ
diff --git a/packages/demo-app/public/apple-icon-72x72.png b/packages/demo-app/public/apple-icon-72x72.png
index ae703fc30dfd..baa18dc4252f 100644
Binary files a/packages/demo-app/public/apple-icon-72x72.png and b/packages/demo-app/public/apple-icon-72x72.png differ
diff --git a/packages/demo-app/public/apple-icon-76x76.png b/packages/demo-app/public/apple-icon-76x76.png
index ee6f19146389..58513889a4ea 100644
Binary files a/packages/demo-app/public/apple-icon-76x76.png and b/packages/demo-app/public/apple-icon-76x76.png differ
diff --git a/packages/demo-app/public/apple-icon-precomposed.png b/packages/demo-app/public/apple-icon-precomposed.png
index 5159702c5b91..62da11cb6e60 100644
Binary files a/packages/demo-app/public/apple-icon-precomposed.png and b/packages/demo-app/public/apple-icon-precomposed.png differ
diff --git a/packages/demo-app/public/apple-icon.png b/packages/demo-app/public/apple-icon.png
index 5159702c5b91..62da11cb6e60 100644
Binary files a/packages/demo-app/public/apple-icon.png and b/packages/demo-app/public/apple-icon.png differ
diff --git a/packages/demo-app/public/favicon-16x16.png b/packages/demo-app/public/favicon-16x16.png
index 7dd27201c5f7..84019a4b0185 100644
Binary files a/packages/demo-app/public/favicon-16x16.png and b/packages/demo-app/public/favicon-16x16.png differ
diff --git a/packages/demo-app/public/favicon-32x32.png b/packages/demo-app/public/favicon-32x32.png
index 57d1ec61cdb9..ef5ae72afcf8 100644
Binary files a/packages/demo-app/public/favicon-32x32.png and b/packages/demo-app/public/favicon-32x32.png differ
diff --git a/packages/demo-app/public/favicon-96x96.png b/packages/demo-app/public/favicon-96x96.png
index 3d1442d641c2..b1682d7e05df 100644
Binary files a/packages/demo-app/public/favicon-96x96.png and b/packages/demo-app/public/favicon-96x96.png differ
diff --git a/packages/demo-app/public/logo192.png b/packages/demo-app/public/logo192.png
index fc44b0a3796c..bd3dc81a983c 100644
Binary files a/packages/demo-app/public/logo192.png and b/packages/demo-app/public/logo192.png differ
diff --git a/packages/demo-app/public/logo512.png b/packages/demo-app/public/logo512.png
index a4e47a6545bc..f0f2cbcfc2c9 100644
Binary files a/packages/demo-app/public/logo512.png and b/packages/demo-app/public/logo512.png differ
diff --git a/packages/demo-app/public/ms-icon-144x144.png b/packages/demo-app/public/ms-icon-144x144.png
index ba9ec2131dcc..7f81327d260d 100644
Binary files a/packages/demo-app/public/ms-icon-144x144.png and b/packages/demo-app/public/ms-icon-144x144.png differ
diff --git a/packages/demo-app/public/ms-icon-150x150.png b/packages/demo-app/public/ms-icon-150x150.png
index e649d9bf984c..ac12badedd37 100644
Binary files a/packages/demo-app/public/ms-icon-150x150.png and b/packages/demo-app/public/ms-icon-150x150.png differ
diff --git a/packages/demo-app/public/ms-icon-310x310.png b/packages/demo-app/public/ms-icon-310x310.png
index c77d0872ef54..544e5aeb1f7b 100644
Binary files a/packages/demo-app/public/ms-icon-310x310.png and b/packages/demo-app/public/ms-icon-310x310.png differ
diff --git a/packages/demo-app/public/ms-icon-70x70.png b/packages/demo-app/public/ms-icon-70x70.png
index a4a4aa46dd19..98942aa3067a 100644
Binary files a/packages/demo-app/public/ms-icon-70x70.png and b/packages/demo-app/public/ms-icon-70x70.png differ
diff --git a/packages/demo-app/public/storybook.png b/packages/demo-app/public/storybook.png
index ecfd4464c90f..a075e1e44812 100644
Binary files a/packages/demo-app/public/storybook.png and b/packages/demo-app/public/storybook.png differ
diff --git a/packages/demo-app/src/app/demos/grid/components/settings-panel.tsx b/packages/demo-app/src/app/demos/grid/components/settings-panel.tsx
index 8c0d8c09f23d..76999ba1e6c2 100644
--- a/packages/demo-app/src/app/demos/grid/components/settings-panel.tsx
+++ b/packages/demo-app/src/app/demos/grid/components/settings-panel.tsx
@@ -6,7 +6,6 @@ import Button from '@material-ui/core/Button';
 import FormLabel from '@material-ui/core/FormLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
-import { useContext } from 'react';
 import { darkThemeId, lightThemeId, ThemeContext } from '../../theme';
 import { StyledPanels } from './styled-panel';
 
@@ -24,7 +23,7 @@ export interface SettingsPanelProps {
 export const SettingsPanel: React.FC<SettingsPanelProps> = ({ onApply, type, size }) => {
   const [sizeState, setSize] = React.useState<number>(size);
   const [typeState, setType] = React.useState<string>(type);
-  const currentTheme = useContext(ThemeContext);
+  const currentTheme = React.useContext(ThemeContext);
   const [selectedTheme, setSelectedTheme] = React.useState<string>(currentTheme.theme);
   const [selectedPaginationValue, setSelectedPaginationValue] = React.useState<number>(-1);
 
@@ -61,17 +60,17 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ onApply, type, siz
 
   return (
     <StyledPanels>
-      {/* <Panel title={'Settings'}> */}
-      <div className={'panel'}>
-        <FormGroup row className={'center'}>
-          <FormControl className={'dataset-control input-text'} size={'small'} component="fieldset">
+      {/* <Panel title="Settings"> */}
+      <div className="panel">
+        <FormGroup row className="center">
+          <FormControl className="dataset-control input-text" size="small" component="fieldset">
             <FormLabel component="legend">Dataset</FormLabel>
             <Select value={typeState} onChange={onDatasetChange}>
-              <MenuItem value={'employee'}>Employee</MenuItem>
-              <MenuItem value={'commodity'}>Commodity</MenuItem>
+              <MenuItem value="employee">Employee</MenuItem>
+              <MenuItem value="commodity">Commodity</MenuItem>
             </Select>
           </FormControl>
-          <FormControl className={'dataset-control input-text'} size={'small'} component="fieldset">
+          <FormControl className="dataset-control input-text" size="small" component="fieldset">
             <FormLabel component="legend">Rows</FormLabel>
             <Select value={sizeState} onChange={onSizeChange}>
               <MenuItem value={100}>100</MenuItem>
@@ -80,7 +79,7 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ onApply, type, siz
               <MenuItem value={100000}>{Number(100000).toLocaleString()}</MenuItem>
             </Select>
           </FormControl>
-          <FormControl className={'dataset-control input-text'} size={'small'} component="fieldset">
+          <FormControl className="dataset-control input-text" size="small" component="fieldset">
             <FormLabel component="legend">Page Size</FormLabel>
             <Select value={selectedPaginationValue} onChange={onPaginationChange}>
               <MenuItem value={-1}>off</MenuItem>
@@ -91,8 +90,8 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ onApply, type, siz
             </Select>
           </FormControl>
           <FormControl
-            className={'dataset-control input-text'}
-            size={'small'}
+            className="dataset-control input-text"
+            size="small"
             component="fieldset"
             style={{ display: 'none' }}
           >
@@ -105,12 +104,12 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({ onApply, type, siz
           <div>
             <Button
               size="small"
-              className={'apply-btn'}
-              variant={'outlined'}
-              color={'primary'}
+              className="apply-btn"
+              variant="outlined"
+              color="primary"
               onClick={applyChanges}
             >
-              <KeyboardArrowRightIcon fontSize={'small'} /> Apply
+              <KeyboardArrowRightIcon fontSize="small" /> Apply
             </Button>
           </div>
         </FormGroup>
diff --git a/packages/demo-app/src/app/demos/grid/real-data-grid.demo.tsx b/packages/demo-app/src/app/demos/grid/real-data-grid.demo.tsx
index f5e4eeab18c0..74673a1c77ad 100644
--- a/packages/demo-app/src/app/demos/grid/real-data-grid.demo.tsx
+++ b/packages/demo-app/src/app/demos/grid/real-data-grid.demo.tsx
@@ -100,15 +100,15 @@ export const RealDataGridDemo: React.FC<{ toggleTheme: () => void; themeId: stri
 
     const newPagination: Partial<GridOptions> = {
       pagination: settings.pagesize !== -1,
-      paginationAutoPageSize: settings.pagesize === 0,
-      paginationPageSize: settings.pagesize > 0 ? settings.pagesize : undefined,
+      autoPageSize: settings.pagesize === 0,
+      pageSize: settings.pagesize > 0 ? settings.pagesize : undefined,
     };
 
     setPagination((p) => {
       if (
         p.pagination === newPagination.pagination &&
-        p.paginationAutoPageSize === newPagination.paginationAutoPageSize &&
-        p.paginationPageSize === newPagination.paginationPageSize
+        p.autoPageSize === newPagination.autoPageSize &&
+        p.pageSize === newPagination.pageSize
       ) {
         return p;
       }
@@ -118,12 +118,12 @@ export const RealDataGridDemo: React.FC<{ toggleTheme: () => void; themeId: stri
 
   return (
     <React.Fragment>
-      <AppBreadcrumbs name={'NEW* Material-UI X Grid'} />
+      <AppBreadcrumbs name="NEW* Material-UI X Grid" />
       <SettingsPanel onApply={onApplyClick} size={size} type={type} />
 
       <MainContainer>
-        <div style={{ display: 'flex', boxSizing: 'border-box' }} className={'fill-space'}>
-          <div className={'grow'}>
+        <div style={{ display: 'flex', boxSizing: 'border-box' }} className="fill-space">
+          <div className="grow">
             <XGrid
               rows={rows as any}
               columns={cols as any}
diff --git a/packages/demo-app/src/app/demos/theme/useTheme.ts b/packages/demo-app/src/app/demos/theme/useTheme.ts
index fea46074d736..028b6732ecf7 100644
--- a/packages/demo-app/src/app/demos/theme/useTheme.ts
+++ b/packages/demo-app/src/app/demos/theme/useTheme.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useLocalStorage } from '../utils/useLocalStorage';
 import { DEFAULT_THEME, STORAGE_THEME_KEY, ThemeValuePair } from './themeProvider';
 import { darkTheme } from './dark';
@@ -15,10 +15,10 @@ type ReturnType = {
 export function useTheme(): ReturnType {
   const [selectedThemeId, setSelectedTheme] = useLocalStorage(STORAGE_THEME_KEY, DEFAULT_THEME);
 
-  const [theme, setTheme] = useState(ThemeValuePair[selectedThemeId]);
-  const [isDark, setIsDark] = useState(theme.id === darkTheme.id);
+  const [theme, setTheme] = React.useState(ThemeValuePair[selectedThemeId]);
+  const [isDark, setIsDark] = React.useState(theme.id === darkTheme.id);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setIsDark(theme === darkTheme);
   }, [theme]);
 
diff --git a/packages/grid/data-grid/CHANGELOG.md b/packages/grid/data-grid/CHANGELOG.md
index 12a7df8e1914..0c4b298da693 100644
--- a/packages/grid/data-grid/CHANGELOG.md
+++ b/packages/grid/data-grid/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.64](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.64) (2020-07-27)
+
+**Note:** Version bump only for package @material-ui/data-grid
+
+
+
+
+
+## [0.1.63](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.63) (2020-07-27)
+
+**Note:** Version bump only for package @material-ui/data-grid
+
+
+
+
+
 ## [0.1.62](https://github.com/mui-org/material-ui-x/compare/v0.1.61...v0.1.62) (2020-07-22)
 
 **Note:** Version bump only for package @material-ui/data-grid
diff --git a/packages/grid/data-grid/package.json b/packages/grid/data-grid/package.json
index a0b9cbc007cc..6ae6418edbd2 100644
--- a/packages/grid/data-grid/package.json
+++ b/packages/grid/data-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/data-grid",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "description": "The Material-UI community edition of the data grid component.",
   "author": "Material-UI Team",
   "main": "dist/index-cjs.js",
@@ -13,16 +13,19 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
   "devDependencies": {
-    "@material-ui/x-grid-modules": "^0.1.62",
+    "@material-ui/x-grid-modules": "^0.1.64",
+    "@rollup/plugin-node-resolve": "^8.0.1",
     "rollup": "^2.6.1",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-command": "^1.1.3",
     "rollup-plugin-dts": "^1.4.7",
     "rollup-plugin-sourcemaps": "^0.6.2",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.27.1",
-    "tslib": "^2.0.0"
+    "rollup-plugin-typescript2": "^0.27.1"
   },
   "peerDependencies": {
     "@material-ui/core": "^4.9.12",
diff --git a/packages/grid/data-grid/rollup.config.js b/packages/grid/data-grid/rollup.config.js
index ef74b80bb937..38e4e9e771a8 100644
--- a/packages/grid/data-grid/rollup.config.js
+++ b/packages/grid/data-grid/rollup.config.js
@@ -34,7 +34,7 @@ export default [
         cleaner({
           targets: ['./dist/'],
         }),
-      typescript(),
+      typescript({ build: true }),
       !production && sourceMaps(),
       production && terser(),
     ],
diff --git a/packages/grid/data-grid/src/data-grid.tsx b/packages/grid/data-grid/src/data-grid.tsx
index 8498c60a4bae..0e5324d910c1 100644
--- a/packages/grid/data-grid/src/data-grid.tsx
+++ b/packages/grid/data-grid/src/data-grid.tsx
@@ -26,9 +26,9 @@ export const DataGrid: React.FC<DataGridProps> = React.memo(function DataGrid(
   props: DataGridProps,
 ) {
   const validateOptions = React.useCallback((options: DataGridOptionsProp) => {
-    if (options && options.paginationPageSize && options.paginationPageSize > MAX_PAGE_SIZE) {
+    if (options && options.pageSize && options.pageSize > MAX_PAGE_SIZE) {
       throw new Error(
-        `Material-UI: Option 'paginationPageSize' cannot be above ${MAX_PAGE_SIZE}. Use the @material-ui/x-grid to unlock this feature`,
+        `Material-UI: Option 'pageSize' cannot be above ${MAX_PAGE_SIZE}. Use the @material-ui/x-grid to unlock this feature`,
       );
     }
     return options;
diff --git a/packages/grid/data-grid/src/index.ts b/packages/grid/data-grid/src/index.ts
index 13b912ef1a7e..7134647a2cd5 100644
--- a/packages/grid/data-grid/src/index.ts
+++ b/packages/grid/data-grid/src/index.ts
@@ -1,5 +1,2 @@
-import { DataGrid } from './data-grid';
-
 export * from '@material-ui/x-grid-modules';
 export * from './data-grid';
-export const Grid = DataGrid;
diff --git a/packages/grid/x-grid-modules/CHANGELOG.md b/packages/grid/x-grid-modules/CHANGELOG.md
index 24c61bb30e88..d8cb0540dea5 100644
--- a/packages/grid/x-grid-modules/CHANGELOG.md
+++ b/packages/grid/x-grid-modules/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.64](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.64) (2020-07-27)
+
+**Note:** Version bump only for package @material-ui/x-grid-modules
+
+
+
+
+
+## [0.1.63](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.63) (2020-07-27)
+
+**Note:** Version bump only for package @material-ui/x-grid-modules
+
+
+
+
+
 ## [0.1.62](https://github.com/mui-org/material-ui-x/compare/v0.1.61...v0.1.62) (2020-07-22)
 
 **Note:** Version bump only for package @material-ui/x-grid-modules
diff --git a/packages/grid/x-grid-modules/lib/autosizer/index.js b/packages/grid/x-grid-modules/lib/autosizer/index.js
index 8bc89632485f..6f14ea801452 100644
--- a/packages/grid/x-grid-modules/lib/autosizer/index.js
+++ b/packages/grid/x-grid-modules/lib/autosizer/index.js
@@ -1,4 +1,4 @@
-import { createElement, PureComponent } from 'react';
+import * as React from 'react';
 
 /**
  * Detect Element Resize.
@@ -378,7 +378,7 @@ var AutoSizer = function (_React$PureComponent) {
         childParams.width = width;
       }
 
-      return createElement(
+      return React.createElement(
         'div',
         {
           className: className,
@@ -389,7 +389,7 @@ var AutoSizer = function (_React$PureComponent) {
     }
   }]);
   return AutoSizer;
-}(PureComponent);
+}(React.PureComponent);
 
 AutoSizer.defaultProps = {
   onResize: function onResize() {},
diff --git a/packages/grid/x-grid-modules/lib/autosizer/types.d.ts b/packages/grid/x-grid-modules/lib/autosizer/types.d.ts
index 80a923fa0770..faed519745eb 100644
--- a/packages/grid/x-grid-modules/lib/autosizer/types.d.ts
+++ b/packages/grid/x-grid-modules/lib/autosizer/types.d.ts
@@ -11,31 +11,41 @@ export interface Size {
 }
 
 export interface AutoSizerProps {
-  /** Function responsible for rendering children. */
+  /**
+   * Function responsible for rendering children.
+   */
   children: (size: Size) => React.ReactNode;
-
-  /** Optional custom CSS class name to attach to root AutoSizer element.    */
+  /**
+   * Optional custom CSS class name to attach to root AutoSizer element.
+   */
   className?: string;
-
-  /** Default height to use for initial render; useful for SSR */
+  /**
+   * Default height to use for initial render; useful for SSR.
+   */
   defaultHeight?: number;
-
-  /** Default width to use for initial render; useful for SSR */
+  /**
+   * Default width to use for initial render; useful for SSR.
+   */
   defaultWidth?: number;
-
-  /** Disable dynamic :height property */
+  /**
+   * Disable dynamic :height property.
+   */
   disableHeight?: boolean;
-
-  /** Disable dynamic :width property */
+  /**
+   * Disable dynamic :width property.
+   */
   disableWidth?: boolean;
-
-  /** Nonce of the inlined stylesheet for Content Security Policy */
+  /**
+   * Nonce of the inlined stylesheet for Content Security Policy.
+   */
   nonce?: string;
-
-  /** Callback to be invoked on-resize */
+  /**
+   * Callback to be invoked on-resize.
+   */
   onResize?: (size: Size) => void;
-
-  /** Optional inline style */
+  /**
+   * Optional inline style.
+   */
   style?: React.CSSProperties;
 }
 
diff --git a/packages/grid/x-grid-modules/package.json b/packages/grid/x-grid-modules/package.json
index e55780157db7..7e186ecbc0b6 100644
--- a/packages/grid/x-grid-modules/package.json
+++ b/packages/grid/x-grid-modules/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/x-grid-modules",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "description": "Material-UI shared grid modules",
   "author": "Material-UI Team",
   "main": "dist/index-cjs.js",
diff --git a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx
index 070af522eb5c..e9e1616cbbe9 100644
--- a/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx
+++ b/packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import styled from 'styled-components';
-import { SelectionChangedParams } from '../models/params/selectionChangedParams';
+import { SelectionChangeParams } from '../models/params/selectionChangeParams';
 import { ColParams } from '../models/params/colParams';
 import { CellParams } from '../models/params/cellParams';
 
@@ -17,8 +17,8 @@ export const HeaderCheckbox: React.FC<ColParams> = React.memo(({ api }) => {
     setChecked(checked);
     api.selectRows(api.getAllRowIds(), checked);
   };
-  const selectionChanged = React.useCallback(
-    (event: SelectionChangedParams) => {
+  const selectionChange = React.useCallback(
+    (event: SelectionChangeParams) => {
       const isAllSelected =
         api.getAllRowIds().length === event.rows.length && event.rows.length > 0;
       const hasNoneSelected = event.rows.length === 0;
@@ -29,8 +29,8 @@ export const HeaderCheckbox: React.FC<ColParams> = React.memo(({ api }) => {
   );
 
   React.useEffect(() => {
-    return api.onSelectionChanged(selectionChanged);
-  }, [api, selectionChanged]);
+    return api.onSelectionChange(selectionChange);
+  }, [api, selectionChange]);
   return (
     <CheckboxInputContainer>
       <Checkbox
diff --git a/packages/grid/x-grid-modules/src/components/column-header-item.tsx b/packages/grid/x-grid-modules/src/components/column-header-item.tsx
index 8e87123a1c5e..688cf4ce4465 100644
--- a/packages/grid/x-grid-modules/src/components/column-header-item.tsx
+++ b/packages/grid/x-grid-modules/src/components/column-header-item.tsx
@@ -27,7 +27,12 @@ export const ColumnHeaderItem = React.memo(
 
     let headerComponent: React.ReactElement | null = null;
     if (column.renderHeader) {
-      headerComponent = column.renderHeader({ api: api!.current!, colDef: column, colIndex });
+      headerComponent = column.renderHeader({
+        api: api!.current!,
+        colDef: column,
+        colIndex,
+        field: column.field,
+      });
     }
 
     const onResize = onResizeColumn ? () => onResizeColumn(column) : undefined;
diff --git a/packages/grid/x-grid-modules/src/components/default-footer.tsx b/packages/grid/x-grid-modules/src/components/default-footer.tsx
index 6e6ee620660e..2a2062f4dc27 100644
--- a/packages/grid/x-grid-modules/src/components/default-footer.tsx
+++ b/packages/grid/x-grid-modules/src/components/default-footer.tsx
@@ -18,7 +18,7 @@ export const DefaultFooter = React.forwardRef<HTMLDivElement, DefaultFooterProps
 
     React.useEffect(() => {
       if (api && api.current) {
-        return api.current!.onSelectionChanged(({ rows }) => setSelectedCount(rows.length));
+        return api.current!.onSelectionChange(({ rows }) => setSelectedCount(rows.length));
       }
 
       return undefined;
diff --git a/packages/grid/x-grid-modules/src/components/row-cells.tsx b/packages/grid/x-grid-modules/src/components/row-cells.tsx
index ac584f7f896b..06ded208184e 100644
--- a/packages/grid/x-grid-modules/src/components/row-cells.tsx
+++ b/packages/grid/x-grid-modules/src/components/row-cells.tsx
@@ -1,37 +1,9 @@
 import * as React from 'react';
-import {
-  CellClassParams,
-  CellValue,
-  ColDef,
-  CellParams,
-  Columns,
-  GridApi,
-  RowModel,
-  ValueFormatterParams,
-  ValueGetterParams,
-  CellClassRules,
-} from '../models';
+import { CellClassParams, Columns, RowModel, CellClassRules, CellParams } from '../models';
 import { Cell, GridCellProps } from './cell';
 import { ApiContext } from './api-context';
 import { classnames, isFunction } from '../utils';
-
-function getCellParams(
-  rowModel: RowModel,
-  col: ColDef,
-  rowIndex: number,
-  value: CellValue,
-  api: GridApi,
-): CellParams {
-  return {
-    value,
-    getValue: (field: string) => rowModel.data[field],
-    data: rowModel.data,
-    rowModel,
-    colDef: col,
-    rowIndex,
-    api,
-  };
-}
+import { buildCellParams } from '../utils/paramsUtils';
 
 function applyCssClassRules(cellClassRules: CellClassRules, params: CellClassParams) {
   return Object.entries(cellClassRules).reduce((appliedCss, entry) => {
@@ -77,22 +49,22 @@ export const RowCells: React.FC<RowCellsProps> = React.memo((props) => {
       : !removeLastBorderRight && !props.extendRowFullWidth;
 
     let value = row.data[column.field!];
+    const cellParams: CellParams = buildCellParams({
+      rowModel: row,
+      colDef: column,
+      rowIndex,
+      value,
+      api: api!.current!,
+    });
+
     if (column.valueGetter) {
-      const params: ValueGetterParams = getCellParams(row, column, rowIndex, value, api!.current!);
       // Value getter override the original value
-      value = column.valueGetter(params);
+      value = column.valueGetter(cellParams);
     }
 
     let formattedValueProp = {};
     if (column.valueFormatter) {
-      const params: ValueFormatterParams = getCellParams(
-        row,
-        column,
-        rowIndex,
-        value,
-        api!.current!,
-      );
-      formattedValueProp = { formattedValue: column.valueFormatter(params) };
+      formattedValueProp = { formattedValue: column.valueFormatter(cellParams) };
     }
 
     let cssClassProp = { cssClass: '' };
@@ -100,21 +72,18 @@ export const RowCells: React.FC<RowCellsProps> = React.memo((props) => {
       if (!isFunction(column.cellClassName)) {
         cssClassProp = { cssClass: classnames(column.cellClassName) };
       } else {
-        const params: CellClassParams = getCellParams(row, column, rowIndex, value, api!.current!);
-        cssClassProp = { cssClass: column.cellClassName(params) as string };
+        cssClassProp = { cssClass: column.cellClassName(cellParams) as string };
       }
     }
 
     if (column.cellClassRules) {
-      const params: CellClassParams = getCellParams(row, column, rowIndex, value, api!.current!);
-      const cssClass = applyCssClassRules(column.cellClassRules, params);
+      const cssClass = applyCssClassRules(column.cellClassRules, cellParams);
       cssClassProp = { cssClass: `${cssClassProp.cssClass} ${cssClass}` };
     }
 
     let cellComponent: React.ReactElement | null = null;
     if (column.renderCell) {
-      const params: CellParams = getCellParams(row, column, rowIndex, value, api!.current!);
-      cellComponent = column.renderCell(params);
+      cellComponent = column.renderCell(cellParams);
       cssClassProp = { cssClass: `${cssClassProp.cssClass} with-renderer` };
     }
 
diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx
index 369cc32a5cbf..df4293688d0f 100644
--- a/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx
+++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { DivProps } from './grid-root';
+import { classnames } from '../../utils';
 
 export const ColumnsContainer = React.forwardRef<HTMLDivElement, DivProps>((props, ref) => {
   const { className, ...other } = props;
-  return <div ref={ref} className={`columns-container ${className || ''}`} {...other} />;
+  return <div ref={ref} className={classnames('columns-container', className)} {...other} />;
 });
 ColumnsContainer.displayName = 'ColumnsContainer';
diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/data-container.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/data-container.tsx
index 871d3efec22f..a390dba409b3 100644
--- a/packages/grid/x-grid-modules/src/components/styled-wrappers/data-container.tsx
+++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/data-container.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { DivProps } from './grid-root';
+import { classnames } from '../../utils';
 
 export const DataContainer = React.forwardRef<HTMLDivElement, DivProps>((props, ref) => {
   const { className, ...other } = props;
-  return <div ref={ref} className={`data-container ${className || ''}`} {...other} />;
+  return <div ref={ref} className={classnames('data-container', className)} {...other} />;
 });
 DataContainer.displayName = 'DataContainer';
diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/footer.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/footer.tsx
index b77f0bc23684..be1c7e09bbaa 100644
--- a/packages/grid/x-grid-modules/src/components/styled-wrappers/footer.tsx
+++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/footer.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { DivProps } from './grid-root';
+import { classnames } from '../../utils';
 
 export const Footer = React.forwardRef<HTMLDivElement, DivProps>((props, ref) => {
   const { className, ...other } = props;
-  return <div ref={ref} className={`footer ${className || ''}`} {...other} />;
+  return <div ref={ref} className={classnames('footer', className)} {...other} />;
 });
 Footer.displayName = 'Footer';
diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx
index f21ee6de1816..04720a99c8c3 100644
--- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx
+++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { GridOptions } from '../../models';
+import { classnames } from '../../utils';
 
 export type DivProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -246,7 +247,12 @@ export const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps & DivProp
   const { options, className, ...other } = props;
 
   return (
-    <RootStyle ref={ref} className={`grid-root ${className || ''}`} options={options} {...other} />
+    <RootStyle
+      ref={ref}
+      className={classnames('grid-root', className)}
+      options={options}
+      {...other}
+    />
   );
 });
 GridRoot.displayName = 'GridRoot';
diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx
index 465385b783ca..d0b14f3b7420 100644
--- a/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx
+++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/window-overlay.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { classnames } from '../../utils';
 import { DivProps } from './grid-root';
 
 export const Overlay = styled.div`
@@ -23,7 +24,7 @@ export const Overlay = styled.div`
 export function GridOverlay(props: DivProps) {
   const { className, children, ...other } = props;
   return (
-    <Overlay className={`overlay ${className || ''}`} {...other}>
+    <Overlay className={classnames('overlay', className)} {...other}>
       <div className="content">{children}</div>
     </Overlay>
   );
diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx
index f35b4e9e2130..c86bb5ad1834 100644
--- a/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx
+++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/window.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { DivProps } from './grid-root';
+import { classnames } from '../../utils';
 
 export const Window = React.forwardRef<HTMLDivElement, DivProps>((props, ref) => {
   const { className, ...other } = props;
-  return <div ref={ref} className={`window ${className || ''}`} {...other} />;
+  return <div ref={ref} className={classnames('window', className)} {...other} />;
 });
 Window.displayName = 'Window';
diff --git a/packages/grid/x-grid-modules/src/constants/eventsConstants.ts b/packages/grid/x-grid-modules/src/constants/eventsConstants.ts
index a0dc5b28becb..039f09840fe2 100644
--- a/packages/grid/x-grid-modules/src/constants/eventsConstants.ts
+++ b/packages/grid/x-grid-modules/src/constants/eventsConstants.ts
@@ -1,16 +1,20 @@
 export const RESIZE = 'resize';
 export const UNMOUNT = 'unmount';
 export const CLICK_EVENT = 'click';
+export const HOVER_EVENT = 'mouseover';
 export const KEYDOWN_EVENT = 'keydown';
 export const KEYUP_EVENT = 'keyup';
 
-export const CELL_CLICKED = 'cellClicked';
-export const ROW_CLICKED = 'rowClicked';
+export const CELL_CLICK = 'cellClick';
+export const CELL_HOVER = 'cellHover';
+export const ROW_CLICK = 'rowClick';
+export const ROW_HOVER = 'rowHover';
 export const ROW_SELECTED_EVENT = 'rowSelected';
-export const SELECTION_CHANGED_EVENT = 'selectionChanged';
-export const COLUMN_HEADER_CLICKED = 'columnClicked';
-export const PAGE_CHANGED_EVENT = 'pageChanged';
-export const PAGESIZE_CHANGED_EVENT = 'pageSizeChanged';
+export const SELECTION_CHANGED_EVENT = 'selectionChange';
+export const COLUMN_HEADER_CLICK = 'columnClick';
+export const COLUMN_HEADER_HOVER = 'columnHeaderHover';
+export const PAGE_CHANGED_EVENT = 'pageChange';
+export const PAGESIZE_CHANGED_EVENT = 'pageSizeChange';
 
 export const SCROLLING_START = 'scrolling:start';
 export const SCROLLING = 'scrolling';
@@ -24,4 +28,4 @@ export const COLUMNS_UPDATED = 'columnsUpdated';
 export const SORT_MODEL_UPDATED = 'sortModelUpdated';
 export const POST_SORT = 'postSort'; // ag-grid compatible
 export const COLUMNS_SORTED = 'columnsSorted';
-export const MULTIPLE_KEY_PRESS_CHANGED = 'multipleKeyPressChanged';
+export const MULTIPLE_KEY_PRESS_CHANGED = 'multipleKeyPressChange';
diff --git a/packages/grid/x-grid-modules/src/gridComponent.tsx b/packages/grid/x-grid-modules/src/gridComponent.tsx
index 5fc56c04597e..7ba286b54f55 100644
--- a/packages/grid/x-grid-modules/src/gridComponent.tsx
+++ b/packages/grid/x-grid-modules/src/gridComponent.tsx
@@ -35,8 +35,9 @@ import { debounce } from './utils';
 import { mergeOptions } from './utils/mergeOptions';
 
 /**
- * Material-UI Grid React component implementing [[GridComponentProps]].
- * @return JSX.Element.
+ * Data Grid component implementing [[GridComponentProps]].
+ *
+ * @returns JSX.Element
  */
 export const GridComponent: React.FC<GridComponentProps> = React.memo(
   ({ rows, columns, options, apiRef, loading, licenseStatus, className, components }) => {
@@ -84,8 +85,8 @@ export const GridComponent: React.FC<GridComponentProps> = React.memo(
 
     React.useEffect(() => {
       setInternalOptions((previousState) => {
-        if (previousState.paginationPageSize !== paginationProps.pageSize) {
-          return { ...previousState, paginationPageSize: paginationProps.pageSize };
+        if (previousState.pageSize !== paginationProps.pageSize) {
+          return { ...previousState, pageSize: paginationProps.pageSize };
         }
         return previousState;
       });
@@ -215,11 +216,15 @@ export const GridComponent: React.FC<GridComponentProps> = React.memo(
                           pageSize={paginationProps.pageSize}
                           rowCount={paginationProps.rowCount}
                           setPageSize={paginationProps.setPageSize}
-                          rowsPerPageOptions={internalOptions.paginationRowsPerPageOptions}
+                          rowsPerPageOptions={internalOptions.rowsPerPageOptions}
                         />
                       ))
                     }
-                    rowCount={internalRows.length}
+                    rowCount={
+                      internalOptions.rowCount == null
+                        ? internalRows.length
+                        : internalOptions.rowCount
+                    }
                     options={internalOptions}
                   />
                 )}
diff --git a/packages/grid/x-grid-modules/src/gridComponentProps.ts b/packages/grid/x-grid-modules/src/gridComponentProps.ts
index 5525350f3ae6..f58697fa1814 100644
--- a/packages/grid/x-grid-modules/src/gridComponentProps.ts
+++ b/packages/grid/x-grid-modules/src/gridComponentProps.ts
@@ -10,31 +10,31 @@ export type GridOptionsProp = Partial<GridOptions>;
  */
 export interface GridComponentProps {
   /**
-   * Set of rows of type [[RowsProp]]
+   * Set of rows of type [[RowsProp]].
    */
   rows: RowsProp;
   /**
-   * Set of columns of type [[Columns]]
+   * Set of columns of type [[Columns]].
    */
   columns: Columns;
   /**
-   * Set of options of type [[GridOptionsProp]]
+   * Set of options of type [[GridOptionsProp]].
    */
   options?: GridOptionsProp;
   /**
-   * Overrideable components
+   * Overrideable components.
    */
   components?: GridComponentOverridesProp;
   /**
-   * The ref object that allows grid manipulation. Can be instantiated with [[gridApiRef()]]
+   * The ref object that allows grid manipulation. Can be instantiated with [[gridApiRef()]].
    */
   apiRef?: ApiRef;
   /**
-   * Boolean prop that toggle the loading overlay
+   * Boolean prop that toggle the loading overlay.
    */
   loading?: boolean;
   /**
-   * String prop that allows to pass extra Css class in the inner grid container.
+   * @ignore
    */
   className?: string;
   /**
diff --git a/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts b/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts
index adc2e4d122de..b2fb0edd6fac 100644
--- a/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts
+++ b/packages/grid/x-grid-modules/src/hooks/features/usePagination.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useReducer, useRef } from 'react';
+import * as React from 'react';
 import { useLogger } from '../utils';
 import {
   PAGE_CHANGED_EVENT,
@@ -7,12 +7,13 @@ import {
 } from '../../constants/eventsConstants';
 import { useApiMethod } from '../root/useApiMethod';
 import { useApiEventHandler } from '../root/useApiEventHandler';
-import { PageChangedParams } from '../../models/params/pageChangedParams';
+import { PageChangeParams } from '../../models/params/pageChangeParams';
 import { Rows } from '../../models/rows';
 import { InternalColumns } from '../../models/colDef/colDef';
 import { GridOptions } from '../../models/gridOptions';
 import { PaginationApi } from '../../models/api/paginationApi';
 import { ApiRef } from '../../models/api';
+import { FeatureMode } from '../../models/featureMode';
 
 export interface PaginationProps {
   page: number;
@@ -22,7 +23,7 @@ export interface PaginationProps {
   setPage: (page: number) => void;
   setPageSize: (pageSize: number) => void;
 }
-export type PaginationState = PageChangedParams;
+export type PaginationState = PageChangeParams;
 const UPDATE_STATE_ACTION = 'updateState';
 
 function updateStateAction(
@@ -54,15 +55,19 @@ export const usePagination = (
   const logger = useLogger('usePagination');
 
   const initialState: PaginationState = {
-    pageSize: options.paginationPageSize || 0,
-    rowCount: rows.length,
-    page: 1,
-    pageCount: getPageCount(options.paginationPageSize, rows.length),
+    paginationMode: options.paginationMode!,
+    pageSize: options.pageSize || 0,
+    rowCount: options.rowCount == null ? rows.length : options.rowCount,
+    page: options.page || 1,
+    pageCount: getPageCount(
+      options.pageSize,
+      options.rowCount == null ? rows.length : options.rowCount,
+    ),
   };
-  const stateRef = useRef(initialState);
-  const [state, dispatch] = useReducer(paginationReducer, initialState);
+  const stateRef = React.useRef(initialState);
+  const [state, dispatch] = React.useReducer(paginationReducer, initialState);
 
-  const updateState = useCallback(
+  const updateState = React.useCallback(
     (stateUpdate: Partial<PaginationState>) => {
       const newState = { ...stateRef.current, ...stateUpdate };
       stateRef.current = newState;
@@ -71,11 +76,15 @@ export const usePagination = (
     [dispatch],
   );
 
-  const setPage = useCallback(
+  const setPage = React.useCallback(
     (page: number) => {
       if (apiRef && apiRef.current) {
-        apiRef.current!.renderPage(page);
-        const params: PageChangedParams = {
+        page = stateRef.current.pageCount >= page ? page : stateRef.current.pageCount;
+        apiRef.current!.renderPage(
+          stateRef.current.paginationMode === FeatureMode.client ? page : 1,
+        );
+
+        const params: PageChangeParams = {
           ...stateRef.current,
           page,
         };
@@ -89,7 +98,7 @@ export const usePagination = (
   );
 
   // We use stateRef in this method to avoid reattaching this method to the api every time the state changes
-  const setPageSize = useCallback(
+  const setPageSize = React.useCallback(
     (pageSize: number) => {
       if (stateRef.current.pageSize === pageSize) {
         return;
@@ -102,7 +111,7 @@ export const usePagination = (
       newPage = newPage > newPageCount ? newPageCount : newPage;
       newPage = newPage < 1 ? 1 : newPage;
       logger.info(
-        `PageSize changed to ${pageSize}, setting page to ${newPage}, total page count is ${newPageCount}`,
+        `PageSize change to ${pageSize}, setting page to ${newPage}, total page count is ${newPageCount}`,
       );
       const newState: PaginationState = {
         ...stateRef.current,
@@ -110,7 +119,7 @@ export const usePagination = (
         pageCount: newPageCount,
         pageSize,
       };
-      apiRef.current!.emit(PAGESIZE_CHANGED_EVENT, newState as PageChangedParams);
+      apiRef.current!.emit(PAGESIZE_CHANGED_EVENT, newState as PageChangeParams);
 
       updateState(newState);
       setPage(newPage);
@@ -118,25 +127,25 @@ export const usePagination = (
     [stateRef, apiRef, setPage, updateState, logger],
   );
 
-  const onPageChanged = useCallback(
-    (handler: (param: PageChangedParams) => void): (() => void) => {
+  const onPageChange = React.useCallback(
+    (handler: (param: PageChangeParams) => void): (() => void) => {
       return apiRef!.current!.registerEvent(PAGE_CHANGED_EVENT, handler);
     },
     [apiRef],
   );
-  const onPageSizeChanged = useCallback(
-    (handler: (param: PageChangedParams) => void): (() => void) => {
+  const onPageSizeChange = React.useCallback(
+    (handler: (param: PageChangeParams) => void): (() => void) => {
       return apiRef!.current!.registerEvent(PAGESIZE_CHANGED_EVENT, handler);
     },
     [apiRef],
   );
 
-  const getAutoPageSize = useCallback(() => {
+  const getAutoPageSize = React.useCallback(() => {
     const containerProps = apiRef?.current?.getContainerPropsState();
     return containerProps?.viewportPageSize;
   }, [apiRef]);
 
-  const resetAutopageSize = useCallback(() => {
+  const resetAutopageSize = React.useCallback(() => {
     const autoPagesize = getAutoPageSize();
     if (autoPagesize) {
       logger.debug(`Setting autoPagesize to ${autoPagesize}`);
@@ -144,14 +153,29 @@ export const usePagination = (
     }
   }, [setPageSize, logger, getAutoPageSize]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     stateRef.current = state;
   }, [state]);
 
-  useEffect(() => {
-    if (rows.length !== state.rowCount) {
-      logger.info(`Options or rows changed, recalculating pageCount and rowCount`);
-      const newPageCount = getPageCount(state.pageSize, rows.length);
+  React.useEffect(() => {
+    if (apiRef.current?.isInitialised) {
+      apiRef.current!.emit(PAGE_CHANGED_EVENT, stateRef.current);
+    }
+  }, [apiRef, stateRef, apiRef.current?.isInitialised]);
+
+  React.useEffect(() => {
+    updateState({ paginationMode: options.paginationMode! });
+  }, [options.paginationMode, updateState]);
+
+  React.useEffect(() => {
+    setPage(options.page != null ? options.page : 1);
+  }, [options.page, setPage]);
+
+  React.useEffect(() => {
+    const rowCount = options.rowCount == null ? rows.length : options.rowCount;
+    if (rowCount !== state.rowCount) {
+      logger.info(`Options or rows change, recalculating pageCount and rowCount`);
+      const newPageCount = getPageCount(state.pageSize, rowCount);
 
       updateState({ pageCount: newPageCount, rowCount: rows.length });
       if (state.page > newPageCount) {
@@ -160,38 +184,38 @@ export const usePagination = (
     }
   }, [rows.length, logger, updateState, state.rowCount, state.pageSize, setPage, state.page]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (
-      !options.paginationAutoPageSize &&
-      options.paginationPageSize &&
-      options.paginationPageSize !== stateRef.current.pageSize
+      !options.autoPageSize &&
+      options.pageSize &&
+      options.pageSize !== stateRef.current.pageSize
     ) {
-      setPageSize(options.paginationPageSize);
+      setPageSize(options.pageSize);
     }
-  }, [options.paginationAutoPageSize, options.paginationPageSize, logger, setPageSize]);
+  }, [options.autoPageSize, options.pageSize, logger, setPageSize]);
 
-  useEffect(() => {
-    if (options.paginationAutoPageSize && columns.visible.length > 0) {
+  React.useEffect(() => {
+    if (options.autoPageSize && columns.visible.length > 0) {
       resetAutopageSize();
     }
-  }, [options.paginationAutoPageSize, resetAutopageSize, columns.visible.length]);
+  }, [options.autoPageSize, resetAutopageSize, columns.visible.length]);
 
-  useApiEventHandler(apiRef, PAGE_CHANGED_EVENT, options.onPageChanged);
-  useApiEventHandler(apiRef, PAGESIZE_CHANGED_EVENT, options.onPageSizeChanged);
+  useApiEventHandler(apiRef, PAGE_CHANGED_EVENT, options.onPageChange);
+  useApiEventHandler(apiRef, PAGESIZE_CHANGED_EVENT, options.onPageSizeChange);
 
-  const onResize = useCallback(() => {
-    if (options.paginationAutoPageSize) {
+  const onResize = React.useCallback(() => {
+    if (options.autoPageSize) {
       resetAutopageSize();
     }
-  }, [options.paginationAutoPageSize, resetAutopageSize]);
+  }, [options.autoPageSize, resetAutopageSize]);
 
   useApiEventHandler(apiRef, RESIZE, onResize);
 
   const paginationApi: PaginationApi = {
     setPageSize,
     setPage,
-    onPageChanged,
-    onPageSizeChanged,
+    onPageChange,
+    onPageSizeChange,
   };
 
   useApiMethod(apiRef, paginationApi, 'paginationApi');
diff --git a/packages/grid/x-grid-modules/src/hooks/features/useSelection.ts b/packages/grid/x-grid-modules/src/hooks/features/useSelection.ts
index 358b5cad2b71..904107109dcb 100644
--- a/packages/grid/x-grid-modules/src/hooks/features/useSelection.ts
+++ b/packages/grid/x-grid-modules/src/hooks/features/useSelection.ts
@@ -1,18 +1,18 @@
 import * as React from 'react';
 import {
   GridOptions,
-  RowClickedParam,
   RowId,
   RowModel,
   RowSelectedParams,
   RowsProp,
-  SelectionChangedParams,
+  SelectionChangeParams,
   ApiRef,
+  RowParams,
 } from '../../models';
 import { useLogger } from '../utils/useLogger';
 import {
   MULTIPLE_KEY_PRESS_CHANGED,
-  ROW_CLICKED,
+  ROW_CLICK,
   ROW_SELECTED_EVENT,
   SELECTION_CHANGED_EVENT,
 } from '../../constants/eventsConstants';
@@ -79,18 +79,18 @@ export const useSelection = (
 
       if (apiRef && apiRef.current != null) {
         logger.info(
-          `Row at index ${rowIndex} has changed to ${isRowSelected ? 'selected' : 'unselected'} `,
+          `Row at index ${rowIndex} has change to ${isRowSelected ? 'selected' : 'unselected'} `,
         );
         const rowSelectedParam: RowSelectedParams = {
           data: row.data,
           isSelected: isRowSelected,
           rowIndex,
         };
-        const selectionChangedParam: SelectionChangedParams = {
+        const selectionChangeParam: SelectionChangeParams = {
           rows: getSelectedRows().map((r) => r.data),
         };
         apiRef.current!.emit(ROW_SELECTED_EVENT, rowSelectedParam);
-        apiRef.current!.emit(SELECTION_CHANGED_EVENT, selectionChangedParam);
+        apiRef.current!.emit(SELECTION_CHANGED_EVENT, selectionChangeParam);
       }
 
       forceUpdate((p: any) => !p);
@@ -137,17 +137,17 @@ export const useSelection = (
 
       if (apiRef && apiRef.current != null) {
         // We don't emit ROW_SELECTED_EVENT on each row as it would be too consuming for large set of data.
-        const selectionChangedParam: SelectionChangedParams = {
+        const selectionChangeParam: SelectionChangeParams = {
           rows: getSelectedRows().map((r) => r.data),
         };
-        apiRef.current!.emit(SELECTION_CHANGED_EVENT, selectionChangedParam);
+        apiRef.current!.emit(SELECTION_CHANGED_EVENT, selectionChangeParam);
       }
     },
     [apiRef, selectedItemsRef, forceUpdate, options.enableMultipleSelection, getSelectedRows],
   );
 
-  const rowClickedHandler = React.useCallback(
-    (params: RowClickedParam) => {
+  const rowClickHandler = React.useCallback(
+    (params: RowParams) => {
       if (!options.disableSelectionOnClick) {
         selectRowModel(params.rowModel);
       }
@@ -162,29 +162,29 @@ export const useSelection = (
     [options.enableMultipleSelection, allowMultipleSelectionKeyPressed],
   );
 
-  const onSelectedRow = React.useCallback(
+  const onRowSelected = React.useCallback(
     (handler: (param: RowSelectedParams) => void): (() => void) => {
       return apiRef!.current!.registerEvent(ROW_SELECTED_EVENT, handler);
     },
     [apiRef],
   );
-  const onSelectionChanged = React.useCallback(
-    (handler: (param: SelectionChangedParams) => void): (() => void) => {
+  const onSelectionChange = React.useCallback(
+    (handler: (param: SelectionChangeParams) => void): (() => void) => {
       return apiRef!.current!.registerEvent(SELECTION_CHANGED_EVENT, handler);
     },
     [apiRef],
   );
 
-  useApiEventHandler(apiRef, ROW_CLICKED, rowClickedHandler);
+  useApiEventHandler(apiRef, ROW_CLICK, rowClickHandler);
   useApiEventHandler(apiRef, MULTIPLE_KEY_PRESS_CHANGED, onMultipleKeyPressed);
-  // TODO handle Cell Clicked/range selection?
+  // TODO handle Cell Click/range selection?
 
   const selectionApi: SelectionApi = {
     selectRow,
     getSelectedRows,
     selectRows,
-    onSelectedRow,
-    onSelectionChanged,
+    onRowSelected,
+    onSelectionChange,
   };
   useApiMethod(apiRef, selectionApi, 'SelectionApi');
 
@@ -197,8 +197,8 @@ export const useSelection = (
   React.useEffect(() => {
     selectedItemsRef.current = [];
     if (apiRef && apiRef.current != null) {
-      const selectionChangedParam: SelectionChangedParams = { rows: [] };
-      apiRef.current!.emit(SELECTION_CHANGED_EVENT, selectionChangedParam);
+      const selectionChangeParam: SelectionChangeParams = { rows: [] };
+      apiRef.current!.emit(SELECTION_CHANGED_EVENT, selectionChangeParam);
     }
   }, [rowsProp, apiRef]);
 };
diff --git a/packages/grid/x-grid-modules/src/hooks/features/useSorting.ts b/packages/grid/x-grid-modules/src/hooks/features/useSorting.ts
index f8b224c29a54..eaf001fb4d46 100644
--- a/packages/grid/x-grid-modules/src/hooks/features/useSorting.ts
+++ b/packages/grid/x-grid-modules/src/hooks/features/useSorting.ts
@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   CellValue,
   ColDef,
-  ColumnHeaderClickedParams,
   Columns,
   ColumnSortedParams,
   FieldComparatorList,
@@ -12,9 +11,10 @@ import {
   RowsProp,
   SortApi,
   ApiRef,
+  ColParams,
 } from '../../models';
 import {
-  COLUMN_HEADER_CLICKED,
+  COLUMN_HEADER_CLICK,
   COLUMNS_SORTED,
   MULTIPLE_KEY_PRESS_CHANGED,
   POST_SORT,
@@ -151,9 +151,9 @@ export const useSorting = (
   );
 
   const headerClickHandler = React.useCallback(
-    ({ column }: ColumnHeaderClickedParams) => {
-      if (column.sortable) {
-        sortColumn(column);
+    ({ colDef }: ColParams) => {
+      if (colDef.sortable) {
+        sortColumn(colDef);
       }
     },
     [sortColumn],
@@ -182,7 +182,7 @@ export const useSorting = (
     [allowMultipleSorting, options.enableMultipleColumnsSorting],
   );
 
-  const onColumnsSorted = React.useCallback(
+  const onSortedColumns = React.useCallback(
     (handler: (param: ColumnSortedParams) => void): (() => void) => {
       return apiRef!.current!.registerEvent(COLUMNS_SORTED, handler);
     },
@@ -217,10 +217,10 @@ export const useSorting = (
     }
   }, [colState, setSortModel, apiRef, colsProp]);
 
-  useApiEventHandler(apiRef, COLUMN_HEADER_CLICKED, headerClickHandler);
+  useApiEventHandler(apiRef, COLUMN_HEADER_CLICK, headerClickHandler);
   useApiEventHandler(apiRef, ROWS_UPDATED, onRowsUpdated);
   useApiEventHandler(apiRef, MULTIPLE_KEY_PRESS_CHANGED, onMultipleKeyPressed);
-  const sortApi: SortApi = { getSortModel, setSortModel, onColumnsSorted };
+  const sortApi: SortApi = { getSortModel, setSortModel, onSortedColumns };
 
   useApiMethod(apiRef, sortApi, 'SortApi');
 };
diff --git a/packages/grid/x-grid-modules/src/hooks/root/useApi.ts b/packages/grid/x-grid-modules/src/hooks/root/useApi.ts
index a6242fcdd316..67a85791cafa 100644
--- a/packages/grid/x-grid-modules/src/hooks/root/useApi.ts
+++ b/packages/grid/x-grid-modules/src/hooks/root/useApi.ts
@@ -1,21 +1,25 @@
 import * as React from 'react';
 import { useLogger } from '../utils/useLogger';
 import {
-  CELL_CLICKED,
+  CELL_CLICK,
   CLICK_EVENT,
   COL_RESIZE_START,
   COL_RESIZE_STOP,
-  COLUMN_HEADER_CLICKED,
+  COLUMN_HEADER_CLICK,
   COLUMNS_SORTED,
   UNMOUNT,
   KEYDOWN_EVENT,
   KEYUP_EVENT,
   RESIZE,
-  ROW_CLICKED,
+  ROW_CLICK,
   ROW_SELECTED_EVENT,
   SELECTION_CHANGED_EVENT,
+  HOVER_EVENT,
+  CELL_HOVER,
+  ROW_HOVER,
+  COLUMN_HEADER_HOVER,
 } from '../../constants/eventsConstants';
-import { CellClickedParam, GridOptions, RowClickedParam, ApiRef } from '../../models';
+import { GridOptions, ApiRef, CellParams, ColParams, RowParams } from '../../models';
 import { GridApi } from '../../models/api/gridApi';
 import {
   CELL_CSS_CLASS,
@@ -32,6 +36,7 @@ import {
 } from '../../utils/domUtils';
 import { useApiMethod } from './useApiMethod';
 import { useApiEventHandler } from './useApiEventHandler';
+import { buildCellParams, buildRowParams } from '../../utils/paramsUtils';
 
 const EventEmitter = require('events').EventEmitter;
 
@@ -77,16 +82,18 @@ export function useApi(
   const handleResizeStart = React.useCallback(() => {
     isResizingRef.current = true;
   }, [isResizingRef]);
+
   const handleResizeStop = React.useCallback(() => {
     isResizingRef.current = false;
   }, [isResizingRef]);
 
-  const onClickHandler = React.useCallback(
-    (event: MouseEvent) => {
+  const getEventParams = React.useCallback(
+    (event: any) => {
       if (event.target == null) {
-        return;
+        return null;
       }
       const elem = event.target as HTMLElement;
+      const eventParams: { cell?: CellParams; row?: RowParams; header?: ColParams } = {};
 
       if (isCell(elem)) {
         const cellEl = findParentElementFromClassName(elem, CELL_CSS_CLASS)! as HTMLElement;
@@ -98,27 +105,78 @@ export function useApi(
         const value = getDataFromElem(cellEl, 'value');
         const column = apiRef.current!.getColumnFromField(field);
         if (!column || !column.disableClickEventBubbling) {
-          const commonParams = { data: rowModel.data, rowIndex, colDef: column };
-          const cellParams: CellClickedParam = {
+          const commonParams = {
+            data: rowModel.data,
+            rowIndex,
+            colDef: column,
+            rowModel,
+            api: apiRef.current!,
+          };
+          eventParams.cell = buildCellParams({
+            ...commonParams,
             element: cellEl,
-            field,
             value,
+          });
+          eventParams.row = buildRowParams({
             ...commonParams,
-          };
-          const rowParams: RowClickedParam = {
             element: rowEl,
-            rowModel,
-            ...commonParams,
-          };
-          emitEvent(CELL_CLICKED, cellParams);
-          emitEvent(ROW_CLICKED, rowParams);
+          });
         }
       } else if (isHeaderCell(elem) && !isResizingRef.current) {
         const headerCell = findParentElementFromClassName(elem, HEADER_CELL_CSS_CLASS)!;
         const field = getFieldFromHeaderElem(headerCell);
         const column = apiRef.current!.getColumnFromField(field);
-        const colHeaderParams = { field, column };
-        emitEvent(COLUMN_HEADER_CLICKED, colHeaderParams);
+        const colIndex = apiRef.current!.getColumnIndex(field);
+        const colHeaderParams: ColParams = {
+          field,
+          colDef: column,
+          colIndex,
+          api: apiRef.current!,
+        };
+        eventParams.header = colHeaderParams;
+      }
+      return eventParams;
+    },
+    [emitEvent, apiRef],
+  );
+
+  const onClickHandler = React.useCallback(
+    (event: MouseEvent) => {
+      const eventParams = getEventParams(event);
+
+      if (!eventParams) {
+        return;
+      }
+
+      if (eventParams.cell) {
+        emitEvent(CELL_CLICK, eventParams.cell);
+      }
+      if (eventParams.row) {
+        emitEvent(ROW_CLICK, eventParams.row);
+      }
+      if (eventParams.header) {
+        emitEvent(COLUMN_HEADER_CLICK, eventParams.header);
+      }
+    },
+    [emitEvent, apiRef],
+  );
+
+  const onHoverHandler = React.useCallback(
+    (event: any) => {
+      const eventParams = getEventParams(event);
+
+      if (!eventParams) {
+        return;
+      }
+
+      if (eventParams.cell) {
+        emitEvent(CELL_HOVER, eventParams.cell);
+      }
+      if (eventParams.row) {
+        emitEvent(ROW_HOVER, eventParams.row);
+      }
+      if (eventParams.header) {
+        emitEvent(COLUMN_HEADER_HOVER, eventParams.header);
       }
     },
     [emitEvent, apiRef],
@@ -159,6 +217,7 @@ export function useApi(
       const gridRootElem = gridRootRef.current;
 
       gridRootRef.current.addEventListener(CLICK_EVENT, onClickHandler, { capture: true });
+      gridRootRef.current.addEventListener(HOVER_EVENT, onHoverHandler, { capture: true });
       document.addEventListener(KEYDOWN_EVENT, keyDownHandler);
       document.addEventListener(KEYUP_EVENT, keyUpHandler);
 
@@ -170,6 +229,7 @@ export function useApi(
         logger.debug('Clearing all events listeners');
         api.emit(UNMOUNT);
         gridRootElem.removeEventListener(CLICK_EVENT, onClickHandler, { capture: true });
+        gridRootElem.removeEventListener(HOVER_EVENT, onHoverHandler, { capture: true });
         document.removeEventListener(KEYDOWN_EVENT, keyDownHandler);
         document.removeEventListener(KEYUP_EVENT, keyUpHandler);
         api.removeAllListeners();
@@ -181,12 +241,14 @@ export function useApi(
 
   useApiEventHandler(apiRef, COL_RESIZE_START, handleResizeStart);
   useApiEventHandler(apiRef, COL_RESIZE_STOP, handleResizeStop);
-  useApiEventHandler(apiRef, CELL_CLICKED, options.onCellClicked);
-  useApiEventHandler(apiRef, ROW_CLICKED, options.onRowClicked);
+  useApiEventHandler(apiRef, CELL_CLICK, options.onCellClick);
+  useApiEventHandler(apiRef, ROW_CLICK, options.onRowClick);
+  useApiEventHandler(apiRef, CELL_HOVER, options.onCellHover);
+  useApiEventHandler(apiRef, ROW_HOVER, options.onRowHover);
   useApiEventHandler(apiRef, ROW_SELECTED_EVENT, options.onRowSelected);
-  useApiEventHandler(apiRef, SELECTION_CHANGED_EVENT, options.onSelectionChanged);
-  useApiEventHandler(apiRef, COLUMN_HEADER_CLICKED, options.onColumnHeaderClicked);
-  useApiEventHandler(apiRef, COLUMNS_SORTED, options.onColumnsSorted);
+  useApiEventHandler(apiRef, SELECTION_CHANGED_EVENT, options.onSelectionChange);
+  useApiEventHandler(apiRef, COLUMN_HEADER_CLICK, options.onColumnHeaderClick);
+  useApiEventHandler(apiRef, COLUMNS_SORTED, options.onSortedColumns);
 
   return initialised;
 }
diff --git a/packages/grid/x-grid-modules/src/hooks/root/useColumns.ts b/packages/grid/x-grid-modules/src/hooks/root/useColumns.ts
index 9344ef772d15..05393098c03b 100644
--- a/packages/grid/x-grid-modules/src/hooks/root/useColumns.ts
+++ b/packages/grid/x-grid-modules/src/hooks/root/useColumns.ts
@@ -166,7 +166,7 @@ export function useColumns(
   );
 
   React.useEffect(() => {
-    logger.info(`Columns have changed, new length ${columns.length}`);
+    logger.info(`Columns have change, new length ${columns.length}`);
     const newState = resetState(
       columns,
       options.columnTypes,
@@ -204,7 +204,7 @@ export function useColumns(
 
   const onSortedColumns = React.useCallback(
     (sortModel: SortModel) => {
-      logger.debug('Sort model changed to ', sortModel);
+      logger.debug('Sort model change to ', sortModel);
       const updatedCols: ColDef[] = [];
 
       const currentSortedCols = stateRef.current.all
diff --git a/packages/grid/x-grid-modules/src/hooks/root/useContainerProps.ts b/packages/grid/x-grid-modules/src/hooks/root/useContainerProps.ts
index 7ffbe7c61e2a..79447a4b953e 100644
--- a/packages/grid/x-grid-modules/src/hooks/root/useContainerProps.ts
+++ b/packages/grid/x-grid-modules/src/hooks/root/useContainerProps.ts
@@ -27,7 +27,7 @@ export const useContainerProps = (windowRef: React.RefObject<HTMLDivElement>): R
 
       const rowHeight = options.rowHeight;
       const hasScrollY =
-        options.paginationAutoPageSize || options.autoHeight
+        options.autoPageSize || options.autoHeight
           ? false
           : windowSizesRef.current.height < rowsCount * rowHeight;
       const hasScrollX = columnsTotalWidth > windowSizesRef.current.width;
@@ -50,9 +50,7 @@ export const useContainerProps = (windowRef: React.RefObject<HTMLDivElement>): R
       // We multiply by 2 for virtualization
       // TODO allow buffer with fixed nb rows
       const rzPageSize = viewportPageSize * 2;
-      const viewportMaxPage = options.paginationAutoPageSize
-        ? 1
-        : Math.ceil(rowsCount / viewportPageSize);
+      const viewportMaxPage = options.autoPageSize ? 1 : Math.ceil(rowsCount / viewportPageSize);
 
       logger.debug(
         `viewportPageSize:  ${viewportPageSize}, rzPageSize: ${rzPageSize}, viewportMaxPage: ${viewportMaxPage}`,
@@ -60,7 +58,7 @@ export const useContainerProps = (windowRef: React.RefObject<HTMLDivElement>): R
       const renderingZoneHeight = rzPageSize * rowHeight + rowHeight + scrollBarSize.x;
       const dataContainerWidth = columnsTotalWidth - scrollBarSize.y;
       let totalHeight =
-        (options.paginationAutoPageSize ? 1 : rowsCount / viewportPageSize) * viewportSize.height +
+        (options.autoPageSize ? 1 : rowsCount / viewportPageSize) * viewportSize.height +
         (hasScrollY ? scrollBarSize.x : 0);
 
       if (options.autoHeight) {
diff --git a/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts b/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts
index b7589b64ce4d..475ba24b7665 100644
--- a/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts
+++ b/packages/grid/x-grid-modules/src/hooks/root/useKeyboard.ts
@@ -69,9 +69,7 @@ export const useKeyboard = (options: GridOptions, initialised: boolean, apiRef:
       const currentRowIndex = Number(getDataFromElem(cellEl, 'rowindex'));
       const autoPageSize = apiRef.current!.getContainerPropsState()!.viewportPageSize;
       const pageSize =
-        options.pagination && options.paginationPageSize != null
-          ? options.paginationPageSize
-          : autoPageSize;
+        options.pagination && options.pageSize != null ? options.pageSize : autoPageSize;
       const rowCount = options.pagination ? pageSize : apiRef.current!.getRowsCount();
       const colCount = apiRef.current!.getVisibleColumns().length;
 
@@ -120,7 +118,7 @@ export const useKeyboard = (options: GridOptions, initialised: boolean, apiRef:
 
       return nextCellIndexes;
     },
-    [apiRef, options.pagination, options.paginationPageSize],
+    [apiRef, options.pagination, options.pageSize],
   );
 
   const selectActiveRow = React.useCallback(() => {
diff --git a/packages/grid/x-grid-modules/src/hooks/utils/useLogger.ts b/packages/grid/x-grid-modules/src/hooks/utils/useLogger.ts
index 21cf9ade5a49..97a206fbd00a 100644
--- a/packages/grid/x-grid-modules/src/hooks/utils/useLogger.ts
+++ b/packages/grid/x-grid-modules/src/hooks/utils/useLogger.ts
@@ -13,7 +13,7 @@ export interface Logger {
 
 const noop = () => {};
 
-export const noopLogger: Logger = {
+const noopLogger: Logger = {
   debug: noop,
   info: noop,
   warn: noop,
@@ -57,7 +57,7 @@ export type LoggerFactoryFn = (name: string) => Logger;
 let factory: LoggerFactoryFn | null;
 export function useLoggerFactory(
   customLogger?: Logger | LoggerFactoryFn,
-  logLevel: string | boolean = 'info',
+  logLevel: string | boolean = 'debug',
 ) {
   if (forceDebug) {
     factory = defaultFactory('debug');
diff --git a/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts b/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts
index ee1d2f881ac1..6ef19e214536 100644
--- a/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts
+++ b/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualColumns.ts
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import * as React from 'react';
 import {
   ContainerProps,
   GridOptions,
@@ -7,7 +7,7 @@ import {
   ApiRef,
 } from '../../models';
 import { useLogger } from '../utils/useLogger';
-import { COLUMNS_UPDATED } from '../../constants/eventsConstants';
+import { COLUMNS_UPDATED, RESIZE } from '../../constants/eventsConstants';
 import { useApiMethod } from '../root/useApiMethod';
 import { useApiEventHandler } from '../root/useApiEventHandler';
 
@@ -25,11 +25,11 @@ export const useVirtualColumns = (
   apiRef: ApiRef,
 ): UseVirtualColumnsReturnType => {
   const logger = useLogger('useVirtualColumns');
-  const renderedColRef = useRef<RenderColumnsProps | null>(null);
-  const containerPropsRef = useRef<ContainerProps | null>(null);
-  const lastScrollLeftRef = useRef<number>(0);
+  const renderedColRef = React.useRef<RenderColumnsProps | null>(null);
+  const containerPropsRef = React.useRef<ContainerProps | null>(null);
+  const lastScrollLeftRef = React.useRef<number>(0);
 
-  const getColumnIdxFromScroll = useCallback(
+  const getColumnIdxFromScroll = React.useCallback(
     (left: number) => {
       const positions = apiRef.current!.getColumnsMeta().positions;
       const hasColumns = apiRef.current!.getVisibleColumns().length;
@@ -44,7 +44,7 @@ export const useVirtualColumns = (
     [apiRef],
   );
 
-  const getColumnFromScroll = useCallback(
+  const getColumnFromScroll = React.useCallback(
     (left: number) => {
       const visibleColumns = apiRef.current!.getVisibleColumns();
       if (!visibleColumns.length) {
@@ -55,7 +55,7 @@ export const useVirtualColumns = (
     [apiRef, getColumnIdxFromScroll],
   );
 
-  const isColumnVisibleInWindow = useCallback(
+  const isColumnVisibleInWindow = React.useCallback(
     (colIndex: number): boolean => {
       if (!containerPropsRef.current) {
         return false;
@@ -73,7 +73,7 @@ export const useVirtualColumns = (
     [containerPropsRef, getColumnFromScroll, apiRef],
   );
 
-  const updateRenderedCols: UpdateRenderedColsFnType = useCallback(
+  const updateRenderedCols: UpdateRenderedColsFnType = React.useCallback(
     (containerProps: ContainerProps | null, scrollLeft: number) => {
       if (!containerProps) {
         return false;
@@ -147,12 +147,13 @@ export const useVirtualColumns = (
   };
   useApiMethod(apiRef, virtualApi, 'ColumnVirtualizationApi');
 
-  const onColUpdated = useCallback(() => {
+  const resetRenderedColState = React.useCallback(() => {
     logger.debug('Clearing previous renderedColRef');
     renderedColRef.current = null;
   }, [logger, renderedColRef]);
 
-  useApiEventHandler(apiRef, COLUMNS_UPDATED, onColUpdated);
+  useApiEventHandler(apiRef, COLUMNS_UPDATED, resetRenderedColState);
+  useApiEventHandler(apiRef, RESIZE, resetRenderedColState);
 
   return [renderedColRef, updateRenderedCols];
 };
diff --git a/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualRows.ts b/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualRows.ts
index 70c59915b2f9..bc917202d05b 100644
--- a/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualRows.ts
+++ b/packages/grid/x-grid-modules/src/hooks/virtualization/useVirtualRows.ts
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import { useVirtualColumns } from './useVirtualColumns';
 import {
   CellIndexCoordinates,
@@ -37,34 +37,34 @@ export const useVirtualRows = (
   apiRef: ApiRef,
 ): UseVirtualRowsReturnType => {
   const logger = useLogger('useVirtualRows');
-  const pageRef = useRef<number>(0);
-  const rowsCount = useRef<number>(rows.length);
-  const paginationCurrentPage = useRef<number>(1);
-  const containerPropsRef = useRef<ContainerProps | null>(null);
-  const optionsRef = useRef<GridOptions>(options);
-  const realScrollRef = useRef<ScrollParams>({ left: 0, top: 0 });
-  const rzScrollRef = useRef<ScrollParams>({ left: 0, top: 0 });
-  const columnTotalWidthRef = useRef<number>(internalColumns.meta.totalWidth);
-  const renderCtxRef = useRef<Partial<RenderContextProps>>();
+  const pageRef = React.useRef<number>(0);
+  const rowsCount = React.useRef<number>(rows.length);
+  const paginationCurrentPage = React.useRef<number>(1);
+  const containerPropsRef = React.useRef<ContainerProps | null>(null);
+  const optionsRef = React.useRef<GridOptions>(options);
+  const realScrollRef = React.useRef<ScrollParams>({ left: 0, top: 0 });
+  const rzScrollRef = React.useRef<ScrollParams>({ left: 0, top: 0 });
+  const columnTotalWidthRef = React.useRef<number>(internalColumns.meta.totalWidth);
+  const renderCtxRef = React.useRef<Partial<RenderContextProps>>();
 
   const [, scrollColHeaderTo] = useScrollFn(colRef);
   const onDataScroll = (v: ScrollParams) => scrollColHeaderTo({ left: v.left, top: 0 });
   const [scrollTo] = useScrollFn(renderingZoneRef, onDataScroll);
 
   const getContainerProps = useContainerProps(windowRef);
-  const [renderCtx, setRenderCtx] = useState<Partial<RenderContextProps> | null>(null);
+  const [renderCtx, setRenderCtx] = React.useState<Partial<RenderContextProps> | null>(null);
   const [renderedColRef, updateRenderedCols] = useVirtualColumns(options, apiRef);
 
-  const getRenderRowProps = useCallback(
+  const getRenderRowProps = React.useCallback(
     (page: number) => {
       if (containerPropsRef.current == null) {
         return null;
       }
       const containerProps = containerPropsRef.current!;
       let minRowIdx = 0;
-      if (optionsRef.current.pagination && optionsRef.current.paginationPageSize != null) {
+      if (optionsRef.current.pagination && optionsRef.current.pageSize != null) {
         minRowIdx =
-          optionsRef.current.paginationPageSize *
+          optionsRef.current.pageSize *
           (paginationCurrentPage.current - 1 > 0 ? paginationCurrentPage.current - 1 : 0);
       }
 
@@ -81,7 +81,7 @@ export const useVirtualRows = (
     [containerPropsRef],
   );
 
-  const getRenderCtxState = useCallback((): Partial<RenderContextProps> | null => {
+  const getRenderCtxState = React.useCallback((): Partial<RenderContextProps> | null => {
     const containerProps = containerPropsRef.current;
     const renderedCol = renderedColRef.current;
     const renderedRow = getRenderRowProps(pageRef.current);
@@ -96,7 +96,7 @@ export const useVirtualRows = (
       ...renderedRow,
       ...{
         paginationCurrentPage: paginationCurrentPage.current,
-        paginationPageSize: optionsRef.current.paginationPageSize,
+        pageSize: optionsRef.current.pageSize,
       },
     };
     logger.debug(':: getRenderCtxState - returning state ', newRenderCtx);
@@ -104,11 +104,11 @@ export const useVirtualRows = (
     return newRenderCtx;
   }, [logger, renderCtxRef, containerPropsRef, renderedColRef, getRenderRowProps]);
 
-  const reRender = useCallback(() => setRenderCtx(getRenderCtxState()), [
+  const reRender = React.useCallback(() => setRenderCtx(getRenderCtxState()), [
     getRenderCtxState,
     setRenderCtx,
   ]);
-  const updateViewport = useCallback(() => {
+  const updateViewport = React.useCallback(() => {
     if (windowRef && windowRef.current && containerPropsRef && containerPropsRef.current) {
       const containerProps = containerPropsRef.current;
       const { scrollLeft, scrollTop } = windowRef.current;
@@ -152,14 +152,14 @@ export const useVirtualRows = (
     }
   }, [apiRef, logger, reRender, windowRef, updateRenderedCols, scrollTo]);
 
-  useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (renderingZoneRef && renderingZoneRef.current) {
       logger.debug('applying scrollTop ', rzScrollRef.current);
       scrollTo(rzScrollRef.current);
     }
   });
 
-  const resetScroll = useCallback(() => {
+  const resetScroll = React.useCallback(() => {
     scrollTo({ left: 0, top: 0 });
     pageRef.current = 1;
 
@@ -169,13 +169,13 @@ export const useVirtualRows = (
     rzScrollRef.current = { left: 0, top: 0 };
   }, [windowRef, rzScrollRef, pageRef, scrollTo]);
 
-  const updateContainerSize = useCallback(() => {
+  const updateContainerSize = React.useCallback(() => {
     if (columnTotalWidthRef.current > 0) {
       const totalRowsCount = apiRef?.current?.getRowsCount() || 0; // we ensure we call with latest length
       const currentPage = paginationCurrentPage.current;
       let pageRowCount =
-        optionsRef.current.pagination && optionsRef.current.paginationPageSize
-          ? optionsRef.current.paginationPageSize
+        optionsRef.current.pagination && optionsRef.current.pageSize
+          ? optionsRef.current.pageSize
           : null;
 
       pageRowCount =
@@ -190,7 +190,7 @@ export const useVirtualRows = (
         columnTotalWidthRef.current,
         rowsCount.current,
       );
-      if (optionsRef.current.paginationAutoPageSize && containerPropsRef.current) {
+      if (optionsRef.current.autoPageSize && containerPropsRef.current) {
         rowsCount.current = containerPropsRef.current.viewportPageSize;
       }
       updateViewport();
@@ -200,8 +200,8 @@ export const useVirtualRows = (
     }
   }, [containerPropsRef, apiRef, getContainerProps, reRender, updateViewport]);
 
-  const scrollingTimeout = useRef<any>(0);
-  const onScroll: any = useCallback(
+  const scrollingTimeout = React.useRef<any>(0);
+  const onScroll: any = React.useCallback(
     (event: any) => {
       realScrollRef.current = { left: event.target.scrollLeft, top: event.target.scrollTop };
       if (apiRef && apiRef.current && scrollingTimeout.current === 0) {
@@ -219,7 +219,7 @@ export const useVirtualRows = (
     [apiRef, updateViewport, scrollingTimeout, realScrollRef],
   );
 
-  const scrollToIndexes = useCallback(
+  const scrollToIndexes = React.useCallback(
     (params: CellIndexCoordinates) => {
       logger.debug(`Scrolling to cell at row ${params.rowIndex}, col: ${params.colIndex} `);
 
@@ -274,7 +274,7 @@ export const useVirtualRows = (
     [apiRef, realScrollRef, logger],
   );
 
-  const scroll = useCallback(
+  const scroll = React.useCallback(
     (params: Partial<ScrollParams>) => {
       logger.debug(`Scrolling to left: ${params.left} top: ${params.top}`);
       if (windowRef.current && params.left != null && colRef.current) {
@@ -289,18 +289,18 @@ export const useVirtualRows = (
     [logger, windowRef, updateViewport, colRef],
   );
 
-  const getContainerPropsState = useCallback(() => {
+  const getContainerPropsState = React.useCallback(() => {
     if (!containerPropsRef.current) {
       updateContainerSize();
     }
     return containerPropsRef.current;
   }, [updateContainerSize]);
 
-  const getRenderContextState = useCallback(() => {
+  const getRenderContextState = React.useCallback(() => {
     return renderCtxRef.current;
   }, []);
 
-  const renderPage = useCallback(
+  const renderPage = React.useCallback(
     (page: number) => {
       paginationCurrentPage.current = page;
       resetScroll();
@@ -308,12 +308,12 @@ export const useVirtualRows = (
     },
     [paginationCurrentPage, resetScroll, updateContainerSize],
   );
-  const onResize = useCallback(() => {
+  const onResize = React.useCallback(() => {
     logger.debug('OnResize, recalculating container sizes.');
     updateContainerSize();
   }, [logger, updateContainerSize]);
 
-  const onViewportScroll = useCallback(
+  const onViewportScroll = React.useCallback(
     (event: any) => {
       logger.debug('Using keyboard to navigate cells, converting scroll events ');
 
@@ -335,24 +335,24 @@ export const useVirtualRows = (
     onViewportScroll,
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (columnTotalWidthRef.current !== internalColumns.meta.totalWidth) {
       columnTotalWidthRef.current = internalColumns.meta.totalWidth;
       updateContainerSize();
     }
   }, [internalColumns, updateContainerSize]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (optionsRef.current !== options) {
-      logger.debug('Options changed, updating container sizes');
+      logger.debug('Options change, updating container sizes');
       optionsRef.current = options;
       updateContainerSize();
     }
   }, [options, renderingZoneRef, resetScroll, updateContainerSize, logger]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (rows.length !== rowsCount.current) {
-      logger.debug('Row length changed to ', rows.length);
+      logger.debug('Row length change to ', rows.length);
       updateContainerSize();
     }
   }, [rows.length, logger, updateContainerSize]);
diff --git a/packages/grid/x-grid-modules/src/models/api/apiRef.ts b/packages/grid/x-grid-modules/src/models/api/apiRef.ts
index a0276fbcfdaf..e8f98b6e4330 100644
--- a/packages/grid/x-grid-modules/src/models/api/apiRef.ts
+++ b/packages/grid/x-grid-modules/src/models/api/apiRef.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { GridApi } from './gridApi';
+
 /**
  * The apiRef component prop type.
  */
diff --git a/packages/grid/x-grid-modules/src/models/api/columnApi.ts b/packages/grid/x-grid-modules/src/models/api/columnApi.ts
index 227e8117257e..a2d4e26ffd95 100644
--- a/packages/grid/x-grid-modules/src/models/api/columnApi.ts
+++ b/packages/grid/x-grid-modules/src/models/api/columnApi.ts
@@ -5,43 +5,51 @@ import { ColDef, Columns, ColumnsMeta } from '../colDef/colDef';
  */
 export interface ColumnApi {
   /**
-   * Retrieve a column from its field
-   * @return [[ColDef]]
+   * Retrieve a column from its field.
+   *
    * @param field
+   * @returns [[ColDef]]
    */
   getColumnFromField: (field: string) => ColDef;
   /**
-   * Get all the [[Columns]]
-   * @return an array of [[ColDef]]
+   * Get all the [[Columns]].
+   *
+   * @returns An array of [[ColDef]].
    */
   getAllColumns: () => Columns;
   /**
-   * Get the currently visible columns
-   * @returns an array of [[ColDef]]
+   * Get the currently visible columns.
+   *
+   * @returns An array of [[ColDef]].
    */
   getVisibleColumns: () => Columns;
   /**
-   * Get the columns meta data
-   * @return [[ColumnsMeta]]
+   * Get the columns meta data.
+   *
+   * @returns [[ColumnsMeta]]
    */
   getColumnsMeta: () => ColumnsMeta;
   /**
-   * Get the index position of the column in the array of [[ColDef]]
+   * Get the index position of the column in the array of [[ColDef]].
+   *
    * @param field
    */
   getColumnIndex: (field: string) => number;
   /**
-   * Get the column left position in pixel relative to the left grid inner border
+   * Get the column left position in pixel relative to the left grid inner border.
+   *
    * @param field
    */
   getColumnPosition: (field: string) => number;
   /**
-   * Allows to update a column [[ColDef]] model
+   * Allows to update a column [[ColDef]] model.
+   *
    * @param col [[ColDef]]
    */
   updateColumn: (col: ColDef) => void;
   /**
-   * Allows to batch update multiple columns at the same time
+   * Allows to batch update multiple columns at the same time.
+   *
    * @param cols [[ColDef[]]]
    */
   updateColumns: (cols: ColDef[]) => void;
diff --git a/packages/grid/x-grid-modules/src/models/api/gridApi.ts b/packages/grid/x-grid-modules/src/models/api/gridApi.ts
index de9fc9a9c2b9..c0e2681672a9 100644
--- a/packages/grid/x-grid-modules/src/models/api/gridApi.ts
+++ b/packages/grid/x-grid-modules/src/models/api/gridApi.ts
@@ -7,32 +7,35 @@ import { PaginationApi } from './paginationApi';
 import { VirtualizationApi } from './virtualizationApi';
 
 /**
- * The Core API interface that is available in the grid [[apiRef]].
+ * The core API interface that is available in the grid [[apiRef]].
  */
 export interface CoreApi extends EventEmitter {
   /**
-   * Property that comes true when the grid has its EventEmitter initialised
+   * Property that comes true when the grid has its EventEmitter initialised.
    */
   isInitialised: boolean;
   /**
-   * Allows to register a handler for an event
+   * Allows to register a handler for an event.
+   *
    * @param event
    * @param handler
    */
   registerEvent: (event: string, handler: (param: any) => void) => () => void;
   /**
-   * Add a handler that will be triggered when the component unmount
+   * Add a handler that will be triggered when the component unmount.
+   *
    * @param handler
    */
   onUnmount: (handler: (param: any) => void) => void;
-
   /**
-   * Add a handler that will be triggered when the component resize
+   * Add a handler that will be triggered when the component resize.
+   *
    * @param handler
    */
   onResize: (handler: (param: any) => void) => void;
   /**
-   * Trigger a resize of the component, and recalculation of width and height
+   * Trigger a resize of the component, and recalculation of width and height.
+   *
    * @param handler
    */
   resize: () => void;
diff --git a/packages/grid/x-grid-modules/src/models/api/paginationApi.ts b/packages/grid/x-grid-modules/src/models/api/paginationApi.ts
index dd2101446a02..e93d030b9eb6 100644
--- a/packages/grid/x-grid-modules/src/models/api/paginationApi.ts
+++ b/packages/grid/x-grid-modules/src/models/api/paginationApi.ts
@@ -1,16 +1,18 @@
-import { PageChangedParams } from '../params/pageChangedParams';
+import { PageChangeParams } from '../params/pageChangeParams';
 
 /**
  * The pagination API interface that is available in the grid [[apiRef]].
  */
 export interface PaginationApi {
   /**
-   * Set the displayed page
+   * Set the displayed page.
+   *
    * @param page
    */
   setPage: (page: number) => void;
   /**
-   * Set the number of rows in one page
+   * Set the number of rows in one page.
+   *
    * @param pageSize
    */
   setPageSize: (pageSize: number) => void;
@@ -18,10 +20,10 @@ export interface PaginationApi {
    * Handler that is triggered after a new page has been displayed
    * @param handler
    */
-  onPageChanged: (handler: (param: PageChangedParams) => void) => () => void;
+  onPageChange: (handler: (param: PageChangeParams) => void) => () => void;
   /**
-   * Handler that is triggered after the page size was changed
+   * Handler that is triggered after the page size was change
    * @param handler
    */
-  onPageSizeChanged: (handler: (param: PageChangedParams) => void) => () => void;
+  onPageSizeChange: (handler: (param: PageChangeParams) => void) => () => void;
 }
diff --git a/packages/grid/x-grid-modules/src/models/api/rowApi.ts b/packages/grid/x-grid-modules/src/models/api/rowApi.ts
index 82257d1c85e6..b3a398163f95 100644
--- a/packages/grid/x-grid-modules/src/models/api/rowApi.ts
+++ b/packages/grid/x-grid-modules/src/models/api/rowApi.ts
@@ -5,45 +5,52 @@ import { RowData, RowId, RowModel, Rows } from '../rows';
  */
 export interface RowApi {
   /**
-   * Get the full set of rows as [[Rows]]
+   * Get the full set of rows as [[Rows]].
+   *
    * @returns [[Rows]]
    */
   getRowModels: () => Rows;
   /**
-   * Get the total number of rows in the grid
+   * Get the total number of rows in the grid.
    */
   getRowsCount: () => number;
   /**
-   * Return the list of row Ids
+   * Return the list of row Ids.
    */
   getAllRowIds: () => RowId[];
   /**
-   * Set a new set of Rows
+   * Set a new set of Rows.
+   *
    * @param rows
    */
   setRowModels: (rows: Rows) => void;
   /**
-   * Update any properties of the current set of Rows
+   * Update any properties of the current set of Rows.
+   *
    * @param updates
    */
   updateRowModels: (updates: Partial<RowModel>[]) => void;
   /**
-   * Update any properties of the current set of RowData[]
+   * Update any properties of the current set of RowData[].
+   *
    * @param updates
    */
   updateRowData: (updates: RowData[]) => void;
   /**
-   * Get the RowId of a row at a specific position
+   * Get the RowId of a row at a specific position.
+   *
    * @param index
    */
   getRowIdFromRowIndex: (index: number) => RowId;
   /**
-   * Get the row index of a row with a given Id
+   * Get the row index of a row with a given Id.
+   *
    * @param id
    */
   getRowIndexFromId: (id: RowId) => number;
   /**
-   * Get the [[RowModel]] of a given rowId
+   * Get the [[RowModel]] of a given rowId.
+   *
    * @param id
    */
   getRowFromId: (id: RowId) => RowModel;
diff --git a/packages/grid/x-grid-modules/src/models/api/selectionApi.ts b/packages/grid/x-grid-modules/src/models/api/selectionApi.ts
index e929eae0c6dc..b0b35f2832b1 100644
--- a/packages/grid/x-grid-modules/src/models/api/selectionApi.ts
+++ b/packages/grid/x-grid-modules/src/models/api/selectionApi.ts
@@ -1,20 +1,21 @@
 import { RowId, RowModel } from '../rows';
 import { RowSelectedParams } from '../params/rowSelectedParams';
-import { SelectionChangedParams } from '../params/selectionChangedParams';
+import { SelectionChangeParams } from '../params/selectionChangeParams';
 
 /**
- * The Selection API interface that is available in the grid [[apiRef]].
+ * The selection API interface that is available in the grid [[apiRef]].
  */
 export interface SelectionApi {
   /**
-   * Toggle the row selected state
+   * Toggle the row selected state.
+   *
    * @param id
-   * @param allowMultiple, default: false = deselect other rows if isSelected is true
-   * @param isSelected, default true
+   * @param allowMultiple Default: false = deselect other rows if isSelected is true
+   * @param isSelected Default true
    */
   selectRow: (id: RowId, allowMultiple?: boolean, isSelected?: boolean) => void;
   /**
-   * Batch toggle rows selected state
+   * Batch toggle rows selected state.
    *
    * @param ids
    * @param isSelected default true
@@ -22,19 +23,20 @@ export interface SelectionApi {
    */
   selectRows: (ids: RowId[], isSelected?: boolean, deselectOtherRows?: boolean) => void;
   // TODO unify parameter between SelectRow and SelectRows
-
   /**
-   * Get an array of selected rows
+   * Get an array of selected rows.
    */
   getSelectedRows: () => RowModel[];
   /**
-   * Handler triggered after a row is selected
+   * Handler triggered after a row is selected.
+   *
    * @param handler
    */
-  onSelectedRow: (handler: (param: RowSelectedParams) => void) => () => void;
+  onRowSelected: (handler: (param: RowSelectedParams) => void) => () => void;
   /**
-   * Handler triggered after one or multiple rows had a selection state changed.
+   * Handler triggered after one or multiple rows had a selection state change.
+   *
    * @param handler
    */
-  onSelectionChanged: (handler: (param: SelectionChangedParams) => void) => () => void;
+  onSelectionChange: (handler: (param: SelectionChangeParams) => void) => () => void;
 }
diff --git a/packages/grid/x-grid-modules/src/models/api/sortApi.ts b/packages/grid/x-grid-modules/src/models/api/sortApi.ts
index 0e29b93cb003..24953db42a14 100644
--- a/packages/grid/x-grid-modules/src/models/api/sortApi.ts
+++ b/packages/grid/x-grid-modules/src/models/api/sortApi.ts
@@ -2,21 +2,23 @@ import { SortModel } from '../sortModel';
 import { ColumnSortedParams } from '../params/columnSortedParams';
 
 /**
- * The Sort API interface that is available in the grid [[apiRef]].
+ * The sort API interface that is available in the grid [[apiRef]].
  */
 export interface SortApi {
   /**
-   * Get the sort model currently applied in the grid
+   * Get the sort model currently applied in the grid.
    */
   getSortModel: () => SortModel;
   /**
-   * Set the sort model of the component and trigger a new sorting of rows
+   * Set the sort model of the component and trigger a new sorting of rows.
+   *
    * @param model
    */
   setSortModel: (model: SortModel) => void;
   /**
-   * Handler triggered after the grid has sorted its rows
+   * Handler triggered after the grid has sorted its rows.
+   *
    * @param handler
    */
-  onColumnsSorted: (handler: (param: ColumnSortedParams) => void) => () => void;
+  onSortedColumns: (handler: (param: ColumnSortedParams) => void) => () => void;
 }
diff --git a/packages/grid/x-grid-modules/src/models/api/virtualizationApi.ts b/packages/grid/x-grid-modules/src/models/api/virtualizationApi.ts
index d71437da8a0d..a701f48a361d 100644
--- a/packages/grid/x-grid-modules/src/models/api/virtualizationApi.ts
+++ b/packages/grid/x-grid-modules/src/models/api/virtualizationApi.ts
@@ -4,34 +4,38 @@ import { ContainerProps } from '../containerProps';
 import { RenderContextProps } from '../renderContextProps';
 
 /**
- * The Virtualization API interface that is available in the grid [[apiRef]].
+ * The virtualization API interface that is available in the grid [[apiRef]].
  */
 export interface VirtualizationApi {
   /**
-   * Trigger the grid viewport to scroll to the position in pixel
+   * Trigger the grid viewport to scroll to the position in pixel.
+   *
    * @param params
    */
   scroll: (params: Partial<ScrollParams>) => void;
   /**
-   * Trigger the grid viewport to scroll to a row of x y indexes
+   * Trigger the grid viewport to scroll to a row of x y indexes.
+   *
    * @param params
    */
   scrollToIndexes: (params: CellIndexCoordinates) => void;
   /**
-   * Check if a column at index is currently visible in the viewport
+   * Check if a column at index is currently visible in the viewport.
+   *
    * @param colIndex
    */
   isColumnVisibleInWindow: (colIndex: number) => boolean;
   /**
-   * Get the current containerProps
+   * Get the current containerProps.
    */
   getContainerPropsState: () => ContainerProps | null;
   /**
-   * Get the current renderContext
+   * Get the current renderContext.
    */
   getRenderContextState: () => Partial<RenderContextProps> | undefined;
   /**
-   * Force the rendering engine to render a particular page. Not for pagination
+   * Force the rendering engine to render a particular page. Not for pagination.
+   *
    * @param page
    */
   renderPage: (page: number) => void;
diff --git a/packages/grid/x-grid-modules/src/models/colDef/colDef.ts b/packages/grid/x-grid-modules/src/models/colDef/colDef.ts
index d5c720053cb5..40ddab399b9f 100644
--- a/packages/grid/x-grid-modules/src/models/colDef/colDef.ts
+++ b/packages/grid/x-grid-modules/src/models/colDef/colDef.ts
@@ -16,107 +16,116 @@ export type Alignement = 'left' | 'right' | 'center';
  */
 export interface ColDef {
   /**
-   * String Column Identifier, used to map with [[RowData]] values
+   * String Column Identifier, used to map with [[RowData]] values.
    */
   field: string;
   /**
-   * The title of the column rendered in the column header cell
+   * The title of the column rendered in the column header cell.
    */
   headerName?: string;
   /**
-   * The description of the column rendered as tooltip if the column header name is not fully displayed
+   * The description of the column rendered as tooltip if the column header name is not fully displayed.
    */
   description?: string;
   /**
-   * Set the width of the column
+   * Set the width of the column.
+   *
    * @default 100
    */
   width?: number;
   /**
-   * Toggle the visibility of a column
+   * Toggle the visibility of a column.
    */
   hide?: boolean;
   /**
-   * Make the column sortable
+   * Make the column sortable.
+   *
    * @default true
    */
   sortable?: boolean;
   /**
-   * Make the column resizable
+   * Make the column resizable.
+   *
    * @default true
    */
   resizable?: boolean;
   /**
-   * A comparator function used to sort rows
+   * A comparator function used to sort rows.
    */
   sortComparator?: ComparatorFn;
   /**
-   * Sort the rows in a specific direction
+   * Sort the rows in a specific direction.
    */
   sortDirection?: SortDirection;
   /**
-   * If multiple columns are sorted, this setting allows to order the columns sorting sequence
+   * If multiple columns are sorted, this setting allows to order the columns sorting sequence.
    */
   sortIndex?: number;
   /**
-   * Type allows to merge this object with a default definition [[ColDef]]
+   * Type allows to merge this object with a default definition [[ColDef]].
+   *
    * @default string
    */
   type?: ColType;
   /**
-   * Allows to align the column values in cells
+   * Allows to align the column values in cells.
    */
   align?: Alignement;
   /**
-   * Function that allows to get a specific data instead of field to render in the cell
+   * Function that allows to get a specific data instead of field to render in the cell.
+   *
    * @param params
    */
   valueGetter?: (params: ValueGetterParams) => CellValue;
   /**
-   * Function that allows to apply a formatter before rendering its value
+   * Function that allows to apply a formatter before rendering its value.
+   *
    * @param params
    */
   valueFormatter?: (params: ValueFormatterParams) => CellValue;
   /**
-   * Css class that will be added in cells for that column
+   * Class name that will be added in cells for that column.
    */
   cellClassName?: CellClassNamePropType;
   /**
-   * Set of css class rules that will be dynamically applied on cells
+   * Set of CSS class rules that will be dynamically applied on cells.
    */
   cellClassRules?: CellClassRules;
   /**
-   * Allows to override the component rendered as cell for this column
+   * Allows to override the component rendered as cell for this column.
+   *
    * @param params
    */
   renderCell?: (params: CellParams) => React.ReactElement;
   /**
-   * Css class that will be added in the column header cell
+   * Class name that will be added in the column header cell.
    */
   headerClassName?: string | string[];
   /**
-   * Allows to render a component in the column header cell
+   * Allows to render a component in the column header cell.
+   *
    * @param params
    */
   renderHeader?: (params: ColParams) => React.ReactElement;
   /**
-   * Header cell element alignment
+   * Header cell element alignment.
    */
   headerAlign?: Alignement;
   /**
-   * Toggle the visibility of the sort icons
+   * Toggle the visibility of the sort icons.
    */
   hideSortIcons?: boolean;
   /**
-   * Allows to disable the click event in cells
+   * Allows to disable the click event in cells.
    */
   disableClickEventBubbling?: boolean;
 }
+
 export type Columns = ColDef[];
 export type ColTypeDef = Omit<ColDef, 'field'> & { extendType?: NativeColTypes };
 
 /**
- * Meta Info about Columns.
+ * Meta Info about columns.
  */
 export interface ColumnsMeta {
   totalWidth: number;
diff --git a/packages/grid/x-grid-modules/src/models/containerProps.ts b/packages/grid/x-grid-modules/src/models/containerProps.ts
index 1669eced88ca..7f4602aa8b0b 100644
--- a/packages/grid/x-grid-modules/src/models/containerProps.ts
+++ b/packages/grid/x-grid-modules/src/models/containerProps.ts
@@ -5,48 +5,47 @@ import { ElementSize } from './elementSize';
  */
 export interface ContainerProps {
   /**
-   * Our rendering Zone constitute the maximum number of rows that will be rendered at any given time in the grid
+   * Our rendering zone constitute the maximum number of rows that will be rendered at any given time in the grid.
    */
   renderingZonePageSize: number;
   /**
-   * The number of rows that fit in the viewport
+   * The number of rows that fit in the viewport.
    */
   viewportPageSize: number;
   /**
-   * The last page number
+   * The last page number.
    */
   lastPage: number;
-
   /**
-   * Indicates if a vertical scrollbar is visible
+   * Indicates if a vertical scrollbar is visible.
    */
   hasScrollY: boolean;
   /**
-   * Indicates if an horizontal scrollbar is visible
+   * Indicates if an horizontal scrollbar is visible.
    */
   hasScrollX: boolean;
   /**
-   * The scrollbar size
+   * The scrollbar size.
    */
   scrollBarSize: number;
   /**
-   * The total Element size required to render the set of rows including scrollbars
+   * The total element size required to render the set of rows including scrollbars.
    */
   totalSizes: ElementSize;
   /**
-   * The viewport size including scrollbars
+   * The viewport size including scrollbars.
    */
   windowSizes: ElementSize;
   /**
-   * The size of the container containing all the rendered rows
+   * The size of the container containing all the rendered rows.
    */
   renderingZone: ElementSize;
   /**
-   * the size of the container holding the set of rows visible to the user
+   * the size of the container holding the set of rows visible to the user.
    */
   viewportSize: ElementSize;
   /**
-   * The total Element size required to render the full set of rows minus the scrollbars
+   * The total Element size required to render the full set of rows minus the scrollbars.
    */
   dataContainerSizes: ElementSize;
 }
diff --git a/packages/grid/x-grid-modules/src/models/elementSize.ts b/packages/grid/x-grid-modules/src/models/elementSize.ts
index cb9151e11d90..b551ab050abe 100644
--- a/packages/grid/x-grid-modules/src/models/elementSize.ts
+++ b/packages/grid/x-grid-modules/src/models/elementSize.ts
@@ -3,11 +3,11 @@
  */
 export interface ElementSize {
   /**
-   * The width of a container or HTMLElement
+   * The height of a container or HTMLElement.
    */
-  width: number;
+  height: number;
   /**
-   * The height of a container or HTMLElement
+   * The width of a container or HTMLElement.
    */
-  height: number;
+  width: number;
 }
diff --git a/packages/grid/x-grid-modules/src/models/featureMode.ts b/packages/grid/x-grid-modules/src/models/featureMode.ts
new file mode 100644
index 000000000000..024bf94186c9
--- /dev/null
+++ b/packages/grid/x-grid-modules/src/models/featureMode.ts
@@ -0,0 +1,4 @@
+export enum FeatureMode {
+  client = 'client',
+  server = 'server',
+}
diff --git a/packages/grid/x-grid-modules/src/models/gridComponentOverridesProp.tsx b/packages/grid/x-grid-modules/src/models/gridComponentOverridesProp.tsx
index 1d43c93d46d2..27b2c0a45f3f 100644
--- a/packages/grid/x-grid-modules/src/models/gridComponentOverridesProp.tsx
+++ b/packages/grid/x-grid-modules/src/models/gridComponentOverridesProp.tsx
@@ -6,23 +6,23 @@ import { ComponentParams } from './params';
  */
 export interface GridComponentOverridesProp {
   /**
-   * pagination component rendered in the grid footer by default
+   * Pagination component rendered in the grid footer by default.
    */
   pagination?: React.ElementType<ComponentParams>;
   /**
-   * loadingOverlay component rendered when the grid is in a loading state
+   * Loading overlay component rendered when the grid is in a loading state.
    */
   loadingOverlay?: React.ElementType<ComponentParams>;
   /**
-   * noRowsOverlay component rendered when the grid has no rows
+   * No rows overlay component rendered when the grid has no rows.
    */
   noRowsOverlay?: React.ElementType<ComponentParams>;
   /**
-   * footer component rendered at the bottom of the grid viewport
+   * Footer component rendered at the bottom of the grid viewport.
    */
   footer?: React.ElementType<ComponentParams>;
   /**
-   * header component rendered above the grid column header bar
+   * Header component rendered above the grid column header bar.
    */
   header?: React.ElementType<ComponentParams>;
 }
diff --git a/packages/grid/x-grid-modules/src/models/gridOptions.tsx b/packages/grid/x-grid-modules/src/models/gridOptions.tsx
index 849e334ed99d..4048bb76bf50 100644
--- a/packages/grid/x-grid-modules/src/models/gridOptions.tsx
+++ b/packages/grid/x-grid-modules/src/models/gridOptions.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import { SortDirection } from './sortModel';
 import { Logger } from '../hooks/utils';
 import { ArrowDownward, ArrowUpward, SeparatorIcon } from '../components/icons';
-import { ColumnHeaderClickedParams } from './params/columnHeaderClickedParams';
 import { ColumnSortedParams } from './params/columnSortedParams';
-import { RowClickedParam } from './params/rowClickedParams';
-import { CellClickedParam } from './params/cellClickedParams';
 import { RowSelectedParams } from './params/rowSelectedParams';
-import { SelectionChangedParams } from './params/selectionChangedParams';
-import { PageChangedParams } from './params/pageChangedParams';
+import { SelectionChangeParams } from './params/selectionChangeParams';
+import { PageChangeParams } from './params/pageChangeParams';
 import { ColumnTypesRecord, DEFAULT_COLUMN_TYPES } from './colDef';
+import { FeatureMode } from './featureMode';
+import { ColParams } from './params/colParams';
+import { CellParams, RowParams } from './params/cellParams';
 
 /**
  * Set of icons used in the grid component UI.
@@ -36,166 +36,224 @@ export interface IconsOptions {
 export interface GridOptions {
   /**
    * Turn grid height dynamic and follow the number of rows in the grid.
+   *
    * @default false
    */
   autoHeight?: boolean;
   /**
    * Set the height in pixel of a row in the grid.
+   *
    * @default 52
    */
   rowHeight: number;
   /**
    * Set the height in pixel of the column headers in the grid.
+   *
    * @default 56
    */
   headerHeight: number;
   /**
    * Set the height/width of the grid inner scrollbar.
+   *
    * @default 15
    */
   scrollbarSize: number;
   /**
    * Number of columns rendered outside the grid viewport.
+   *
    * @default 2
    */
   columnBuffer: number;
   /**
    * Enable multiple selection using the CTRL or CMD key.
+   *
    * @default true
    */
   enableMultipleSelection: boolean;
   /**
    * Enable sorting the grid rows with one or more columns.
+   *
    * @default true
    */
   enableMultipleColumnsSorting: boolean;
   /**
    * Display the right border of the cells.
+   *
    * @default false
    */
   showCellRightBorder?: boolean;
   /**
    * Display the column header right border.
+   *
    * @default false
    */
   showColumnRightBorder?: boolean;
   /**
    * Extend rows to fill the grid container width.
+   *
    * @default true
    */
   extendRowFullWidth?: boolean;
   /**
    * The order of the sorting sequence.
+   *
    * @default ['asc', 'desc', null]
    */
   sortingOrder: SortDirection[];
   /**
    * Activate pagination.
+   *
    * @default false
    */
   pagination?: boolean;
   /**
    * Set the number of rows in one page.
+   *
    * @default 100
    */
-  paginationPageSize?: number;
+  pageSize?: number;
   /**
    * Auto-scale the pageSize with the container size to the max number of rows to avoid rendering a vertical scroll bar.
+   *
    * @default false
    */
-  paginationAutoPageSize?: boolean;
+  autoPageSize?: boolean;
   /**
-   * Select the paginationPageSize dynamically using the component UI.
+   * Select the pageSize dynamically using the component UI.
+   *
    * @default [25, 50, 100]
    */
-  paginationRowsPerPageOptions?: number[];
+  rowsPerPageOptions?: number[];
+  /**
+   * Pagination can be processed on the server or client-side.
+   * Set it to FeatureMode.client or `client` if you would like to handle the pagination on the client-side.
+   * Set it to FeatureMode.server or `server` if you would like to handle the pagination on the server-side.
+   */
+  paginationMode?: FeatureMode;
+  /**
+   * Set the total number of rows, if it is different than the length of the value `rows` prop.
+   */
+  rowCount?: number;
+  /**
+   * Set the current page.
+   * @default 1
+   */
+  page?: number;
   /**
    * Toggle footer component visibility.
+   *
    * @default false
    */
   hideFooter?: boolean;
   /**
    * Toggle footer row count element visibility.
+   *
    * @default false
    */
   hideFooterRowCount?: boolean;
   /**
    * Toggle footer selected row count element visibility.
+   *
    * @default false
    */
   hideFooterSelectedRowCount?: boolean;
   /**
    * Toggle footer pagination component visibility.
+   *
    * @default false
    */
   hideFooterPagination?: boolean;
   /**
    * Add a first column with checkbox that allows to select rows.
+   *
    * @default false
    */
   checkboxSelection?: boolean;
   /**
    * Disable selection on click on a row or cell.
+   *
    * @default false
    */
   disableSelectionOnClick?: boolean;
   /**
    * Pass a custom logger in the components that implements the [[Logger]] interface.
+   *
    * @default null
    */
   logger?: Logger;
   /**
    * Allows to pass the logging level or false to turn off logging.
+   *
    * @default debug
    */
   logLevel?: string | false;
-
   /**
    * Handler triggered when the click event comes from a cell element.
-   * @param param with all properties from [[CellClickedParam]].
+   *
+   * @param param With all properties from [[CellParams]].
    */
-  onCellClicked?: (param: CellClickedParam) => void;
+  onCellClick?: (param: CellParams) => void;
+  /**
+   * Handler triggered when the hover event comes from a cell element.
+   *
+   * @param param With all properties from [[CellParams]].
+   */
+  onCellHover?: (param: CellParams) => void;
   /**
    * Handler triggered when the click event comes from a row container element.
-   * @param param with all properties from [[RowClickedParam]].
+   *
+   * @param param With all properties from [[RowParams]].
+   */
+  onRowClick?: (param: RowParams) => void;
+  /**
+   * Handler triggered when the hover event comes from a row container element.
+   *
+   * @param param With all properties from [[RowParams]].
    */
-  onRowClicked?: (param: RowClickedParam) => void;
+  onRowHover?: (param: RowParams) => void;
   /**
    * Handler triggered when one row get selected.
-   * @param param with all properties from [[RowSelectedParams]].
+   *
+   * @param param With all properties from [[RowSelectedParams]].
    */
   onRowSelected?: (param: RowSelectedParams) => void;
   /**
-   * Handler triggered when one or multiple rows get their selection state changed.
-   * @param param with all properties from [[SelectionChangedParams]]
+   * Handler triggered when one or multiple rows get their selection state change.
+   *
+   *
+   * @param param With all properties from [[SelectionChangeParams]]
    */
-  onSelectionChanged?: (param: SelectionChangedParams) => void;
+  onSelectionChange?: (param: SelectionChangeParams) => void;
   /**
    * Handler triggered when the click event comes from a column header element.
-   * @param param with all properties from [[ColumnHeaderClickedParams]].
+   *
+   * @param param With all properties from [[ColParams]].
    */
-  onColumnHeaderClicked?: (param: ColumnHeaderClickedParams) => void;
+  onColumnHeaderClick?: (param: ColParams) => void;
   /**
    * Handler triggered when grid resorted its rows.
-   * @param param with all properties from [[ColumnSortedParams]].
+   *
+   * @param param With all properties from [[ColumnSortedParams]].
    */
-  onColumnsSorted?: (params: ColumnSortedParams) => void;
+  onSortedColumns?: (params: ColumnSortedParams) => void;
   /**
-   * Handler triggered when the current page has changed.
-   * @param param with all properties from [[PageChangedParams]].
+   * Handler triggered when the current page has change.
+   *
+   *
+   * @param param With all properties from [[PageChangeParams]].
    */
-  onPageChanged?: (param: PageChangedParams) => void;
+  onPageChange?: (param: PageChangeParams) => void;
   /**
-   * Handler triggered when the page size changed.
-   * @param param with all properties from [[PageChangedParams]].
+   * Handler triggered when the page size change.
+   *
+   *
+   * @param param With all properties from [[PageChangeParams]].
    */
-  onPageSizeChanged?: (param: PageChangedParams) => void;
-
+  onPageSizeChange?: (param: PageChangeParams) => void;
   /**
    * Set of icons used in the grid.
    */
   icons: IconsOptions;
-
   /**
    * Extend native column types with your new column types.
    */
@@ -213,8 +271,9 @@ export const DEFAULT_GRID_OPTIONS: GridOptions = {
   columnBuffer: 2,
   enableMultipleSelection: true,
   enableMultipleColumnsSorting: true,
-  paginationRowsPerPageOptions: [25, 50, 100],
-  paginationPageSize: 100,
+  rowsPerPageOptions: [25, 50, 100],
+  pageSize: 100,
+  paginationMode: FeatureMode.client,
   extendRowFullWidth: true,
   sortingOrder: ['asc', 'desc', null],
   columnTypes: DEFAULT_COLUMN_TYPES,
diff --git a/packages/grid/x-grid-modules/src/models/index.ts b/packages/grid/x-grid-modules/src/models/index.ts
index 67ec9c501345..700d2c3b0566 100644
--- a/packages/grid/x-grid-modules/src/models/index.ts
+++ b/packages/grid/x-grid-modules/src/models/index.ts
@@ -1,6 +1,7 @@
 export * from './colDef';
 export * from './containerProps';
 export * from './elementSize';
+export * from './featureMode';
 export * from './gridOptions';
 export * from './rootContainerRef';
 export * from './renderContextProps';
diff --git a/packages/grid/x-grid-modules/src/models/params/cellClickedParams.ts b/packages/grid/x-grid-modules/src/models/params/cellClickedParams.ts
deleted file mode 100644
index 35092299b15c..000000000000
--- a/packages/grid/x-grid-modules/src/models/params/cellClickedParams.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { CellValue, RowData } from '../rows';
-import { ColDef } from '../colDef';
-
-/**
- * Object passed as parameter in the Cell Click event handler.
- */
-export interface CellClickedParam {
-  /**
-   * The HTMLElement that triggered the event
-   */
-  element: HTMLElement;
-  /**
-   * The value of the cell that triggered the event
-   */
-  value: CellValue;
-  /**
-   * The column field of the cell that triggered the event
-   */
-  field: string;
-  /**
-   * The other row data of the cell that triggered the event
-   */
-  data: RowData;
-  /**
-   * The row index of the cell that triggered the event
-   */
-  rowIndex: number;
-  /**
-   * The column of the cell that triggered the event
-   */
-  colDef: ColDef;
-}
diff --git a/packages/grid/x-grid-modules/src/models/params/cellParams.ts b/packages/grid/x-grid-modules/src/models/params/cellParams.ts
index 650b7e568949..2d48f50677ce 100644
--- a/packages/grid/x-grid-modules/src/models/params/cellParams.ts
+++ b/packages/grid/x-grid-modules/src/models/params/cellParams.ts
@@ -5,40 +5,55 @@ import { CellValue, RowData, RowModel } from '../rows';
  */
 export interface CellParams {
   /**
-   * the cell value
+   * The HTMLElement that triggered the event
+   */
+  element?: HTMLElement;
+  /**
+   * The column field of the cell that triggered the event
+   */
+  field: string;
+  /**
+   * The cell value.
    */
   value: CellValue;
   /**
-   * A function that let you get data from other columns
+   * A function that let you get data from other columns.
+   *
    * @param field
    */
   getValue: (field: string) => CellValue;
   /**
-   * The full set of data of the row that the current cell belongs to
+   * The full set of data of the row that the current cell belongs to.
    */
   data: RowData;
   /**
-   * The row model  of the row that the current cell belongs to
+   * The row model of the row that the current cell belongs to.
    */
   rowModel: RowModel;
   /**
-   * The column of the row that the current cell belongs to
+   * The column of the row that the current cell belongs to.
    */
   colDef: any;
   /**
-   * The row index of the row that the current cell belongs to
+   * The row index of the row that the current cell belongs to.
    */
   rowIndex: number;
   /**
-   * ApiRef that let you manipulate the grid
+   * ApiRef that let you manipulate the grid.
    */
   api: any;
 }
 
+/**
+ * Alias of CellParams.
+ */
+export type RowParams = Omit<CellParams, 'value'>;
+
 /**
  * Alias of CellParams.
  */
 export type ValueGetterParams = CellParams;
+
 /**
  * Alias of CellParams.
  */
diff --git a/packages/grid/x-grid-modules/src/models/params/colParams.ts b/packages/grid/x-grid-modules/src/models/params/colParams.ts
index a5416daba910..b750ace92432 100644
--- a/packages/grid/x-grid-modules/src/models/params/colParams.ts
+++ b/packages/grid/x-grid-modules/src/models/params/colParams.ts
@@ -3,15 +3,19 @@
  */
 export interface ColParams {
   /**
-   * The column of the current header component
+   * The column field of the column that triggered the event
+   */
+  field: string;
+  /**
+   * The column of the current header component.
    */
   colDef: any;
   /**
-   * The column index of the current header component
+   * The column index of the current header component.
    */
   colIndex: number;
   /**
-   * ApiRef that let you manipulate the grid
+   * API ref that let you manipulate the grid.
    */
   api: any;
 }
diff --git a/packages/grid/x-grid-modules/src/models/params/columnHeaderClickedParams.ts b/packages/grid/x-grid-modules/src/models/params/columnHeaderClickedParams.ts
deleted file mode 100644
index d4777a04670e..000000000000
--- a/packages/grid/x-grid-modules/src/models/params/columnHeaderClickedParams.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ColDef } from '../colDef';
-
-/**
- * Object passed as parameter of the column header click event.
- */
-export interface ColumnHeaderClickedParams {
-  /**
-   * The column field of the column that triggered the event
-   */
-  field: string;
-  /**
-   * The column [[ColDef]] of the column that triggered the event
-   */
-  column: ColDef;
-}
diff --git a/packages/grid/x-grid-modules/src/models/params/columnSortedParams.ts b/packages/grid/x-grid-modules/src/models/params/columnSortedParams.ts
index 68aa083b988b..22872c5b8ce5 100644
--- a/packages/grid/x-grid-modules/src/models/params/columnSortedParams.ts
+++ b/packages/grid/x-grid-modules/src/models/params/columnSortedParams.ts
@@ -6,11 +6,12 @@ import { SortModel } from '../sortModel';
  */
 export interface ColumnSortedParams {
   /**
-   * An array of column [[ColDef]] that the grid is sorted with. The array order corresponds to the order of sorting
+   * An array of column [[ColDef]] that the grid is sorted with.
+   * The array order corresponds to the order of sorting.
    */
   sortedColumns: ColDef[];
   /**
-   * The sort model used to sort the grid
+   * The sort model used to sort the grid.
    */
   sortModel: SortModel;
 }
diff --git a/packages/grid/x-grid-modules/src/models/params/componentParams.ts b/packages/grid/x-grid-modules/src/models/params/componentParams.ts
index 6c16e3ca5a38..e57a9a8ce69a 100644
--- a/packages/grid/x-grid-modules/src/models/params/componentParams.ts
+++ b/packages/grid/x-grid-modules/src/models/params/componentParams.ts
@@ -10,27 +10,27 @@ import { ApiRef } from '../api';
  */
 export interface ComponentParams {
   /**
-   * The object containing all pagination details in [[PaginationProps]]
+   * The object containing all pagination details in [[PaginationProps]].
    */
   paginationProps: PaginationProps;
   /**
-   * The full set of rows
+   * The full set of rows.
    */
   rows: Rows;
   /**
-   * The full set of columns
+   * The full set of columns.
    */
   columns: Columns;
   /**
-   * The full set of options
+   * The full set of options.
    */
   options: GridOptions;
   /**
-   * ApiRef that let you manipulate the grid
+   * ApiRef that let you manipulate the grid.
    */
   api: ApiRef;
   /**
-   * The ref of the inner div Element of the grid
+   * The ref of the inner div Element of the grid.
    */
   rootElement: RootContainerRef;
 }
diff --git a/packages/grid/x-grid-modules/src/models/params/index.ts b/packages/grid/x-grid-modules/src/models/params/index.ts
index 02e4c9472988..6be0573fbc78 100644
--- a/packages/grid/x-grid-modules/src/models/params/index.ts
+++ b/packages/grid/x-grid-modules/src/models/params/index.ts
@@ -1,10 +1,7 @@
-export * from './cellClickedParams';
 export * from './cellParams';
 export * from './colParams';
-export * from './columnHeaderClickedParams';
 export * from './columnSortedParams';
 export * from './componentParams';
-export * from './pageChangedParams';
-export * from './rowClickedParams';
+export * from './pageChangeParams';
 export * from './rowSelectedParams';
-export * from './selectionChangedParams';
+export * from './selectionChangeParams';
diff --git a/packages/grid/x-grid-modules/src/models/params/pageChangeParams.ts b/packages/grid/x-grid-modules/src/models/params/pageChangeParams.ts
new file mode 100644
index 000000000000..4bb0539c5bd9
--- /dev/null
+++ b/packages/grid/x-grid-modules/src/models/params/pageChangeParams.ts
@@ -0,0 +1,24 @@
+import { FeatureMode } from '../featureMode';
+
+/**
+ * Object passed as parameter of the page change event handler.
+ */
+export interface PageChangeParams {
+  /**
+   * The new page.
+   */
+  page: number;
+  /**
+   * The total number of pages.
+   */
+  pageCount: number;
+  /**
+   * The number of rows in a page.
+   */
+  pageSize: number;
+  /**
+   * The total number of rows.
+   */
+  rowCount: number;
+  paginationMode: FeatureMode;
+}
diff --git a/packages/grid/x-grid-modules/src/models/params/pageChangedParams.ts b/packages/grid/x-grid-modules/src/models/params/pageChangedParams.ts
deleted file mode 100644
index fe357a6d85df..000000000000
--- a/packages/grid/x-grid-modules/src/models/params/pageChangedParams.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Object passed as parameter of the page changed event handler.
- */
-export interface PageChangedParams {
-  /**
-   * The new page
-   */
-  page: number;
-  /**
-   * The total number of pages
-   */
-  pageCount: number;
-  /**
-   * The number of rows in a page
-   */
-  pageSize: number;
-  /**
-   * The total number of rows
-   */
-  rowCount: number;
-}
diff --git a/packages/grid/x-grid-modules/src/models/params/rowClickedParams.ts b/packages/grid/x-grid-modules/src/models/params/rowClickedParams.ts
deleted file mode 100644
index 2f92bab7a6cc..000000000000
--- a/packages/grid/x-grid-modules/src/models/params/rowClickedParams.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { RowData, RowModel } from '../rows';
-import { ColDef } from '../colDef/colDef';
-
-/**
- * The object passed as parameter of the Row click event handler.
- */
-export interface RowClickedParam {
-  /**
-   * The row element that trigger the click
-   */
-  element: HTMLElement;
-  /**
-   * The row model of the row that triggered the click
-   */
-  rowModel: RowModel;
-  /**
-   * The row data of the row that triggered the click
-   */
-  data: RowData;
-  /**
-   * The row index of the row that triggered the click
-   */
-  rowIndex: number;
-  /**
-   * The column of the row that triggered the click
-   */
-  colDef: ColDef;
-}
diff --git a/packages/grid/x-grid-modules/src/models/params/rowSelectedParams.ts b/packages/grid/x-grid-modules/src/models/params/rowSelectedParams.ts
index 41a2f4eb5f8c..06820054c7de 100644
--- a/packages/grid/x-grid-modules/src/models/params/rowSelectedParams.ts
+++ b/packages/grid/x-grid-modules/src/models/params/rowSelectedParams.ts
@@ -5,15 +5,15 @@ import { RowData } from '../rows';
  */
 export interface RowSelectedParams {
   /**
-   * The row data of the row that triggers the event
+   * The row data of the row that triggers the event.
    */
   data: RowData;
   /**
-   * The row index of the row that triggers the event
+   * The row index of the row that triggers the event.
    */
   rowIndex: number;
   /**
-   * The selected state of the row that triggers the event
+   * The selected state of the row that triggers the event.
    */
   isSelected: boolean;
 }
diff --git a/packages/grid/x-grid-modules/src/models/params/selectionChangeParams.ts b/packages/grid/x-grid-modules/src/models/params/selectionChangeParams.ts
new file mode 100644
index 000000000000..a6d42170f201
--- /dev/null
+++ b/packages/grid/x-grid-modules/src/models/params/selectionChangeParams.ts
@@ -0,0 +1,11 @@
+import { RowData } from '../rows';
+
+/**
+ * Object passed as parameter as the selection change event handler.
+ */
+export interface SelectionChangeParams {
+  /**
+   * The set of rows that had their selection state change.
+   */
+  rows: RowData[];
+}
diff --git a/packages/grid/x-grid-modules/src/models/params/selectionChangedParams.ts b/packages/grid/x-grid-modules/src/models/params/selectionChangedParams.ts
deleted file mode 100644
index 3c5cdfb12f31..000000000000
--- a/packages/grid/x-grid-modules/src/models/params/selectionChangedParams.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { RowData } from '../rows';
-
-/**
- * Object passed as parameter as the selection changed event handler.
- */
-export interface SelectionChangedParams {
-  /**
-   * The set of rows that had their selection state changed.
-   */
-  rows: RowData[];
-}
diff --git a/packages/grid/x-grid-modules/src/models/renderContextProps.ts b/packages/grid/x-grid-modules/src/models/renderContextProps.ts
index 2616b13a277f..f9b37a3cc0d7 100644
--- a/packages/grid/x-grid-modules/src/models/renderContextProps.ts
+++ b/packages/grid/x-grid-modules/src/models/renderContextProps.ts
@@ -5,19 +5,19 @@ import { ContainerProps } from './containerProps';
  */
 export interface RenderColumnsProps {
   /**
-   * The column index of the first rendered column
+   * The column index of the first rendered column.
    */
   firstColIdx: number;
   /**
-   * The column index of the last rendered column
+   * The column index of the last rendered column.
    */
   lastColIdx: number;
   /**
-   * The left empty width required to position the viewport at the beginning of the first rendered column
+   * The left empty width required to position the viewport at the beginning of the first rendered column.
    */
   leftEmptyWidth: number;
   /**
-   * The right empty width limit the position the viewport to the end of the last rendered column
+   * The right empty width limit the position the viewport to the end of the last rendered column.
    */
   rightEmptyWidth: number;
 }
@@ -45,13 +45,13 @@ export interface RenderRowProps {
  */
 export interface RenderPaginationProps {
   /**
-   * The current page if pagination is enabled
+   * The current page if pagination is enabled.
    */
   paginationCurrentPage?: number;
   /**
-   * The current page size if pagination is enabled
+   * The current page size if pagination is enabled.
    */
-  paginationPageSize?: number;
+  pageSize?: number;
 }
 
 /**
diff --git a/packages/grid/x-grid-modules/src/models/rows.ts b/packages/grid/x-grid-modules/src/models/rows.ts
index 65efc32e143a..3bf16610891c 100644
--- a/packages/grid/x-grid-modules/src/models/rows.ts
+++ b/packages/grid/x-grid-modules/src/models/rows.ts
@@ -40,13 +40,14 @@ export interface RowModel {
 
 /**
  * An helper function allowing to create [[RowModel]] from [[RowData]].
- * @param a row as [[RowData]].
- * @returns a row as [[RowModel]].
+ *
+ * @param rowData Row as [[RowData]].
+ * @returns A row as [[RowModel]].
  */
-export function createRow(r: RowData): RowModel {
+export function createRow(rowData: RowData): RowModel {
   const row: RowModel = {
-    id: r.id,
-    data: r,
+    id: rowData.id,
+    data: rowData,
     selected: false,
   };
   return row;
diff --git a/packages/grid/x-grid-modules/src/models/sortModel.ts b/packages/grid/x-grid-modules/src/models/sortModel.ts
index 213374e23717..6f52124fde3d 100644
--- a/packages/grid/x-grid-modules/src/models/sortModel.ts
+++ b/packages/grid/x-grid-modules/src/models/sortModel.ts
@@ -14,11 +14,11 @@ export type ComparatorFn = (v1: CellValue, v2: CellValue, row1: RowModel, row2:
  */
 export interface SortItem {
   /**
-   * The column field identifier
+   * The column field identifier.
    */
   field: string;
   /**
-   * The direction of the column that the grid should sort
+   * The direction of the column that the grid should sort.
    */
   sort: SortDirection;
 }
diff --git a/packages/grid/x-grid-modules/src/utils/index.ts b/packages/grid/x-grid-modules/src/utils/index.ts
index 4907a489e20b..6afd75dd3f41 100644
--- a/packages/grid/x-grid-modules/src/utils/index.ts
+++ b/packages/grid/x-grid-modules/src/utils/index.ts
@@ -4,3 +4,4 @@ export * from './domUtils';
 export * from './classnames';
 export * from './keyboardUtils';
 export * from './mergeOptions';
+export * from './paramsUtils';
diff --git a/packages/grid/x-grid-modules/src/utils/paramsUtils.ts b/packages/grid/x-grid-modules/src/utils/paramsUtils.ts
new file mode 100644
index 000000000000..4c10e9a64893
--- /dev/null
+++ b/packages/grid/x-grid-modules/src/utils/paramsUtils.ts
@@ -0,0 +1,57 @@
+import { RowModel, CellValue } from '../models/rows';
+import { ColDef } from '../models/colDef/colDef';
+import { GridApi } from '../models/api/gridApi';
+import { CellParams, RowParams } from '../models/params/cellParams';
+
+export function buildCellParams({
+  element,
+  value,
+  rowIndex,
+  rowModel,
+  colDef,
+  api,
+}: {
+  rowModel: RowModel;
+  colDef: ColDef;
+  rowIndex: number;
+  value: CellValue;
+  api: GridApi;
+  element?: HTMLElement;
+}): CellParams {
+  return {
+    element,
+    value,
+    field: colDef.field,
+    getValue: (field: string) => rowModel.data[field],
+    data: rowModel.data,
+    rowModel,
+    colDef,
+    rowIndex,
+    api,
+  };
+}
+
+export function buildRowParams({
+  element,
+  rowIndex,
+  rowModel,
+  colDef,
+  api,
+}: {
+  rowModel: RowModel;
+  colDef: ColDef;
+  rowIndex: number;
+  api: GridApi;
+  element?: HTMLElement;
+}): RowParams {
+  return {
+    element,
+    field: colDef.field,
+    getValue: (field: string) => rowModel.data[field],
+    data: rowModel.data,
+    rowModel,
+    colDef,
+    rowIndex,
+    api,
+  };
+}
diff --git a/packages/grid/x-grid/CHANGELOG.md b/packages/grid/x-grid/CHANGELOG.md
index c3925e14c366..c3c1435a09e3 100644
--- a/packages/grid/x-grid/CHANGELOG.md
+++ b/packages/grid/x-grid/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.64](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.64) (2020-07-27)
+
+**Note:** Version bump only for package @material-ui/x-grid
+
+
+
+
+
+## [0.1.63](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.63) (2020-07-27)
+
+**Note:** Version bump only for package @material-ui/x-grid
+
+
+
+
+
 ## [0.1.62](https://github.com/mui-org/material-ui-x/compare/v0.1.61...v0.1.62) (2020-07-22)
 
 **Note:** Version bump only for package @material-ui/x-grid
diff --git a/packages/grid/x-grid/package.json b/packages/grid/x-grid/package.json
index 3597d3821bb0..422a3391b134 100644
--- a/packages/grid/x-grid/package.json
+++ b/packages/grid/x-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/x-grid",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "description": "The Material-UI X edition of the data grid component.",
   "author": "Material-UI Team",
   "main": "dist/index-cjs.js",
@@ -17,7 +17,7 @@
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@material-ui/x-grid-modules": "^0.1.62",
+    "@material-ui/x-grid-modules": "^0.1.64",
     "@material-ui/x-license": "^0.1.61",
     "@rollup/plugin-node-resolve": "^8.0.1",
     "@rollup/plugin-replace": "^2.3.3",
@@ -25,7 +25,6 @@
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-command": "^1.1.3",
     "rollup-plugin-dts": "^1.4.7",
-    "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-sourcemaps": "^0.6.2",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-typescript2": "^0.27.1"
diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
index 5eb32d12a70c..9aca67bfeacc 100644
--- a/packages/storybook/CHANGELOG.md
+++ b/packages/storybook/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.64](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.64) (2020-07-27)
+
+**Note:** Version bump only for package @material-ui/x-storybook
+
+
+
+
+
+## [0.1.63](https://github.com/dtassone/material-ui-x/compare/v0.1.62...v0.1.63) (2020-07-27)
+
+**Note:** Version bump only for package @material-ui/x-storybook
+
+
+
+
+
 ## [0.1.62](https://github.com/mui-org/material-ui-x/compare/v0.1.61...v0.1.62) (2020-07-22)
 
 **Note:** Version bump only for package @material-ui/x-storybook
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 9a3c4b9538ae..51b3b36ad103 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -1,15 +1,15 @@
 {
   "name": "@material-ui/x-storybook",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "description": "Storybook components",
   "author": "Material-UI Team",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.9.12",
-    "@material-ui/data-grid": "^0.1.62",
+    "@material-ui/data-grid": "^0.1.64",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.54",
-    "@material-ui/x-grid": "^0.1.62",
+    "@material-ui/x-grid": "^0.1.64",
     "@material-ui/x-grid-data-generator": "^0.1.62",
     "@material-ui/x-license": "^0.1.61",
     "faker": "^4.1.0",
diff --git a/packages/storybook/src/documentation/pages/api.stories.mdx b/packages/storybook/src/documentation/pages/api.stories.mdx
index 18e16e91f385..6293c75b4ed4 100644
--- a/packages/storybook/src/documentation/pages/api.stories.mdx
+++ b/packages/storybook/src/documentation/pages/api.stories.mdx
@@ -6,7 +6,7 @@ import { XGrid } from '@material-ui/x-grid';
 
 ## How to use ApiRef?
 
-The `ApiRef` allows you to manipulate the grid outside the React component context. This can be very handy in a streaming api to update rows with changes from the server.
+The `ApiRef` allows you to manipulate the grid outside the React component scope.
 To enable ApiRef, you need to use the `useApiRef` hook and pass the ref to the component prop as below.
 
 ```tsx
@@ -17,7 +17,12 @@ return <XGrid rows={rows} columns={columns} apiRef={apiRef} />
 
 ```
 
-Generated?
+## Use cases
+
+If you would like to manipulate the grid outside the component rendering the XGrid, for example if you are building some custom filters.
+You could pass the apiRef using the context or as a prop.
+
+This can also be very handy in a streaming api to update rows with changes from the server as we have exposed in our Rows section [here]().
 
 ## GridAPI
 
diff --git a/packages/storybook/src/documentation/pages/demos/pagination/autoPageSize.demo.tsx b/packages/storybook/src/documentation/pages/demos/pagination/autoPageSize.demo.tsx
index 1a3b6bac9e20..2a038200c07a 100644
--- a/packages/storybook/src/documentation/pages/demos/pagination/autoPageSize.demo.tsx
+++ b/packages/storybook/src/documentation/pages/demos/pagination/autoPageSize.demo.tsx
@@ -90,7 +90,7 @@ export default function AutoPageSizeDemo() {
       <XGrid
         rows={rows}
         columns={columns}
-        options={{ pagination: true, paginationAutoPageSize: true }}
+        options={{ pagination: true, autoPageSize: true }}
         className="demo"
       />
     </div>
diff --git a/packages/storybook/src/documentation/pages/demos/pagination/customPagination.demo.tsx b/packages/storybook/src/documentation/pages/demos/pagination/customPagination.demo.tsx
index 2dd7d8da0f2b..8cd2bd7941af 100644
--- a/packages/storybook/src/documentation/pages/demos/pagination/customPagination.demo.tsx
+++ b/packages/storybook/src/documentation/pages/demos/pagination/customPagination.demo.tsx
@@ -103,8 +103,8 @@ export default function CustomPaginationDemo() {
       columns={columns}
       options={{
         pagination: true,
-        paginationPageSize: 5,
-        paginationRowsPerPageOptions: [5, 10],
+        pageSize: 5,
+        rowsPerPageOptions: [5, 10],
         autoHeight: true,
       }}
       className="demo"
diff --git a/packages/storybook/src/documentation/pages/demos/pagination/serverPagination.demo.tsx b/packages/storybook/src/documentation/pages/demos/pagination/serverPagination.demo.tsx
new file mode 100644
index 000000000000..6a26093f0ce4
--- /dev/null
+++ b/packages/storybook/src/documentation/pages/demos/pagination/serverPagination.demo.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { Columns, FeatureMode, PageChangeParams, RowsProp, XGrid } from '@material-ui/x-grid';
+import {
+  randomCreatedDate,
+  randomEmail,
+  randomId,
+  randomInt,
+  randomTraderName,
+  randomUpdatedDate,
+} from '@material-ui/x-grid-data-generator';
+
+function newRow() {
+  return {
+    id: randomId(),
+    name: randomTraderName(),
+    email: randomEmail(),
+    age: randomInt(10, 100),
+    dateCreated: randomCreatedDate(),
+    lastLogin: randomUpdatedDate(),
+  };
+}
+
+const columns: Columns = [
+  { field: 'id', hide: true },
+  { field: 'name', type: 'string' },
+  { field: 'email', type: 'string' },
+  { field: 'age', type: 'number' },
+  { field: 'dateCreated', type: 'date', width: 180 },
+  { field: 'lastLogin', type: 'dateTime', width: 180 },
+];
+
+function loadServerRows(params: PageChangeParams): Promise<any> {
+  return new Promise<any>((resolve) => {
+    const rows: any[] = [];
+    while (rows.length < params.pageSize) {
+      rows.push(newRow());
+    }
+
+    setTimeout(() => {
+      resolve({ response: { rows }, request: { params } });
+    }, 800);
+  });
+}
+
+export default function ServerPaginationDemo() {
+  const [rows, setRows] = React.useState<RowsProp>([]);
+  const [isLoading, setLoading] = React.useState<boolean>(false);
+  const currentPage = React.useRef<number>(1);
+
+  const onPageChange = (params) => {
+    currentPage.current = params.page;
+    setLoading(true);
+    loadServerRows(params).then(({ response, request }) => {
+      if (currentPage.current === request.params.page) {
+        setRows(response.rows);
+        setLoading(false);
+      }
+    });
+  };
+
+  return (
+    <XGrid
+      rows={rows}
+      columns={columns}
+      options={{
+        autoHeight: true,
+        pagination: true,
+        pageSize: 5,
+        rowCount: 50,
+        paginationMode: FeatureMode.server,
+        onPageChange,
+      }}
+      loading={isLoading}
+    />
+  );
+}
diff --git a/packages/storybook/src/documentation/pages/demos/pagination/setPage.demo.tsx b/packages/storybook/src/documentation/pages/demos/pagination/setPage.demo.tsx
index 8ec1ec7598ab..6c8281b53df5 100644
--- a/packages/storybook/src/documentation/pages/demos/pagination/setPage.demo.tsx
+++ b/packages/storybook/src/documentation/pages/demos/pagination/setPage.demo.tsx
@@ -97,8 +97,8 @@ export default function SetPageDemo() {
       columns={columns}
       options={{
         pagination: true,
-        paginationPageSize: 5,
-        paginationRowsPerPageOptions: [5, 10],
+        pageSize: 5,
+        rowsPerPageOptions: [5, 10],
         autoHeight: true,
       }}
       className="demo"
diff --git a/packages/storybook/src/documentation/pages/demos/pagination/simplePagination.demo.tsx b/packages/storybook/src/documentation/pages/demos/pagination/simplePagination.demo.tsx
index b664ce106c56..d33aa16c31ad 100644
--- a/packages/storybook/src/documentation/pages/demos/pagination/simplePagination.demo.tsx
+++ b/packages/storybook/src/documentation/pages/demos/pagination/simplePagination.demo.tsx
@@ -91,8 +91,8 @@ export default function SimplePaginationDemo() {
       columns={columns}
       options={{
         pagination: true,
-        paginationPageSize: 5,
-        paginationRowsPerPageOptions: [5, 10],
+        pageSize: 5,
+        rowsPerPageOptions: [5, 10],
         autoHeight: true,
       }}
       className="demo"
diff --git a/packages/storybook/src/documentation/pages/pagination.stories.mdx b/packages/storybook/src/documentation/pages/pagination.stories.mdx
index cc52781a65ad..61fd3f2f5c22 100644
--- a/packages/storybook/src/documentation/pages/pagination.stories.mdx
+++ b/packages/storybook/src/documentation/pages/pagination.stories.mdx
@@ -3,6 +3,7 @@ import SimplePaginationDemo from './demos/pagination/simplePagination.demo';
 import AutoPageSizeDemo from './demos/pagination/autoPageSize.demo';
 import SetPageDemo from './demos/pagination/setPage.demo';
 import CustomPaginationDemo from './demos/pagination/customPagination.demo';
+import ServerPaginationDemo from './demos/pagination/serverPagination.demo';
 
 <Meta title="1. Docs/6. Pagination" component={XGrid} />
 
@@ -19,20 +20,20 @@ To turn it on, toggle the `pagination` boolean property of the `options` React p
 
 - **Set page size**
 
-Our default `pageSize` is set to `100`. You can change this value by setting the `paginationPageSize` property of the `options` React prop as below.
+Our default `pageSize` is set to `100`. You can change this value by setting the `pageSize` property of the `options` React prop as below.
 
 ```tsx
 <XGrid
   rows={rows}
   columns={columns}
-  options={{ pagination: true, paginationPageSize: 50 }}
+  options={{ pagination: true, pageSize: 50 }}
 />
 ```
 
 - **Set Rows per page options**
 
-Along with the `paginationPageSize` property, we added the `paginationRowsPerPageOptions` that let you select the `paginationPageSize` dynamically using XGrid UI.
-Our default `paginationRowsPerPageOptions` is set to `[25, 50, 100]`. You can change this value by setting the `paginationRowsPerPageOptions` property of the `options` React prop as below.
+Along with the `pageSize` property, we added the `rowsPerPageOptions` that let you select the `pageSize` dynamically using XGrid UI.
+The default `rowsPerPageOptions` is set to `[25, 50, 100]`. You can change this value by setting the `rowsPerPageOptions` property of the `options` prop as below.
 
 ```tsx
 <XGrid
@@ -40,8 +41,8 @@ Our default `paginationRowsPerPageOptions` is set to `[25, 50, 100]`. You can ch
   columns={columns}
   options={{
     pagination: true,
-    paginationPageSize: 50,
-    paginationRowsPerPageOptions: [10, 20, 50],
+    pageSize: 50,
+    rowsPerPageOptions: [10, 20, 50],
   }}
 />
 ```
@@ -50,20 +51,36 @@ Please find below an example of a grid with pagination using the options prop de
 
 <SimplePaginationDemo />
 
+- ** Set the current page**
+
+Finally, we exposed the `page` property, which let you select the current page rendered by XGrid. Default value is 1.
+If you would like to render the second page, then you can set this property to `2` as below
+
+```tsx
+<XGrid
+  rows={rows}
+  columns={columns}
+  options={{
+    pagination: true,
+    page: 2,
+  }}
+/>
+```
+
 ## Auto pagination
 
-The property `paginationAutoPageSize` is available as an option to auto-scale the `pageSize` with the container size to the max number of rows to avoid rendering a vertical scroll bar.
-By default, this feature is off and can be turned on, by toggling the `paginationAutoPageSize` boolean property of the `options` React prop as below.
+The property `autoPageSize` is available as an option to auto-scale the `pageSize` with the container size to the max number of rows to avoid rendering a vertical scroll bar.
+By default, this feature is off and can be turned on, by toggling the `autoPageSize` boolean property of the `options` React prop as below.
 
 ```tsx
 <XGrid
   rows={rows}
   columns={columns}
-  options={{ pagination: true, paginationAutoPageSize: true }}
+  options={{ pagination: true, autoPageSize: true }}
 />
 ```
 
-Please find below an example of grid with `paginationAutoPageSize` turned on as described above.
+Please find below an example of grid with `autoPageSize` turned on as described above.
 
 <AutoPageSizeDemo />
 
@@ -80,7 +97,7 @@ To achieve this, just set the pagination property of the `components` react prop
   columns={columns}
   options={{
     pagination: true,
-    paginationPageSize: 50,
+    pageSize: 50,
   }}
   components={{
     pagination: PaginationComponent,
@@ -90,10 +107,42 @@ To achieve this, just set the pagination property of the `components` react prop
 
 <CustomPaginationDemo />
 
-## Pagination API
+## Server-side pagination
+
+XGrid supports both client and server-side pagination. By default, pagination works on the client-side. To switch it to server-side,
+set the property `paginationMode` to `server` as string or you can use our `FeatureMode` enum.
+**Note**: You also need to set the `rowCount` property to override the number of rows in the grid so XGrid can calculate the total number of pages.
+
+Finally, you're going to need to handle the `onPageChange` event, to load the rows for the corresponding page.
+
+```tsx
+const [rows, setRows] = React.useState<RowsProp>([]);
+const onPageChange = (params) => {
+  loadServerRows(params).then((newRows) => {
+    setRows(newRows);
+  });
+};
+
+<XGrid
+  rows={rows}
+  columns={columns}
+  options={{
+    pagination: true,
+    pageSize: 5,
+    paginationMode: 'server',
+    rowCount: 50,
+    onPageChange: onPageChange,
+  }}
+/>;
+```
+
+<ServerPaginationDemo />
 
-Now that you understand how to implement the pagination feature of the grid. You might want to manipulate the page or set a listener when the current page change.
-To achieve this, you should use our `apiRef` as below;
+### Pagination API
+
+We exposed a set of methods that will let you achieve all the above features using the `ApiRef` object. More info on our API page [here](??).
+
+Below is an example on how you can reset the page using the `setPage` method of the API.
 
 ```tsx
 const apiRef = useApiRef();
@@ -102,30 +151,15 @@ React.useEffect(() => {
   apiRef.current?.setPage(2);
 }, [apiRef]);
 
-// Set rows, columns ...
-
 <XGrid
   rows={rows}
   columns={columns}
   options={{
     pagination: true,
-    paginationPageSize: 5,
+    pageSize: 5,
   }}
   apiRef={apiRef}
 />;
 ```
 
 <SetPageDemo />
-
-### How to implement server pagination?
-
-How to set row count / page count? On pageChange...?
-=> set pageCount then onPageChange((page)=> serverQuery(page).then(data=> setRows(data))
-
-// TODO
-
-- expose pageCount in options, needed for server api
-- expose page or currentPage in options, avoid using apiRef
-- add setRows (RowData) method to replace rows on pageChange ?? You can just use useState
-
-// TODO implement example with react Query?
diff --git a/packages/storybook/src/documentation/pages/selection.stories.mdx b/packages/storybook/src/documentation/pages/selection.stories.mdx
index b4854f167558..0e3434e2c87e 100644
--- a/packages/storybook/src/documentation/pages/selection.stories.mdx
+++ b/packages/storybook/src/documentation/pages/selection.stories.mdx
@@ -60,7 +60,7 @@ In the example below the column `name` is not clickable
 To conveniently apply action on selected rows, we emit the following events based on user interaction.
 
 - `onRowSelected` - Event emitted when one row is selected.
-- `onSelectionChanged` - Event emitted when one or multiple rows had a selection state changed.
+- `onSelectionChange` - Event emitted when one or multiple rows had a selection state change.
 
 ## API
 
diff --git a/packages/storybook/src/documentation/pages/sorting.stories.mdx b/packages/storybook/src/documentation/pages/sorting.stories.mdx
index c1cd4542fec0..c2ff6e8a0014 100644
--- a/packages/storybook/src/documentation/pages/sorting.stories.mdx
+++ b/packages/storybook/src/documentation/pages/sorting.stories.mdx
@@ -116,7 +116,7 @@ const columns: Columns = [
 
 ## Events
 
-- `onColumnsSorted` - Event triggered after a column is sorted
+- `onSortedColumns` - Event triggered after a column is sorted
 
 ## API
 
@@ -129,4 +129,3 @@ TODO
 
 - Server side sorting?
 - Implement postSort?
-- Talk about onColumnHeaderClicked?: (param: ColumnHeaderClickedParams) => void; ? => not good as API can trigger sort?
diff --git a/packages/storybook/src/stories/grid-events.stories.tsx b/packages/storybook/src/stories/grid-events.stories.tsx
index bd74c809fd25..53beaa1aabed 100644
--- a/packages/storybook/src/stories/grid-events.stories.tsx
+++ b/packages/storybook/src/stories/grid-events.stories.tsx
@@ -21,42 +21,62 @@ export function AllEvents() {
   const data = useData(2000, 200);
 
   const options: GridOptionsProp = {
-    onRowClicked: (params) => action('onRowClicked')(params),
-    onCellClicked: (params) => action('onCellClicked')(params),
-    onColumnHeaderClicked: (params) => action('onColumnHeaderClicked')(params),
+    onRowClick: (params) => action('onRowClick')(params),
+    onCellClick: (params) => action('onCellClick')(params),
+    onCellHover: (params) => action('onCellHover')(params),
+    onRowHover: (params) => action('onRowHover')(params),
+    onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
     onRowSelected: (params) => action('onRowSelected')(params),
-    onSelectionChanged: (params) => action('onSelectionChanged', { depth: 1 })(params),
-    onColumnsSorted: (params) => action('onColumnsSorted')(params),
-    onPageChanged: (params) => action('onPageChanged')(params),
-    onPageSizeChanged: (params) => action('onPageSizeChanged')(params),
+    onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
+    onSortedColumns: (params) => action('onSortedColumns')(params),
+    onPageChange: (params) => action('onPageChange')(params),
+    onPageSizeChange: (params) => action('onPageSizeChange')(params),
   };
 
   return <XGrid rows={data.rows} columns={data.columns} options={options} />;
 }
 
-export const onRowClicked = () => {
+export const onRowClick = () => {
   const data = useData(2000, 200);
 
   const options: GridOptionsProp = {
-    onRowClicked: (params) => action('row clicked')(params),
+    onRowClick: (params) => action('row click')(params),
   };
 
   return <XGrid rows={data.rows} columns={data.columns} options={options} />;
 };
 
-export const onCellClicked = () => {
+export const onRowHover = () => {
   const data = useData(2000, 200);
   const options: GridOptionsProp = {
-    onCellClicked: (params) => action('cell clicked')(params),
+    onRowHover: (params) => action('Row Hover')(params),
   };
 
   return <XGrid rows={data.rows} columns={data.columns} options={options} />;
 };
 
-export const onColumnHeaderClicked = () => {
+export const onCellClick = () => {
   const data = useData(2000, 200);
   const options: GridOptionsProp = {
-    onColumnHeaderClicked: (params) => action('Header clicked')(params),
+    onCellClick: (params) => action('cell click')(params),
+  };
+
+  return <XGrid rows={data.rows} columns={data.columns} options={options} />;
+};
+
+export const onCellHover = () => {
+  const data = useData(2000, 200);
+  const options: GridOptionsProp = {
+    onCellHover: (params) => action('cell Hover')(params),
+  };
+
+  return <XGrid rows={data.rows} columns={data.columns} options={options} />;
+};
+
+export const onColumnHeaderClick = () => {
+  const data = useData(2000, 200);
+  const options: GridOptionsProp = {
+    onColumnHeaderClick: (params) => action('Header click')(params),
   };
   return <XGrid rows={data.rows} columns={data.columns} options={options} />;
 };
diff --git a/packages/storybook/src/stories/grid-pagination.stories.tsx b/packages/storybook/src/stories/grid-pagination.stories.tsx
index 15e3c8905c81..0bea8666e499 100644
--- a/packages/storybook/src/stories/grid-pagination.stories.tsx
+++ b/packages/storybook/src/stories/grid-pagination.stories.tsx
@@ -1,11 +1,19 @@
 import * as React from 'react';
-import { XGrid, ApiRef, useApiRef } from '@material-ui/x-grid';
+import {
+  ApiRef,
+  FeatureMode,
+  useApiRef,
+  XGrid,
+  PageChangeParams,
+  RowsProp,
+} from '@material-ui/x-grid';
 import Button from '@material-ui/core/Button';
 import Pagination from '@material-ui/lab/Pagination';
 import { action } from '@storybook/addon-actions';
 import { array, boolean, number, withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 import { useData } from '../hooks/useData';
+import { getData, GridData } from '../data/data-service';
 
 export default {
   title: 'X-Grid Tests/Pagination',
@@ -42,7 +50,7 @@ export function PageSize100() {
         columns={data.columns}
         options={{
           pagination: true,
-          paginationPageSize: 100,
+          pageSize: 100,
         }}
       />
     </div>
@@ -50,7 +58,7 @@ export function PageSize100() {
 }
 
 export function PaginationKnobs() {
-  const data = useData(2000, 200);
+  const data = useData(100, 200);
   const rowsPerPageOptions = array('Rows per page options', ['10', '20', '50', '100', '200'], ', ');
 
   return (
@@ -59,9 +67,11 @@ export function PaginationKnobs() {
       columns={data.columns}
       options={{
         pagination: true,
-        paginationPageSize: number('PageSize', 100),
-        paginationAutoPageSize: boolean('Auto page size', false),
-        paginationRowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
+        pageSize: number('PageSize', 100),
+        page: number('Page', 1),
+        rowCount: number('RowCount', 2000),
+        autoPageSize: boolean('Auto page size', false),
+        rowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
         hideFooterRowCount: boolean('Hide row count', false),
         hideFooterPagination: boolean('Hide footer pagination', false),
         hideFooter: boolean('Hide footer', false),
@@ -79,7 +89,7 @@ export function HiddenPagination() {
         columns={data.columns}
         options={{
           pagination: true,
-          paginationPageSize: 100,
+          pageSize: 100,
           hideFooterPagination: true,
         }}
       />
@@ -95,7 +105,7 @@ export function PaginationApiTests() {
   React.useEffect(() => {
     let unsubscribe;
     if (apiRef && apiRef.current) {
-      unsubscribe = apiRef.current.onPageChanged(action('pageChanged'));
+      unsubscribe = apiRef.current.onPageChange(action('pageChange'));
     }
     return () => {
       if (unsubscribe) {
@@ -150,8 +160,8 @@ export function PaginationApiTests() {
           apiRef={apiRef}
           options={{
             pagination: true,
-            paginationPageSize: myPageSize,
-            paginationAutoPageSize: autosize,
+            pageSize: myPageSize,
+            autoPageSize: autosize,
           }}
           components={{
             pagination: ({ paginationProps }) => (
@@ -199,10 +209,101 @@ export function AutoPagination() {
           columns={data.columns}
           options={{
             pagination: true,
-            paginationAutoPageSize: true,
+            autoPageSize: true,
           }}
         />
       </div>
     </React.Fragment>
   );
 }
+
+function loadServerRows(params: PageChangeParams): Promise<GridData> {
+  return new Promise<GridData>((resolve) => {
+    getData(params.pageSize, 10).then((data) => {
+      setTimeout(() => {
+        const minId = (params.page - 1) * params.pageSize;
+        data.rows.forEach((row) => {
+          row.id = (Number(row.id) + minId).toString();
+        });
+        resolve(data);
+      }, 500);
+    });
+  });
+}
+
+export function ServerPaginationWithApi() {
+  const apiRef: ApiRef = useApiRef();
+  const data = useData(100, 10);
+  const [rows, setRows] = React.useState<RowsProp>([]);
+  const [isLoading, setLoading] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    const unsubscribe = apiRef.current!.onPageChange((params) => {
+      action('onPageChange')(params);
+      setLoading(true);
+      loadServerRows(params).then((newData) => {
+        setRows(newData.rows);
+        setLoading(false);
+      });
+    });
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, [apiRef, data]);
+
+  return (
+    <div className="grid-container">
+      <XGrid
+        rows={rows}
+        columns={data.columns}
+        apiRef={apiRef}
+        options={{
+          pagination: true,
+          pageSize: 50,
+          rowCount: 552,
+          paginationMode: FeatureMode.server,
+        }}
+        loading={isLoading}
+      />
+    </div>
+  );
+}
+
+export function ServerPaginationWithEventHandler() {
+  const apiRef: ApiRef = useApiRef();
+  const data = useData(100, 10);
+  const [rows, setRows] = React.useState<RowsProp>([]);
+  const [isLoading, setLoading] = React.useState<boolean>(false);
+
+  const onPageChange = React.useCallback(
+    (params) => {
+      action('onPageChange')(params);
+      setLoading(true);
+      loadServerRows(params).then((newData) => {
+        setRows(newData.rows);
+        setLoading(false);
+      });
+    },
+    [setRows, setLoading],
+  );
+
+  return (
+    <div className="grid-container">
+      <XGrid
+        rows={rows}
+        columns={data.columns}
+        apiRef={apiRef}
+        options={{
+          pagination: true,
+          pageSize: 50,
+          rowCount: 552,
+          paginationMode: FeatureMode.server,
+          onPageChange,
+        }}
+        loading={isLoading}
+      />
+    </div>
+  );
+}
diff --git a/packages/storybook/src/stories/grid-selection.stories.tsx b/packages/storybook/src/stories/grid-selection.stories.tsx
index 6938e37fd782..05291c18f236 100644
--- a/packages/storybook/src/stories/grid-selection.stories.tsx
+++ b/packages/storybook/src/stories/grid-selection.stories.tsx
@@ -45,7 +45,7 @@ export const EventsMapped = () => {
   const data = useData(200, 200);
 
   const options: GridOptionsProp = {
-    onSelectionChanged: (params) => action('onSelectionChanged', { depth: 1 })(params),
+    onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
     onRowSelected: (params) => action('onRowSelected')(params),
   };
 
diff --git a/packages/storybook/src/stories/grid-sorting.stories.tsx b/packages/storybook/src/stories/grid-sorting.stories.tsx
index 87845a237dce..9c17c2d322c2 100644
--- a/packages/storybook/src/stories/grid-sorting.stories.tsx
+++ b/packages/storybook/src/stories/grid-sorting.stories.tsx
@@ -293,7 +293,7 @@ export const SortedEventsApi = () => {
 
   React.useEffect(() => {
     if (apiRef && apiRef.current != null) {
-      apiRef.current.onColumnsSorted((params) => handleEvent('ColumnsSorted', params));
+      apiRef.current.onSortedColumns((params) => handleEvent('ColumnsSorted', params));
       apiRef.current.on('sortModelUpdated', (params) => handleEvent('sortModelUpdated', params));
       apiRef.current.on('postSort', (params) => handleEvent('postSort', params));
 
diff --git a/packages/storybook/src/stories/grid-streaming.stories.tsx b/packages/storybook/src/stories/grid-streaming.stories.tsx
index d6094d35dff4..396cd4b58ead 100644
--- a/packages/storybook/src/stories/grid-streaming.stories.tsx
+++ b/packages/storybook/src/stories/grid-streaming.stories.tsx
@@ -22,7 +22,7 @@ export default {
 
 export const SlowUpdateGrid = () => {
   const options: GridOptionsProp = {
-    onSelectionChanged: (params) => action('onSelectionChanged', { depth: 1 })(params),
+    onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
     onRowSelected: (params) => action('onRowSelected')(params),
   };
   const rate = { min: 1000, max: 5000 };
@@ -37,7 +37,7 @@ export const SlowUpdateGrid = () => {
 };
 export const FastUpdateGrid = () => {
   const options: GridOptionsProp = {
-    onSelectionChanged: (params) => action('onSelectionChanged', { depth: 1 })(params),
+    onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
     onRowSelected: (params) => action('onRowSelected')(params),
   };
   const rate = { min: 100, max: 500 };
@@ -52,7 +52,7 @@ export const FastUpdateGrid = () => {
 };
 export const SingleSubscriptionFast = () => {
   const options: GridOptionsProp = {
-    onSelectionChanged: (params) => action('onSelectionChanged', { depth: 1 })(params),
+    onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
     onRowSelected: (params) => action('onRowSelected')(params),
   };
   const rate = { min: 100, max: 500 };
diff --git a/packages/storybook/src/stories/playground/customize-components.stories.tsx b/packages/storybook/src/stories/playground/customize-components.stories.tsx
index 847a51946141..595fe3fcaeb0 100644
--- a/packages/storybook/src/stories/playground/customize-components.stories.tsx
+++ b/packages/storybook/src/stories/playground/customize-components.stories.tsx
@@ -130,7 +130,7 @@ export function CustomPagination() {
         apiRef={apiRef}
         options={{
           pagination: true,
-          paginationPageSize: 50,
+          pageSize: 50,
         }}
         components={{
           pagination: PaginationComponent,
@@ -167,7 +167,7 @@ export function CustomFooter() {
         columns={data.columns}
         options={{
           pagination: true,
-          paginationPageSize: 33,
+          pageSize: 33,
           hideFooterPagination: true,
           hideFooter: true,
         }}
@@ -205,7 +205,7 @@ export function HeaderAndFooter() {
         columns={data.columns}
         options={{
           pagination: true,
-          paginationPageSize: 33,
+          pageSize: 33,
           hideFooterPagination: true,
         }}
         components={{
diff --git a/packages/storybook/src/stories/playground/data-grid.options.stories.tsx b/packages/storybook/src/stories/playground/data-grid.options.stories.tsx
index 7d8c62595d08..382b6e507ee8 100644
--- a/packages/storybook/src/stories/playground/data-grid.options.stories.tsx
+++ b/packages/storybook/src/stories/playground/data-grid.options.stories.tsx
@@ -19,22 +19,22 @@ export default {
 
 export const Options = () => {
   const data = useData(2000, 200);
-  const rowsPerPageOptions = array('paginationRowsPerPageOptions', ['25', '50', '100'], ', ');
+  const rowsPerPageOptions = array('rowsPerPageOptions', ['25', '50', '100'], ', ');
   const sortingOrder = array('sortingOrder', ['asc', 'desc', 'null'], ', ');
 
   const dataGridOptionsProp: DataGridOptionsProp = {
-    onRowClicked: (params) => action('onRowClicked')(params),
-    onCellClicked: (params) => action('onCellClicked')(params),
-    onColumnHeaderClicked: (params) => action('onColumnHeaderClicked')(params),
+    onRowClick: (params) => action('onRowClick')(params),
+    onCellClick: (params) => action('onCellClick')(params),
+    onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
     onRowSelected: (params) => action('onRowSelected')(params),
-    onSelectionChanged: (params) => action('onSelectionChanged', { depth: 1 })(params),
-    onColumnsSorted: (params) => action('onColumnsSorted')(params),
-    onPageChanged: (params) => action('onPageChanged')(params),
-    onPageSizeChanged: (params) => action('onPageSizeChanged')(params),
+    onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
+    onSortedColumns: (params) => action('onSortedColumns')(params),
+    onPageChange: (params) => action('onPageChange')(params),
+    onPageSizeChange: (params) => action('onPageSizeChange')(params),
 
-    paginationPageSize: number('paginationPageSize', 100),
-    paginationAutoPageSize: boolean('paginationAutoPageSize', false),
-    paginationRowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
+    pageSize: number('pageSize', 100),
+    autoPageSize: boolean('autoPageSize', false),
+    rowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
     hideFooterRowCount: boolean('hideFooterRowCount', false),
     hideFooterPagination: boolean('hideFooterPagination', false),
     hideFooter: boolean('hideFooter', false),
@@ -54,14 +54,14 @@ export const Events = () => {
   const data = useData(2000, 200);
 
   const options: DataGridOptionsProp = {
-    onRowClicked: (params) => action('onRowClicked')(params),
-    onCellClicked: (params) => action('onCellClicked')(params),
-    onColumnHeaderClicked: (params) => action('onColumnHeaderClicked')(params),
+    onRowClick: (params) => action('onRowClick')(params),
+    onCellClick: (params) => action('onCellClick')(params),
+    onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
     onRowSelected: (params) => action('onRowSelected')(params),
-    onSelectionChanged: (params) => action('onSelectionChanged', { depth: 1 })(params),
-    onColumnsSorted: (params) => action('onColumnsSorted')(params),
-    onPageChanged: (params) => action('onPageChanged')(params),
-    onPageSizeChanged: (params) => action('onPageSizeChanged')(params),
+    onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
+    onSortedColumns: (params) => action('onSortedColumns')(params),
+    onPageChange: (params) => action('onPageChange')(params),
+    onPageSizeChange: (params) => action('onPageSizeChange')(params),
   };
 
   return <DataGrid rows={data.rows} columns={data.columns} options={options} />;
diff --git a/packages/storybook/src/stories/playground/options.stories.tsx b/packages/storybook/src/stories/playground/options.stories.tsx
index c183e3b18f43..c1be91b0a6cd 100644
--- a/packages/storybook/src/stories/playground/options.stories.tsx
+++ b/packages/storybook/src/stories/playground/options.stories.tsx
@@ -19,7 +19,7 @@ export default {
 
 export const Options = () => {
   const data = useData(2000, 200);
-  const rowsPerPageOptions = array('paginationRowsPerPageOptions', ['25', '50', '100'], ', ');
+  const rowsPerPageOptions = array('rowsPerPageOptions', ['25', '50', '100'], ', ');
   const sortingOrder = array('sortingOrder', ['asc', 'desc', 'null'], ', ');
 
   return (
@@ -27,20 +27,20 @@ export const Options = () => {
       rows={data.rows}
       columns={data.columns}
       options={{
-        onRowClicked: (params) => action('onRowClicked')(params),
-        onCellClicked: (params) => action('onCellClicked')(params),
-        onColumnHeaderClicked: (params) => action('onColumnHeaderClicked')(params),
+        onRowClick: (params) => action('onRowClick')(params),
+        onCellClick: (params) => action('onCellClick')(params),
+        onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
         onRowSelected: (params) => action('onRowSelected')(params),
-        onSelectionChanged: (params) => action('onSelectionChanged', { depth: 1 })(params),
-        onColumnsSorted: (params) => action('onColumnsSorted')(params),
-        onPageChanged: (params) => action('onPageChanged')(params),
-        onPageSizeChanged: (params) => action('onPageSizeChanged')(params),
+        onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
+        onSortedColumns: (params) => action('onSortedColumns')(params),
+        onPageChange: (params) => action('onPageChange')(params),
+        onPageSizeChange: (params) => action('onPageSizeChange')(params),
 
         autoHeight: boolean('autoHeight', false),
         pagination: boolean('pagination', true),
-        paginationPageSize: number('paginationPageSize', 100),
-        paginationAutoPageSize: boolean('paginationAutoPageSize', false),
-        paginationRowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
+        pageSize: number('pageSize', 100),
+        autoPageSize: boolean('autoPageSize', false),
+        rowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
         hideFooterRowCount: boolean('hideFooterRowCount', false),
         hideFooterPagination: boolean('hideFooterPagination', false),
         hideFooter: boolean('hideFooter', false),
@@ -64,14 +64,16 @@ export const Events = () => {
   const data = useData(2000, 200);
 
   const options: GridOptionsProp = {
-    onRowClicked: (params) => action('onRowClicked')(params),
-    onCellClicked: (params) => action('onCellClicked')(params),
-    onColumnHeaderClicked: (params) => action('onColumnHeaderClicked')(params),
+    onRowClick: (params) => action('onRowClick')(params),
+    onRowHover: (params) => action('onRowHover')(params),
+    onCellClick: (params) => action('onCellClick')(params),
+    onCellHover: (params) => action('onCellHover')(params),
+    onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
     onRowSelected: (params) => action('onRowSelected')(params),
-    onSelectionChanged: (params) => action('onSelectionChanged', { depth: 1 })(params),
-    onColumnsSorted: (params) => action('onColumnsSorted')(params),
-    onPageChanged: (params) => action('onPageChanged')(params),
-    onPageSizeChanged: (params) => action('onPageSizeChanged')(params),
+    onSelectionChange: (params) => action('onSelectionChange', { depth: 1 })(params),
+    onSortedColumns: (params) => action('onSortedColumns')(params),
+    onPageChange: (params) => action('onPageChange')(params),
+    onPageSizeChange: (params) => action('onPageSizeChange')(params),
   };
 
   return <XGrid rows={data.rows} columns={data.columns} options={options} />;
diff --git a/packages/storybook/src/stories/playground/real-data-demo.stories.tsx b/packages/storybook/src/stories/playground/real-data-demo.stories.tsx
index d05667136ad5..93c9c36b074b 100644
--- a/packages/storybook/src/stories/playground/real-data-demo.stories.tsx
+++ b/packages/storybook/src/stories/playground/real-data-demo.stories.tsx
@@ -22,26 +22,26 @@ export default {
 };
 
 const getGridOptions: () => GridOptionsProp = () => {
-  const rowsPerPageOptions = array('paginationRowsPerPageOptions', ['25', '50', '100'], ', ');
+  const rowsPerPageOptions = array('rowsPerPageOptions', ['25', '50', '100'], ', ');
   const sortingOrder = array('sortingOrder', ['asc', 'desc', 'null'], ', ');
 
   return {
-    onRowClicked: (params) => action('onRowClicked')(params),
-    onCellClicked: (params) => action('onCellClicked')(params),
-    onColumnHeaderClicked: (params) => action('onColumnHeaderClicked')(params),
+    onRowClick: (params) => action('onRowClick')(params),
+    onCellClick: (params) => action('onCellClick')(params),
+    onColumnHeaderClick: (params) => action('onColumnHeaderClick')(params),
     onRowSelected: (params) => action('onRowSelected')(params),
-    onSelectionChanged: (params) =>
-      action('onSelectionChanged', {
+    onSelectionChange: (params) =>
+      action('onSelectionChange', {
         depth: 1,
       })(params),
-    onColumnsSorted: (params) => action('onColumnsSorted')(params),
-    onPageChanged: (params) => action('onPageChanged')(params),
-    onPageSizeChanged: (params) => action('onPageSizeChanged')(params),
+    onSortedColumns: (params) => action('onSortedColumns')(params),
+    onPageChange: (params) => action('onPageChange')(params),
+    onPageSizeChange: (params) => action('onPageSizeChange')(params),
 
     pagination: boolean('pagination', false),
-    paginationPageSize: number('paginationPageSize', 100),
-    paginationAutoPageSize: boolean('paginationAutoPageSize', false),
-    paginationRowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
+    pageSize: number('pageSize', 100),
+    autoPageSize: boolean('autoPageSize', false),
+    rowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
     hideFooterRowCount: boolean('hideFooterRowCount', false),
     hideFooterPagination: boolean('hideFooterPagination', false),
     hideFooter: boolean('hideFooter', false),
diff --git a/yarn.lock b/yarn.lock
index 1aa422f56514..c8c70b31f4e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3892,7 +3892,7 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^3.1.0", "@typescript-eslint/parser@^3.6.1":
+"@typescript-eslint/parser@^3.6.1":
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.6.1.tgz#216e8adf4ee9c629f77c985476a2ea07fb80e1dc"
   integrity sha512-SLihQU8RMe77YJ/jGTqOt0lMq7k3hlPVfp7v/cxMnXA9T0bQYoMDfTsNgHXpwSJM1Iq2aAJ8WqekxUwGv5F67Q==
@@ -4630,11 +4630,6 @@ astral-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
-async-array-reduce@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/async-array-reduce/-/async-array-reduce-0.2.1.tgz#c8be010a2b5cd00dea96c81116034693dfdd82d1"
-  integrity sha1-yL4BCitc0A3qlsgRFgNGk9/dgtE=
-
 async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
@@ -7768,7 +7763,7 @@ escodegen@^1.11.1, escodegen@^1.12.0, escodegen@^1.14.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-airbnb-base@^14.1.0, eslint-config-airbnb-base@^14.2.0:
+eslint-config-airbnb-base@^14.2.0:
   version "14.2.0"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.0.tgz#fe89c24b3f9dc8008c9c0d0d88c28f95ed65e9c4"
   integrity sha512-Snswd5oC6nJaevs3nZoLSTvGJBvzTfnBqOIArkf3cbyTyq9UD79wOk8s+RiL6bhca0p/eRO6veczhf6A/7Jy8Q==
@@ -7777,16 +7772,16 @@ eslint-config-airbnb-base@^14.1.0, eslint-config-airbnb-base@^14.2.0:
     object.assign "^4.1.0"
     object.entries "^1.1.2"
 
-eslint-config-airbnb-typescript@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-8.0.2.tgz#465b17b0b1facdcca4fe23a5426bc27ab7b2b2f2"
-  integrity sha512-TCOftyCoIogJzzLGSg0Qlxd27qvf+1a3MHyN/PqynTqINS4iFy+SlXy/CrAN+6xkleGMSrvmPbm3pyFEku2+IQ==
+eslint-config-airbnb-typescript@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-9.0.0.tgz#2524f3fa6fceb3df4ae191d1e1114a04fe54c6e6"
+  integrity sha512-BxckAZU4rwfOidZVucAO120fTSGQAugimS8HFp7OoiordpyNkq5bxSlTPZ2XxSY8Q2NWDIygqtJKqupZld/TXA==
   dependencies:
-    "@typescript-eslint/parser" "^3.1.0"
-    eslint-config-airbnb "^18.1.0"
-    eslint-config-airbnb-base "^14.1.0"
+    "@typescript-eslint/parser" "^3.6.1"
+    eslint-config-airbnb "^18.2.0"
+    eslint-config-airbnb-base "^14.2.0"
 
-eslint-config-airbnb@^18.1.0:
+eslint-config-airbnb@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.0.tgz#8a82168713effce8fc08e10896a63f1235499dcd"
   integrity sha512-Fz4JIUKkrhO0du2cg5opdyPKQXOI2MvF8KUvN2710nJMT6jaRUpRE2swrJftAjVGL7T1otLM5ieo5RqS1v9Udg==
@@ -9256,13 +9251,6 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-glob@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-glob/-/has-glob-1.0.0.tgz#9aaa9eedbffb1ba3990a7b0010fb678ee0081207"
-  integrity sha1-mqqe7b/7G6OZCnsAEPtnjuAIEgc=
-  dependencies:
-    is-glob "^3.0.0"
-
 has-symbols@^1.0.0, has-symbols@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
@@ -10259,7 +10247,7 @@ is-glob@^2.0.0:
   dependencies:
     is-extglob "^1.0.0"
 
-is-glob@^3.0.0, is-glob@^3.1.0:
+is-glob@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
   integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
@@ -10475,11 +10463,6 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-is-valid-glob@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-1.0.0.tgz#29bf3eff701be2d4d315dbacc39bc39fe8f601aa"
-  integrity sha1-Kb8+/3Ab4tTTFdusw5vDn+j2Aao=
-
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -12449,18 +12432,6 @@ marksy@^8.0.0:
     he "^1.2.0"
     marked "^0.3.12"
 
-matched@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/matched/-/matched-1.0.2.tgz#1d95d77dd5f1b5075a9e94acde5462ffd85f317a"
-  integrity sha512-7ivM1jFZVTOOS77QsR+TtYHH0ecdLclMkqbf5qiJdX2RorqfhsL65QHySPZgDE0ZjHoh+mQUNHTanNXIlzXd0Q==
-  dependencies:
-    arr-union "^3.1.0"
-    async-array-reduce "^0.2.1"
-    glob "^7.1.2"
-    has-glob "^1.0.0"
-    is-valid-glob "^1.0.0"
-    resolve-dir "^1.0.0"
-
 material-colors@^1.2.1:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
@@ -16172,13 +16143,6 @@ rollup-plugin-dts@^1.4.7:
   optionalDependencies:
     "@babel/code-frame" "^7.8.3"
 
-rollup-plugin-multi-entry@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-multi-entry/-/rollup-plugin-multi-entry-2.1.0.tgz#64a7287adfd437cab33bf6364a8d8ab1e7a7725d"
-  integrity sha512-YVVsI15uvbxMKdeYS5NXQa5zbVr/DYdDBBwseC80+KAc7mqDUjM6Qe4wl+jFucVw1yvBDZFk0PPSBZqoLq8xUA==
-  dependencies:
-    matched "^1.0.2"
-
 rollup-plugin-postcss@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.2.tgz#e862033b96fabb73390fd4ccbee0155385d30e46"