Я пытаюсь отобразить табличные данные, которые должны выглядеть так, как на бумаге 8,5x11. Что я делаю, так это создаю div 8,5x11 и устанавливаю границы и белый фон, чтобы он выглядел как бумага. И затем я ...

1
g_b 10 Янв 2021 в 17:19

1 ответ

Лучший ответ

Это самый простой способ сделать это, разделив массив элементов на массив массива, а затем зациклив их в таблице.

Если вам нужна дополнительная логика для вычисления высоты, вы можете создать функцию для получения количества itemOnPage, а затем разделить с ней элементы.

const App = () => {
  const items = Array.from(Array(70)).map((_, v) => ({no:v,firstName:"name"+v,lastName:"last"+v}))
  const itemOnPage = 24;
  const arrayOfArrays = [];
  for (let i=0; i < items.length; i+=itemOnPage) {
       arrayOfArrays.push(items.slice(i,i+itemOnPage));
  }
  return(
    <div style={styles.root}>
     {arrayOfArrays.map((items, v) => (
      <div style={styles.paper}>
        <p style={styles.pageNum}>{v+1}</p>
        <table key={v}>
          <thead>
            <tr>
              <th>Student No.</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            {items.map(row => (
              <tr key={row.no} data-id={row.no}>
                  <td>{row.no}</td>
                  <td>{row.firstName}</td>
                  <td>{row.lastName}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
     ))}
    </div>
    )
};
const styles={
  root:{
    backgroundColor: "grey",
    height:1800,
    display:"flex",
    flexDirection:"column",
  },
  paper:{
    position:"relative",
    margin:10,
    padding: 5,
    border:"1px solid",
    width: "425px",
    height: "550px",
    backgroundColor: "white"

  },
    pageNum :{
    position:"absolute",
    bottom:0,
    right:20
  },
}

ReactDOM.render(<App />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
0
b3hr4d 11 Янв 2021 в 08:11