Блог

я пытаюсь реализовать простую таблицу с некоторыми данными. вот данные

 export const allPatients = [  {  name: 'Ralph',  email: 'maaloulyRalph@gmail.com',  phoneNumber: 76503675,  numberOfSessions: 3,  joiningDate: '12/3/2021',  },  {  name: 'Hadi',  email: 'hadi@gmail.com',  phoneNumber: 76309480,  numberOfSessions: 4,  joiningDate: '27/10/2021',  },  {  name: 'Victor',  email: 'victor@gmail.com',  phoneNumber: 76390580,  numberOfSessions: 6,  joiningDate: '19/9/2021',  },  {  name: 'Sam',  email: 'sam@gmail.com',  phoneNumber: 76439000,  numberOfSessions: 9,  joiningDate: '28/4/2021',  },  {  name: 'Omar',  email: 'omar@gmail.com',  phoneNumber: 76168432,  numberOfSessions: 2,  joiningDate: '11/7/2021',  },  {  name: 'Omar',  email: 'omar@gmail.com',  phoneNumber: 76168432,  numberOfSessions: 2,  joiningDate: '11/7/2021',  } ]  

и вот заголовок:

 const Headers = ['Name', 'Email', 'Phone Number', 'Number of Sessions', 'Joining Data'];  

Я посмотрел документы для кода пользовательского интерфейса материала и пришел к следующему:

 import * as React from 'react'; import PropTypes from 'prop-types'; import { useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableContainer from '@mui/material/TableContainer'; import TableFooter from '@mui/material/TableFooter'; import TablePagination from '@mui/material/TablePagination'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; import IconButton from '@mui/material/IconButton'; import FirstPageIcon from '@mui/icons-material/FirstPage'; import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; import LastPageIcon from '@mui/icons-material/LastPage'; import { TableHead, TableSortLabel } from '@mui/material'; import { makeStyles } from '@material-ui/core'; import { blackColor, primaryColor, whiteColor } from '../../constants/colors';  const styles = makeStyles({  table: {  "amp; .MuiTableCell-root": {  border: "1px solid rgba(255, 255, 255, 0.2)",  background: '#23232e',  color: whiteColor,  fontSize: 18,  }  },  btn: {  "amp; .css-i4bv87-MuiSvgIcon-root": {  color: whiteColor  }  },  visuallyHidden: {  border: 0,  clip: 'rect(0 0 0 0)',  height: 1,  margin: -1,  overflow: 'hidden',  padding: 0,  position: 'absolute',  top: 20,  width: 1,  }, })  function TablePaginationActions(props) {  const classes = styles();  const theme = useTheme();  const { count, page, rowsPerPage, onPageChange } = props;   const handleBackButtonClick = (event) =gt; {  onPageChange(event, page - 1);  };   const handleNextButtonClick = (event) =gt; {  onPageChange(event, page   1);  };      return (  lt;Box sx={{ flexShrink: 0, ml: 2.5 }}gt;  lt;IconButton  onClick={handleBackButtonClick}  disabled={page === 0}    gt;  lt;KeyboardArrowLeft /gt;  lt;/IconButtongt;  lt;IconButton  onClick={handleNextButtonClick}  disabled={page gt;= Math.ceil(count / rowsPerPage) - 1}  aria-label="next page"    gt;  {theme.direction === 'rtl' ? lt;KeyboardArrowLeft /gt; : lt;KeyboardArrowRight /gt;}  lt;/IconButtongt;    lt;/Boxgt;  ); }  function TableHeader({headers, order,orderBy, onRequestSort }) {  const classes = styles();  const createSortHandler = (property) =gt; (event) =gt; {  onRequestSort(event, property);  };  return (  lt;TableHeadgt;  lt;TableRowgt;  {headers.map(header =gt; (  lt;TableCell key={header} align="center" sortDirection={orderBy === header ? order : false}gt;  lt;TableSortLabel active={orderBy === header}  direction={orderBy === header ? order : 'asc'}  onClick={createSortHandler(header)}gt;   {header}  {orderBy === header ? (  lt;span className={classes.visuallyHidden}gt;  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}  lt;/spangt;  ) : null}  lt;/TableSortLabelgt;  lt;/TableCellgt;  ))}  lt;/TableRowgt;  lt;/TableHeadgt;  ); }  function descendingComparator(a, b, orderBy) {  if (b[orderBy] lt; a[orderBy]) {  return -1;  }  if (b[orderBy] gt; a[orderBy]) {  return 1;  }  return 0; }  function getComparator(order, orderBy) {  return order === 'desc'  ? (a, b) =gt; descendingComparator(a, b, orderBy)  : (a, b) =gt; -descendingComparator(a, b, orderBy); }  function stableSort(array, comparator) {  const stabilizedThis = array.map((el, index) =gt; [el, index]);  stabilizedThis.sort((a, b) =gt; {  const order = comparator(a[0], b[0]);  if (order !== 0) return order;  return a[1] - b[1];  });  return stabilizedThis.map((el) =gt; el[0]); }   export default function CustomPaginationActionsTable({data, headers, rowsPerPage}) {  const [page, setPage] = React.useState(0);   const [order, setOrder] = React.useState('asc');  const [orderBy, setOrderBy] = React.useState('numberOfSessions');     const classes = styles();  const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);   const handleChangePage = (event, newPage) =gt; {  setPage(newPage);  };   const handleRequestSort = (event, property) =gt; {   const isAsc = orderBy === property amp;amp; order === 'asc';  setOrder(isAsc ? 'desc' : 'asc');  setOrderBy(property);  };   return (  lt;TableContainer component={Paper} style={{background: 'transparent'}}gt;  lt;Table sx={{ minWidth: 500}} className={classes.table}gt;  lt;TableHeader   headers={headers}   order={order}  orderBy={orderBy}  onRequestSort={handleRequestSort} /gt;  lt;TableBody gt;  {stableSort(data, getComparator(order, orderBy))  .slice(page * rowsPerPage, page * rowsPerPage   rowsPerPage)  .map(patient =gt; {  return (  lt;TableRow gt;  lt;TableCellgt;{patient.name}lt;/TableCellgt;  lt;TableCellgt;{patient.email}lt;/TableCellgt;  lt;TableCellgt;{patient.phoneNumber}lt;/TableCellgt;  lt;TableCellgt;{patient.numberOfSessions}lt;/TableCellgt;  lt;TableCellgt;{patient.joiningDate}lt;/TableCellgt;  lt;/TableRowgt;  );  })}  {emptyRows gt; 0 amp;amp; (  lt;TableRow style={{ height: 33 * emptyRows }}gt;  lt;TableCell colSpan={6} /gt;  lt;/TableRowgt;  )}  lt;/TableBodygt;  lt;TableFootergt;  lt;TableRow className={classes.btn}gt;  lt;TablePagination  rowsPerPageOptions={rowsPerPage}  count={data.length}  rowsPerPage={rowsPerPage }  page={page}  SelectProps={{  inputProps: {  'aria-label': 'rows per page',  },  native: true,  }}  onPageChange={handleChangePage}  ActionsComponent={TablePaginationActions}    /gt;  lt;/TableRowgt;  lt;/TableFootergt;  lt;/Tablegt;  lt;/TableContainergt;  ); }  

the selected header gets sorted after I click on it, but after that, I can’t sort any other header and I can’t sort the selected header in reverse.