Mimpi buruk lebar kolom dan fixed header tabel di surat masuk akhirnya dapat diatasi dengan menggunakan javascript, mimpi buruk selama 2 tahun ini.

function resizeColumnView(){
  // WINDOW
  // 20 adalah perkiraan lebar scroll
  var innerWidth  = window.innerWidth - 20
  $("table#data-view-table").css("width", innerWidth + "px")

  // DEFAULT
  var _nomor_agenda_column = 60
  var _tanggal_column = 80
  var _asal_column = 200
  var _status_column = 100

  // the magic is here, buat kolom dinamis
  var _perihal_column = innerWidth - (_nomor_agenda_column + (_tanggal_column * 3) + (_asal_column * 2) + _status_column) - 18

  // CALCULATE
  // 8 adalah jumlah kolom;
  // 50 adalah toleransi (tergantung selera saja, can be UP or DOWN silakan dicoba-coba saja)
  var nomor_agenda_column = ((innerWidth/8-50) < _nomor_agenda_column ? _nomor_agenda_column : _nomor_agenda_column)
  var tanggal_column = ((innerWidth/8-50) < _tanggal_column ? _tanggal_column : _tanggal_column)
  var asal_column = ((innerWidth/8-50) < _asal_column ? _asal_column : _asal_column)
  var perihal_column = ((innerWidth/8-50) < _perihal_column ? _perihal_column : _perihal_column)
  var status_column = ((innerWidth/8-50) < _status_column ? _status_column : _status_column)

  // SET
  $(".nomor_agenda_column").css("width", nomor_agenda_column + "px")
  $(".tanggal_column").css("width", tanggal_column + "px")
  $(".asal_column").css("width", asal_column + "px")
  $(".perihal_column").css("width", perihal_column + "px")
  $(".status_column").css("width", status_column + "px")

  // MISC
  // console.log(innerWidth + "px")
}

#alhamdulillah #suratmasuk #problemsolved