Table

Overview

Table

Number Description
1 Header of column
2 Icon button for insert row
3 Icon button for remove row
4 Child control component
5 Sample row

Note

Below is the list components that table supports:

  • Text
  • Dropdown
  • CheckBox
  • MultipleChoice
  • RadioButton
  • Label
  • IconButton
  • Alert

Constructor

Parameter

Name Type Required Description
options Object Yes The object contains params of constructor.
options.template TableRow Yes The row template.
options.header Array Yes Header content for the table.
options.value Array No Value for table.
Refer to the getValue() and setValue(value) for more information
Sample

React

import React, { Component } from 'react';
import { Table, RadioButton, Dropdown, Button, IconButton} from 'kintone-ui-component';

class App extends Component {
  constructor(props) {
    super(props);
    const fruit = [
          {
            label: 'Orange',
            value: 'orange'
          },
          {
            label: 'Banana',
            value: 'banana'
          }
        ];

    const color = [
      {
        label: 'Red',
        value: 'red'
      },
      {
        label: 'Green',
        value: 'green'
      }
    ];
    this.state = {
      fruit: fruit,
      table: {
        header: ['Radio', 'Dropdown', 'MultipleChoice', 'Check', 'Alert', 'Label', 'text', 'button', 'icon button'],
        rowTemplate: [
          <RadioButton name="fruit" items={fruit} value={fruit.value} isVisible={true} isDisabled={false} />,
          <Dropdown items={color} isVisible={true} isDisabled={false} />,
          <Button text="button" isVisible={true} isDisabled={false} />,
          <IconButton />
        ]
      }
    }
  }

  handleRowAdd = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }
  handleRowRemove = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellChange = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellClick = (data) => {
    console.log('data: ', data);
  }

  render() {
    return (
      <div>
        <Table header={this.state.table.header} rowTemplate={this.state.table.rowTemplate}
          value={this.state.table.value} isVisible={true}
          onCellChange={this.handleCellChange}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellClick={this.handleCellClick}
        />
      </div>
    );
  }
}

Javascript

const radioBtn = new kintoneUIComponent.RadioButton({
    items: [{label: 'Orange', value: 'orange'}, {label: 'Banana', value: 'banana'}],
    value: 'orange',
    name: 'Fruit'
});

const dropdown = new kintoneUIComponent.Dropdown({
    items: [{label: 'Red', value: 'red'}, {label: 'Green', value: 'green'}],
    value: 'green'
})

var table = new kintoneUIComponent.Table({
    rowTemplate: [radioBtn, dropdown],
    header: ['Fruit', 'Color']
});

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

React

import React, { Component } from 'react';
import { Table, RadioButton, Dropdown, Button, IconButton} from 'kintone-ui-component';

class App extends Component {
  constructor(props) {
    super(props);
    const fruit = [
          {
            label: 'Orange',
            value: 'orange'
          },
          {
            label: 'Banana',
            value: 'banana'
          }
        ];

    const color = [
      {
        label: 'Red',
        value: 'red'
      },
      {
        label: 'Green',
        value: 'green'
      }
    ];
    this.state = {
      fruit: fruit,
      table: {
        header: ['Radio', 'Dropdown', 'MultipleChoice', 'Check', 'Alert', 'Label', 'text', 'button', 'icon button'],
        rowTemplate: [
          <RadioButton name="fruit" items={fruit} value={fruit.value} isVisible={true} isDisabled={false} />,
          <Dropdown items={color} isVisible={true} isDisabled={false} />,
          <Button text="button" isVisible={true} isDisabled={false} />,
          <IconButton />
        ]
      }
    }
  }

  handleRowAdd = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }
  handleRowRemove = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellChange = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellClick = (data) => {
    console.log('data: ', data);
  }

  render() {
    return (
      <div>
        <Table header={this.state.table.header} rowTemplate={this.state.table.rowTemplate}
          value={this.state.table.value} isVisible={true}
          onCellChange={this.handleCellChange}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellClick={this.handleCellClick}
        />
      </div>
    );
  }
}

Javascript

const radioBtn = new kintoneUIComponent.RadioButton({
    items: [{label: 'Orange', value: 'orange'}, {label: 'Banana', value: 'banana'}],
    value: 'orange',
    name: 'Fruit'
});

const dropdown = new kintoneUIComponent.Dropdown({
    items: [{label: 'Red', value: 'red'}, {label: 'Green', value: 'green'}],
    value: 'green'
})

var table = new kintoneUIComponent.Table({
    rowTemplate: [radioBtn, dropdown],
    header: ['Fruit', 'Color']
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

getValue()

Get value of all rows in the table.

Parameter

None

Returns

Name Type Description
value Array Value of all rows in the table
Sample

React

import React, { Component } from 'react';
import { Table, RadioButton, Dropdown, Button, IconButton} from 'kintone-ui-component';

class App extends Component {
  constructor(props) {
    super(props);
    const fruit = [
          {
            label: 'Orange',
            value: 'orange'
          },
          {
            label: 'Banana',
            value: 'banana'
          }
        ];

    const color = [
      {
        label: 'Red',
        value: 'red'
      },
      {
        label: 'Green',
        value: 'green'
      }
    ];
    this.state = {
      fruit: fruit,
      table: {
        header: ['Radio', 'Dropdown', 'MultipleChoice', 'Check', 'Alert', 'Label', 'text', 'button', 'icon button'],
        rowTemplate: [
          <RadioButton name="fruit" items={fruit} value={fruit.value} isVisible={true} isDisabled={false} />,
          <Dropdown items={color} isVisible={true} isDisabled={false} />,
          <Button text="button" isVisible={true} isDisabled={false} />,
          <IconButton />
        ]
      }
    }
  }

  handleRowAdd = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }
  handleRowRemove = (data) => {
    const table = this.state.table;
    table.value = data;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellChange = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellClick = (data) => {
    console.log('data: ', data);
  }

  render() {
    return (
      <div>
        <Table header={this.state.table.header} rowTemplate={this.state.table.rowTemplate}
          value={this.state.table.value} isVisible={true}
          onCellChange={this.handleCellChange}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellClick={this.handleCellClick}
        />
       <Button text="get value" onClick={() => {console.log('value: ', this.state.table.value)}} />
      </div>
    );
  }
}

Javascript

const radioBtn = new kintoneUIComponent.RadioButton({
    items: [{label: 'Orange', value: 'orange'}, {label: 'Banana', value: 'banana'}],
    value: 'orange',
    name: 'Fruit'
});

const dropdown = new kintoneUIComponent.Dropdown({
    items: [{label: 'Red', value: 'red'}, {label: 'Green', value: 'green'}],
    value: 'green'
})

var table = new kintoneUIComponent.Table({
    rowTemplate: [radioBtn, dropdown],
    header: ['Fruit', 'Color']
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

var value = table.getValue();
value.forEach(rowData => {
    rowData.forEach(cellData => {
        console.log(cellData)
    });
});

setValue(value)

Set value for every row in table. The number of rows in table's dependent on the length on this parameters.

Note

Below is the list components that this function supports:

  • Text
  • Dropdown
  • CheckBox
  • MultipleChoice
  • RadioButton

Parameter

Name Type Required Description
value Array Yes Value for every row in table

Returns

None

Sample

React

import ReactDOM from 'react-dom';
import React, { Component } from 'react';

import { Alert, NotifyPopup, RadioButton, Text, CheckBox, Button, Dropdown, MultipleChoice, Label, Table, IconButton } from 'kintone-ui-component';
class App extends Component {
  constructor(props) {
    super(props);
    const fruit = [
          {
            label: 'Orange',
            value: 'orange'
          },
          {
            label: 'Banana',
            value: 'banana'
          }
        ];

    const color = [
      {
        label: 'Red',
        value: 'red'
      },
      {
        label: 'Green',
        value: 'green'
      }
    ];
    this.state = {
      fruit: fruit,
      table: {
        header: ['Radio', 'Dropdown', 'MultipleChoice', 'Check', 'Alert', 'Label', 'text', 'button', 'icon button'],
        rowTemplate: [
          <RadioButton name="fruit" items={fruit} value={fruit.value} isVisible={true} isDisabled={false} />,
          <Dropdown items={color} isVisible={true} isDisabled={false} />,
          <Button text="button" isVisible={true} isDisabled={false} />,
          <IconButton />
        ]
      }
    }
  }

  render() {
    return (
      <div>
        <Table header={this.state.table.header} rowTemplate={this.state.table.rowTemplate}
          value={this.state.table.value} isVisible={true}
        />
        <Button text="Set value" onClick={() => {const table = this.state.table; table.value = [['orange','red']]; this.setState({table: table})}}/>
      </div>
    );
  }
}

Javascript

const radioBtn = new kintoneUIComponent.RadioButton({
    items: [{label: 'Orange', value: 'orange'}, {label: 'Banana', value: 'banana'}],
    value: 'orange',
    name: 'Fruit'
});

const dropdown = new kintoneUIComponent.Dropdown({
    items: [{label: 'Red', value: 'red'}, {label: 'Green', value: 'green'}],
    value: 'green'
})

var table = new kintoneUIComponent.Table({
    rowTemplate: [radioBtn, dropdown],
    header: ['Fruit', 'Color']
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

table.setValue([
    ['orange', 'green'],
    ['orange', 'red'],
    ['banana', 'green'],
    ['banana', 'red']
]);

on(eventName, callBack)

Register callback for a event

Parameter

Name Type Required Description
eventName String Yes Name of events:
  • 'rowAdd'
    • The 'rowAdd' event occurs when adding a new row in the table
  • 'rowRemove'
    • The 'rowRemove' event occurs when removing a row in the table
  • 'cellChange'
    • The 'cellChange' event occurs when the value of an element bellow has been changed:
      • Text
      • Drodown
      • RadioButton
      • MultipleChoice
      • CheckBox
  • 'cellClick
    • The 'cellClick' event occurs when the value of an element bellow has been clicked:
      • Button
      • IconButton
      • Label
      • Alert
callback function Yes callback

Returns

Callback data

Event Name Type Description
rowAdd data Object Callback data
data.tableValue Array Values of the table
data.row Interger Position of the new row in the table
rowRemove data object Callback data
data.tableValue Array Values of the table
cellChange data object Callback data
data.tableValue Array Values of the table
data.cell object Cell of the component which has been changed the values in the table
data.cell.row Interger Row specification of the object cell
data.cell.column Interger Column specification of the object cell
cellClick data object Callback data
data.tableValue Array Values of the table
data.cell object Cell of the component which has been clicked in the table
data.cell.row Interger Row specification of the object cell
data.cell.column Interger Column specification of the object cell
Sample

React

import React, { Component } from 'react';
import { Table, RadioButton, Dropdown, Button, IconButton} from 'kintone-ui-component';

class App extends Component {
  constructor(props) {
    super(props);
    const fruit = [
          {
            label: 'Orange',
            value: 'orange'
          },
          {
            label: 'Banana',
            value: 'banana'
          }
        ];

    const color = [
      {
        label: 'Red',
        value: 'red'
      },
      {
        label: 'Green',
        value: 'green'
      }
    ];
    this.state = {
      fruit: fruit,
      table: {
        header: ['Radio', 'Dropdown', 'MultipleChoice', 'Check', 'Alert', 'Label', 'text', 'button', 'icon button'],
        rowTemplate: [
          <RadioButton name="fruit" items={fruit} value={fruit.value} isVisible={true} isDisabled={false} />,
          <Dropdown items={color} isVisible={true} isDisabled={false} />,
          <Button text="button" isVisible={true} isDisabled={false} />,
          <IconButton />
        ]
      }
    }
  }

  handleRowAdd = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }
  handleRowRemove = (data) => {
    const table = this.state.table;
    table.value = data;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellChange = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellClick = (data) => {
    console.log('data: ', data);
  }

  render() {
    return (
      <div>
        <Table header={this.state.table.header} rowTemplate={this.state.table.rowTemplate}
          value={this.state.table.value} isVisible={true}
          onCellChange={this.handleCellChange}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellClick={this.handleCellClick}
        />
      </div>
    );
  }
}

Javascript

var radioBtn = new kintoneUIComponent.RadioButton({
    items: [{label: 'Orange', value: 'orange'}, {label: 'Banana', value: 'banana'}],
    value: 'orange',
    name: 'Fruit'
});

var dropdown = new kintoneUIComponent.Dropdown({
    items: [{label: 'Red', value: 'red'}, {label: 'Green', value: 'green'}],
    value: 'green'
})

var table = new kintoneUIComponent.Table({
    rowTemplate: [radioBtn, dropdown],
    header: ['Fruit', 'Color']
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

table.on('rowRemove', function(data) {
    console.log(data);
})
table.on('rowAdd', function(data) {
    console.log(data);
})
table.on('cellChange', function(data) {
    console.log(data);
})
table.on('cellClick', function(data) {
    console.log(data);
})

show()

Displayed the table

Parameter

None

Returns

None

Sample

React

import ReactDOM from 'react-dom';
import React, { Component } from 'react';

import { Alert, NotifyPopup, RadioButton, Text, CheckBox, Button, Dropdown, MultipleChoice, Label, Table, IconButton } from 'kintone-ui-component';
class App extends Component {
  constructor(props) {
    super(props);
    const fruit = [
          {
            label: 'Orange',
            value: 'orange'
          },
          {
            label: 'Banana',
            value: 'banana'
          }
        ];

    const color = [
      {
        label: 'Red',
        value: 'red'
      },
      {
        label: 'Green',
        value: 'green'
      }
    ];
    this.state = {
      fruit: fruit,
      table: {
        header: ['Radio', 'Dropdown', 'MultipleChoice', 'Check', 'Alert', 'Label', 'text', 'button', 'icon button'],
        rowTemplate: [
          <RadioButton name="fruit" items={fruit} value={fruit.value} isVisible={true} isDisabled={false} />,
          <Dropdown items={color} isVisible={true} isDisabled={false} />,
          <Button text="button" isVisible={true} isDisabled={false} />,
          <IconButton />
        ],
        isVisible: false
      }
    }
  }

  handleRowAdd = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }
  handleRowRemove = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handlCellChange = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellClick = (data) => {
    console.log('data: ', data);
  }

  render() {
    return (
      <div>
        <Table header={this.state.table.header} rowTemplate={this.state.table.rowTemplate}
          value={this.state.table.value} isVisible={this.state.table.isVisible}
          onCellChange={this.handlCellChange}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellClick={this.handleCellClick}
        />
        <Button text="show" onClick={() => {
          const table = this.state.table; 
          table.isVisible = true; 
          this.setState({table: table});
          }} />
      </div>
    );
  }
}

Javascript

var radioBtn = new kintoneUIComponent.RadioButton({
    items: [{label: 'Orange', value: 'orange'}, {label: 'Banana', value: 'banana'}],
    value: 'orange',
    name: 'Fruit'
});

var dropdown = new kintoneUIComponent.Dropdown({
    items: [{label: 'Red', value: 'red'}, {label: 'Green', value: 'green'}],
    value: 'green'
})

var table = new kintoneUIComponent.Table({
    rowTemplate: [radioBtn, dropdown],
    header: ['Fruit', 'Color'],
    isVisible: false
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

table.show();

hide()

Hide the table

Parameter

None

Returns

None

Sample

React

import ReactDOM from 'react-dom';
import React, { Component } from 'react';

import { Alert, NotifyPopup, RadioButton, Text, CheckBox, Button, Dropdown, MultipleChoice, Label, Table, IconButton } from 'kintone-ui-component';
class App extends Component {
  constructor(props) {
    super(props);
    const fruit = [
          {
            label: 'Orange',
            value: 'orange'
          },
          {
            label: 'Banana',
            value: 'banana'
          }
        ];

    const color = [
      {
        label: 'Red',
        value: 'red'
      },
      {
        label: 'Green',
        value: 'green'
      }
    ];
    this.state = {
      fruit: fruit,
      table: {
        header: ['Radio', 'Dropdown', 'MultipleChoice', 'Check', 'Alert', 'Label', 'text', 'button', 'icon button'],
        rowTemplate: [
          <RadioButton name="fruit" items={fruit} value={fruit.value} isVisible={true} isDisabled={false} />,
          <Dropdown items={color} isVisible={true} isDisabled={false} />,
          <Button text="button" isVisible={true} isDisabled={false} />,
          <IconButton />
        ],
        isVisible: true
      }
    }
  }

  handleRowAdd = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }
  handleRowRemove = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handlCellChange = (data) => {
    const table = this.state.table;
    table.value = data.tableValue;
    this.setState({ table: table });
    console.log('data: ', data);
  }

  handleCellClick = (data) => {
    console.log('data: ', data);
  }

  render() {
    return (
      <div>
        <Table header={this.state.table.header} rowTemplate={this.state.table.rowTemplate}
          value={this.state.table.value} isVisible={this.state.table.isVisible}
          onCellChange={this.handlCellChange}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellClick={this.handleCellClick}
        />
        <Button text="hide" onClick={() => {
          const table = this.state.table; 
          table.isVisible = false; 
          this.setState({table: table});
          }} />
      </div>
    );
  }
}

Javascript

var radioBtn = new kintoneUIComponent.RadioButton({
    items: [{label: 'Orange', value: 'orange'}, {label: 'Banana', value: 'banana'}],
    value: 'orange',
    name: 'Fruit'
});

var dropdown = new kintoneUIComponent.Dropdown({
    items: [{label: 'Red', value: 'red'}, {label: 'Green', value: 'green'}],
    value: 'green'
})

var table = new kintoneUIComponent.Table({
    rowTemplate: [radioBtn, dropdown],
    header: ['Fruit', 'Color']
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

table.hide();