Handsontable with materialize design not working properly

Tags: #<Tag:0x00007efc72858098> #<Tag:0x00007efc608efef0>
#1

Specially when I set the “fixedColumnsLeft”, then all the left columns have smaller height than the rest of the columns of the table, generating confusion.

image
image.png881×368 31 KB

My code:
const data = parm;
var conten = document.getElementById(‘gridBodyTableExcel’);
HoT = new Handsontable(conten, {
data,
height: “90vh”,

        colWidths: [40, 80, 390, 50, 80, 80, 80, 190, 250, 50, 50, 50, 50, 50, 50, 50, 50, 50],
        colHeaders: [
          'ID',
          'Codigo',
          'Nombre',
          'Traduccion',
          'Marca',
          'Lote',
          'Cantidad',
          'Estado',
          'Observacion',
          'FechaVencimiento',
          'UOM',
          'Cantidad UOM',
          'Unidad UOM',
          'Unidad per UOM',
          'Peso',
          'Cubico',
          'Valor',
          'Origen',
          'Grupo'
        ],
        columns: [
          { data: 'IdDocumentoDetalle', readOnly: true, type: "numeric" },
          { data: 'Codigo', readOnly: true, type: "text" },
          { data: 'Nombre', readOnly: true, type: "text" },
          { data: 'NombreTraduccion', readOnly: true, type: "text" },
          { data: 'Marca', readOnly: true, type: "text" },
          { data: 'Lote', readOnly: true, type: "text" },
          { data: 'Cantidad', readOnly: true, type: "numeric" },
          {
              data: 'DesMotivoRestriccion',
              type: 'autocomplete',
              source: listaTmpMotivo,
              allowInvalid: false,
              strict: true,
              options: {
                  items: 20 //`options` overrides `defaults` defined in bootstrap typeahead
              }
          },
          { data: 'ObservacionEstado', readOnly: false, type: "text" },
          {
              data: 'FechaVencimiento_string',
              type: "date",
              dateFormat: "DD/MM/YYYY",
              allowInvalid: false
          },
          { data: 'UOM', readOnly: true, type: "text" },
          { data: 'UnitQuantity', readOnly: true, type: "text" },
          { data: 'UnitUOM', readOnly: true, type: "text" },
          { data: 'UnitPerUOM', readOnly: true, type: "text" },
          { data: 'Peso', readOnly: true, type: "text" },
          { data: 'CubeM', readOnly: true, type: "text" },
          { data: 'Valor', readOnly: true, type: "text" },
          { data: 'Origen', readOnly: true, type: "text" },
          { data: 'Grupo', readOnly: true, type: "text" }
        ],
        afterChange: function (change, source) {
            if (source === 'loadData') {
                return; //don't save this change
            }
        },

        dropdownMenu: true,
        contextMenu: true,
        multiColumnSorting: true,
        filters: true,
        //afterGetColHeader: alignHeaders,
        //afterOnCellMouseDown: changeCheckboxCell,
        //beforeRenderer: addClassesToRows,
        outsideClickDeselects: false,
        rowHeaders: true,
        autoRowSize: true,
        manualColumnResize: true,
        renderAllRows: true,
        rowHeaderWidth: 22,
        fixedColumnsLeft: 2,
        colHeaderHeight: 120,
        manualRowMove: true,
        licenseKey: "non-commercial-and-evaluation"
    });
    var col = HoT.countRows();
    HoT.render();
#2

Hi @dante.soto

Can you fill the example with the needed settings to replicate the issue https://jsfiddle.net/5ruw0zxf/? While testing it on Chrome 111/macOS Ventura it works well.

ps. you do not need to call the render() after you initialize the table, and it calls the render() itself.

#3

Or if it depends on the number of elements, we can try this demo https://jsfiddle.net/5ruw0zxf/1/ with the function that generates a defined number of rows.

#4

Hi Aleksandra,
The problem I think happens with the materialize.css (comes from the google’s material design ui)
With Bootstrap 4 or 5, I never faced any problem before. How can I add in your jsfiddle, the materialize css file so I can check if it works properly?

#5

I update demo https://jsfiddle.net/fvyLgcp2/ but it does not seem to change anything (but the resources are imported from the CDN) from https://materializecss.com/getting-started.html. You can try to apply any class that you have or a classed container to see how it behaves.

#6

Ok it seems like the custom css was forcing the height of the fixedColumnsLeft columns. Problem solved, thank you very much! Have a nice day.

#7

I am more than happy to hear that. Thank you for the update.

#8