Cannot read property 'className' of undefined in TableBody.js

[mxmlnglt]

Upgrading our code to using MUIDatatables to the latest 3.1.3 we encountered the following error:

TypeError: Cannot read property 'className' of undefined
(anonymous function)
C:/dev/src/git/src/components/TableBody.js:259
  256 | rowSelected={isRowSelected}
  257 | isRowSelectable={isRowSelectable}
  258 | onClick={this.handleRowClick.bind(null, row, { rowIndex, dataIndex })}
> 259 | className={classNames({
      | ^  260 |   [classes.lastStackedCell]:
  261 |     options.responsive === 'vertical' ||
  262 |     options.responsive === 'stacked' ||

We have such method on the table's options (row[10] is a boolean value - always set):

      setRowProps: row => {
        if (!row[10]) {
          return {
            style: { background: "#CECECE" }
          };
        }
      }

Prior to our upgrade to v3 it worked.

Now it seems that it fails to work with the way it is initialized in TableBody.js:

            let bodyClasses = options.setRowProps ? options.setRowProps(row, dataIndex, rowIndex) : {};

(...)
                  className={classNames({
                    [classes.lastStackedCell]:
                      options.responsive === 'vertical' ||
                      options.responsive === 'stacked' ||
                      options.responsive === 'stackedFullWidth',
                    [classes.lastSimpleCell]: options.responsive === 'simple',
                    [bodyClasses.className]: bodyClasses.className,
                  })}

If options.setRowProps(row, dataIndex, rowIndex) return nothing, the line:

                   [bodyClasses.className]: bodyClasses.className,

will cause the error.

I think what says https://github.com/gregnb/mui-datatables#options is not explicit enough:

setRowProps

Is called for each row and allows you to return custom props for this row based on its data. function(row: array, dataIndex: number, rowIndex: number) => object Example

We fixed this bug by writing:

      setRowProps: row => {
        return row[10] ? {} : {
          style: { background: "#CECECE" }
        };
      }

[patorjk]

Thank you for the report. It looks like "undefined" was getting returned and the code was breaking when it tried to read a value from a variable of type "undefined". setRowProps should be setup to be a little sturdier.

I'll see about getting a fix into the next release.

[patorjk]

Resolved in 3.1.4