Create a table separating dates by quarter with React and Node

Question

The table needs to look like this:

She’s like this:

I was able to create a table using Sequelize with the data of each unit, with cnpj and everything, and I made a table of dates related to this table of units. the relationship was as follows:

db.unidades = require("./CompreBem/unidades.js")(sequelize, Sequelize);
db.datas = require("./CompreBem/datas.js")(sequelize, Sequelize);

db.unidades.hasMany(db.datas, { as: "datas" });
db.datas.belongsTo(db.unidades);

The table is in React, in the table component was the following:

<TableContainer component={Paper}>
        <Table className={classes.table} aria-label="caption table">
          <TableHead>
            <TableRow>
              <TableCell className={classes.teste} align="right">  </TableCell>
              <TableCell align="right">Unidade</TableCell>
              <TableCell align="right">Nº CTI</TableCell>
              <TableCell align="right">CNPJ</TableCell>
              <TableCell align="right">Trim.1</TableCell>
              <TableCell align="right">Trim.2</TableCell>
              <TableCell align="right">Trim.3</TableCell>
              <TableCell align="right">Trim.4</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {Object.keys(unidades).map((unidade, i) => (
              <TableRow className={classes.row} key={i}>
                <TableCell align="right">{unidades[unidade].numero}</TableCell>
                <TableCell align="right">{unidades[unidade].unidade}</TableCell>
                <TableCell align="right">{unidades[unidade].ntci}</TableCell>
                <TableCell align="right">{unidades[unidade].cnpj.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5") }</TableCell>
                <TableCell align="right">1</TableCell>
                <TableCell align="right">2</TableCell>
                <TableCell align="right">3</TableCell>
                <TableCell align="right">4</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

I made a useState for the units table, made the request Axios and made this treatment to appear in the table, now I need to stay the last dates of each quarter in their respective units. The request I make to take this data is in this format:

Please, I’m breaking this code, I can’t think of a way to show these quarters.

Answer 1

If the date records come sorted within each unit I imagine you can do this way:

{Object.keys(unidades).map((unidade, i) => (
          <TableRow className={classes.row} key={i}>
            <TableCell align="right">{unidades[unidade].numero}</TableCell>
            <TableCell align="right">{unidades[unidade].unidade}</TableCell>
            <TableCell align="right">{unidades[unidade].ntci}</TableCell>
            <TableCell align="right">{unidades[unidade].cnpj.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5") }</TableCell>
            <TableCell align="right">unidades[unidade].datas[0]['data']</TableCell>
            <TableCell align="right">unidades[unidade].datas[1]['data']</TableCell>
            <TableCell align="right">unidades[unidade].datas[2]['data']</TableCell>
            <TableCell align="right">unidades[unidade].datas[3]['data']</TableCell>
          </TableRow>
        ))}

You can put a suit to check if you have the array’s Dice to make no mistake by displaying other information. The entire grouping of dates for the units can be done in the own service in the back end, making the front end only display.