text: /**
   * cn - 单元格选中
   *    -- 通过 cellSelectable 属性来启用 ctrl/cmd + click 选中单元格
   * en - Cell selectable
   *    -- whether to enable ctrl/cmd + click check.
   */
  import React from 'react'
  import { Table } from 'shineout'
  
  const data = [
    {
      id: 1,
      firstName: 'Ephraim',
      lastName: 'Wisozk',
      position: 'Marketing Designer',
      start: '2012-01-29',
      time: '01:42',
      salary: 115777,
      country: 'Reunion',
      office: 'Miami',
      office5: 'Istanbul',
      height: 113.74,
    },
    {
      id: 2,
      firstName: 'Osvaldo',
      lastName: 'Beer',
      position: 'Financial Controller',
      start: '2007-09-04',
      time: '03:26',
      salary: 396093,
      country: 'Syrian Arab Republic',
      office: 'San Paulo',
      office5: 'Shenzhen',
      height: 82.13,
    },
    {
      id: 3,
      firstName: 'Dylan',
      lastName: 'Ratke',
      position: 'Development Lead',
      start: '2009-10-16',
      time: '01:45',
      salary: 236064,
      country: 'Peru',
      office: 'Boston',
      office5: 'Delhi',
      height: 179.53,
    },
    {
      id: 4,
      firstName: 'Shaniya',
      lastName: 'Jacobs',
      position: 'Developer',
      start: '2014-06-30',
      time: '02:17',
      salary: 338985,
      country: 'Peru',
      office: 'Chengdu',
      office5: 'Dallas-Fort Worth',
      height: 190.11,
    },
  ]
  
  const columns = [
    { title: 'id', render: 'id', width: 50 },
    { title: 'Name', render: d => `${d.firstName} ${d.lastName}` },
    { title: 'Country', render: 'country' },
    { title: 'Position', render: 'position' },
    { title: 'Office', render: 'office' },
    { title: 'Start Date', render: 'start' },
    {
      title: 'Salary',
      render: d => `$${d.salary.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')}`,
    },
  ]
  
  export default function() {
    return <Table keygen="id" width={1500} columns={columns} data={data} cellSelectable />
  }
  