Devextreme-reactive: Virtual Table Height

[ddmedeiros]

Is there a way to set the height for the container div of virtual table component via its props, instead of its fixed 530px height ?

[kvet]

Hi,
 
Currently, there is no way to set virtual table height. We will notify you once the possibility is added.

[DanHarman]

This is an urgent one for me too. I'm using AutoSizer from https://bvaughn.github.io/react-virtualized/#/components/AutoSizer to support having an adjustable splitter so need to be able to set the height.

[DanHarman]

I've hacked this in for the time being. I had to debounce AutoSizer for performance reasons. Partial code sample:

import { AutoSizer } from 'react-virtualized';

function debounce(func: (..._: any[]) => void, timeout: number) {
    let timeoutHandle: number | null;
    return (...args: any[]) => {
        const deferred = () => {
            timeoutHandle = null;
            func(args);
        };

        clearTimeout(timeoutHandle!);
        timeoutHandle = setTimeout(deferred, timeout);
    };
}

class MyGrid extends React.Component<ConnectedProps, {}> {     
    private hackDxGridHeight = debounce((height: number) => {
        window.requestAnimationFrame(() => {
            const node = ReactDOM.findDOMNode(this) as HTMLElement;
            if (node !== undefined) {
                ReactDOM.findDOMNode(this).getElementsByClassName('panel')[0].children[0].setAttribute('style', `height: ${height}px;`);
            }
        });
    }, 1000);

    public render() {
        return (
            <div style={{ position: 'relative', height: '100%', width: '100%', background: '#0F0' }}>
                <AutoSizer>
                    {({ height }) => {
                        this.hackDxGridHeight(height);
                        return <div style={{ position: 'absolute', width: '100%', height: `${height}px` }}>
                            <Grid getRowId={getRowId}
                                rows={this.props.trades}
                                height={height}
                                columns={[...]}>
                                <SortingState />
                                <LocalSorting />
                                <VirtualTableView />

                                <TableColumnResizing defaultColumnWidths={this.defaultColumnWidths} />

                                <TableHeaderRow allowResizing allowSorting />
                            </Grid>
                        </div>;
                    }}
                </AutoSizer>
            </div>
        );
    }
}

[DanHarman]

Just a heads up for anyone doing this hack, you may not see cells if you enlarge past the size of the 'overscan' buffer of the table. Scrolling fixes it, but not looked into how to actually force it to redraw. this.forceUpdate() doesn't seem to do it though.

[DanHarman]

@kvet Is there a way to force the virtual table view to recalculate the number of visible rows as with my hack if I make the table too big, it exceeds the current number of rendered rows and doesn't update until I scroll a fraction.

[kvet]

@DanHarman, I can recommend changing the scrollTop property of the DOM Node that was obtained in the hackDxGridHeight method. So, try to increase the scrollTop value by 1 pixel. This will trigger Virtual Table rendering.

[leandro-silva-me]

What about Table width? Not implemented same as height?

[DanHarman]

@leandro-silva-me width is 100% so already fills the available space. Only height is fixed.

[elertan]

Not sure if this is 'fixed'. But you can set the table's height by using the containerComponent prop on the VirtualTable component. You basically pass down the props onto a <div> element and set the style of that div element to your desired height.

[DanHarman]

Yes it was fixed a while back. No need to hack it anymore.

Sent from my iPad

On 25 Apr 2018, at 15:38, Elertan [e-mail] wrote:

Not sure if this is 'fixed'. But you can set the table's height by using the containerComponent prop on the VirtualTable component. You basically pass down the props onto a

element and set the style of that div element to your desired height.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[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.