Devextreme-reactive: Cannot apply style to Grid in typescript

[JavierLight]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [x] React Grid
• [ ] React Chart
• [ ] Vue Grid

Current Behaviour

<Grid
rows={rows}
columns={columns}
getRowId={getRowId}
style={{ height: '100%' }} //cannot do this
>
          <VirtualTable
            height="auto"
          />

When trying to assign prop style to Grid using Typescript, compilation fails with:

TS2339: Property 'style' does not exist on type 'IntrinsicAttributes & GridProps & { children?: ReactNode; }'.

Expected Behaviour

According to your VirtualTable example for the auto height implementation (Stretching out to Parent Element Size), this should be possible.

Am I missing something or is this a bug in the TS implementation?

[franklixuefei]

Hi,

Grid itself does not render anything. Probably you are looking for Table.

[JavierLight]

Hi Frank, thanks for your response.

The code I quoted is from your own documentation examples (I linked and pointed at the specific section).

Edit: to clarify: what I need is to know how to use the auto option, since your example does not work in Typescript.

[MaximKudriavtsev]

Hi @JavierLight,

You can use rootComponent of the Grid plugin.

const root = props => (
  <Grid.Root {...props} style={{ height: '100%' }} />
);

... 

<Paper style={{ height: '800px' }}>
  <Grid
    rows={rows}
    columns={columns}
    getRowId={getRowId}
    rootComponent={root}
  >
    <VirtualTable
      height="auto"
    />
    <TableHeaderRow />
  </Grid>
</Paper>

[JavierLight]

Hello again, we are experiencing issues when overriding the Grid using the rootComponent prop.

• Search box input focus is lost when typing.
• Hide/show columns selector gets moved to the upper left side when selecting/unselecting a column.

This is happening even if we use:

const root = props => ( <Grid.Root {...props} /> ); //without setting style

[MaximKudriavtsev]

Hi @JavierLight,

Would you please modify this sample to reproduce the issue?

[JavierLight]

Hi @MaximKudriavtsev, we've been able to reproduce the issue. Please have a look at:
https://codesandbox.io/s/kwpm7p4wzv

The problem is caused when creating the rootComponent in each render. We are using state for searchValue and hiddenColumns because we would like to pass these states to the parent component. We need to set different heights for the Table component, depending on the part of our application where it's being used.

However, we can get rid of this issue using your suggested constant rootComponent. We still think it's worth to explain the cause of this strange behavior.

Thank you very much for your help.

[MaximKudriavtsev]

The problem is caused when creating the rootComponent in each render.

It's expected behavior because the ColumnChooser plugin uses the rootComponent element as a target. If rootComponent is repainted, columnChooser's popup can't be correctly placed.

As far as I understand, you need to set the Grid height dynamically depending on the Grid state. In this case, I suggest you use this trick. Here, I'm changing the Paper component height depending on the state. The rootComponent height is '100%', so it takes all the available space and it is rendered only once. Does this approach meet your needs?

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.