React.js Table Sorting with Dynamic Data

Question

There are two different API Service Endpoints of some dynamic data like below.

// from API Service A, All value are realtime changing
{
 stack : 10
 over : 2
 flow : 4
}

// from API Service B, All value are realtime changing
{
 stack : 4
 over : 1
 flow : 2
}

key from two different API services are the same, but the value is different by real-time changes.

so I want to notate these differences with the table.

I coded to display this data table with react.js like below.

import { useState, useEffect } from 'react';
function App(){
 const [commonKey, setCommonKey] = useState([stack, over, flow]);
 const [dataA, setDataA] = useState({});
 const [dataB, setDataB] = useState({});

 useEffect(()=> {
  // ...periodically fetch data from API Service A and setDataA(response)
  // ...periodically fetch data from API Service B and setDataB(response)
 } ,[]);

 return (
 <>
  <table>
   <thead>
    <th>key</th>
    <th>valueA</th>
    <th>valueB</th>
    <th>A-B</th> // sorting function needed by this field value(A minus B).
   </thead>
   <tbody>
    commonKey.map((keyField)=>{
     <Mytr key={keyField} keyField={keyField} dataA={dataA[keyField]} dataB={dataB[keyField]} />
    });
   </tbody>
  </table>
 </>
)}

function Mytr({keyField, dataA, dataB}){
 return (
 <>
  <tr>
   <td>{keyField}</td>
   <td>{dataA}</td>
   <td>{dataB}</td>
   <td>{dataA - dataB}</td> // sorting function needed by this field value.
  </tr>
 </>
)}

export default App;

How can I add sort by A-B value function in this situation?

p.s Sorry for my Poor English.

Amila Senadheera · Accepted Answer · 2022-01-31T08:40:41.607

1

You can sort the commonKeys in the useEffect hook like below.

  useEffect(() => {
    // ...periodically fetch data from API Service A and setDataA(response)
    // ...periodically fetch data from API Service B and setDataB(response)

    // get a copy of the commonKey array
    const newArr = [...commonKey];
    // sort the keys using differece of two consecutive diffs
    newArr.sort((p, q) => dataA[p] - dataB[p] - (dataA[q] - dataB[q]));
    // set the sorted array to state
    setCommonKey(newArr);
  }, []);

To avoid the scrolling issue, keep the scrollY position saved and scroll to that position once commonKey is updated within a useLayoutEffect.

 useEffect(() => {
    const updatePosition = () => {
      setCurrentScrollY(window.scrollY);
    };
    window.addEventListener("scroll", updatePosition);
    updatePosition();
    return () => window.removeEventListener("scroll", updatePosition);
  }, []);

  useLayoutEffect(() => {
    window.scrollTo(0, currentScrollY);
  }, [commonKey]);

edited Jan 31 '22 at 08:40

answered Jan 30 '22 at 08:21

Amila Senadheera

12,229
15
27
43

1

@reaver lover, Let me know if you still have issues – Amila Senadheera Jan 30 '22 at 08:22
Thx, Sorting is work well though, scrolling to top window on every re-rendering after sorting – reaver lover Jan 30 '22 at 11:24
1

can you update the sandbox to recreate the scrolling issue? – Amila Senadheera Jan 30 '22 at 16:10
1

https://codesandbox.io/s/goofy-sea-08w9k auto Scrolling to Top on every sorting occur. btw, Sorry for dirty codes. – reaver lover Jan 31 '22 at 07:50
@reaverlover, updated the answer and code sandbox ! can you please mark this as the answer once you check it? – Amila Senadheera Jan 31 '22 at 08:42
thx a lot, but why scrolling issue is happened? seems caused by re-rendering – reaver lover Jan 31 '22 at 09:21
1

yeah due to rerendering. when useEffect changes the list, which trigger the rerender and useLayoutEffect runs after DOM mutations for the list and before list is painted to the DOM and preserves the scroll position. – Amila Senadheera Jan 31 '22 at 11:10

React.js Table Sorting with Dynamic Data

1 Answers1

Linked