Skip to content

Commit

Permalink
[docs] Better descriptive Table demos (#12464)
Browse files Browse the repository at this point in the history 
* SimpleTable.js

* [docs] Better descriptive Table demos
  • Loading branch information
@bala121286 @oliviertassinari
bala121286 authored and oliviertassinari committed Aug 11, 2018
1 parent 26c904f commit f314576
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 35 deletions.
18 changes: 9 additions & 9 deletions docs/src/pages/demos/tables/CustomPaginationActionsTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down Expand Up @@ -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>
);
})}
Expand All @@ -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}
Expand Down
16 changes: 8 additions & 8 deletions docs/src/pages/demos/tables/CustomizedTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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>
);
})}
Expand Down
20 changes: 10 additions & 10 deletions docs/src/pages/demos/tables/EnhancedTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)' },
Expand All @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions docs/src/pages/demos/tables/SimpleTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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>
);
})}
Expand Down

0 comments on commit f314576

Please sign in to comment.