Currently, we would like to create a table using page annements listed in the Material UI library documentation.

Postscript: https://teratail.com/questions/311503I have also asked a question.

Specifically, https://material-ui.com/components/Tables/I would like to implement the Custom Pagination Actions listed in.

Image:

PagenationTableComponent.js wants to display JSON data passing by AXIOS, but the following error will occur.

If this Rows.Slice is not functioning, please teach me how to fix it.

JSON data is as follows.

[{"listno": 1,
"Saiyoudate": "2008-10-06",
"SOFTWARENAME": "Symantec Endpoint Protection",
"VERSION": "-"
"Shubetu": "Paid",
"LicenseManage": "○",
"YouTo": "antivirus",
"Bikou": "Required for system management when using",
"AUTHORIZER": "Yamada",
"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 | <
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
View Compiled
17 17 Stack Frames Were Collapsed.

PAGENATIONTABLECOMPONENT.JS
Import React from 'React';
Import Proptypes from 'prop-Types';
IMPORT {MAKESTYLES, USETHEME} 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 TableFooter from '@ Material-UI /Core /TableFooter';
IMPORT TABLEPAGINATION From '@ Material-UI /Core /TablePagination';
IMPORT TABLEROW FROM '@ MATERIAL-UI /CORE /TABLEROW';
Import Paper from '@ Material-UI /Core /Paper';
Import Iconbutton from '@ Material-UI /Core /Iconbutton';
IMPORT FIRSTPAGEICON From '@ Material-UI /ICONS /FirstPage';
IMPORT KEYBOARDARROWLEFT FROM '@ MATERIAL-UI /ICONS /KEYBOARDARROWLEFT';
IMPORT KEYBOARDARROWRIGHT FROM '@ MATERIAL-UI /ICONS /KEYBOARDARROWRIGHT';
IMPORT LASTPAGEICON From '@ Material-UI /ICONS /LASTPAGE';
Import CheckListService from '../Services/checklist';
const usestyles1= makestyles ((Theme)= >
 ({
    root: {
        FlexShrink: 0,
        MARGINLEFT: Theme.SPACing (2.5),
    }
));
Function TablePaginationActions (PROPS) {
    CONST CLASSES= USESTYLES1 ();
    const THEME= USETHEME ();
    const {count, page, rowsperpage, onchangeepage}= probs;
    Const HandleFirstPageButtonClick= (Event)= >
 {
        OnChangePage (Event, 0);
    };
    CONST HANDLEBACKBUTTONCLICK= (EVENT)= >
 {
        OnChangePage (Event, Page-1);
    };
    const HandlenextButtonClick= (Event)= >
 {
        OnChangePage (Event, Page + 1);
    };
    const HandlelastPageButtonClick= (Event)= >
 {
        OnChangePage (Event, Math.max (0, Math.ceil (Count /RowSperpage) -1);
    };
    RETURN (
        ≪
DIV ClassName= {classes.root} >
            ≪
Iconbutton
                OnClick= {HandleFirStpageButtonClick}
                disabled= {PAGE=== 0}
                aria-label= "First Page"
            ≫
                {Theme.Direction=== 'RTL'? <
LASTPAGEICON />
 : ≪
FirstPageIcon />
}
            ≪
/IconButton >
            ≪IconButton OnClick= {handlebackButtonClick} disabled= {Page==== 0} aria-label= "Previous Page" > {theme.direction=== 'RTL'? <
Keyboardarrowright />
 : ≪
Keyboardarrowleft />
}
            ≪
/IconButton >
            ≪
Iconbutton
                OnClick= {HandlenextButtonClick}
                disabled= {Page >
= Math.ceil (Count /RowSperpage) -1}
                aria-label= "NEXT PAGE"
            ≫
                {Theme.Direction=== 'RTL'? <
Keyboardarrowleft />
 : ≪
Keyboardarrowright />
}
            ≪
/IconButton >
            ≪
Iconbutton
                OnClick= {HandlelastPageButtonClick}
                disabled= {Page >
= Math.ceil (Count /RowSperpage) -1}
                aria-label= "Last Page"
            ≫
                {Theme.Direction=== 'RTL'? <
FirstPageIcon />
 : ≪
LASTPAGEICON />
}
            ≪
/IconButton >
        ≪
/DIV >
    ;
}
TablePaginationActions.PropTypes= {
    COUNT: PROPTYPES.NUMBER.ISREQUIRED,
    onchangeepage: proptypes.func.isrequired,
    Page: PROPTYPES.NUMBER.ISREQUIRED,
    ROWSPERPAGE: PROPTYPES.NUMBER.ISREQUIRED,
};
Let Rows= [];
Rows= CheckListService.getList (). THEN ((RESPONSE)= >
 {
    RETURN RESPONSE.DATA
}))
const usestyles2= makestyles ({
    Table: {
        minwidth: 500,
    }
}))
Export Default Function CustomPaginationActionStable () {
    CONST CLASSES= USESTYLES2 ();
    CONST [Page, SetPage]= React.usestate (0);
    const [RowSperpage, SetRowsPage]= React.usestate (5);
    CONST EMPTYROWS= ROWSPAPAGE-MATH.MIN (ROWSPERPAGE, ROWS.LENGTH-PAGE * ROWSPAGE);
    const HandleChangePage= (Event, NewPage)= >
 {
        SetPage (NewPage);
    };
    Const HandleChangerOWSPAPAGE= (Event)= >
 {
        setRowSPerPage (PARSEINT (Event.Target.Value, 10));
        setPage (0);
    };
    RETURN (
        ≪
TableContainer Component= {Paper} >
            ≪
Table ClassName= {classes.table} aria-label= "Custom Pagination Table" >
                ≪
TableBody >
                    {(RowSperpage >
 0
                        ? Rows.Slice (Page * Rowsperpage, Page * ROWSPERPAGE + ROWSPAGE)
                        : Rows
                    .MAP ((ROW)= >
 (
                        ≪
TABLEROW KEY= {Row.Listno} >
                            ≪
TABLECELL COMPONENT= "TH" Scope= "ROW" >
                                {row.listno}
                            ≪
/TABLECELL >
                            ≪
TableCell Style= {{Width: 160}} align= "right" >
                                {row.saiyoudate}
                            ≪
/TABLECELL >
                            ≪
TableCell Style= {{Width: 160}} align= "right" >
                                {row.softwarename}
                            ≪
/TABLECELL >
                        ≪
/TABLEROW >
                    )))
                    {EmptyRows >
 0 &
&
 (
                        ≪
TABLEROW STYLE= {{Height: 53 * EMPTYROWS} >
                            ≪
Tablecell colSpan= {6} />
                        ≪
/TABLEROW >
                    )}
                ≪
/TableBody >
                ≪
TABLEFOOTER >
                    ≪
TABLEROW >
                        ≪
TABLEPAGINATION
                            ROWSPERPAGEOPTIONS= {[5, 10, 25, {Label: 'all', Value: -1}]}
                            colSpan= {3}
                            COUNT= {Rows.Length}
                            ROWSPERPAGE= {RowsperPage}
                            PAGE= {Page}
                            Selectprops= {{
                                INPUTPROPS: {'ARIA-LABEL': 'Rows PER PAGE'},
                                Native: TRUE,
                            }
                            OnChangePage= {HandleChangePage}
                            OnChangerowSperpage= {HandleChangerowsPage}
                            ActionSComponent= {TablePaginationactions}
                        />
                    ≪/TABLEROW > <
/TABLEFOOTER >
            ≪
/TABLE >
        ≪
/TableContainer >
    ;
}

CheckList.js
IMPORT AXIOS From 'AXIOS'
const checklist_rest_api_url= 'http: //localhost: 8080 /API /user s
Class checklistService {
    getList () {
        RETURN AXIOS.GET (CheckList_REST_API_URL);
    }
}
export Default New ChecklistService ();

To those who answered teraitail.com/questions/311503
htb2021-04-07 16:44:40