How can I implement collapsing rows the way datatables.js does?

One approach is to have data using white-space: nowrap elements inside the table cells and calculate the min width of each row which it will be the max width of the row data elements. These "break-widths" will be calculated only once when the table is filled with data (on load or re-new the data). Having these "break-widths", we can calculate the table minimum width and compare it with the body client width and hide columns accordingly on window resize.

Calculating the "break-widths"

This is performed on loading or each time table updates with new data (i.e. pagination page change). We go through table cell elements TH and TD and we're storing the biggest cell text width of the span elements.

function calcBreakWidths() {
  // Each column one base index
  let thIndex = 1;

  for (let th of document.querySelectorAll('thead th')) {
    // Get the width of every text span of every TH column,
    // this way, we'll have also header break-widths
    let breakWidth = document.querySelector(`thead th:nth-child(${thIndex}) > span`).offsetWidth;

    // Go through all column TD elements and keep the biggest text span width
    for (let span of document.querySelectorAll(`tbody td:nth-child(${thIndex}) > span`)) {
      if (span.offsetWidth > breakWidth) {
        breakWidth = span.offsetWidth;
      }
    }

    // Save the biggest text span break-width to the TH dataset
    th.dataset.breakwidth = breakWidth;

    // Next column index
    thIndex++;
  }
}

Hide / Show columns on window resize

On window.resize we calculate the table minimum widths by summing up all break-widths. Then we go through each column, starting from the most right one, and we check if the table min width including the current column is exceeded the body client width; if it did, then we hide the current column else we show the current column. This is done by using classList.add and classList.remove using the class named hidden with display: none CSS style. At the end of each column iteration, we subtract the current column break-width from the table minimum width so to have the next correct table minimum width without the current column break-width.

window.addEventListener('resize', function() {
  const bodyWidth = document.body.clientWidth;

  // Get all columns break-widths from the TH element dataset
  const breakWidths = [...document.querySelectorAll('th')]
    .map(th => parseInt(th.dataset.breakwidth));

  // Sum-up all column break-widths (+2 pixels) to calculate table minimum width
  let tableMinWidth = breakWidths
    .reduce((total, breakWidth) => total + breakWidth + 2, 0);

  for (let column = breakWidths.length; column > 0; column--) {
    const tableIsLarger = tableMinWidth > bodyWidth;

    // const th = document.querySelector(`th:nth-child(${column})`);
    const cells = document.querySelectorAll(`th:nth-child(${column}), td:nth-child(${column})`);

    // If table min width is larger than body client width,
    // then hide the current column
    if (tableMinWidth > bodyWidth) {
      // We're hidding the column by iterating on each table cell
      // and add the hidden class only if the column does not already contain
      // the hidden class. We're doing this for performance reasons
      if (!cells[0].classList.contains('hidden')) {
        cells.forEach(cell => cell.classList.add('hidden'));
      }
    // Else if the table min width is not larger than body client width,
    // we remove the hidden class from the column to show each column cell
    } else if (cells[0].classList.contains('hidden')) {
      cells.forEach(cell => cell.classList.remove('hidden'));
    }

    // Subtract current column break-width from the total table min width
    // so to have the correct min table width for the next column
    tableMinWidth -= breakWidths[column - 1] + 2;
  }
});

The snippet shows this in action

^{Please read inline comments}

// Each TH class is a field name
const fields = [...document.querySelectorAll('thead th')].map(el => el.className);

// Generate 20 rows with fake data
for (let i = 0; i <= 20; i++) {
  const tr = document.createElement('tr');

  fields.forEach(field => {
    const td = document.createElement('td');
    const text = document.createElement('span');
    td.className = field;
    text.textContent = fake(field);
    td.appendChild(text);
    tr.appendChild(td);
  });

  document.querySelector('table tbody').appendChild(tr);
}

// Calculate each column break width, the max data span element width
function calcBreakWidths() {
  let thIndex = 1;

  for (let th of document.querySelectorAll('thead th')) {
    let breakWidth = document.querySelector(`thead th:nth-child(${thIndex}) > span`).offsetWidth;
    for (let span of document.querySelectorAll(`tbody td:nth-child(${thIndex}) > span`)) {
      if (span.offsetWidth > breakWidth) {
        breakWidth = span.offsetWidth;
      }
    }

    th.dataset.breakwidth = breakWidth;
    thIndex++;
  }
}

calcBreakWidths();

// Handle window resize and hide each column exceeds BODY client width 
window.addEventListener('resize', function() {
  const bodyWidth = document.body.clientWidth;

  // Get the break widths saved to the TH datasets
  const breakWidths = [...document.querySelectorAll('th')]
    .map(th => parseInt(th.dataset.breakwidth));

  // Calculate table min width (+2 pixels for border + padding for each cell)
  let tableMinWidth = breakWidths
    .reduce((total, breakWidth) => total + breakWidth + 2, 0);

  // Loop from last to the first column and compare the widths
  for (let column = breakWidths.length; column > 0; column--) {
    const cells = document.querySelectorAll(`th:nth-child(${column}), td:nth-child(${column})`);

    if (tableMinWidth > bodyWidth) {
      if (!cells[0].classList.contains('hidden')) {
        cells.forEach(cell => cell.classList.add('hidden'));
      }
    } else if (cells[0].classList.contains('hidden')) {
      cells.forEach(cell => cell.classList.remove('hidden'));
    }

    tableMinWidth -= breakWidths[column - 1] + 2;
  }
});

// Function to create fake data
function fake(what) {
  switch (what) {
    case 'name': return faker.name.findName();
    case 'email': return faker.internet.exampleEmail();
    case 'address': return faker.address.streetAddress();
    case 'country': return faker.address.country();
    case 'account': return faker.finance.accountName();
  }
}

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid black;
}

tbody td > span,
thead th > span {
  white-space: nowrap;
  background-color: gold;
}

thead th > span {
  background-color: aquamarine;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/locales/en/faker.en.min.js" crossorigin="anonymous"></script>

<table>
  <thead>
    <tr>
      <th class="name"><span>Name<span></th>
      <th class="email"><span>Email</span></th>
      <th class="account"><span>Personal or Business Account</span></th>
      <th class="address"><span>Personal or Business Address</span></th>
      <th class="country"><span>Country</span></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

You can run the above code snippet and try to resize the window, but you'll have a better view of the table responsive behavior if you try to resize the browser after opening the snippet in Full page or by navigating to the full example page here: https://zikro.gr/dbg/so/62491859/responsive-table.html

It's not perfect but it runs smoothly on my browser and it hides columns from right to left based on columns data text width.