請檢查此工作示例：
import TablePagination from "@material-ui/core/TablePagination";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import TableBody from "@material-ui/core/TableBody";
import Paper from "@material-ui/core/Paper";
import TableContainer from "@material-ui/core/TableContainer";
import Table from "@material-ui/core/Table";
import TableHead from "@material-ui/core/TableHead";
import React, {useState} from "react";
export default function Patient() {
// const classes = useStyles();
// const [user, setUser] = useContext(AuthContext);
const [state, setState] = useState({id: null, rows: []});
const [page, setPage] = useState(0);
const [rows, setRows] = useState([]);
const [rowsPerPage, setRowsPerPage] = useState(10);
const data = [
{id: 1, code: 1, specialization: 'ABC', case_name: 'X-Ray', case_description: 'This is detail'},
{id: 2, code: 2, specialization: 'XYZ', case_name: 'MRI', case_description: 'This is detail'},
{id: 3, code: 3, specialization: 'PQR', case_name: 'Urine', case_description: 'This is detail'}
];
const columns = [
{id: 'id', label: 'Case ID', minWidth: 170},
{
id: 'specialization',
label: 'Case Type',
minWidth: 100,
format: (value) => value.toLocaleString('en-US'),
},
{
id: 'case_name',
label: 'Diagnoses',
minWidth: 170,
align: 'right',
format: (value) => value.toLocaleString('en-US'),
},
{
id: 'case_description',
label: 'Doctor comments',
minWidth: 170,
align: 'right',
format: (value) => value.toLocaleString('en-US'),
},
];
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
function getPatientHistory(id) {
return data;
}
React.useEffect(() => {
// if (!user || !user.email) {
const id = localStorage.getItem('id') || null;
setState({id: id, rows: getPatientHistory(id)})
// }
}, []);
return (
<Paper>
<TableContainer>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column, i) => (
<TableCell
key={i}
align={column.align}
style={{minWidth: column.minWidth}}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{state.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id} align={column.align}>
{column.format && typeof value === 'number' ? column.format(value) : value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={state.rows.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
)
}
