Skip to content

[DataGrid] Width calculate #3781

@Tocknicsu

Description

@Tocknicsu

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions