Custom Table Plugin

#1. Sticky first 5 columns

<style>
    .custom-filter-container .custom-table-block {
      position: relative;
      --tbl-border: rgba(203, 203, 203, 1);
      --header-bg: rgba(48, 61, 77, 1);
      --header-color: rgba(250, 249, 249, 1);
      --body-bg: rgba(255, 255, 255, 1);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }

      .custom-filter-container .custom-table-block th.is-sticky-col,
      .custom-filter-container .custom-table-block td.is-sticky-col {
        position: sticky;
        left: var(--sticky-left, 0px);
        z-index: 2;
        background-clip: border-box !important;
        border-bottom: 1px solid var(--tbl-border) !important;
        border-right: none !important;
      }

      .custom-filter-container .custom-table-block thead th.is-sticky-col {
        background-color: var(--header-bg) !important;
        color: var(--header-color) !important;
        z-index: 8;
      }

      .custom-filter-container .custom-table-block tbody td.is-sticky-col {
        background-color: var(--body-bg) !important;
        z-index: 3;
      }

      .custom-filter-container .custom-table-block tr > th.is-sticky-col:nth-child(n + 2),
      .custom-filter-container .custom-table-block tr > td.is-sticky-col:nth-child(n + 2) {
        box-shadow: inset 1px 0 0 var(--tbl-border);
      }

      .custom-filter-container .custom-table-block tr > th.is-sticky-col:nth-child(5),
      .custom-filter-container .custom-table-block tr > td.is-sticky-col:nth-child(5) {
        box-shadow: inset 1px 0 0 var(--tbl-border), inset -1px 0 0 var(--tbl-border);
      }

      .custom-filter-container .custom-table-block th.is-sticky-col.sticky-edge,
      .custom-filter-container .custom-table-block td.is-sticky-col.sticky-edge {
        box-shadow: inset 1px 0 0 var(--tbl-border), inset -1px 0 0 var(--tbl-border), 8px 0 12px rgba(0, 0, 0, 0.08);
      }
</style>

<script>
  (function(){
    var ROOT_SELECTOR=".custom-filter-container";
    var TABLE_SELECTOR="table.custom-table-block";
    var STICKY_COLS=5;

    function applyToTable(table){
      var headRow=table.querySelector("thead tr");
      var baseCells=headRow?Array.from(headRow.children):[];
      if(baseCells.length<STICKY_COLS){
        var bodyRow=table.querySelector("tbody tr");
        if(bodyRow) baseCells=Array.from(bodyRow.children);
      }
      if(baseCells.length<STICKY_COLS) return;

      var lefts=[];
      var acc=0;
      for(var i=0;i<STICKY_COLS;i++){
        var w=baseCells[i].getBoundingClientRect().width;
        w=Math.ceil(w);
        lefts[i]=Math.round(acc-i);
        acc+=w;
      }

      table.querySelectorAll("tr").forEach(function(row){
        var cells=Array.from(row.children);
        for(var i=0;i<Math.min(STICKY_COLS,cells.length);i++){
          var cell=cells[i];
          cell.classList.add("is-sticky-col");
          cell.style.setProperty("--sticky-left",lefts[i]+"px");
          cell.style.zIndex=(30-i);
          if(i===STICKY_COLS-1) cell.classList.add("sticky-edge");
          else cell.classList.remove("sticky-edge");
        }
      });
    }

    function applyAll(){
      document.querySelectorAll(ROOT_SELECTOR+" "+TABLE_SELECTOR).forEach(applyToTable);
    }

    var t;
    function rerun(){
      clearTimeout(t);
      t=setTimeout(applyAll,60);
    }

    if(document.readyState==="loading"){
      document.addEventListener("DOMContentLoaded",applyAll);
    }else{
      applyAll();
    }

    window.addEventListener("resize",rerun);
    window.addEventListener("orientationchange",rerun);

    var mo=new MutationObserver(rerun);
    mo.observe(document.documentElement,{childList:true,subtree:true});
  })();
</script>