How can I sort columns in table by date while rows content changes?

Question

I have a table/div like the one below, and the data is generated dynamically in real time so the rows keep coming and changing.

The table is floating on my browser, I don't have control over the source website so I cannot use jQuery to modify the table. I can ONLY use JavaScript, (by using the browser extension) to alter the DOM.

<div class="container-QqYJdG">

<div class="wrapper-QqYJdG">
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">MacKenzi</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>1:59:08 PM</span></div>
  </div>
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Sophia</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:10:00 AM</span></div>
  </div>
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Luc</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:40:02 AM</span></div>
  </div>

    <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Daniel</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">status: unknown</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:32:02 AM</span></div>
  </div>

    <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Michael</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">is blocked</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:49:02 AM</span></div>
  </div>

  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Vova</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>3:02:01 PM</span></div>
  </div>
</div>

</div>

I need the JavaScript code that can:

• sort the table by the date and time - newest on top
• highlight rows that have the word: "blocked"
• hide rows that have the word: "unknown" (but make the rows appear when the content is changed to something else)
• keep sorting when 'timeCell' or 'descriptionCell' is updated in any row (or maybe run the sorting every 30 seconds)

I am not familiar with the modern JS code but I think that the date time can be changed to Unix timestamp so it makes the sorting easier.

I tried to use Chrome browser extension called: Javascript Injector and some JavaScript code that uses const, i.e: const tabledoc = document;

But when I click the update button of the extension, it will show me some error that says "Uncaught SyntaxError: Identifier 'tabledoc' has already been declared".

Can you please help me?

Answer 1

const wrapper = document.querySelector('.wrapper-QqYJdG');
const bodyRows = wrapper.querySelectorAll('.bodyRow-3OfxA');

const sortedBodyRowsArray = Array.from(bodyRows).sort((bodyRowA, bodyRowB) => { 
  const timeCellA = bodyRowA.querySelector('.cell-3OfxA.timeCell-3OfxA');
    const dateA = timeCellA.firstChild.innerText;
    const timeA = timeCellA.lastChild.innerText;

  const timeCellB = bodyRowB.querySelector('.cell-3OfxA.timeCell-3OfxA');
    const dateB = timeCellB.firstChild.innerText;
    const timeB = timeCellB.lastChild.innerText;

  return new Date(dateA + ' ' + timeA) - new Date(dateB + ' ' + timeB);
});

wrapper.innerHTML = '';
sortedBodyRowsArray.forEach(bodyRow => {
  wrapper.appendChild(bodyRow);
});

<div class="container-QqYJdG">

<div class="wrapper-QqYJdG">
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">MacKenzi</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>1:59:08 PM</span></div>
  </div>
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Sophia</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:10:00 AM</span></div>
  </div>
  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Luc</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:40:02 AM</span></div>
  </div>

    <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Daniel</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">status: unknown</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:32:02 AM</span></div>
  </div>

    <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Michael</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">is blocked</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>12:49:02 AM</span></div>
  </div>

  <div class="bodyRow-3OfxA">
    <div class="cell-3OfxA symbolCell-3OfxA">
      <div class="Name-3OfxA">Vova</div>
    </div>
    <div class="cell-3OfxA descriptionCell-3OfxA">visited</div>
    <div class="cell-3OfxA timeCell-3OfxA"><span>1/11/2022</span><span>3:02:01 PM</span></div>
  </div>
</div>

</div>

• run another sortedBodyRows.filter to remove bodyRows
• run another sortedBodyRows.map to change styling