Блог

добрый день! В настоящее время использую таблицу Material-ui, и у меня возникли проблемы с сортировкой. Я следил за тем, что написано в документации, но сортировка не работает на моей стороне.

Вот мой код:

 import TablePagination from '@material-ui/core/TablePagination';
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 TableHead from '@material-ui/core/TableHead';
import TableFooter from '@material-ui/core/TableFooter'
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import TableSortLabel from '@material-ui/core/TableSortLabel';

function descendingComparator(a,b, orderBy) {
  console.log('a',a)
  console.log('b',b)
  console.log('orderBy',orderBy)
  if(b[orderBy] < a[orderBy]){
    console.log('-1')
    return -1;
  }
  if(b[orderBy] > a[orderBy]){
    console.log('1')
    return 1;
  }
  console.log('0')
  return 0;
}

function getComparator(order, orderBy){
  return order === "desc"
    ? (a,b) => descendingComparator(a,b, orderBy)
    : (a,b) => -descendingComparator(a,b, orderBy)
}

const sortedRowInformation = (rowArray, comparator) => {
  const stabilizedRowArray = rowArray.map((el, index) => [el, index])
  stabilizedRowArray.sort((a,b) =>{
    const order = comparator(a[0], b[0])
    if(order !==0) return order;
    return a[1] - b[1];
})
return stabilizedRowArray.map((el) => el[0])
}

function Test(){
  const [dummyDatas, setdummyDatas] = useState([])
  const getInformation= async () => {
    await axios.get('/API')
        .then(response => {
            setdummyDatas(response.dummyDatas)
        })
  }
}

useEffect(()=>{
  getInformation()
})

const [page, setPage] = useState(0)
const [rowsPerPage, setRowsPerPage] = useState(5)
const [pageIndex, setPageIndex] = useState(0)
const [order, setOrder] = useState()
const [orderBy, setorderBy] = useState()
const [orderDirection, setorderDirection] = useState("asc")
const [valueToOrderBy, setvalueToOrderBy] = useState("details")

return(
 <div>
   <TableContainer component={Paper}>
     <Table className={classes.table} aria-label="information table">
       <TableHead>
         <TableRow>
           <TableCell align = "left" key = "details">
             <TableSortLabel
                active={valueToOrderBy === "details"}
                direction={valueToOrderBy === "details" ? orderDirection: 'asc'}
                onClick={createSortHandle("details")}
             >
                Details
             </TableSortLabel>
           </TableCell>
           <TableCell align = "left" key = "status">
             <TableSortLabel
               active={valueToOrderBy === "status"}
               direction={valueToOrderBy === "status" ? orderDirection: 'asc'}
               onClick={createSortHandle("status")}
             >
               Status
             </TableSortLabel>
           </TableCell>
           <TableCell align = "left" key = "system">
             <TableSortLabel
               active={valueToOrderBy === "system"}
               direction={valueToOrderBy === "system" ? orderDirection: 'asc'}
               onClick={createSortHandle("system")}
             >
               System
             </TableSortLabel>
           </TableCell>
         </TableRow>
       </TableHead>
       <TableBody>
         {
           sortedRowInformation(dummyDatas, getComparator(orderDirection, valueToOrderBy))
           .map((row, index1) => (
                        <TableRow key={index1}>
                            <TableCell>
                                        {row.ADVISORYTITLE}
                            </TableCell>
                            <TableCell>
                                        {row.STATUS}
                            </TableCell>
                            <TableCell>
                                        {row.SYSTEMID}
                            </TableCell>
                        </TableRow>
                    ))}
       </TableBody>
     </Table>
   </TableContainer>
 </div>
)
 

При нажатии на стрелку сортировки в столбце статус ничего не происходит. Вот как я console.log выгляжу.

Надеялся, что ты сможешь мне в этом помочь. Заранее большое вам спасибо.

Сделайте так, чтобы ваши значения совпадали с вашими столбцами данных. (Например. РЕКОМЕНДАТЕЛЬНЫЙ ЗАГОЛОВОК)