reactjs - ReactDataGrid not displaying rows correctly

Question

I am using react-data-grid version ^4.0.9 and the row data does not appear for me even though it appears the expected data is in the grid.

Outside of my component definition I define:

const colsTest = [{key: "test1", name: "Test 1", filterable: true}, {key: "test2", name: "Test 2", filterable: true}, {key: "test3", name: "Test 3", filterable: true}];
const rowsTest = [{test1: "Test", test2: "Test", test3: "Test"}];

and then in the render function of my component, I return:

<ReactDataGrid 
   columns={colsTest}
   rowGetter={i => rowsTest[i]}
   rowCount={rowsTest.length}
   minHeight={750}
/>

I have attached a screenshot to verify that Chrome's inspect shows that the data grid contains the expected data, and another screenshot to show what is rendered.

Any ideas why this may be happening?

Obviously, I have used dummy data for sharing purposes but with the actual data, the output is the same.

question from:https://stackoverflow.com/questions/65860113/reactdatagrid-not-displaying-rows-correctly

Answer 1

For anyone having the same issue, make sure each outer div has style height set to 100%.