Topic: Datatable errors when first cell is empty

ochakov priority asked 2 months ago


Expected behavior
Datatable will display with the first cell containing the defined default value.

Actual behavior
Datatable fails with the error:

mdb-vue-ui-kit.js?v=a5f41e7b:29471 Uncaught (in promise) TypeError: row.forEach is not a function
    at mdb-vue-ui-kit.js?v=a5f41e7b:29471:15
    at Array.forEach (<anonymous>)
    at getGeneratedRows (mdb-vue-ui-kit.js?v=a5f41e7b:29469:17)
    at getDataFromProps (mdb-vue-ui-kit.js?v=a5f41e7b:29577:16)
    at mdb-vue-ui-kit.js?v=a5f41e7b:29396:9

Resources (screenshots, code snippets etc.)
The error happens in the lines:

const getGeneratedRows = (columns) => {
      let rows = [];
      const datasetRows = props.dataset.rows;
      const index2 = columns[0].field;
      const firstCell = datasetRows[0][index2];
      if (firstCell || firstCell === 0) { // condition fails when firstCell is an empty string, false, null or undefined
        rows = datasetRows.map((row, key) => ({
          ...row,
          mdbIndex: key,
          selected: false
        }));
      } else {
        const rowsArr = datasetRows.map((tr) => tr);
        rowsArr.forEach((row, key) => {
          rows.push({});
          row.forEach((td, tdKey) => { // <-- ERROR!
   ...

This happens due to checking whether the row is an array by the first cell, and can be fixed by instead using the baseline JS function Array.isArray:

const getGeneratedRows = (columns) => {
      let rows = [];
      const datasetRows = props.dataset.rows;
      const index2 = columns[0].field;
      if (!Array.isArray(datasetRows[0])) {
        rows = datasetRows.map((row, key) => ({
        // ...
      } else {
        const rowsArr = datasetRows.map((tr) => tr);
        rowsArr.forEach((row, key) => {
          rows.push({});
          row.forEach((td, tdKey) => { // row is definitely an array
   ...

Bartosz Cylwik staff answered 2 months ago


Hi! Just to be sure, the issue you have experienced occurs when using datatable with "advanced" data structure (object with columns and rows) right? For example

const dataset = {
    ... ,
    rows: [
        {
            id: null,
            ...
        },
        ...
    ]
}

We are going to take a look at this, thanks for letting us know! Unfortunately, I think the only workaround here is to provide something like this "-" when the data in a cell is empty.

Best Regards!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 5.0.0
  • Device: PC
  • Browser: Chrome. Firefox
  • OS: Windows 11
  • Provided sample code: Yes
  • Provided link: No