Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Table] Derive sorted rows from state at render time in demo #11828

Merged
merged 4 commits into from Jun 12, 2018
Merged

[Table] Derive sorted rows from state at render time in demo #11828

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b2f295b
[Table] Derive sorted rows from state at render time in demo
charlax Jun 12, 2018
41ad6f8
Run prettier
charlax Jun 12, 2018
e900a66
Fix comparison
charlax Jun 12, 2018
7ffcc87
function
oliviertassinari Jun 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
68 changes: 36 additions & 32 deletions docs/src/pages/demos/tables/EnhancedTable.js
View file
Open in desktop
Expand Up @@ -25,6 +25,12 @@ function createData(name, calories, fat, carbs, protein) {
return { id: counter, name, calories, fat, carbs, protein };
}

function getSorting(order, orderBy) {
return order === 'desc'
? (a, b) => (b[orderBy] < a[orderBy] ? -1 : 1)
: (a, b) => (a[orderBy] < b[orderBy] ? -1 : 1);
}

const columnData = [
{ id: 'name', numeric: false, disablePadding: true, label: 'Dessert (100g serving)' },
{ id: 'calories', numeric: true, disablePadding: false, label: 'Calories' },
Expand Down Expand Up @@ -197,7 +203,7 @@ class EnhancedTable extends React.Component {
createData('Marshmallow', 318, 0, 81, 2.0),
createData('Nougat', 360, 19.0, 9, 37.0),
createData('Oreo', 437, 18.0, 63, 4.0),
].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
],
page: 0,
rowsPerPage: 5,
};
Expand All @@ -211,12 +217,7 @@ class EnhancedTable extends React.Component {
order = 'asc';
}

const data =
order === 'desc'
? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1))
: this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1));

this.setState({ data, order, orderBy });
this.setState({ order, orderBy });
};

handleSelectAllClick = (event, checked) => {
Expand Down Expand Up @@ -277,31 +278,34 @@ class EnhancedTable extends React.Component {
rowCount={data.length}
/>
<TableBody>
{data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => {
const isSelected = this.isSelected(n.id);
return (
<TableRow
hover
onClick={event => this.handleClick(event, n.id)}
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isSelected} />
</TableCell>
<TableCell component="th" scope="row" padding="none">
{n.name}
</TableCell>
<TableCell numeric>{n.calories}</TableCell>
<TableCell numeric>{n.fat}</TableCell>
<TableCell numeric>{n.carbs}</TableCell>
<TableCell numeric>{n.protein}</TableCell>
</TableRow>
);
})}
{data
.sort(getSorting(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(n => {
const isSelected = this.isSelected(n.id);
return (
<TableRow
hover
onClick={event => this.handleClick(event, n.id)}
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isSelected} />
</TableCell>
<TableCell component="th" scope="row" padding="none">
{n.name}
</TableCell>
<TableCell numeric>{n.calories}</TableCell>
<TableCell numeric>{n.fat}</TableCell>
<TableCell numeric>{n.carbs}</TableCell>
<TableCell numeric>{n.protein}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
Expand Down