javascript - How to render a table in React by using Blueprint - Stack Overflow

admin管理员组

文章数量:1289362

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

The documentation relative to the Table ponent 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?

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

The documentation relative to the Table ponent 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?

• javascript
• reactjs
• jsx
• blueprint

Share Improve this question Follow edited Jan 6, 2017 at 17:57 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Nov 23, 2016 at 6:39 LukeLuke 3,04677 gold badges3535 silver badges4545 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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

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

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

For me,

yarn add @blueprintjs/core @blueprintjs/table

Then using a relative path from my react ponent file

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

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

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

本文标签： javascriptHow to render a table in React by using BlueprintStack Overflow