(Component) Table

Table

• 原始碼：common/table/Table
• 表格元件，顯示效果如下：
  • https://projects.invisionapp.com/d/main#/console/10208710/221643729/preview

Sample code

render() {
  const data = [{
    company: {
      name: '測試公司',
    },
    job_title: '工程師',
    estimated_hourly_wage: 123.456,
    id: '12345',
  }];

  return (
    <Table data={data} primaryKey="id">
      <Table.Column dataField="company.name">
        公司名稱
      </Table.Column>

      <Table.Column dataField="job_title">
        職稱
      </Table.Column>

      <Table.Column
        dataField="estimated_hourly_wage"
        dataFormatter={val => Math.round(val)}
      >
        估計時薪
      </Table.Column>
    </Table>
  );
}

Properties

Table

Property	Type	Default	Required	Description
data	array	-	Y	表格要顯示的資料
primaryKey	string	-	Y	每筆資料的主鍵 (只要是 unique 的欄位即可)

Table.Column

Property	Type	Default	Required	Description
dataField	string	-	Y	要顯示的欄位對應到資料的路徑
dataFormat	function	-	-	可以針對原始資料作處理再 render (function 會提供 2 個參數，第一個是該欄位的原始值，第二個是包含該欄位在內的整筆資料)