Как визуализировать таблицу в Реагировании с помощью Blueprint

Question

Я пытаюсь отобразить очень простую таблицу с помощью React и инструментария UI Blueprint.

documentation относительно компонента Table довольно прост, но, похоже, мой код не работает.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import * as Blueprint from '@blueprintjs/core'; 
import { Cell, Column, Table } from '@blueprintjs/table'; 

const renderCell = (rowIndex: number) => { 
    return <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell> 
}; 

var myTable = (
    <Table numRows={10}> 
    <Column name="Dollars" renderCell={renderCell}/> 
    </Table> 
); 

ReactDOM.render(
    myTable, 
    document.getElementById('myTable') 
); 

На изображении ниже показано, что я получаю. Как это исправить?

Answer 1

Вы включая blueprint.css и blueprint-table.css на вашей странице? Таблица не будет отображаться правильно без таблиц стилей!

Answer 2

импорт @ blueprintjs/ядро ​​/ DIST/blueprint.css '

Answer 3

мне пришлось включить эту строку в свой файл CSS (с помощью установки WebPack путем создания реагирующими-приложение):

@import '~@blueprintjs/table/dist/table.css';