質問編集履歴

1

仕様変更の為修正

2021/06/05 14:00

投稿

shimokitan
shimokitan

スコア7

test CHANGED
File without changes
test CHANGED
@@ -10,12 +10,14 @@
10
10
 
11
11
  (今回の場合、filesの配列が2以上のデータを持っている場合、行が増えている)
12
12
 
13
- [テーブルのイメージ画像です](http://gyazo.com/f805485bf2bc41533715d85240812413)
13
+ [テーブルのイメージ画像です](http://gyazo.com/0bd17705ab4263bca17c1efb624ca2a3)
14
14
 
15
15
 
16
16
 
17
17
  ```
18
18
 
19
+ // App.js
20
+
19
21
  import { useEffect, useState } from "react";
20
22
 
21
23
  import MuiPagination from "@material-ui/lab/Pagination";
@@ -36,6 +38,10 @@
36
38
 
37
39
 
38
40
 
41
+ import { Rows } from "./Rows";
42
+
43
+
44
+
39
45
  const initialUsers = [...Array(10).keys()].map((idx) => {
40
46
 
41
47
  if (idx === 3 || idx === 5 || idx === 9) {
@@ -190,41 +196,7 @@
190
196
 
191
197
 
192
198
 
193
- return row.files.map((x, idx) => {
199
+ return <Rows row={row} idx={idx} />;
194
-
195
- if (idx === 0) {
196
-
197
- return (
198
-
199
- <TableRow key={idx}>
200
-
201
- <TableCell>{row.name}</TableCell>
202
-
203
- <TableCell>{row.fileCount}</TableCell>
204
-
205
- <TableCell>{row.files[0].file}</TableCell>
206
-
207
- </TableRow>
208
-
209
- );
210
-
211
- }
212
-
213
- return (
214
-
215
- <TableRow key={idx}>
216
-
217
- <TableCell />
218
-
219
- <TableCell />
220
-
221
- <TableCell>{x.file}</TableCell>
222
-
223
- </TableRow>
224
-
225
- );
226
-
227
- });
228
200
 
229
201
  })}
230
202
 
@@ -240,13 +212,13 @@
240
212
 
241
213
  <Pagination
242
214
 
243
- count={count} // 総ページ数
215
+ count={count} //総ページ数
244
216
 
245
217
  color="primary"
246
218
 
247
219
  onChange={(e, page) => setPage(page)}
248
220
 
249
- page={page} // 現在のページ番号
221
+ page={page} //現在のページ番号
250
222
 
251
223
  />
252
224
 
@@ -258,17 +230,77 @@
258
230
 
259
231
  }
260
232
 
233
+
234
+
261
235
  ```
262
236
 
263
237
 
264
238
 
239
+ ```
240
+
241
+ // Rows.js
242
+
243
+ import TableCell from "@material-ui/core/TableCell";
244
+
245
+ import TableRow from "@material-ui/core/TableRow";
246
+
247
+
248
+
249
+ export const Rows = (props) => {
250
+
251
+ const { row, idx } = props;
252
+
253
+
254
+
255
+ return (
256
+
257
+ <>
258
+
259
+ <TableRow key={idx}>
260
+
261
+ <TableCell>{row.name}</TableCell>
262
+
263
+ <TableCell>{row.fileCount}</TableCell>
264
+
265
+ <TableCell>{row.file}</TableCell>
266
+
267
+ </TableRow>
268
+
269
+
270
+
271
+ {row.files.map((x, idx) => (
272
+
273
+ <TableRow key={idx}>
274
+
275
+ <TableCell />
276
+
277
+ <TableCell />
278
+
279
+ <TableCell>{x.file}</TableCell>
280
+
281
+ </TableRow>
282
+
283
+ ))}
284
+
285
+ </>
286
+
287
+ );
288
+
289
+ };
290
+
291
+
292
+
293
+ ```
294
+
295
+
296
+
265
297
  ## 実現したいこと
266
298
 
267
299
  現状のソースコードですと、下記のイメージ画像の赤枠の行をページネーションの表示件数となっています。
268
300
 
269
- [テーブル(赤枠付き)](http://gyazo.com/f04e9ddfa0638357ae40de55cf288826)
301
+ [テーブル(赤枠付き)](https://gyazo.com/f9d6519b3cb14e44b110c2ea9ed41e15)
270
-
302
+
271
- これを行(イメージ画像では7件)を表示件数としてページネーションを実装したいのですが、実装のイメージができず。。
303
+ これをfileが存在する行(イメージ画像では7件)を表示件数としてページネーションを実装したいのですが、実装のイメージができず。。
272
304
 
273
305
 
274
306