CODEWITHSUNDEEP
javascriptreactjsjsxblueprint
Luke
Luke

Reputation: 3046

How to render a table in React by using Blueprint

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?

Enter image description here

Upvotes: 2

Views: 4532

Answers (4)

Ian
Ian

Reputation: 31

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'

Upvotes: 3

Jeremy Hunter
Jeremy Hunter

Reputation: 31

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

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

Upvotes: 3

Jeronimo the Black
Jeronimo the Black

Reputation: 25

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

Upvotes: -3

Gilad Gray
Gilad Gray

Reputation: 451

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

Upvotes: 8

Related Questions