[React] 2次元配列を含めたテーブルのページネーションについて

Question

開発環境

• react v17.0.2

実装内容

2次元配列のデータに応じて、行が追加されるテーブルを実装しています。
（今回の場合、filesの配列が2以上のデータを持っている場合、行が増えている）
テーブルのイメージ画像です

// App.js
import { useEffect, useState } from "react";
import MuiPagination from "@material-ui/lab/Pagination";
import { withStyles } 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 { Rows } from "./Rows";

const initialUsers = [...Array(10).keys()].map((idx) => {
  if (idx === 3 || idx === 5 || idx === 9) {
    return {
      id: idx,
      name: `user${idx + 1}`,
      fileCount: 3,
      files: [
        {
          file: "sample1.csv"
        },
        {
          file: "sample2.csv"
        },
        {
          file: "sample3.csv"
        }
      ]
    };
  }
  return {
    id: idx,
    name: `user${idx + 1}`,
    fileCount: 1,
    files: [
      {
        file: "sample1.csv"
      }
    ]
  };
});

export default function App() {
  const [rows] = useState(initialUsers);
  const [page, setPage] = useState(1);
  const [viewCount, setViewCount] = useState(5);
  const [count, setCount] = useState(1);

  useEffect(() => {
    setCount(Math.ceil(rows.length / viewCount));
  }, [rows, viewCount]);

  const Pagination = withStyles({
    root: {
      display: "inline-block"
    }
  })(MuiPagination);

  return (
    <>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>名前</TableCell>
              <TableCell>ファイル数</TableCell>
              <TableCell>ファイル</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row, idx) => {
              if (page === 1) {
                if (idx + 1 > viewCount * page) return false;
              } else {
                if (idx < viewCount * (page - 1)) return false;
                if (idx >= viewCount * page) return false;
              }

              if (row.files.length === 1) {
                return (
                  <TableRow key={row.id}>
                    <TableCell>{row.name}</TableCell>
                    <TableCell>{row.fileCount}</TableCell>
                    <TableCell>{row.files[0].file}</TableCell>
                  </TableRow>
                );
              }

              return <Rows row={row} idx={idx} />;
            })}
          </TableBody>
        </Table>
      </TableContainer>
      <div style={{ textAlign: "center" }}>
        <div>表示件数： {viewCount}</div>
        <Pagination
          count={count} //総ページ数
          color="primary"
          onChange={(e, page) => setPage(page)}
          page={page} //現在のページ番号
        />
      </div>
    </>
  );
}

// Rows.js
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";

export const Rows = (props) => {
  const { row, idx } = props;

  return (
    <>
      <TableRow key={idx}>
        <TableCell>{row.name}</TableCell>
        <TableCell>{row.fileCount}</TableCell>
        <TableCell>{row.file}</TableCell>
      </TableRow>

      {row.files.map((x, idx) => (
        <TableRow key={idx}>
          <TableCell />
          <TableCell />
          <TableCell>{x.file}</TableCell>
        </TableRow>
      ))}
    </>
  );
};

実現したいこと

現状のソースコードですと、下記のイメージ画像の赤枠の行をページネーションの表示件数となっています。
テーブル（赤枠付き）
これをfileが存在する行（イメージ画像では7件）を表示件数としてページネーションを実装したいのですが、実装のイメージができず。。

実装自体を見直すべきでしょうか？もしくは今の実装に付け加えで実現できますでしょうか？

Answer 1

こんな感じでしょうか。

const initialUsers = [...Array(10).keys()].map(idx => {
  const fileCount = Math.floor(Math.random() * 5) + 1;
  return {
    id: idx,
    name: `user${idx + 1}`,
    fileCount,
    files: [...Array(fileCount).keys()].map(i => ({ file: `sample${i + 1}.csv` }))
  };
});

function makeRows(users) {
  return users.flatMap(row => row.files.map((_, idx) => ({ row, idx })));
}

export default function App() {
  const rows = makeRows(initialUsers);
  const [page, setPage] = useState(1);

  const viewCount = 7;
  const count = Math.ceil(rows.length / viewCount);

  const Pagination = withStyles({
    root: {
      display: "inline-block"
    }
  })(MuiPagination);

  return (
    <>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>名前</TableCell>
              <TableCell>ファイル数</TableCell>
              <TableCell>ファイル</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {[...Array(viewCount).keys()].map(i => {
              const rowIdx = viewCount * (page - 1) + i;
              if (rowIdx >= rows.length) { return undefined; }
              const { row, idx } = rows[rowIdx];
              return <Rows key={`${row.id}-${idx}`} row={row} idx={idx} top={i === 0} />;
            })}
          </TableBody>
        </Table>
      </TableContainer>
      <div style={{ textAlign: "center" }}>
        <div>表示件数： {viewCount}</div>
        <Pagination
          count={count} //総ページ数
          color="primary"
          onChange={(e, page) => setPage(page)}
          page={page} //現在のページ番号
        />
      </div>
    </>
  );
}

export const Rows = ({ row, idx, top }) => {
  if (row.fileCount == 1) {
    return (
      <TableRow>
        <TableCell>{row.name}</TableCell>
        <TableCell>{row.fileCount}</TableCell>
        <TableCell>{row.files[0].file}</TableCell>
      </TableRow>
    );
  } else if (idx > 0 && !top) {
    return (
      <TableRow>
        <TableCell />
        <TableCell />
        <TableCell>{row.files[idx].file}</TableCell>
      </TableRow>
    );
  } else {
    return (
      <>
        <TableRow>
          <TableCell>{row.name}</TableCell>
          <TableCell>{row.fileCount}</TableCell>
          <TableCell></TableCell>
        </TableRow>

        <TableRow>
          <TableCell />
          <TableCell />
          <TableCell>{row.files[idx].file}</TableCell>
        </TableRow>
      </>
    );
  }
}