【Reactable】 如何自定义列？

有两种方法可以自定义数据表格的列：

1. 一种是在<Table>组件中传递columns 数组属性：
   • columns数组可以是一个包括字符串的数组，这样在渲染表格的时候会作为列的属性。
   • columns数组也可以是由多个包含key和label属性的对象组成， key可以获取表格行对应列的值，label会被渲染成表格头的标题。
2. 一种是在<Table>组件中定义一个<Thead>组件作为第一个子组件。<Thead>组件需要包含<th>子组件，每个<th>子组件需要带有column属性。<th>组件将作为表头显示。以下是示例：

var Table = Reactable.Table,
    Thead = Reactable.Thead,
    Th = Reactable.Th,
    Tr = Reactable.Tr,
    Td = Reactable.Td;

React.renderComponent(
    <Table className="table" id="table">
        <Thead>
          <Th column="name">
            <strong className="name-header">First Name, Last Name</strong>
          </Th>
          <Th column="age">
            <em className="age-header">Age, years</em>
          </Th>
        </Thead>
        <Tr>
            <Td column="name" data="Griffin Smith">
                <b>Griffin Smith</b>
            </Td>
            <Td column="age">18</Td>
        </Tr>
        <Tr>
            <Td column="name">Lee Salminen</Td>
            <Td column="age">23</Td>
        </Tr>
        <Tr>
            <Td column="position">Developer</Td>
            <Td column="age">28</Td>
        </Tr>
    </Table>,
    document.getElementById('table')
);

在这个例子中，position列将不会被显示。