*_Expected behavior_*The table render doesn't take about 8 second, if it has 16 columns and 117 rows

*_Actual behavior_*I tried to analyze the problem and I could realize the source of the problem. The slow down is in the _formatCells() function.The actual code try to identify the the column property with this method:const column = this.columns.find((column) => column.field === field);This method iteration time is grow up with the number of columns and this line takes on every cell.I think about you can speed up this part of code if you use Map.You don't need to touch anything if you make a temporary Map with this code when start the _formatCells() function

const columns_map = new Map(
             this.columns.map(obj => {
               return [obj.field, obj];
             }),
             );

and you can access of the column object much faster with this call

const column = this.columns_map.get(field);

I can not test this code changes, but I think this can help a lot if the table has many columns!

Resources (screenshots, code snippets etc.)

  _formatCells() {
    const columns_map = new Map(
            this.columns.map(obj => {
              return [obj.field, obj];
            }),
            );
    const rows = SelectorEngine.find(SELECTOR_ROW, this._element);

    rows.forEach((row) => {
      const index = Manipulator.getDataAttribute(row, 'index');

      const cells = SelectorEngine.find(SELECTOR_CELL, row);

      cells.forEach((cell) => {
        const field = Manipulator.getDataAttribute(cell, 'field');

        const column = this.columns_map.get(field);

        if (column && column.format !== null) {
          column.format(cell, this.rows[index][field]);
        }
      });
    });
  }

UPDATE 2023-08-11 9am I made some test, and the Array.find is not the key problem. The Map.get is 3-7 times faster but on my test is takes only 15 ms vs 86 ms.

The slow down came from the cell formatter.

{label: "Exchange Rate", field: 'exchange_rate', sort: false, format: format_number_cell}


function format_number_cell(cell, value) {
  cell.style.textAlign = "right";
}

If I remove this simple formatter the table is speed up!How can I use better this format feature?

UPDATE 2023-08-11 10:30am I still working on it and implement a post formatting code and the result is brilliant

var format_number_cell_list = [10, 15, 16, 17];
var format_price_cell_list = [12, 13];
invoca_table_el.addEventListener('render.mdb.datatable', () => {
  let startTime = performance.now();
  format_number_cell_list.forEach((child) => {
    invoca_table_el.querySelectorAll('.datatable-body tr :nth-child(' + child + ')').forEach((td) => {
      format_number_cell(td);
    });
  });
  format_price_cell_list.forEach((child) => {
    invoca_table_el.querySelectorAll('.datatable-body tr :nth-child(' + child + ')').forEach((td) => {
      format_price_cell(td,td.innerHTML);
    });
  });

  let endTime = performance.now();
  console.log("Post Format Elapsed Time: " + (endTime - startTime));
});

If I add the same functions to the datatable columns format, the rendering time is 4 sec, but in this post processing is only 13ms!

The question is still the same, why soo slow the built in formatting?