DataTable fails to render if columns are mapped and has a static column

[kovyfive]

I'm submitting a ... (check one with "x")

[x] bug report

Codesandbox Case (Bug Reports)

The sandbox example showcasing the error can be found in the following link:
https://codesandbox.io/embed/primereact-test-j7j5j

In often cases, tables are created as Components in a bigger application. Those tables are usually have headers generated, so a common use case would be to map some array to Column components like this:

 <DataTable value={this.rows} ...}>
 {
    this.columns.map(x =>  <Column field={x.field} header={x.header} sortable />)
 }
 </DataTable>

There can be requirements for such table to include either check-able rows, or a column that every table must have, like operations (show and delete).

 <Column selectionMode="multiple" header="Select all">

For the simplicity, in the codesandbox I inlcuded just a new simple column.

Expected behavior
The expected outcome would be, that the table renders normally, including all the mapped columns, and the added extra static column. The order of these should not matter.

Current behavior
Currently the component receives the children objects as array of arrays, instead of a single array, containing all the children.
Code recieves:

[ [ {Column1},  {Column2} ],  {Static Column} ]

But expects the children to be flattened like this:

[ {Column1},  {Column2},  {Static Column} ]

This causes an exception in src\components\datatable\DataTable.js:622

for(let i = 0; i < this.props.children.length; i++) {
                        if(this.props.children[i].props.footer) {
                                                    ^

that the children object is not flattened, so an array object does not have the props property.

Minimal reproduction of the problem with instructions

The dome is available on : https://codesandbox.io/embed/primereact-test-j7j5j

1. Create a DataTable component
2. Add a mapped array of Column components
3. Renders OK
4. Add a new static column after the mapped
5. Render fails

• PrimeReact version:
  Occurs in all version of PrimeReact - tested on commit; e24afe4

Work Around for those that cannot upgrade

There is a possible workaround if you only use 1 array to map, so you need to all the static component to it:

{
   this.columns.map(x =>  <Column field={x.field} header={x.header} sortable />)
      .concat([<Column field="b" header="b" sortable />]
}

I will submit a pull request with the fix.

[kovyfive]

@mertsincan can you take a look at it ?

[mertsincan]

Of course!

[mertsincan]

Fixed now!

[kovyfive]

@mertsincan thanks for the response! is the null check enough? i mean the children will not be checked for the footer now, it might cause some misbehavior now

[mertsincan]

Yes, please see;

export class DataTableDemo extends Component {

    rows = [
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" },
        { a: "a", b: "b" }
      ];
    
      columns = [{ field: "a", header: "a" }, { field: "b", header: "b" }];
    
      selectedItems = [];
    
      constructor(props) {
        super(props);
        this.state = { count: 0 };
        this.increment = this.increment.bind(this);
      }
    
      increment() {
        this.setState({ count: this.state.count + 1 });
      }
    
      render() {
        return (
          <div className="App">
            <div>
              <h2>PrimeReact Issue Template</h2>
    
              <DataTable
                value={this.rows}
                paginator
                resizableColumns
                rows={10}
                rowsPerPageOptions={[10, 20, 30, 50, 100]}
                selection={this.selectedItems}
                onSelectionChange={e => (this.selectedItems = e.value)}
              >
                {this.columns.map((x, i) => (
                  <Column field={x.field} header={x.header} sortable footer={`footer ${i}`} />
                ))}
                <Column field="b" header="b" sortable footer="footer-static-b" />
              </DataTable>
            </div>
            <div>
              
            </div>
          </div>
        );
      }
    }

[kovyfive]

And what if only the mapped columns has footers?
Like this:

  <DataTable
                value={this.rows}
                paginator
                resizableColumns
                rows={10}
                rowsPerPageOptions={[10, 20, 30, 50, 100]}
                selection={this.selectedItems}
                onSelectionChange={e => (this.selectedItems = e.value)}
              >
                {this.columns.map((x, i) => (
                  <Column field={x.field} header={x.header} sortable footer={`footer ${i}`} />
                ))}
                <Column field="b" header="b" sortable/>
              </DataTable>

[mertsincan]

You're right! Fixed now! Thanks a lot for the feedback ;)