ReactでMaterial UIライブラリにあるページネーションをテーブルに適用させたい

現在、Material UIライブラリのドキュメントに載っているページネーションを使ったテーブルを作成したいと考えています。
具体的には、https://material-ui.com/components/tables/ に載っているCustom pagination actionsを実装したいです。
下記の画像のようなものです。

PagenationTableComponent.jsにCheckList.jsにあるようにaxiosで渡ってきたjsonデータを表示したいのですが、下記のようなエラーが出てしまいます。
このrows.sliceが機能していないというのがどうすれば修正できるかご教示お願いします。
jsonデータは以下のようなものです。
[{"listNo":1,
"saiyouDate":"2008-10-06 ",
"softwareName":"Symantec Endpoint Protection",
"version":"‐",
"shubetu":"有償",
"licenseManage":"○",
"youto":"ウイルス対策",
"bikou":"使用する場合はシステム管理まで連絡が必要",
"authorizer":"山田",
"approvalDate":"2008-10-06 ",
"url":"https://jp.broadcom.com/products/cyber-security/endpoint/end-user"}]

TypeError: rows.slice is not a function
CustomPaginationActionsTable
C:/workspace/spring-backend-3/frontend/src/component/PagenationTableComponent.js:117
114 | return (
115 |
116 |

117 |
| ^ 118 | {(rowsPerPage > 0
119 | ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
120 | : rows
View compiled
▶ 17 stack frames were collapsed.

PagenationTableComponent.js

js
1import React from 'react';
2import PropTypes from 'prop-types';
3import { makeStyles, useTheme } from '@material-ui/core/styles';
4import Table from '@material-ui/core/Table';
5import TableBody from '@material-ui/core/TableBody';
6import TableCell from '@material-ui/core/TableCell';
7import TableContainer from '@material-ui/core/TableContainer';
8import TableFooter from '@material-ui/core/TableFooter';
9import TablePagination from '@material-ui/core/TablePagination';
10import TableRow from '@material-ui/core/TableRow';
11import Paper from '@material-ui/core/Paper';
12import IconButton from '@material-ui/core/IconButton';
13import FirstPageIcon from '@material-ui/icons/FirstPage';
14import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
15import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
16import LastPageIcon from '@material-ui/icons/LastPage';
17import CheckListService from '../services/CheckList';
18
19const useStyles1 = makeStyles((theme) => ({
20    root: {
21        flexShrink: 0,
22        marginLeft: theme.spacing(2.5),
23    },
24}));
25
26function TablePaginationActions(props) {
27    const classes = useStyles1();
28    const theme = useTheme();
29    const { count, page, rowsPerPage, onChangePage } = props;
30
31    const handleFirstPageButtonClick = (event) => {
32        onChangePage(event, 0);
33    };
34
35    const handleBackButtonClick = (event) => {
36        onChangePage(event, page - 1);
37    };
38
39    const handleNextButtonClick = (event) => {
40        onChangePage(event, page + 1);
41    };
42
43    const handleLastPageButtonClick = (event) => {
44        onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
45    };
46
47    return (
48        <div className={classes.root}>
49            <IconButton
50                onClick={handleFirstPageButtonClick}
51                disabled={page === 0}
52                aria-label="first page"
53            >
54                {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
55            </IconButton>
56            <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
57                {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
58            </IconButton>
59            <IconButton
60                onClick={handleNextButtonClick}
61                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
62                aria-label="next page"
63            >
64                {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
65            </IconButton>
66            <IconButton
67                onClick={handleLastPageButtonClick}
68                disabled={page >= Math.ceil(count / rowsPerPage) - 1}
69                aria-label="last page"
70            >
71                {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
72            </IconButton>
73        </div>
74    );
75}
76
77TablePaginationActions.propTypes = {
78    count: PropTypes.number.isRequired,
79    onChangePage: PropTypes.func.isRequired,
80    page: PropTypes.number.isRequired,
81    rowsPerPage: PropTypes.number.isRequired,
82};
83
84let rows = [];
85rows = CheckListService.getList().then((response) => {
86    return response.data
87
88});
89
90
91
92const useStyles2 = makeStyles({
93    table: {
94        minWidth: 500,
95    },
96});
97
98export default function CustomPaginationActionsTable() {
99    const classes = useStyles2();
100    const [page, setPage] = React.useState(0);
101    const [rowsPerPage, setRowsPerPage] = React.useState(5);
102
103    const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
104
105    const handleChangePage = (event, newPage) => {
106        setPage(newPage);
107    };
108
109    const handleChangeRowsPerPage = (event) => {
110        setRowsPerPage(parseInt(event.target.value, 10));
111        setPage(0);
112    };
113
114    return (
115        <TableContainer component={Paper}>
116            <Table className={classes.table} aria-label="custom pagination table">
117                <TableBody>
118                    {(rowsPerPage > 0
119                        ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
120                        : rows
121                    ).map((row) => (
122                        <TableRow key={row.listNo}>
123                            <TableCell component="th" scope="row">
124                                {row.listNo}
125                            </TableCell>
126                            <TableCell style={{ width: 160 }} align="right">
127                                {row.saiyouDate}
128                            </TableCell>
129                            <TableCell style={{ width: 160 }} align="right">
130                                {row.softwareName}
131                            </TableCell>
132                        </TableRow>
133                    ))}
134
135                    {emptyRows > 0 && (
136                        <TableRow style={{ height: 53 * emptyRows }}>
137                            <TableCell colSpan={6} />
138                        </TableRow>
139                    )}
140                </TableBody>
141                <TableFooter>
142                    <TableRow>
143                        <TablePagination
144                            rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
145                            colSpan={3}
146                            count={rows.length}
147                            rowsPerPage={rowsPerPage}
148                            page={page}
149                            SelectProps={{
150                                inputProps: { 'aria-label': 'rows per page' },
151                                native: true,
152                            }}
153                            onChangePage={handleChangePage}
154                            onChangeRowsPerPage={handleChangeRowsPerPage}
155                            ActionsComponent={TablePaginationActions}
156                        />
157                    </TableRow>
158                </TableFooter>
159            </Table>
160        </TableContainer>
161    );
162}
163
164

CheckList.js

js
1import axios from 'axios'
2
3const CHECKLIST_REST_API_URL = 'http://localhost:8080/api/users';
4
5class CheckListService {
6
7    getList() {
8        return axios.get(CHECKLIST_REST_API_URL);
9    }
10}
11
12
13export default new CheckListService();

行動規範の内容に同意します

回答1件

自己解決

スタックオーバーフローでも質問していて、詳細をそっちの方で記載しました。
無事解決することができたので、リンクを貼っておきます。
https://ja.stackoverflow.com/questions/72796/material-ui%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e3%81%ae%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%97%e3%82%88%e3%81%86%e3%81%a8%e3%81%97%e3%81%9f%e3%82%89%e3%82%a8%e3%83%a9%e3%83%bc-rows-slice-is-not-a-function%e3%81%8c%e5%87%ba%e3%82%8b/72817#72817

投稿2020/12/22 05:30

soso0programmer

総合スコア35

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

ReactでMaterial UIライブラリにあるページネーションをテーブルに適用させたい

関連した質問