how to sort table when the data have two parts Reactjs

Question

this is my code i am getting the data from the server now how will i sort the table according to total,remaining,passed

function Dataset() {

    const [data,setData] = useState([]);
    const [toggleChoice,setToggleChoice] = useState(0);
    


    const classes = useStyles();
    return (
  
        <div className="dataset__container">
          <div className="dataset__header">
              <span className="dataset__title">Tabular hit/miss Data</span>
            <div className="toggleSwitch">
              <label for="hit" onClick={(e) => setToggleChoice(0)}>
                <input
                  type="radio"
                  checked={toggleChoice === 0}
                  name="dataset"
                  id="hit"
                />
                <div className="actualRadio" id="leftSwitch">
                  hit
                </div>
              </label>
              <label for="miss" onClick={(e) => setToggleChoice(1)}>
                <input
                  type="radio"
                  checked={toggleChoice === 1}
                  name="dataset"
                  id="miss"
                />
                <div className="actualRadio" id="rightSwitch">
                  miss
                </div>
              </label>
            </div>
          </div>
          <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
              <TableHead>
                <TableRow style={{ background: "#34386b" }}>
                  <TableCell className="dataset__cell">ID</TableCell>
                  <TableCell className="dataset__cell" align="right">
                     Name
                  </TableCell>
                  <TableCell className="dataset__cell" align="right">
                    Type
                  </TableCell>
                  <TableCell className="dataset__cell" align="right">
                    Total
                  </TableCell>
                  <TableCell className="dataset__cell" align="right">
                    Remaining
                  </TableCell>
                  <TableCell className="dataset__cell" align="right">
                    Passed
                  </TableCell>
                  <TableCell className="dataset__cell" align="right">
                    Failed
                  </TableCell>
                  <TableCell className="dataset__cell" align="right">
                    Last Activity
                  </TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {data.map((row, index) => {
                  const main =
                    toggleChoice === 0 ? row.hit_data : row.missdata;

                  return (
                    <TableRow key={row.name}>
                      <TableCell
                        style={{ fontWeight: 600 }}
                        component="th"
                        scope="row">
                        {index + 1}
            
    );
}

can anyone would help me to add a button on passed head or remaining head such that after clicking all the data will be in increasing order or decreasing order and search bar all so that searching by name i will get filtered result

Answer 1

const [sortBy,setSortBy] = useState('total'); //or remaining or passed
const [sortOrder,setSortOrder] = useState('asc');
const [data,setData] = useState([]);
const [toggleChoice,setToggleChoice] = useState(0);

const processedDataByChoice = useMemo(() => {
  return data.map((row, index) => {
    row.main = toggleChoice === 0 ? row.hit_data : row.missdata;
    return row;
  }
}, [data, toggleChoice])

const finalData = useMemo(() => {
  // sort 'processedDataByChoice' based on 'sortBy' and 'sortOrder'
  // return sorted value
  if (sortBy === 'total' && sortOrder === 'asc') {
    return processedDataByChoice.sort((rowA, rowB) => (rowA.main.total - rowB.main.total))
  } else if (sortBy === 'total' && sortOrder === 'desc') {
    return processedDataByChoice.sort((rowA, rowB) => (rowB.main.total - rowA.main.total))
  } else if (sortBy === 'remaining' && sortOrder === 'asc') {
    return processedDataByChoice.sort((rowA, rowB) => (rowA.main.remaining - rowB.main.remaining))
  } else if (sortBy === 'remaining' && sortOrder === 'desc') {
    return processedDataByChoice.sort((rowA, rowB) => (rowB.main.remaining - rowA.main.remaining))
  } 
  // add more conds
}, [sortBy, sortOrder, processedDataByChoice])


...

              <TableBody>
                {finalData.map((row, index) => {
                  const main = row.main
                  return (
                    <TableRow key={row.name}>
                      <TableCell
                        style={{ fontWeight: 600 }}
                        component="th"
                        scope="row">
                        {index + 1}
                      </TableCell>
                      <TableCell align="right">{row.name}</TableCell>
                      <TableCell align="right">{row.type}</TableCell>
                      <TableCell align="right">{main.total}</TableCell>
                      <TableCell align="right">{main.remaining}</TableCell>
                      <TableCell style={{ color: "green" }} align="right">
                        {main.passed}
                      </TableCell>
                      <TableCell style={{ color: "red" }} align="right">
                        {main.failed}
                      </TableCell>
                      <TableCell align="right">{main.last}</TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>

...