From f314576ae159a4c3c7e337b7b84856b4989f29fc Mon Sep 17 00:00:00 2001
From: bala121286 <36037013+bala121286@users.noreply.github.com>
Date: Fri, 10 Aug 2018 17:10:05 -0700
Subject: [PATCH] [docs] Better descriptive Table demos (#12464)

* SimpleTable.js

* [docs] Better descriptive Table demos
---
 .../tables/CustomPaginationActionsTable.js    | 18 ++++++++---------
 .../src/pages/demos/tables/CustomizedTable.js | 16 +++++++--------
 docs/src/pages/demos/tables/EnhancedTable.js  | 20 +++++++++----------
 docs/src/pages/demos/tables/SimpleTable.js    | 16 +++++++--------
 4 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js
index 4827dd36ca7504..29a048921ed6fe 100644
--- a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js
+++ b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js
@@ -117,7 +117,7 @@ class CustomPaginationActionsTable extends React.Component {
     super(props);
 
     this.state = {
-      data: [
+      rows: [
         createData('Cupcake', 305, 3.7),
         createData('Donut', 452, 25.0),
         createData('Eclair', 262, 16.0),
@@ -147,22 +147,22 @@ class CustomPaginationActionsTable extends React.Component {
 
   render() {
     const { classes } = this.props;
-    const { data, rowsPerPage, page } = this.state;
-    const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
+    const { rows, rowsPerPage, page } = this.state;
+    const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
 
     return (
       <Paper className={classes.root}>
         <div className={classes.tableWrapper}>
           <Table className={classes.table}>
             <TableBody>
-              {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => {
+              {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => {
                 return (
-                  <TableRow key={n.id}>
+                  <TableRow key={row.id}>
                     <TableCell component="th" scope="row">
-                      {n.name}
+                      {row.name}
                     </TableCell>
-                    <TableCell numeric>{n.calories}</TableCell>
-                    <TableCell numeric>{n.fat}</TableCell>
+                    <TableCell numeric>{row.calories}</TableCell>
+                    <TableCell numeric>{row.fat}</TableCell>
                   </TableRow>
                 );
               })}
@@ -176,7 +176,7 @@ class CustomPaginationActionsTable extends React.Component {
               <TableRow>
                 <TablePagination
                   colSpan={3}
-                  count={data.length}
+                  count={rows.length}
                   rowsPerPage={rowsPerPage}
                   page={page}
                   onChangePage={this.handleChangePage}
diff --git a/docs/src/pages/demos/tables/CustomizedTable.js b/docs/src/pages/demos/tables/CustomizedTable.js
index 0dfd16829d65b9..59dde98d5c56ee 100644
--- a/docs/src/pages/demos/tables/CustomizedTable.js
+++ b/docs/src/pages/demos/tables/CustomizedTable.js
@@ -40,7 +40,7 @@ function createData(name, calories, fat, carbs, protein) {
   return { id, name, calories, fat, carbs, protein };
 }
 
-const data = [
+const rows = [
   createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
   createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
   createData('Eclair', 262, 16.0, 24, 6.0),
@@ -64,16 +64,16 @@ function CustomizedTable(props) {
           </TableRow>
         </TableHead>
         <TableBody>
-          {data.map(n => {
+          {rows.map(row => {
             return (
-              <TableRow className={classes.row} key={n.id}>
+              <TableRow className={classes.row} key={row.id}>
                 <CustomTableCell component="th" scope="row">
-                  {n.name}
+                  {row.name}
                 </CustomTableCell>
-                <CustomTableCell numeric>{n.calories}</CustomTableCell>
-                <CustomTableCell numeric>{n.fat}</CustomTableCell>
-                <CustomTableCell numeric>{n.carbs}</CustomTableCell>
-                <CustomTableCell numeric>{n.protein}</CustomTableCell>
+                <CustomTableCell numeric>{row.calories}</CustomTableCell>
+                <CustomTableCell numeric>{row.fat}</CustomTableCell>
+                <CustomTableCell numeric>{row.carbs}</CustomTableCell>
+                <CustomTableCell numeric>{row.protein}</CustomTableCell>
               </TableRow>
             );
           })}
diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js
index 5e946706865117..044ef47db6254c 100644
--- a/docs/src/pages/demos/tables/EnhancedTable.js
+++ b/docs/src/pages/demos/tables/EnhancedTable.js
@@ -29,7 +29,7 @@ function getSorting(order, orderBy) {
   return order === 'desc' ? (a, b) => b[orderBy] - a[orderBy] : (a, b) => a[orderBy] - b[orderBy];
 }
 
-const columnData = [
+const rows = [
   { id: 'name', numeric: false, disablePadding: true, label: 'Dessert (100g serving)' },
   { id: 'calories', numeric: true, disablePadding: false, label: 'Calories' },
   { id: 'fat', numeric: true, disablePadding: false, label: 'Fat (g)' },
@@ -55,25 +55,25 @@ class EnhancedTableHead extends React.Component {
               onChange={onSelectAllClick}
             />
           </TableCell>
-          {columnData.map(column => {
+          {rows.map(row => {
             return (
               <TableCell
-                key={column.id}
-                numeric={column.numeric}
-                padding={column.disablePadding ? 'none' : 'default'}
-                sortDirection={orderBy === column.id ? order : false}
+                key={row.id}
+                numeric={row.numeric}
+                padding={row.disablePadding ? 'none' : 'default'}
+                sortDirection={orderBy === row.id ? order : false}
               >
                 <Tooltip
                   title="Sort"
-                  placement={column.numeric ? 'bottom-end' : 'bottom-start'}
+                  placement={row.numeric ? 'bottom-end' : 'bottom-start'}
                   enterDelay={300}
                 >
                   <TableSortLabel
-                    active={orderBy === column.id}
+                    active={orderBy === row.id}
                     direction={order}
-                    onClick={this.createSortHandler(column.id)}
+                    onClick={this.createSortHandler(row.id)}
                   >
-                    {column.label}
+                    {row.label}
                   </TableSortLabel>
                 </Tooltip>
               </TableCell>
diff --git a/docs/src/pages/demos/tables/SimpleTable.js b/docs/src/pages/demos/tables/SimpleTable.js
index 11fdcf19041ba6..640be4310091e6 100644
--- a/docs/src/pages/demos/tables/SimpleTable.js
+++ b/docs/src/pages/demos/tables/SimpleTable.js
@@ -25,7 +25,7 @@ function createData(name, calories, fat, carbs, protein) {
   return { id, name, calories, fat, carbs, protein };
 }
 
-const data = [
+const rows = [
   createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
   createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
   createData('Eclair', 262, 16.0, 24, 6.0),
@@ -49,16 +49,16 @@ function SimpleTable(props) {
           </TableRow>
         </TableHead>
         <TableBody>
-          {data.map(n => {
+          {rows.map(row => {
             return (
-              <TableRow key={n.id}>
+              <TableRow key={row.id}>
                 <TableCell component="th" scope="row">
-                  {n.name}
+                  {row.name}
                 </TableCell>
-                <TableCell numeric>{n.calories}</TableCell>
-                <TableCell numeric>{n.fat}</TableCell>
-                <TableCell numeric>{n.carbs}</TableCell>
-                <TableCell numeric>{n.protein}</TableCell>
+                <TableCell numeric>{row.calories}</TableCell>
+                <TableCell numeric>{row.fat}</TableCell>
+                <TableCell numeric>{row.carbs}</TableCell>
+                <TableCell numeric>{row.protein}</TableCell>
               </TableRow>
             );
           })}