Material-UI - Limiting number of rows in a table

1

Hello guys. I am trying to make a table which contains some “latest” things, this means that it should just show me the first 18 elements. I am not being able to figure out how to do this. Can someone help me? Here’s what I have so far:

import React from 'react';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.secondary.main,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.primary.light,
      color: theme.palette.secondary.main
    },
    '&:nth-of-type(even)': {
      backgroundColor: theme.palette.primary.contrastText,
      color: theme.palette.secondary.main
    },
  },
}))(TableRow);

function createData(item, who, when) {
  return { item, who, when };
}

const rows = [
  // SOME CALLS TO createData()
];

const useStyles = makeStyles({
  table: {
    minWidth: 700,
  },
});

const LatestRents = () => {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="last rents">
        <TableHead>
          <TableRow>
            <StyledTableCell>Oggetto</StyledTableCell>
            <StyledTableCell align="justify">Chi</StyledTableCell>
            <StyledTableCell align="justify">Quando</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <StyledTableRow key={row.item}>
              <StyledTableCell component="th" scope="row">
                {row.item}
              </StyledTableCell>
              <StyledTableCell align="justify">{row.who}</StyledTableCell>
              <StyledTableCell align="justify">{row.when}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default LatestRents;
2

Hey there.

What are you struggling with?
Logic?
Code?

3

Actually both. From the docs there is a TablePagination component, but from what I understood is not quite what I’m looking for, since it allows the user to choose how many rows, and it seems like an overshoot. All I want to do is limit the view to 15 elements, TablePagination seems to overcomplicate this

4

Alright, so do you understand where all the markup for your rows gets created in the code?

5

Can you do this in HTML/CSS/Vanilla.js? Because imo Material just adds a layer of difficulty if you’re not already good at it.

6

Not really. I’m way more used to React, I haven’t written “classical” web in a while, so that would actually add a layer of difficulty.

7

In the StyleTableRow, which (if I understand the code correctly) highers the component’s order. That’s pretty much my issue, should I generate a sub-array with just the first elements of a much larger JSON (which in a finished version would come externally to this document), or should I cut row to the first n elements?

8

The generated markup should just be a function of the data you give it, so give it an array of 18 items – you shouldn’t be getting all the data then using styling tricks to hide the bits of data you don’t want, the UI functions should receive the data you want to display.

The StyledTableRow is wrapping the component in another component (uses React Context) and the [styled components] API allows you to write CSS which gets appended to the HTML document head at runtime. The actual underlying HTML that gets generated is just a table row, you’re just enabling the ability to add CSS specifically to that row.

1 Like