How to render a table in React by using Blueprint

Question

I'm trying to render a very simple table with React and the Blueprint UI toolkit.

The documentation relative to the Table component is quite simple, but it seems like my code doesn't work.

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')
);

The image below shows what I get. How do I fix it?

score 8 · Accepted Answer · answered Dec 06 '16 at 01:05

8

Are you including blueprint.css and blueprint-table.css on your page? The Table won't render correctly without its stylesheets!

answered Dec 06 '16 at 01:05

Gilad Gray

451
2
6

I have the same problem, the suggested include is not working with a boiler plate that uses webpack, and require() won't include the css either due to the @ in the @blueprintjs module name, any ideas? – perrohunter Dec 11 '16 at 05:39
3

Interesting...this is not in the [table install docs](http://blueprintjs.com/docs/#table-js.installation). For me, the file was in `node_modules/@blueprintjs/table/dist/table.css` (notice the different css filename). – webelo Dec 20 '17 at 21:43

score 3 · Answer 2 · answered Apr 13 '17 at 14:08

3

I had to include this line in my css file (using webpack setup by create-react-app):

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

answered Apr 13 '17 at 14:08

Jeremy Hunter

31
2

score 3 · Answer 3 · edited May 04 '18 at 22:09

3

For me,

yarn add @blueprintjs/core @blueprintjs/table

Then using a relative path from my react component file

import { Cell, Column, Table } from '@blueprintjs/table'

import '../../node_modules/@blueprintjs/table/lib/css/table.css'

edited May 04 '18 at 22:09

ascripter

5,665
12
45
68

answered May 04 '18 at 20:40

Ian

31
1
2

2

For blueprint 3 + react: import '@blueprintjs/table/lib/css/table.css' – gurpal2000 Aug 05 '19 at 22:12

score -3 · Answer 4 · answered Mar 22 '17 at 11:51

-3

import '@blueprintjs/core/dist/blueprint.css'

answered Mar 22 '17 at 11:51

Jeronimo the Black

25
2

How to render a table in React by using Blueprint

4 Answers4