import React, {Component} from 'react';
import {Table, Button} from 'hana-ui';

function getRandomString () {
  return Math.random().toString(36);
}

/**
 * @en
 * Base Example
 *
 *  
 *
 * @cn
 * 基础用例
 *
 *  
 */

export default class ExampleBase extends Component {
  state = {
    data: [
      {one: 11, two: getRandomString(), three: getRandomString()},
      {one: 11, two: getRandomString(), three: getRandomString()},
      {one: 11, two: getRandomString(), three: getRandomString()}
    ]
  }

  render() {
    const actions = (
      <div>
        <Button style={{marginRight: 10}}>
          b
        </Button>
        <Button>
          d
        </Button>
      </div>
    );

    return (
      <div>
        <Table
          tableHeader={['header1', 'header2', 'header3', 'header4']}
          tableData={this.state.data}
          colSequence={['two', {key: 'fifth', defaultValue: 'hahah'}, 'one', actions]}
        />
      </div>
    );
  }
}

import React, {Component} from 'react';
import {Table} from 'hana-ui';

function getRandomString () {
  return Math.random().toString(36);
}


/**
 * @en
 * Base Example
 *
 * Example of how to custom column's width for each
 *
 * We can use `columnWidth` props to set width of each column.
 *
 * If pass <b>'auto'</b> as columnWidth value it will set column's width as average for each.
 * Or pass an object array to define specific column's width, like:
 *
 * `[{index: 1, column: 2}]`
 *
 * it will make first column take 2 column of the grid.
 *
 * Or pass a column number for each column and pass an object like: `{index: 3, column: 4}` as second argument to define specific column,
 * so the final props value should like: `[2, {index: 3, column: 4}]`
 *
 * @cn
 * 自定义列宽
 *
 * 表单支持使用`columnWidth` 来自定义列宽，传入值如下：
 *
 * `[{index: 1, column: 2}]`, 表示第一列占1/12，第二列占1/6
 *
 * 当然也可传入`auto` 来实现自适应
 */

export default class ExampleColumnWidth extends Component {
  state = {
    data: [
      {
        zero: getRandomString(),
        one: 11,
        two: getRandomString(),
        three: getRandomString()
      },
      {
        zero: getRandomString(),
        one: 11,
        two: getRandomString(),
        three: getRandomString()
      },
      {
        zero: getRandomString(),
        one: 11,
        two: getRandomString(),
        three: getRandomString()
      }
    ]
  }

  render() {
    return (
      <div>
        <Table
          tableHeader={['header0', 'header1', 'header2', 'header3']}
          tableData={this.state.data}
          columnWidth={'auto'}
        />
      </div>
    );
  }
}

表单支持使用columnWidth 来自定义列宽，传入值如下：

[{index: 1, column: 2}], 表示第一列占1/12，第二列占1/6

当然也可传入auto 来实现自适应

import React, {Component} from 'react';
import {Table, Button} from 'hana-ui';
import xor from 'lodash/xor';

function getRandomString() {
  return Math.random().toString(36);
}

/**
 * @en
 * Custom row operation
 *
 * Pass an Array to property selectedRow and handle it's changes by onRowClick property
 *
 * Set `selectable` & `hoverable` props to true can make table support seleted & hover effect for each row
 *
 * `selectedRow` accept a function which will return seleted row's list, each list item include
 * element & its index,also `selectedRow` accept an Array to specific each row's Selected state
 *
 * @cn
 * 自定义行操作
 *
 * `selectable` 和 `hoverable` 可控制表单行是否可被选择及是否开启`hover` 态
 *
 * `selectedRow` 接受一个函数，返回已被选择的行。或者传入一个行数索引为元素的数组来自动设置已选行
 */

export default class ExampleBase extends Component {
  state = {
    data: [
      {one: 11, two: getRandomString(), three: getRandomString()},
      {one: 11, two: getRandomString(), three: getRandomString()},
      {one: 11, two: getRandomString(), three: getRandomString()}
    ],
    selectedRow: []
  };

  handleClick = () => {
    this.setState({
      selectedRow: [1, 2]
    });
  };

  handleRowClick = (event, index) => {
    event.stopPropagation();
    if (Array.isArray(index)) {
      this.setState({
        selectedRow: index.map(Number)
      });
    } else {
      this.setState({
        selectedRow: xor(this.state.selectedRow, [Number(index)])
      });
    }
  };

  handleButtonClick = e => {
    e.preventDefault();
    e.stopPropagation();
  };

  render() {
    const {data, selectedRow} = this.state;
    console.log(selectedRow); // eslint-disable-line
    const actions = (
      <div>
        <Button style={{marginRight: 10}} onClick={this.handleButtonClick}>
          foo
        </Button>
        <Button onClick={this.handleButtonClick}>bar</Button>
      </div>
    );
    return (
      <div>
        <Button onClick={this.handleClick}>setSelectedRow</Button>
        <Table
          showRowIndex
          showCheckbox
          showAllCheckbox
          tableHeader={['header1', 'header2', 'header3', 'header4']}
          tableData={data}
          onRowClick={this.handleRowClick}
          colSequence={[
            () => <a href="//www.bing.com" target="_blank" rel="noopener noreferrer">baidu</a>,
            {key: 'fifth', defaultValue: 'hahah'},
            'one',
            actions
          ]}
          selectable
          hoverable
          selectedRow={selectedRow}
        />
      </div>
    );
  }
}

selectable 和 hoverable 可控制表单行是否可被选择及是否开启hover 态

selectedRow 接受一个函数，返回已被选择的行。或者传入一个行数索引为元素的数组来自动设置已选行