Add empty table rows to a Table until it has a certain number of rows

Question

There is a table and it must have a fixed number of rows, let's say 10. If there are less than 10 rows with data, it must be added "empty" rows until there are 10.

So far the code adds one row if there are less than 10:

  import { Table } from 'semantic-ui-react';

  ...

  {rows.length < 10 ? (
    <Table.Row
      className="disabled-row">
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
      <Table.Cell id="cta" textAlign="right"></Table.Cell>
    </Table.Row>
  ) : (
    ''
  )}

Is there a way to use something like a forEach() or while() that adds a new row for each iteration between row.length and 10?

If that is possible it could be used also for table cells, instead of writing 8 identical cells to write a function for that.

Answer 1

You can print rows dynamically like this:

<Table.Row className="disabled-row">
          
  {
    [...Array(10 - row.length)].map((e, i) => <Table.Cell id="cta" 
    textAlign="right"></Table.Cell>
  }

</Table.Row>