React Metal

React Metal 提供了 Table 等常用的 React 组件。

Example： 图书表格

BooksTableLayout.js

import React from 'react'
import {Layout, Header, Entry, Row, Text} from 'react-metal'

export const BooksTableLayout = () => (
  <Layout>
    <Header>
      <Row>
        <Text value="标题"/>
        <Text value="作者"/>
        <Text value="ISBN"/>
        <Text value="价格"/>
      </Row>
    </Header>
    <Entry>
      <Row>
        <Text key="title"/>
        <Text key="author"/>
        <Text key="isbn"/>
        <Text key="price"/>
      </Row>
    </Entry>
  </Layout>
)

export default BooksTableLayout

Example.js

import React from 'react'
import BooksTableLayout from './BooksTableLayout'
import {Table} from 'react-metal'

const books = [
  {
    title: "平凡的世界",
    author: "路遥"
    isbn: "9787020049295",
    price: 64
  }, {
    title: "围城",
    author: "钱锺书",
    isbn: "9787020024759",
    price: 19
  }, {
    title: "简爱",
    author: "夏洛蒂·勃朗特",
    isbn: "9787506261579",
    price: 18
  }, {
    title: "傲慢与偏见",
    author: "奥斯丁",
    isbn: "9787020040179",
    price: 13
  }
]

export const Example = (props) => (
  <div>
    <Table data={books} layout={BooksTableLayout}/>
  </div>
)