From 7ed6516b7ce78798511a2d4a516d3cb56f0a0924 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 26 Sep 2020 01:39:14 +0200
Subject: [PATCH] [docs] Remove id columns

---
 .../components/data-grid/columns/ColumnTypesGrid.js    |  1 -
 .../components/data-grid/columns/ColumnTypesGrid.tsx   |  1 -
 .../data-grid/columns/CustomColumnTypesGrid.js         |  1 -
 .../data-grid/columns/CustomColumnTypesGrid.tsx        |  1 -
 .../data-grid/getting-started/getting-started.md       |  2 --
 .../components/data-grid/rendering/RenderCellGrid.js   |  1 -
 .../components/data-grid/rendering/RenderCellGrid.tsx  |  1 -
 .../components/data-grid/rendering/RenderHeaderGrid.js |  1 -
 .../data-grid/rendering/RenderHeaderGrid.tsx           |  1 -
 .../components/data-grid/rendering/StylingCellsGrid.js |  1 -
 .../data-grid/rendering/StylingCellsGrid.tsx           |  1 -
 .../data-grid/rendering/StylingHeaderGrid.js           |  1 -
 .../data-grid/rendering/StylingHeaderGrid.tsx          |  1 -
 .../data-grid/rendering/ValueFormatterGrid.js          |  1 -
 .../data-grid/rendering/ValueFormatterGrid.tsx         |  1 -
 .../components/data-grid/rendering/ValueGetterGrid.js  |  1 -
 .../components/data-grid/rendering/ValueGetterGrid.tsx |  1 -
 .../pages/components/data-grid/rendering/rendering.md  |  6 ------
 .../components/data-grid/rows/ComparatorSortingGrid.js |  1 -
 .../data-grid/rows/ComparatorSortingGrid.tsx           |  1 -
 packages/grid/data-grid/src/DataGrid.test.tsx          |  5 +----
 packages/grid/x-grid/src/XGrid.test.tsx                | 10 ++--------
 .../pages/demos/error/customError.demo.tsx             |  1 -
 .../documentation/pages/demos/error/exception.demo.tsx |  1 -
 .../pages/demos/error/serverError.demo.tsx             |  1 -
 .../pages/demos/error/serverErrorState.demo.tsx        |  1 -
 26 files changed, 3 insertions(+), 42 deletions(-)

diff --git a/docs/src/pages/components/data-grid/columns/ColumnTypesGrid.js b/docs/src/pages/components/data-grid/columns/ColumnTypesGrid.js
index e0c114ff00816..0dda0e62ebe97 100644
--- a/docs/src/pages/components/data-grid/columns/ColumnTypesGrid.js
+++ b/docs/src/pages/components/data-grid/columns/ColumnTypesGrid.js
@@ -34,7 +34,6 @@ export default function ColumnTypesDemo() {
     <div style={{ height: 300, width: '100%' }}>
       <DataGrid
         columns={[
-          { field: 'id', hide: true },
           { field: 'name', type: 'string' },
           { field: 'age', type: 'number' },
           { field: 'dateCreated', type: 'date', width: 130 },
diff --git a/docs/src/pages/components/data-grid/columns/ColumnTypesGrid.tsx b/docs/src/pages/components/data-grid/columns/ColumnTypesGrid.tsx
index e0c114ff00816..0dda0e62ebe97 100644
--- a/docs/src/pages/components/data-grid/columns/ColumnTypesGrid.tsx
+++ b/docs/src/pages/components/data-grid/columns/ColumnTypesGrid.tsx
@@ -34,7 +34,6 @@ export default function ColumnTypesDemo() {
     <div style={{ height: 300, width: '100%' }}>
       <DataGrid
         columns={[
-          { field: 'id', hide: true },
           { field: 'name', type: 'string' },
           { field: 'age', type: 'number' },
           { field: 'dateCreated', type: 'date', width: 130 },
diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js
index ea5d63bca3a10..59c72cc96865f 100644
--- a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js
+++ b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.js
@@ -54,7 +54,6 @@ export default function CustomColumnTypesGrid() {
     <div style={{ height: 300, width: '100%' }} className={classes.root}>
       <DataGrid
         columns={[
-          { field: 'id', hide: true },
           { field: 'status', width: 130 },
           { field: 'subTotal', ...usdPrice },
           { field: 'total', ...usdPrice },
diff --git a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx
index e40f1cfa0e22a..d02e4e12f515c 100644
--- a/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx
+++ b/docs/src/pages/components/data-grid/columns/CustomColumnTypesGrid.tsx
@@ -54,7 +54,6 @@ export default function CustomColumnTypesGrid() {
     <div style={{ height: 300, width: '100%' }} className={classes.root}>
       <DataGrid
         columns={[
-          { field: 'id', hide: true },
           { field: 'status', width: 130 },
           { field: 'subTotal', ...usdPrice },
           { field: 'total', ...usdPrice },
diff --git a/docs/src/pages/components/data-grid/getting-started/getting-started.md b/docs/src/pages/components/data-grid/getting-started/getting-started.md
index a9bdace5e8d2c..c84237d268086 100644
--- a/docs/src/pages/components/data-grid/getting-started/getting-started.md
+++ b/docs/src/pages/components/data-grid/getting-started/getting-started.md
@@ -60,7 +60,6 @@ They are mapped to rows through their `field` property.
 
 ```tsx
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   { field: 'col1', headerName: 'Column 1', width: 150 },
   { field: 'col2', headerName: 'Column 2', width: 150 },
 ];
@@ -83,7 +82,6 @@ const rows: RowsProp = [
 ];
 
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   { field: 'col1', headerName: 'Column 1', width: 150 },
   { field: 'col2', headerName: 'Column 2', width: 150 },
 ];
diff --git a/docs/src/pages/components/data-grid/rendering/RenderCellGrid.js b/docs/src/pages/components/data-grid/rendering/RenderCellGrid.js
index ff7cca412c539..2b60ce56b392f 100644
--- a/docs/src/pages/components/data-grid/rendering/RenderCellGrid.js
+++ b/docs/src/pages/components/data-grid/rendering/RenderCellGrid.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 
 const columns = [
-  { field: 'id', hide: true },
   {
     field: 'date',
     headerName: 'Year',
diff --git a/docs/src/pages/components/data-grid/rendering/RenderCellGrid.tsx b/docs/src/pages/components/data-grid/rendering/RenderCellGrid.tsx
index 03c71a42ec625..85822528d101c 100644
--- a/docs/src/pages/components/data-grid/rendering/RenderCellGrid.tsx
+++ b/docs/src/pages/components/data-grid/rendering/RenderCellGrid.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DataGrid, ColDef, ValueFormatterParams } from '@material-ui/data-grid';
 
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   {
     field: 'date',
     headerName: 'Year',
diff --git a/docs/src/pages/components/data-grid/rendering/RenderHeaderGrid.js b/docs/src/pages/components/data-grid/rendering/RenderHeaderGrid.js
index 079017d59adb4..ca1c6c36aa73f 100644
--- a/docs/src/pages/components/data-grid/rendering/RenderHeaderGrid.js
+++ b/docs/src/pages/components/data-grid/rendering/RenderHeaderGrid.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 
 const columns = [
-  { field: 'id', hide: true },
   {
     field: 'date',
     width: 150,
diff --git a/docs/src/pages/components/data-grid/rendering/RenderHeaderGrid.tsx b/docs/src/pages/components/data-grid/rendering/RenderHeaderGrid.tsx
index 38d03c22f3418..30e507d105cad 100644
--- a/docs/src/pages/components/data-grid/rendering/RenderHeaderGrid.tsx
+++ b/docs/src/pages/components/data-grid/rendering/RenderHeaderGrid.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DataGrid, ColDef } from '@material-ui/data-grid';
 
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   {
     field: 'date',
     width: 150,
diff --git a/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.js b/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.js
index f2d95ba5765dc..a8edc1496dfd4 100644
--- a/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.js
+++ b/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.js
@@ -4,7 +4,6 @@ import { DataGrid } from '@material-ui/data-grid';
 import { makeStyles } from '@material-ui/core/styles';
 
 const columns = [
-  { field: 'id', hide: true },
   {
     field: 'name',
     cellClassName: 'super-app-theme--cell',
diff --git a/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.tsx b/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.tsx
index 9cc5a928b613a..42332c581aa9f 100644
--- a/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.tsx
+++ b/docs/src/pages/components/data-grid/rendering/StylingCellsGrid.tsx
@@ -4,7 +4,6 @@ import { Columns, DataGrid, CellClassParams } from '@material-ui/data-grid';
 import { makeStyles } from '@material-ui/core/styles';
 
 const columns: Columns = [
-  { field: 'id', hide: true },
   {
     field: 'name',
     cellClassName: 'super-app-theme--cell',
diff --git a/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.js b/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.js
index 0edb4260e7629..46c597be43554 100644
--- a/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.js
+++ b/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.js
@@ -3,7 +3,6 @@ import { DataGrid } from '@material-ui/data-grid';
 import { makeStyles } from '@material-ui/core/styles';
 
 const columns = [
-  { field: 'id', hide: true },
   {
     field: 'first',
     headerClassName: 'super-app-theme--header',
diff --git a/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.tsx b/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.tsx
index 837dec720913d..1d5ef40ccd653 100644
--- a/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.tsx
+++ b/docs/src/pages/components/data-grid/rendering/StylingHeaderGrid.tsx
@@ -3,7 +3,6 @@ import { Columns, DataGrid } from '@material-ui/data-grid';
 import { makeStyles } from '@material-ui/core/styles';
 
 const columns: Columns = [
-  { field: 'id', hide: true },
   {
     field: 'first',
     headerClassName: 'super-app-theme--header',
diff --git a/docs/src/pages/components/data-grid/rendering/ValueFormatterGrid.js b/docs/src/pages/components/data-grid/rendering/ValueFormatterGrid.js
index 0746cedde7571..39958c65a90e4 100644
--- a/docs/src/pages/components/data-grid/rendering/ValueFormatterGrid.js
+++ b/docs/src/pages/components/data-grid/rendering/ValueFormatterGrid.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DataGrid } from '@material-ui/data-grid';
 
 const columns = [
-  { field: 'id', hide: true },
   {
     field: 'date',
     headerName: 'Year',
diff --git a/docs/src/pages/components/data-grid/rendering/ValueFormatterGrid.tsx b/docs/src/pages/components/data-grid/rendering/ValueFormatterGrid.tsx
index 8e5da6d7c71b2..92051317927b6 100644
--- a/docs/src/pages/components/data-grid/rendering/ValueFormatterGrid.tsx
+++ b/docs/src/pages/components/data-grid/rendering/ValueFormatterGrid.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { DataGrid, ColDef, ValueFormatterParams } from '@material-ui/data-grid';
 
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   {
     field: 'date',
     headerName: 'Year',
diff --git a/docs/src/pages/components/data-grid/rendering/ValueGetterGrid.js b/docs/src/pages/components/data-grid/rendering/ValueGetterGrid.js
index daa4469f24a30..f93d8d163f799 100644
--- a/docs/src/pages/components/data-grid/rendering/ValueGetterGrid.js
+++ b/docs/src/pages/components/data-grid/rendering/ValueGetterGrid.js
@@ -8,7 +8,6 @@ function getFullName(params) {
 }
 
 const columns = [
-  { field: 'id', hide: true },
   { field: 'firstName', headerName: 'First name', width: 130 },
   { field: 'lastName', headerName: 'Last name', width: 130 },
   {
diff --git a/docs/src/pages/components/data-grid/rendering/ValueGetterGrid.tsx b/docs/src/pages/components/data-grid/rendering/ValueGetterGrid.tsx
index c1c270e498f18..d2ff997057781 100644
--- a/docs/src/pages/components/data-grid/rendering/ValueGetterGrid.tsx
+++ b/docs/src/pages/components/data-grid/rendering/ValueGetterGrid.tsx
@@ -8,7 +8,6 @@ function getFullName(params: ValueGetterParams) {
 }
 
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   { field: 'firstName', headerName: 'First name', width: 130 },
   { field: 'lastName', headerName: 'Last name', width: 130 },
   {
diff --git a/docs/src/pages/components/data-grid/rendering/rendering.md b/docs/src/pages/components/data-grid/rendering/rendering.md
index fb46472a5504e..65af84e4cbaf3 100644
--- a/docs/src/pages/components/data-grid/rendering/rendering.md
+++ b/docs/src/pages/components/data-grid/rendering/rendering.md
@@ -27,7 +27,6 @@ function getFullName(params: ValueGetterParams) {
 }
 
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   { field: 'firstName', headerName: 'First name', width: 130 },
   { field: 'lastName', headerName: 'Last name', width: 130 },
   {
@@ -52,7 +51,6 @@ For instance, you might want to format a JavaScript date object into a string ye
 
 ```tsx
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   {
     field: 'date',
     headerName: 'Year',
@@ -81,7 +79,6 @@ However, it trades to be able to only render in a cell in exchange for allowing
 
 ```tsx
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   {
     field: 'date',
     headerName: 'Year',
@@ -106,7 +103,6 @@ It takes precedence over the `headerName` property.
 
 ```tsx
 const columns: ColDef[] = [
-  { field: 'id', hide: true },
   {
     field: 'date',
     width: 150,
@@ -134,7 +130,6 @@ The `ColDef` type has properties to apply class names and custom CSS on the head
 
 ```tsx
 const columns: Columns = [
-  { field: 'id', hide: true },
   {
     field: 'first',
     headerClassName: 'super-app-theme--header',
@@ -159,7 +154,6 @@ The `ColDef` type has properties to apply class names and custom CSS on the cell
 
 ```tsx
 const columns: Columns = [
-  { field: 'id', hide: true },
   {
     field: 'name',
     cellClassName: 'super-app-theme--cell',
diff --git a/docs/src/pages/components/data-grid/rows/ComparatorSortingGrid.js b/docs/src/pages/components/data-grid/rows/ComparatorSortingGrid.js
index 666382d80072a..a87c2f7380283 100644
--- a/docs/src/pages/components/data-grid/rows/ComparatorSortingGrid.js
+++ b/docs/src/pages/components/data-grid/rows/ComparatorSortingGrid.js
@@ -6,7 +6,6 @@ import {
 } from '@material-ui/x-grid-data-generator';
 
 const columns = [
-  { field: 'id', hide: true },
   { field: 'name' },
   { field: 'age', type: 'number' },
   {
diff --git a/docs/src/pages/components/data-grid/rows/ComparatorSortingGrid.tsx b/docs/src/pages/components/data-grid/rows/ComparatorSortingGrid.tsx
index 17f2f28b4049e..9e8b946b18fe8 100644
--- a/docs/src/pages/components/data-grid/rows/ComparatorSortingGrid.tsx
+++ b/docs/src/pages/components/data-grid/rows/ComparatorSortingGrid.tsx
@@ -12,7 +12,6 @@ import {
 } from '@material-ui/x-grid-data-generator';
 
 const columns: Columns = [
-  { field: 'id', hide: true },
   { field: 'name' },
   { field: 'age', type: 'number' },
   {
diff --git a/packages/grid/data-grid/src/DataGrid.test.tsx b/packages/grid/data-grid/src/DataGrid.test.tsx
index 15fa8ace5fcd7..d9492d26d7562 100644
--- a/packages/grid/data-grid/src/DataGrid.test.tsx
+++ b/packages/grid/data-grid/src/DataGrid.test.tsx
@@ -15,10 +15,7 @@ describe('<DataGrid />', () => {
         brand: 'Nike',
       },
     ],
-    columns: [
-      { field: 'id', hide: true },
-      { field: 'brand', width: 100 },
-    ],
+    columns: [{ field: 'brand', width: 100 }],
   };
   describe('layout', () => {
     before(function beforeHook() {
diff --git a/packages/grid/x-grid/src/XGrid.test.tsx b/packages/grid/x-grid/src/XGrid.test.tsx
index 5bea4793cf907..79d7aa118e6bc 100644
--- a/packages/grid/x-grid/src/XGrid.test.tsx
+++ b/packages/grid/x-grid/src/XGrid.test.tsx
@@ -61,10 +61,7 @@ describe('<XGrid />', () => {
         brand: 'Puma',
       },
     ],
-    columns: [
-      { field: 'id', hide: true },
-      { field: 'brand', width: 100 },
-    ],
+    columns: [{ field: 'brand', width: 100 }],
   };
 
   before(function beforeHook() {
@@ -194,10 +191,7 @@ describe('<XGrid />', () => {
                 brand: 'Nike',
               },
             ]}
-            columns={[
-              { field: 'id', hide: true },
-              { field: 'brand', width: 100 },
-            ]}
+            columns={[{ field: 'brand', width: 100 }]}
             checkboxSelection
           />
         </div>,
diff --git a/packages/storybook/src/documentation/pages/demos/error/customError.demo.tsx b/packages/storybook/src/documentation/pages/demos/error/customError.demo.tsx
index 62cbc5818e664..45592ba509c60 100644
--- a/packages/storybook/src/documentation/pages/demos/error/customError.demo.tsx
+++ b/packages/storybook/src/documentation/pages/demos/error/customError.demo.tsx
@@ -15,7 +15,6 @@ function CustomErrorOverlay(props) {
 
 export default function CustomErrorDemo() {
   const columns: Columns = [
-    { field: 'id', hide: true },
     { field: 'name', type: 'string' },
     {
       field: 'age',
diff --git a/packages/storybook/src/documentation/pages/demos/error/exception.demo.tsx b/packages/storybook/src/documentation/pages/demos/error/exception.demo.tsx
index 8b15300596547..ed7ed313eb418 100644
--- a/packages/storybook/src/documentation/pages/demos/error/exception.demo.tsx
+++ b/packages/storybook/src/documentation/pages/demos/error/exception.demo.tsx
@@ -4,7 +4,6 @@ import { randomCreatedDate, randomUpdatedDate } from '@material-ui/x-grid-data-g
 
 export default function ExceptionDemo() {
   const columns: Columns = [
-    { field: 'id', hide: true },
     { field: 'name', type: 'string' },
     {
       field: 'age',
diff --git a/packages/storybook/src/documentation/pages/demos/error/serverError.demo.tsx b/packages/storybook/src/documentation/pages/demos/error/serverError.demo.tsx
index b327c83a0b8d9..d3a05aaff2001 100644
--- a/packages/storybook/src/documentation/pages/demos/error/serverError.demo.tsx
+++ b/packages/storybook/src/documentation/pages/demos/error/serverError.demo.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Columns, useApiRef, XGrid } from '@material-ui/x-grid';
 
 const columns: Columns = [
-  { field: 'id', hide: true },
   { field: 'name', type: 'string' },
   { field: 'email', type: 'string' },
   { field: 'age', type: 'number' },
diff --git a/packages/storybook/src/documentation/pages/demos/error/serverErrorState.demo.tsx b/packages/storybook/src/documentation/pages/demos/error/serverErrorState.demo.tsx
index d51184968ab54..27cc65786cf78 100644
--- a/packages/storybook/src/documentation/pages/demos/error/serverErrorState.demo.tsx
+++ b/packages/storybook/src/documentation/pages/demos/error/serverErrorState.demo.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Columns, XGrid } from '@material-ui/x-grid';
 
 const columns: Columns = [
-  { field: 'id', hide: true },
   { field: 'name', type: 'string' },
   { field: 'email', type: 'string' },
   { field: 'age', type: 'number' },