Column width based on row data

[vwochnik]

Is it possible to set the column width in such a way that all rows are completely visible? Right now it chooses width automatically based only on header column width.

[adityatoshniwal]

I use this 2 functions to get the width based on data. You can tweak as per your need.

function formatColumns(columns, rows, totalRowCount, dataChangeStore, rowKeyGetter, classes) {
  let retColumns = [
    ...columns,
  ];
  const canvas = document.createElement('canvas');
  const canvasContext = canvas.getContext('2d');
  canvasContext.font = '12px Roboto';
  const cellClassGetter = (col)=>(row)=>{
    if(dataChangeStore && rowKeyGetter) {
      let cellClasses = [];
      if(rowKeyGetter(row) in (dataChangeStore?.updated || {})
        && !_.isUndefined(dataChangeStore?.updated[rowKeyGetter(row)]?.data[col.key])
        || rowKeyGetter(row) in (dataChangeStore?.added || {})
      ) {
        cellClasses.push(classes.editedCell);
      }
      if(rowKeyGetter(row) in (dataChangeStore?.deleted || {})) {
        cellClasses.push(classes.deletedRow);
      }
      return clsx(cellClasses);
    }
  };
  for (let i = 0; i < retColumns.length; i++) {
    let col = retColumns[i];
    col.width = getTextWidth(col, rows, canvasContext);
    col.headerRenderer = HeaderRenderer;
    col.resizable = true;
    col.editorOptions = {
      commitOnOutsideClick: false,
      onCellKeyDown: (e)=>{
        /* Do not open the editor */
        e.preventDefault();
      }
    };
    col.cellClass = cellClassGetter(col);
    // If grid is editable then add editor else make it readonly
    if (col.cell == 'oid' && col.name == 'oid') {
      col.editor = null;
      col.formatter = Formatters.TextFormatter;
    } else if (col.cell == 'Json') {
      col.editor = Editors.JsonTextEditor;
      col.formatter = Formatters.TextFormatter;
    } else if (['number', 'oid'].indexOf(col.cell) != -1 || ['xid', 'real'].indexOf(col.type) != -1) {
      col.formatter = Formatters.NumberFormatter;
      col.editor = Editors.NumberEditor;
    } else if (col.cell == 'boolean') {
      col.editor = Editors.CheckboxEditor;
      col.formatter = Formatters.TextFormatter;
    } else if (col.cell == 'binary') {
      // We do not support editing binary data in SQL editor and data grid.
      col.editor = null;
      col.formatter = Formatters.BinaryFormatter;
    } else {
      col.editor = Editors.TextEditor;
      col.formatter = Formatters.TextFormatter;
    }
  }

  let rowNumCol = {
    key: ROWNUM_KEY, name: '', frozen: true, resizable: false,
    width: canvasContext.measureText(totalRowCount.toString()).width,
    minWidth: 45,
    formatter: ({row})=>{
      let rowKey = rowKeyGetter(row);
      let rownum = (rows.findIndex((r)=>rowKeyGetter(r)==rowKey)||0)+1;
      if(rowKey in (dataChangeStore?.added || {})) {
        rownum = rownum+'+';
      } else if(rowKey in (dataChangeStore?.deleted || {})){
        rownum = rownum+'-';
      }
      return rownum;
    }
  };
  rowNumCol.cellClass = cellClassGetter(rowNumCol);
  retColumns.unshift(rowNumCol);
  canvas.remove();
  return retColumns;
}

function getTextWidth(column, rows, canvas) {
  const reducer = (longest, nextRow) => {
    let value = nextRow[column.key];
    if(_.isNull(value) || _.isUndefined(value)) {
      value = '';
    }
    value = value.toString();
    return longest.length > value.length ? longest : value;
  };

  let columnHeaderLen = column.display_name.length > column.display_type.length ?
    canvas.measureText(column.display_name).width : canvas.measureText(column.display_type).width;
  /* padding 12, icon-width 15 */
  columnHeaderLen += 15 + 12;
  if(column.column_type_internal == 'geometry' || column.column_type_internal == 'geography') {
    columnHeaderLen += 25
  }
  /* padding 16 */
  let maxWidth = 16 + Math.ceil(canvas.measureText(rows.reduce(reducer, '')).width);
  if(maxWidth < columnHeaderLen) {
    maxWidth = columnHeaderLen;
  }
  /* Gracefull */
  maxWidth += 2;
  return maxWidth;
}