Here is a minimum reproduce app.
https://codesandbox.io/s/sweet-tu-m5rm4
I wrapped Datagrid with a div.
The Datagrid has only one column with initialWidth which is set to 200 and the width of div is also set to 200px.
Then, Datagrid shows NaN and console will report this error:
Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string.
in div (created by Context.Consumer)
in div (created by FocusLock)
in FocusLock (created by EuiFocusTrap)
in EuiFocusTrap (created by Context.Consumer)
in EuiI18n (created by Context.Consumer)
in EuiI18n (created by EuiDataGrid)
in EuiDataGrid (at index.js:85)
in Demo (at index.js:113)
in div (at index.js:107)
I traced the code and find following:
https://github.com/elastic/eui/blob/master/src/components/datagrid/data_grid.tsx#L300
I thought that widthToFill might be any number (0, positive or negative) and unsizedColumnCount might also be zero.
Therefore, widthToFill / unsizedColumnCount might be NaN (0/0), Infinity(1/0) or any negative number. Those value need to be considered.
The quick way to fixed this issue is that directly return 0 when unsizedColumnCount is 0 or widthToFill is <= 0.
Here is a minimum reproduce app.
https://codesandbox.io/s/sweet-tu-m5rm4
I wrapped
Datagridwith adiv.The
Datagridhas only one column withinitialWidthwhich is set to200and the width ofdivis also set to200px.Then,
DatagridshowsNaNand console will report this error:I traced the code and find following:
https://github.com/elastic/eui/blob/master/src/components/datagrid/data_grid.tsx#L300
I thought that
widthToFillmight be any number (0, positive or negative) andunsizedColumnCountmight also be zero.Therefore,
widthToFill / unsizedColumnCountmight be NaN (0/0), Infinity(1/0) or any negative number. Those value need to be considered.The quick way to fixed this issue is that directly return 0 when
unsizedColumnCountis 0 orwidthToFillis <= 0.