Skip to content

First column is blank in v5 when indexing into jagged arrays rather than arrays of objects #1343

@mungojam

Description

@mungojam

Which version of React JS are you using?

✅ Officially supported ✅

  • v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

  • v15.5.x
  • v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

  • v16.x.x

Which browser are you using?

✅ Officially supported ✅

  • IE 9 / IE 10 / IE 11
  • Edge
  • Chrome

⚠️ Not officially supported, but "should work" ⚠️

  • Firefox
  • Safari

I'm submitting a ...

  • 🐛 Bug Report
  • 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md


Issue Details

When using v4, I was able to have my backing data stored as a jagged/nested array, with the outer dimension for the rows and the inner dimension for the columns. I then used the column index as the key for each column. This made it easy to work with data coming as an array of column headings plus an array of arrays with the data in.

With v5 however, the first column is coming out blank:

image

Here's the MRE:

import React from 'react';

import ReactDataGrid from 'react-data-grid';

export default () => {
  const rows = [];
  for (let i = 1; i < 20; i++) {
    rows.push([i, 'Title ' + i, i * 20]
    );
  }

  const columns = [
    { key: 0, name: 'ID' },
    { key: 1, name: 'Title' },
    { key: 2, name: 'Count' } ];

  return (
    <div className="App">
      <ReactDataGrid
        columns={columns}
        rowGetter={i => rows[i]}
        rowsCount={rows.length}
        minHeight={500} />
    </div>
  );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions