static/js/datable.js
/**
 * Initiate data table based on data.
 * @function buildDataTable
 * @param {Object} mo - main object
 */
Initiate data table based on data.
@function buildDataTable
@param {Object} mo - main object
Initiate data table based on data . @function buildDataTable @param { Object } mo - main object
function buildDataTable(mo) {
  const cols = mo.cols;
  const names = cols.names,
        types = cols.types;
  const table = byId('data-table');
  table.setAttribute('data-sort', '');   
  table.setAttribute('data-order', '');  
  table.setAttribute('data-arrow', '');  
  table.innerHTML = '';
   head
  const thead = table.createTHead();
  const row = thead.insertRow(-1);
  const n = names.length;
  let cell, name, type, btn;
  let w = 0;
  for (let i = 0; i < n; i++) {
    name = names[i];
    type = types[i];
    if (type.endsWith('wt')) continue; 
    cell = document.createElement('th');
    cell.setAttribute('data-idx', i);      
    cell.setAttribute('data-name', names); 
    cell.setAttribute('data-type', types); 
    cell.style.backgroundColor = mo.theme.typecolors[type];
    cell.title = `Field: ${name}\nType: ${FIELD_NAMES[type]}`;
    if (type === 'num') cell.classList.add('sortable');
    cell.innerHTML = names[i];
    cell.addEventListener('click', function () {
      sortByColumn(this, mo);
    });
    if (i) {
      btn = document.createElement('button');
      btn.innerHTML = '&#x2715;'; 
      btn.title = 'Delete field';
      btn.addEventListener('click', function (e) {
        e.stopPropagation();
        deleteColumn(this.parentElement, mo);
      });
      cell.appendChild(btn);
    }
    row.appendChild(cell);
    cell.style.width = FIELD_WIDTHS[type] + 'px';
    w += FIELD_WIDTHS[type];
  }
  table.style.width = w + 'px';
  table.appendChild(document.createElement('tbody'));
}
function buildDataTable ( mo ) { const cols = mo . cols ; const names = cols . names , types = cols . types ; const table = byId ( 'data-table' ) ; table . setAttribute ( 'data-sort' , '' ) ; table . setAttribute ( 'data-order' , '' ) ; table . setAttribute ( 'data-arrow' , '' ) ; table . innerHTML = '' ; const thead = table . createTHead ( ) ; const row = thead . insertRow ( - 1 ) ; const n = names . length ; let cell , name , type , btn ; let w = 0 ; for ( let i = 0 ; i < n ; i ++ ) { name = names [ i ] ; type = types [ i ] ; if ( type . endsWith ( 'wt' ) ) continue ; cell = document . createElement ( 'th' ) ; cell . setAttribute ( 'data-idx' , i ) ; cell . setAttribute ( 'data-name' , names ) ; cell . setAttribute ( 'data-type' , types ) ; cell . style . backgroundColor = mo . theme . typecolors [ type ] ; cell . title = ` ${ name } \n ${ FIELD_NAMES [ type ] } ` ; if ( type === 'num' ) cell . classList . add ( 'sortable' ) ; cell . innerHTML = names [ i ] ; cell . addEventListener ( 'click' , function ( ) { sortByColumn ( this , mo ) ; } ) ; if ( i ) { btn = document . createElement ( 'button' ) ; btn . innerHTML = '&#x2715;' ; btn . title = 'Delete field' ; btn . addEventListener ( 'click' , function ( e ) { e . stopPropagation ( ) ; deleteColumn ( this . parentElement , mo ) ; } ) ; cell . appendChild ( btn ) ; } row . appendChild ( cell ) ; cell . style . width = FIELD_WIDTHS [ type ] + 'px' ; w += FIELD_WIDTHS [ type ] ; } table . style . width = w + 'px' ; table . appendChild ( document . createElement ( 'tbody' ) ) ; }
Initiate data table based on data.
Initiate data table based on data .
// table // sort by which column // ascending (0) or descending (1) // index of sorted head (not column) // table head // create individual head cells // skip weight // column index // column name // column type // click head to sort a column // delete field // cross mark // e.preventDefault(); // one has to set both header cell widths and table width in order to get // them to work