質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3529閲覧

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

soso0programmer

総合スコア35

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/12/21 04:09

編集2020/12/21 08:38

現在、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();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問