Skip to content

Commit 24cdb5b

Browse files
author
Lorenz Henk
authored
[docs] Add collapsible table demo (#19795)
1 parent 694be36 commit 24cdb5b

File tree

3 files changed

+294
-0
lines changed

3 files changed

+294
-0
lines changed

‎docs/src/pages/components/tables/CollapsibleTable.js‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import Box from '@material-ui/core/Box';
5+
import Collapse from '@material-ui/core/Collapse';
6+
import IconButton from '@material-ui/core/IconButton';
7+
import Table from '@material-ui/core/Table';
8+
import TableBody from '@material-ui/core/TableBody';
9+
import TableCell from '@material-ui/core/TableCell';
10+
import TableContainer from '@material-ui/core/TableContainer';
11+
import TableHead from '@material-ui/core/TableHead';
12+
import TableRow from '@material-ui/core/TableRow';
13+
import Typography from '@material-ui/core/Typography';
14+
import Paper from '@material-ui/core/Paper';
15+
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
16+
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
17+
18+
const useRowStyles = makeStyles({
19+
root: {
20+
'& > *': {
21+
borderBottom: 'unset',
22+
},
23+
},
24+
});
25+
26+
function createData(name, calories, fat, carbs, protein, price) {
27+
return {
28+
name,
29+
calories,
30+
fat,
31+
carbs,
32+
protein,
33+
price,
34+
history: [
35+
{ date: '2020-01-05', customerId: '11091700', amount: 3 },
36+
{ date: '2020-01-02', customerId: 'Anonymous', amount: 1 },
37+
],
38+
};
39+
}
40+
41+
function Row(props) {
42+
const { row } = props;
43+
const [open, setOpen] = React.useState(false);
44+
const classes = useRowStyles();
45+
46+
return (
47+
<React.Fragment>
48+
<TableRow className={classes.root}>
49+
<TableCell>
50+
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
51+
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
52+
</IconButton>
53+
</TableCell>
54+
<TableCell component="th" scope="row">
55+
{row.name}
56+
</TableCell>
57+
<TableCell align="right">{row.calories}</TableCell>
58+
<TableCell align="right">{row.fat}</TableCell>
59+
<TableCell align="right">{row.carbs}</TableCell>
60+
<TableCell align="right">{row.protein}</TableCell>
61+
</TableRow>
62+
<TableRow>
63+
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
64+
<Collapse in={open} timeout="auto" unmountOnExit>
65+
<Box margin={1}>
66+
<Typography variant="h6" gutterBottom component="div">
67+
History
68+
</Typography>
69+
<Table size="small" aria-label="purchases">
70+
<TableHead>
71+
<TableRow>
72+
<TableCell>Date</TableCell>
73+
<TableCell>Customer</TableCell>
74+
<TableCell align="right">Amount</TableCell>
75+
<TableCell align="right">Total price ($)</TableCell>
76+
</TableRow>
77+
</TableHead>
78+
<TableBody>
79+
{row.history.map((historyRow) => (
80+
<TableRow key={historyRow.date}>
81+
<TableCell component="th" scope="row">
82+
{historyRow.date}
83+
</TableCell>
84+
<TableCell>{historyRow.customerId}</TableCell>
85+
<TableCell align="right">{historyRow.amount}</TableCell>
86+
<TableCell align="right">
87+
{Math.round(historyRow.amount * row.price * 100) / 100}
88+
</TableCell>
89+
</TableRow>
90+
))}
91+
</TableBody>
92+
</Table>
93+
</Box>
94+
</Collapse>
95+
</TableCell>
96+
</TableRow>
97+
</React.Fragment>
98+
);
99+
}
100+
101+
Row.propTypes = {
102+
row: PropTypes.shape({
103+
calories: PropTypes.number.isRequired,
104+
carbs: PropTypes.number.isRequired,
105+
fat: PropTypes.number.isRequired,
106+
history: PropTypes.arrayOf(
107+
PropTypes.shape({
108+
amount: PropTypes.number.isRequired,
109+
customerId: PropTypes.string.isRequired,
110+
date: PropTypes.string.isRequired,
111+
}),
112+
).isRequired,
113+
name: PropTypes.string.isRequired,
114+
price: PropTypes.number.isRequired,
115+
protein: PropTypes.number.isRequired,
116+
}).isRequired,
117+
};
118+
119+
const rows = [
120+
createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
121+
createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
122+
createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
123+
createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
124+
createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
125+
];
126+
127+
export default function CollapsibleTable() {
128+
return (
129+
<TableContainer component={Paper}>
130+
<Table aria-label="collapsible table">
131+
<TableHead>
132+
<TableRow>
133+
<TableCell />
134+
<TableCell>Dessert (100g serving)</TableCell>
135+
<TableCell align="right">Calories</TableCell>
136+
<TableCell align="right">Fat&nbsp;(g)</TableCell>
137+
<TableCell align="right">Carbs&nbsp;(g)</TableCell>
138+
<TableCell align="right">Protein&nbsp;(g)</TableCell>
139+
</TableRow>
140+
</TableHead>
141+
<TableBody>
142+
{rows.map((row) => (
143+
<Row key={row.name} row={row} />
144+
))}
145+
</TableBody>
146+
</Table>
147+
</TableContainer>
148+
);
149+
}

‎docs/src/pages/components/tables/CollapsibleTable.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Box from '@material-ui/core/Box';
4+
import Collapse from '@material-ui/core/Collapse';
5+
import IconButton from '@material-ui/core/IconButton';
6+
import Table from '@material-ui/core/Table';
7+
import TableBody from '@material-ui/core/TableBody';
8+
import TableCell from '@material-ui/core/TableCell';
9+
import TableContainer from '@material-ui/core/TableContainer';
10+
import TableHead from '@material-ui/core/TableHead';
11+
import TableRow from '@material-ui/core/TableRow';
12+
import Typography from '@material-ui/core/Typography';
13+
import Paper from '@material-ui/core/Paper';
14+
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
15+
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
16+
17+
const useRowStyles = makeStyles({
18+
root: {
19+
'& > *': {
20+
borderBottom: 'unset',
21+
},
22+
},
23+
});
24+
25+
function createData(
26+
name: string,
27+
calories: number,
28+
fat: number,
29+
carbs: number,
30+
protein: number,
31+
price: number,
32+
) {
33+
return {
34+
name,
35+
calories,
36+
fat,
37+
carbs,
38+
protein,
39+
price,
40+
history: [
41+
{ date: '2020-01-05', customerId: '11091700', amount: 3 },
42+
{ date: '2020-01-02', customerId: 'Anonymous', amount: 1 },
43+
],
44+
};
45+
}
46+
47+
function Row(props: { row: ReturnType<typeof createData> }) {
48+
const { row } = props;
49+
const [open, setOpen] = React.useState(false);
50+
const classes = useRowStyles();
51+
52+
return (
53+
<React.Fragment>
54+
<TableRow className={classes.root}>
55+
<TableCell>
56+
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
57+
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
58+
</IconButton>
59+
</TableCell>
60+
<TableCell component="th" scope="row">
61+
{row.name}
62+
</TableCell>
63+
<TableCell align="right">{row.calories}</TableCell>
64+
<TableCell align="right">{row.fat}</TableCell>
65+
<TableCell align="right">{row.carbs}</TableCell>
66+
<TableCell align="right">{row.protein}</TableCell>
67+
</TableRow>
68+
<TableRow>
69+
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
70+
<Collapse in={open} timeout="auto" unmountOnExit>
71+
<Box margin={1}>
72+
<Typography variant="h6" gutterBottom component="div">
73+
History
74+
</Typography>
75+
<Table size="small" aria-label="purchases">
76+
<TableHead>
77+
<TableRow>
78+
<TableCell>Date</TableCell>
79+
<TableCell>Customer</TableCell>
80+
<TableCell align="right">Amount</TableCell>
81+
<TableCell align="right">Total price ($)</TableCell>
82+
</TableRow>
83+
</TableHead>
84+
<TableBody>
85+
{row.history.map((historyRow) => (
86+
<TableRow key={historyRow.date}>
87+
<TableCell component="th" scope="row">
88+
{historyRow.date}
89+
</TableCell>
90+
<TableCell>{historyRow.customerId}</TableCell>
91+
<TableCell align="right">{historyRow.amount}</TableCell>
92+
<TableCell align="right">
93+
{Math.round(historyRow.amount * row.price * 100) / 100}
94+
</TableCell>
95+
</TableRow>
96+
))}
97+
</TableBody>
98+
</Table>
99+
</Box>
100+
</Collapse>
101+
</TableCell>
102+
</TableRow>
103+
</React.Fragment>
104+
);
105+
}
106+
107+
const rows = [
108+
createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
109+
createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
110+
createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
111+
createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
112+
createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
113+
];
114+
115+
export default function CollapsibleTable() {
116+
return (
117+
<TableContainer component={Paper}>
118+
<Table aria-label="collapsible table">
119+
<TableHead>
120+
<TableRow>
121+
<TableCell />
122+
<TableCell>Dessert (100g serving)</TableCell>
123+
<TableCell align="right">Calories</TableCell>
124+
<TableCell align="right">Fat&nbsp;(g)</TableCell>
125+
<TableCell align="right">Carbs&nbsp;(g)</TableCell>
126+
<TableCell align="right">Protein&nbsp;(g)</TableCell>
127+
</TableRow>
128+
</TableHead>
129+
<TableBody>
130+
{rows.map((row) => (
131+
<Row key={row.name} row={row} />
132+
))}
133+
</TableBody>
134+
</Table>
135+
</TableContainer>
136+
);
137+
}

‎docs/src/pages/components/tables/tables.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ You should either provide an array of:
6262
```jsx
6363
<TablePagination rowsPerPageOptions={[10, 50]} />
6464
```
65+
6566
- **objects**, the `value` and `label` keys will be used respectively for the value and label of the option (useful for language strings such as 'All').
6667

6768
```jsx
@@ -82,6 +83,13 @@ It leverages the `stickyHeader` prop (⚠️ no IE 11 support).
8283

8384
{{"demo": "pages/components/tables/StickyHeadTable.js", "bg": true}}
8485

86+
## Collapsible table
87+
88+
An example of a table with expandable rows, revealing more information.
89+
It utilizes the [`Collapse`](/api/collapse/) component.
90+
91+
{{"demo": "pages/components/tables/CollapsibleTable.js", "bg": true}}
92+
8593
## Spanning Table
8694

8795
A simple example with spanning rows & columns.

0 commit comments

Comments
 (0)