In this example, let's assume that the user needs to be able to select multiple rows in your table. As rows are selected, another section on the screen is updated with data that reflects the selected rows. Let's start by looking at the Card component, which displays data from the selected table rows:
<Card className={classes.card}> <CardHeader title={`(${selections()}) rows selected`} /> <CardContent> <Grid container direction="column"> <Grid item> <Grid container justify="space-between"> <Grid item> <Typography>Low</Typography> </Grid> <Grid item> <Typography>{selectedLow()}</Typography> </Grid> </Grid> </Grid> <Grid item> <Grid container justify="space-between"> <Grid item> <Typography>High</Typography> </Grid> <Grid item> ...
