Сетка реагирующих данных внутри вкладки activStrap не отображается

Question

Я добавляю сетку, созданную с помощью компонента act-data-grid , во вкладку bootstrap, созданную с использованием Reactionstrap , но сетка не отображается правильно внутри вкладки просто горизонтальная линия, но если я размещу тот же код за пределами вкладки, сетка будет отображаться правильно используйте это правильно. Я что-то упустил?

Answer 1

Это должно работать, когда вы размещаете сетку данных реакции внутри ваших вкладок / карточек реактивного ремешка

Рабочий пример здесь:

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

Попробуйте что-то вроде этого:

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

Несколько замечаний:

• Я использовал версию 6 как у меня были некоторые проблемы с последней версией (7+) react-data-grid. Проверьте страницу проблем github, если она релевантна.
• Я надеюсь, что вы уже установили bootstrap и импортировали необходимые стили библиотеки.
• Также я использовал rowGetter={i => rows[i]} вместо rows={rows}.
• Проверьте ваши стили (при необходимости увеличьте высоту сетки и т. Д. c ..)

Go через коды и окно и сопоставьте его с кодом и посмотрите, поможет ли это .