make column sticky

.js

export const freezeColumns = (table, options = {}) => {
  options = { index: 5, offset: -0, ignoreClasses: ['groupingTableAmount', 'activebg'], ...options };

  const stickyIndex = options.index;
  const rows = table?.querySelectorAll?.('tr');
  const testRow = table?.querySelectorAll?.('tbody tr')?.[0] ?? rows?.[0];
  const cellSlice = Array.prototype.slice.call(testRow.children, 0, stickyIndex);

  const widthList = Array.prototype.map.call(cellSlice, (cell) => cell?.getBoundingClientRect()?.width);
  const leftOffsetList = widthList.map((_, index) => {
    let output = options.offset;
    for (let i = 0; i < index; i++) output = output + widthList[i];
    return output;
  });

  table.style['border-collapse'] = 'separate';
  table.style['border-spacing'] = 0;

  Array.prototype.forEach.call(rows, (row) => {
    const cellList = Array.prototype.slice.call(row.children, 0, stickyIndex);

    Array.prototype.forEach.call(cellList, (cell, index) => {
      if (cell.classList.contains(...options.ignoreClasses)) return;

      cell['data-sticky'] = true;
      cell['data-sticky-first'] = index === 0;
      cell['data-sticky-last'] = index === cellList?.length - 1;
      cell['data-orig-z-index'] = castToNumber(cell['data-orig-z-index'] ?? cell.style['z-index']);

      cell.style['position'] = 'sticky';
      cell.style['left'] = `${leftOffsetList[index] - 1}px`;
      cell.style['background'] = cell.tagName === 'TD' ? '#fff' : '';
      cell.style['z-index'] = cell.tagName === 'TD' ? cell['data-orig-z-index'] + 1 : cell['data-orig-z-index'] + 101;
    });
  });
};