react-data-grid inside reactStrap tab is not shown

Question

I'm adding a grid created with the react-data-grid component inside a bootstrap tab created using reactstrap, but the grid is not shown correctly inside the tab, just an horizontal line, but if I place the same code outside the tab the grid is displayed correctly

                <TabPane tabId="2">
                <Container>
                    <Row>
                        <Col sm="12" >

                            <CardTitle>Special Title Treatment</CardTitle>
                            <Card body style={{ height: '500px'}}>
                                <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
                                <Button>Go somewhere</Button>
                                <DropDownClienti />
                                {clienteId}
                                {ultimiGiorni.status === 'loading' && 
                                    <div>Loading...</div>}
                                {ultimiGiorni.status === 'loaded' &&
                                    <DataGrid
                                        columns={columns}
                                        rows={ultimiGiorni.payload.results}
                                        onRowsUpdate={(evt) => {
                                            //@ts-ignore
                                            let toUpdate = { ...ultimiGiorni.payload.results[evt.fromRow], ...evt.updated};
                                            console.log('evt', evt, 'toUpdate', toUpdate );
                                        }}

                                    />
                                }
                                {ultimiGiorni.status === 'error' && (
                                    <div>Error, the backend moved to the dark side.</div>
                                )}


                            </Card>
                        </Col>
                    </Row>
                </Container>
            </TabPane>

If I place the grid this way is not working, If I place it after the tabContent I can use it correctly. Am I missing something?

Answer 1

It should work when you place the react-data-grid inside your react-strap tabs/cards

Working example is here:

https://codesandbox.io/s/jovial-wind-lws43?file=/src/App.js

Try something like this:

<TabContent activeTab={activeTab}>
        <TabPane tabId="1">
          <Row>
            <Col sm="12">
              <h4>Click on 2nd Tab to see the data grid</h4>
            </Col>
          </Row>
        </TabPane>
        <TabPane tabId="2">
          <Row>
            <Col sm="6">
              <Card body>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>
                  With supporting text below as a natural lead-in to additional
                  content.
                </CardText>
                <DataGrid
                  columns={columns}
                  rowGetter={i => rows[i]}
                  rowsCount={rows.length}
                  onRowsUpdate={evt => {
                  }}
                />
                <Button>Go somewhere</Button>
              </Card>
            </Col>
            <Col sm="6">
              <Card body>
                <CardTitle>Special Title Treatment</CardTitle>
                <CardText>
                  With supporting text below as a natural lead-in to additional
                  content.
                </CardText>
                <Button>Go somewhere</Button>
              </Card>
            </Col>
          </Row>
        </TabPane>
      </TabContent>

Just few notes:

• I used version 6 as I had some issues with latest version(7+) of react-data-grid. Check out the github issues page if it is relavent.
• I hope you have already installed bootstrap and imported the required library styles.
• Also I have used rowGetter={i => rows[i]} instead of rows={rows}.
• Check your styles (increase the grid height if required etc..)

Go thru the codesandbox and correlate with your code and see if it helps.