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

The Table are supporting child control components (Item-4) as below:

※ Child control components must be an instance of TableCell.

Constructor

Parameter

Name Type Required Description
options Object No The object contains the parameters of constructor.
options.columns Array<Object> No The row template.
options.columns[x].header String No Header of column.
options.columns[x].cell Function No Returns cell template object.
Refer TableCell for more information.
options.data Array<Object> No The value of table.
Refer to the getValue() and setValue(value) for more information.
options.defaultRowData Object No The default value of new row.
options.actionButtonsShown Boolean No Show the action buttons when this parameter is True.
Default: True
options.onRowAdd Callback No Handler for row add event.
Return row data object to overwrite default row data object.
options.onRowRemove Callback No Handler for row remove event.
options.onCellChange Callback No Handler for cell change event.
Sample

JS Simple

(function() {
  // create built-in cell component
  var textBuiltInCell = function () {
    return kintoneUIComponent.createTableCell('text', 'textBuiltIn');
  };

  // create custom cell component
  var textCustomCell = function() {
    return {
      init: function({rowData, updateRowData}) {
        var text = document.createElement('input');
        text.onchange = function(event) {
          updateRowData({textCustom: {value: event.target.value}}, false);
        };

        this.textCustom = text;
        return text;
      },
      update: function({ rowData }) {
        this.textCustom.value = rowData.textCustom.value;
      }
    }
  };

  var columns = [
    { header: 'Built-in cell', cell: function() { return textBuiltInCell() }},
    { header: 'Custom cell', cell: function() { return textCustomCell() }}
  ];

  var initialData = [
    {
      textBuiltIn: { value: 'built-in' },
      textCustom: { value: 'custom' }
    }
  ];

  var defaultRowData = {
    textBuiltIn: { value: '' },
    textCustom: { value: '' }
  };

  var table = new kintoneUIComponent.Table({
    columns: columns,
    data: initialData,
    defaultRowData: defaultRowData
  });
  document.body.appendChild(table.render());
})();

JS Advanced

(function () {
  // custom cell containing 2 text fields
  var customCell = function () {
    return {
      init: function ({ rowData, updateRowData }) {
        var wrapper = document.createElement('span');

        this.textfield1 = new kintoneUIComponent.Text({ value: rowData.text1.value });
        this.textfield1.on('change', function (event) {
          updateRowData({ text1: { value: event.target.value } }, false);
        });
        wrapper.appendChild(this.textfield1.render());

        this.textfield2 = new kintoneUIComponent.Text({ value: rowData.text2.value });
        this.textfield2.on('change', function (event) {
          updateRowData({ text2: { value: event.target.value } }, false);
        });
        wrapper.appendChild(this.textfield2.render());

        return wrapper;
      },
      update: function ({ rowData }) {
        if (rowData.text1) this.textfield1.setValue(rowData.text1.value);
        if (rowData.text2) this.textfield2.setValue(rowData.text2.value);
      }
    }
  };

  // initial data of a table
  var initialData = [
    {
      // initial data of text
      text: { value: 'text field' },

      // initial data of radio buttons
      fruit: {
        name: 'fruit',
        value: 'Banana',
        items: [
          { label: 'Orange', value: 'Orange', isDisabled: false },
          { label: 'Banana', value: 'Banana', isDisabled: true },
          { label: 'Lemon', value: 'Lemon', isDisabled: true },
        ]
      },

      // initial data of multiple choices
      colors: {
        value: ['red'],
        items: [
          { label: 'Red', value: 'red', isDisabled: false },
          { label: 'Green', value: 'green', isDisabled: true },
          { label: 'Blue', value: 'blue', isDisabled: true },
        ]
      },

      // initial data of checkbox
      vegetables: {
        value: ['potato', 'celery'],
        items: [
          { label: 'Potato', value: 'potato', isDisabled: false },
          { label: 'Celery', value: 'celery', isDisabled: false },
          { label: 'Carrot', value: 'carrot', isDisabled: true },
        ]
      },

      // initial data of dropdown
      toys: {
        value: 'cars',
        items: [
          { label: 'Cars', value: 'cars', isDisabled: false },
          { label: 'Robots', value: 'robots', isDisabled: false },
          { label: 'Animals', value: 'animals', isDisabled: true },
        ]
      },

      // initial data of label
      label: { text: 'Name', textColor: '#e74c3c', backgroundColor: 'yellow', isRequired: true },

      // initial data of icon button
      iconBtn: { type: 'insert', color: 'blue', size: 'small' },

      // initial data of alert
      alert: { text: 'Network error', type: 'error' },

      // initial data of custom cell containing 2 text fields
      text1: { value: 'text field 1' },
      text2: { value: 'text field 2' },
    },
  ];

  // default row data of a table, this data will be used to create new row
  var defaultRowData = {
    // default data of text
    text: { value: 'text field' },

    // default data of radio buttons
    fruit: {
      name: 'fruit',
      value: 'Banana',
      items: [
        { label: 'Orange', value: 'Orange', isDisabled: false },
        { label: 'Banana', value: 'Banana', isDisabled: true },
        { label: 'Lemon', value: 'Lemon', isDisabled: true },
      ]
    },

    // default data of multiple choices
    colors: {
      value: ['red'],
      items: [
        { label: 'Red', value: 'red', isDisabled: false },
        { label: 'Green', value: 'green', isDisabled: true },
        { label: 'Blue', value: 'blue', isDisabled: true },
      ]
    },

    // default data of checkbox
    vegetables: {
      value: ['potato', 'celery'],
      items: [
        { label: 'Potato', value: 'potato', isDisabled: false },
        { label: 'Celery', value: 'celery', isDisabled: true },
        { label: 'Carrot', value: 'carrot', isDisabled: true },
      ]
    },

    // default data of dropdown
    toys: {
      value: 'cars',
      items: [
        { label: 'Cars', value: 'cars', isDisabled: false },
        { label: 'Robots', value: 'robots', isDisabled: false },
        { label: 'Animals', value: 'animals', isDisabled: true },
      ]
    },

    // default data of label
    label: { text: 'Name', textColor: '#e74c3c', backgroundColor: 'yellow', isRequired: true },

    // default data of icon button
    iconBtn: { type: 'insert', color: 'blue', size: 'small' },

    // default data of alert
    alert: { text: 'Network error', type: 'error' },

    // default data of custom cell containing 2 text fields
    text1: { value: 'text field 1' },
    text2: { value: 'text field 2' },
  };

  // return this data to override default row data onRowAdd
  var overriddenRowData = {
    // overridden data of text
    text: { value: 'overwritten field value' },

    // overridden data of radio buttons
    fruit: {
      name: 'fruit',
      value: 'Banana',
      items: [
        { label: 'Orange', value: 'Orange', isDisabled: true },
        { label: 'Banana', value: 'Banana', isDisabled: false },
        { label: 'Lemon', value: 'Lemon', isDisabled: false },
      ]
    },

    // overridden data of multiple choices
    colors: {
      value: ['red'],
      items: [
        { label: 'Red', value: 'red', isDisabled: false },
        { label: 'Green', value: 'green', isDisabled: true },
        { label: 'Blue', value: 'blue', isDisabled: true },
      ]
    },

    // overridden data of checkbox
    vegetables: {
      value: ['potato', 'celery'],
      items: [
        { label: 'Potato', value: 'potato', isDisabled: false },
        { label: 'Celery', value: 'celery', isDisabled: true },
        { label: 'Carrot', value: 'carrot', isDisabled: false },
      ]
    },

    // overridden data of dropdown
    toys: {
      value: 'cars',
      items: [
        { label: 'Cars', value: 'cars', isDisabled: false },
        { label: 'Robots', value: 'robots', isDisabled: false },
        { label: 'Animals', value: 'animals', isDisabled: true },
      ]
    },

    // overridden data of label
    label: { text: 'Name', textColor: '#e74c3c', backgroundColor: 'yellow', isRequired: true },

    // overridden data of icon button
    iconBtn: { type: 'insert', color: 'blue', size: 'small' },

    // overridden data of alert
    alert: { text: 'Network error', type: 'error' },

    // overridden data of custom cell containing 2 text fields
    text1: { value: 'overwritten field1 value' },
    text2: { value: 'overwritten field2 value' },
  };

  var table = new kintoneUIComponent.Table({
    // initial table data
    data: initialData,

    // default row data on row add
    defaultRowData: defaultRowData,

    onRowAdd: function (e) {
      console.log('table.onAdd', e);
      /**
       * if onRowAdd does not return anything, defaultRowData will be used to create new table row
       * if below row data is returned, it will override defaultRowData to be used to create new table row
       */
      return JSON.parse(JSON.stringify(overriddenRowData));
    },

    columns: [
      { header: 'Text', cell: function () { return kintoneUIComponent.createTableCell('text', 'text') } },
      { header: 'Radio', cell: function () { return kintoneUIComponent.createTableCell('radio', 'fruit') } },
      { header: 'Multichoice', cell: function () { return kintoneUIComponent.createTableCell('multichoice', 'colors') } },
      { header: 'Checkbox', cell: function () { return kintoneUIComponent.createTableCell('checkbox', 'vegetables') } },
      { header: 'Dropdown', cell: function () { return kintoneUIComponent.createTableCell('dropdown', 'toys') } },
      { header: 'Label', cell: function () { return kintoneUIComponent.createTableCell('label', 'label') } },
      {
        header: 'Icon Button', cell: function () {
          return kintoneUIComponent.createTableCell('icon', 'iconBtn', {
            onClick: function (event) { alert('icon button clicked') }
          });
        }
      },
      { header: 'Alert', cell: function () { return kintoneUIComponent.createTableCell('alert', 'alert') } },
      { header: 'Custom cell contains 2 textfields', cell: function () { return customCell() } },
    ]
  });

  document.body.appendChild(table.render());
})();

React

import React from 'react';
import {render} from 'react-dom';
import { Table, Text} from '@kintone/kintone-ui-component';

export default class Plugin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [
        {text: 'this is a text field'}
      ],
      // default row data on row add
      defaultRowData: {text: 'default text field value'}
    }
  }

  handleRowAdd = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleRowRemove = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleCellChange = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  render() {
    const {tableData, defaultRowData} = this.state;
    const columns = [
      {
        header: 'Text',
        cell: ({ rowIndex, onCellChange }) => {
          return (
            <Text
              value={tableData[rowIndex].text}
              onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
            />
          )
        }
      },
    ];
    return (
      <Table
        columns={columns}
        data={this.state.tableData}
        defaultRowData={defaultRowData}
        onRowAdd={this.handleRowAdd}
        onRowRemove={this.handleRowRemove}
        onCellChange={this.handleCellChange}
      />
    );
  }
}
render(<Plugin />, kintone.app.getHeaderSpaceElement());

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

Javascript

var table = new kintoneUIComponent.Table({
  // initial table data
  data: [
    {text: { value: 'this is a text field' }}
  ],
  // default row data on row add
  defaultRowData: {text: { value: 'default text field value' }},
  columns: [
    {
      header: 'Text',
      cell: function() { return kintoneUIComponent.createTableCell('text', 'text') }
    },
  ]
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

React

import React from 'react';
import {render} from 'react-dom';
import { Table, Text} from '@kintone/kintone-ui-component';

export default class Plugin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [
        {text: 'this is a text field'}
      ],
      // default row data on row add
      defaultRowData: {text: 'default text field value'}
    }
  }

  handleRowAdd = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleRowRemove = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleCellChange = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  render() {
    const {tableData, defaultRowData} = this.state;
    const columns = [
      {
        header: 'Text',
        cell: ({ rowIndex, onCellChange }) => {
          return (
            <Text
              value={tableData[rowIndex].text}
              onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
            />
          )
        }
      },
    ];
    return (
      <Table
        columns={columns}
        data={this.state.tableData}
        defaultRowData={defaultRowData}
        onRowAdd={this.handleRowAdd}
        onRowRemove={this.handleRowRemove}
        onCellChange={this.handleCellChange}
      />
    );
  }
}
render(<Plugin />, kintone.app.getHeaderSpaceElement());

getValue()

Get value of all rows in the table.

Parameter

None

Returns

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

Javascript

var table = new kintoneUIComponent.Table({
  // initial table data
  data: [
    {text: { value: 'this is a text field' }}
  ],
  // default row data on row add
  defaultRowData: {text: { value: 'default text field value' }},
  columns: [
    {
      header: 'Text',
      cell: function() { return kintoneUIComponent.createTableCell('text', 'text') }
    },
  ]
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

var button = document.createElement('button');
button.innerText = 'Get value';
button.onclick = function () {
  var value = table.getValue();
  value.forEach(rowData => {
    console.log(rowData);
  });
};
body.appendChild(button);

React

import React from 'react';
import {render} from 'react-dom';
import { Table, Text, Button} from '@kintone/kintone-ui-component';

export default class Plugin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [
        {text: 'this is a text field'}
      ],
      // default row data on row add
      defaultRowData: {text: 'default text field value'}
    }
  }

  handleRowAdd = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleRowRemove = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleCellChange = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleClick = () => {
    console.log(this.state.tableData)
  }

  render() {
    const {tableData, defaultRowData} = this.state;
    const columns = [
      {
        header: 'Text',
        cell: ({ rowIndex, onCellChange }) => {
          return (
            <Text
              value={tableData[rowIndex].text}
              onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
            />
          )
        }
      },
    ];
    return (
      <div>
        <Table 
          columns={columns}
          data={this.state.tableData} 
          defaultRowData={defaultRowData}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellChange={this.handleCellChange}
          actionButtonsShown={true}
          isVisible={true}
        />
        <button onClick={this.handleClick}>Get table value</button>
      </div>
    );
  }
}
render(<Plugin />, kintone.app.getHeaderSpaceElement());

setValue(value)

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

Parameter

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

Returns

None

Sample

Javascript

var table = new kintoneUIComponent.Table({
  // initial table data
  data: [
    {text: { value: 'this is a text field' }}
  ],
  // default row data on row add
  defaultRowData: {text: { value: 'default text field value' }},
  columns: [
    {
      header: 'Text',
      cell: function() { return kintoneUIComponent.createTableCell('text', 'text') }
    },
  ]
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

var button = document.createElement('button');
button.innerText = 'Set Values';
button.onclick = function () {
  table.setValue([
    {text: { value: 'first row' }},
    {text: { value: 'second row' }},
    {text: { value: 'third row' }}
  ]);
};
body.appendChild(button);

React

import React from 'react';
import {render} from 'react-dom';
import { Table, Text, Button} from '@kintone/kintone-ui-component';

export default class Plugin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [
        {text: 'this is a text field'}
      ],
      // default row data on row add
      defaultRowData: {text: 'default text field value'}
    }
  }

  handleRowAdd = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleRowRemove = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleCellChange = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleClick = () => {
    const tableData = [
      {text: 'first row'},
      {text: 'second row'},
      {text: 'third row'}
    ]
    this.setState({tableData})
  }

  render() {
    const {tableData, defaultRowData} = this.state;
    const columns = [
      {
        header: 'Text',
        cell: ({ rowIndex, onCellChange }) => {
          return (
            <Text
              value={tableData[rowIndex].text}
              onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
            />
          )
        }
      },
    ];
    return (
      <div>
        <Table 
          columns={columns}
          data={this.state.tableData} 
          defaultRowData={defaultRowData}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellChange={this.handleCellChange}
          actionButtonsShown={true}
          isVisible={true}
        />
        <button onClick={this.handleClick}>Set table value</button>
      </div>
    );
  }
}
render(<Plugin />, kintone.app.getHeaderSpaceElement());

on(eventName, callBack)

Register callback for an 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
    • For custom cells templates, you must call updateRowData provided to init callback to trigger cellChange event.
callback function Yes callback

Returns
None

Callback data

Event Name Type Description
rowAdd event Object Callback data.
event.data Array<Object> Current values of the table.
event.rowIndex Interger Position of the new row in the table.
rowRemove event object Callback data.
event.data Array<Object> Current values of the table.
event.rowIndex Interger Position of the removed row in the table.
cellChange event object Callback data.
event.data Array<Object> Values of the table.
event.rowIndex Interger Position of the changed row in the table.
event.fieldName String name of the data property which changed.
Sample

Javascript

var table = new kintoneUIComponent.Table({
  // initial table data
  data: [
    {text: { value: 'this is a text field' }}
  ],
  // default row data on row add
  defaultRowData: {text: { value: 'default text field value' }},
  columns: [
    {
      header: 'Text',
      cell: function() { return kintoneUIComponent.createTableCell('text', 'text') }
    },
  ]
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

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

React

import React from 'react';
import {render} from 'react-dom';
import { Table, Text, Button} from '@kintone/kintone-ui-component';

export default class Plugin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [
        {text: 'this is a text field'}
      ],
      // default row data on row add
      defaultRowData: {text: 'default text field value'}
    }
  }

  handleRowAdd = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleRowRemove = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleCellChange = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  render() {
    const {tableData, defaultRowData} = this.state;
    const columns = [
      {
        header: 'Text',
        cell: ({ rowIndex, onCellChange }) => {
          return (
            <Text
              value={tableData[rowIndex].text}
              onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
            />
          )
        }
      },
    ];
    return (
      <Table
        columns={columns}
        data={this.state.tableData}
        defaultRowData={defaultRowData}
        onRowAdd={this.handleRowAdd}
        onRowRemove={this.handleRowRemove}
        onCellChange={this.handleCellChange}
        actionButtonsShown={true}
        isVisible={true}
      />
    );
  }
}
render(<Plugin />, kintone.app.getHeaderSpaceElement());

showActionButtons()

Display table action buttons.

Parameter

None

Returns

None

Sample

Javascript

var table = new kintoneUIComponent.Table({
  // initial table data
  data: [
    {text: { value: 'this is a text field' }}
  ],
  // default row data on row add
  defaultRowData: {text: { value: 'default text field value' }},
  columns: [
    {
      header: 'Text',
      cell: function() { return kintoneUIComponent.createTableCell('text', 'text') }
    },
  ],
  actionButtonsShown: false
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

var button = document.createElement('button');
button.innerText = 'Show action buttons';
button.onclick = function () {
  table.showActionButtons();
};
body.appendChild(button);

React

import React from 'react';
import {render} from 'react-dom';
import { Table, Text, Button} from '@kintone/kintone-ui-component';

export default class Plugin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [
        {text: 'this is a text field'}
      ],
      // default row data on row add
      defaultRowData: {text: 'default text field value'},
      actionButtonsShown: false
    };
    }

  handleRowAdd = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleRowRemove = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleCellChange = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleClick = () => {
    this.setState({actionButtonsShown: true})
  }

  render() {
    const {tableData, actionButtonsShown, defaultRowData} = this.state;
    const columns = [
      {
        header: 'Text',
        cell: ({ rowIndex, onCellChange }) => {
          return (
            <Text
              value={tableData[rowIndex].text}
              onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
            />
          )
        }
      },
    ];
    return (
      <div>
        <Table
          columns={columns}
          data={this.state.tableData}
          defaultRowData={defaultRowData}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellChange={this.handleCellChange}
          actionButtonsShown={actionButtonsShown}
          isVisible={true}
        />
        <button onClick={this.handleClick}>Show action buttons</button>
      </div>
    );
  }
}
render(<Plugin />, kintone.app.getHeaderSpaceElement());

hideActionButtons()

Hide table action buttons.

Parameter

None

Returns

None

Sample

Javascript

var table = new kintoneUIComponent.Table({
  // initial table data
  data: [
    {text: { value: 'this is a text field' }}
  ],
  // default row data on row add
  defaultRowData: {text: { value: 'default text field value' }},
  columns: [
    {
      header: 'Text',
      cell: function() { return kintoneUIComponent.createTableCell('text', 'text') }
    },
  ],
  actionButtonsShown: true,
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

var button = document.createElement('button');
button.innerText = 'Hide action buttons';
button.onclick = function () {
  table.hideActionButtons();
};
body.appendChild(button);

React

import React from 'react';
import {render} from 'react-dom';
import { Table, Text, Button} from '@kintone/kintone-ui-component';

export default class Plugin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [
        {text: 'this is a text field'}
      ],
      // default row data on row add
      defaultRowData: {text: 'default text field value'},
      actionButtonsShown: true
    };
  }

  handleRowAdd = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleRowRemove = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleCellChange = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleClick = () => {
    this.setState({actionButtonsShown: false});
  }

  render() {
    const {tableData, actionButtonsShown, defaultRowData} = this.state;
    const columns = [
      {
        header: 'Text',
        cell: ({ rowIndex, onCellChange }) => {
          return (
            <Text
              value={tableData[rowIndex].text}
              onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
            />
          )
        }
      },
    ];
    return (
      <div>
        <Table
          columns={columns}
          data={this.state.tableData}
          defaultRowData={defaultRowData}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellChange={this.handleCellChange}
          actionButtonsShown={actionButtonsShown}
          isVisible={true}
        />
        <button onClick={this.handleClick}>Hide action buttons</button>
      </div>
    );
  }
}
render(<Plugin />, kintone.app.getHeaderSpaceElement());

updateRowData(rowIndex, data, rerender, trigger)

Update data of row at rowIndex with new data

Parameter

Name Type Required Description
rowIndex Integer Yes Position of the row which will be updated in the table.
data Object Yes Data object for the row.
rerender Boolean No If true, will re-render table cells according to new data.
Default: true
trigger Boolean No If true, will trigger onCellChange event.
Default: true

Returns
None

Sample

Javascript

var table = new kintoneUIComponent.Table({
  // initial table data
  data: [
      {
        text: { value: 'this is a text field1' },
        checkbox: {
          items: [
            { label: 'Orange', value: 'Orange', isDisabled: false },
            { label: 'Banana', value: 'Banana', isDisabled: true },
            { label: 'Lemon', value: 'Lemon', isDisabled: true },
  ],
          value: ['Orange', 'Banana']
        },
      }
    ],
  // default row data on row add
    defaultRowData: {
      text: { value: 'default text field value' },
      checkbox: {
        items: [
          { label: 'Orange', value: 'Orange', isDisabled: false },
          { label: 'Banana', value: 'Banana', isDisabled: true },
          { label: 'Lemon', value: 'Lemon', isDisabled: true },
        ],
        value: ['Orange', 'Banana']
      },
    },
  columns: [
    {
      header: 'Text',
        cell: function () {
          return kintoneUIComponent.createTableCell('text', 'text', {
            onChange: function ({ data, rowIndex }) {
              data[rowIndex].checkbox.value = ['Lemon'];
              table.updateRowData(rowIndex, data[rowIndex]);
            }
          })
        }
    },
      {
        header: 'Checkbox',
        cell: function () { return kintoneUIComponent.createTableCell('checkbox', 'checkbox') }
      }
    ]
});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(table.render());

React

import React from 'react';
import {render} from 'react-dom';
import { Table, Text, Button} from '@kintone/kintone-ui-component';

export default class Plugin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [
        {text: 'this is a text field'}
      ],
      // default row data on row add
      defaultRowData: {text: 'default text field value'}
    };
  }

  handleRowAdd = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleRowRemove = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleCellChange = ({data}) => {
    this.setState({ tableData: data })
    console.log('data: ', data);
  }

  handleClick = () => {
    const {tableData} = this.state;
    tableData[0].text = 'Updated text field value';
    this.setState({tableData});
  }

  render() {
    const {tableData, defaultRowData} = this.state;
    const columns = [
      {
        header: 'Text',
        cell: ({ rowIndex, onCellChange }) => {
          return (
            <Text
              value={tableData[rowIndex].text}
              onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
            />
          )
        }
      },
    ];
    return (
      <div>
        <Table
          columns={columns}
          data={this.state.tableData}
          defaultRowData={defaultRowData}
          onRowAdd={this.handleRowAdd}
          onRowRemove={this.handleRowRemove}
          onCellChange={this.handleCellChange}
          actionButtonsShown={true}
          isVisible={true}
        />
        <button onClick={this.handleClick}>Update row data</button>
      </div>
    );
  }
}
render(<Plugin />, kintone.app.getHeaderSpaceElement());

createTableCell(type, dataFieldName, props)

Note

Parameter

Name Type Required Description
type String Yes Type of built-in cell.
Can be one of the following types:
  • 'text'
  • 'dropdown'
  • 'checkbox'
  • 'multichoice'
  • 'radio'
  • 'label'
  • 'icon'
  • 'alert'
dataFieldName String Yes Name of the data field associated with the table cell.
props Object No Additional props to pass to component.
It can be used to define custom event handler for component.
You should specify this arg like following object.
  • {'on+eventName': callback }
  • Returns
    TableCell

    Sample

    Javascript

    var table = new kintoneUIComponent.Table({
      // initial table data
      data: [
        {text: { value: 'this is a text field' }}
      ],
      // default row data on row add
      defaultRowData: {text: { value: 'default text field value' }},
      columns: [
        {
          header: 'Text',
          cell: function() { return kintoneUIComponent.createTableCell(
            'text',
            'text',
            {onClick: function(event) {
              alert('text box was clicked');
              console.log(event);
            }}
          )}
        },
      ]
    });
    var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(table.render());
    

    React

    import React from 'react';
    import {render} from 'react-dom';
    import { Table, Text, Button} from '@kintone/kintone-ui-component';
    
    export default class Plugin extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          tableData: [
            {text: 'this is a text field'}
          ],
          // default row data on row add
          defaultRowData: {text: 'default text field value'}
        };
      }
    
      handleRowAdd = ({data}) => {
        this.setState({ tableData: data })
        console.log('data: ', data);
      }
    
      handleRowRemove = ({data}) => {
        this.setState({ tableData: data })
        console.log('data: ', data);
      }
    
      handleCellChange = ({data}) => {
        this.setState({ tableData: data })
        console.log('data: ', data);
      }
    
      render() {
        const {tableData, defaultRowData} = this.state;
        const columns = [
          {
            header: 'Text',
            cell: ({ rowIndex, onCellChange }) => {
              return (
                <Text
                  value={tableData[rowIndex].text}
                  onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
                />
              )
            }
          },
        ];
        return (
            <Table
              columns={columns}
              data={this.state.tableData}
              defaultRowData={defaultRowData}
              onRowAdd={this.handleRowAdd}
              onRowRemove={this.handleRowRemove}
              onCellChange={this.handleCellChange}
              actionButtonsShown={true}
              isVisible={true}
            />
        );
      }
    }
    render(<Plugin />, kintone.app.getHeaderSpaceElement());
    

    show()

    Display the table

    Parameter

    None

    Returns

    None

    Sample

    Javascript

    var table = new kintoneUIComponent.Table({
      // initial table data
      data: [
        {text: { value: 'this is a text field' }}
      ],
      // default row data on row add
      defaultRowData: {text: { value: 'default text field value' }},
      columns: [
        {
          header: 'Text',
          cell: function() { return kintoneUIComponent.createTableCell('text', 'text') }
        },
      ],
      isVisible: false
    });
    var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(table.render());
    
    var button = document.createElement('button');
    button.innerText = 'Show table';
    button.onclick = function () {
      table.show();
    };
    body.appendChild(button);
    

    React

    import React from 'react';
    import {render} from 'react-dom';
    import { Table, Text, Button} from '@kintone/kintone-ui-component';
    
    export default class Plugin extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          tableData: [
            {text: 'this is a text field'}
          ],
          // default row data on row add
          defaultRowData: {text: 'default text field value'},
          isVisible: false
        }
      }
    
      handleRowAdd = ({data}) => {
        this.setState({ tableData: data })
        console.log('data: ', data);
      }
    
      handleRowRemove = ({data}) => {
        this.setState({ tableData: data })
        console.log('data: ', data);
      }
    
      handleCellChange = ({data}) => {
        this.setState({ tableData: data })
        console.log('data: ', data);
      }
    
      handleClick = () => {
        this.setState({isVisible: true});
      }
    
      render() {
        const {tableData, isVisible, defaultRowData} = this.state;
        const columns = [
          {
            header: 'Text',
            cell: ({ rowIndex, onCellChange }) => {
              return (
                <Text
                  value={tableData[rowIndex].text}
                  onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
                />
              )
            }
          },
        ];
        return (
          <div>
            <Table
              columns={columns}
              data={this.state.tableData}
              defaultRowData={defaultRowData}
              onRowAdd={this.handleRowAdd}
              onRowRemove={this.handleRowRemove}
              onCellChange={this.handleCellChange}
              actionButtonsShown={true}
              isVisible={isVisible}
            />
            <button onClick={this.handleClick}>Show table</button>
          </div>
        );
      }
    }
    render(<Plugin />, kintone.app.getHeaderSpaceElement());
    

    hide()

    Hide the table

    Parameter

    None

    Returns

    None

    Sample

    Javascript

    var table = new kintoneUIComponent.Table({
      // initial table data
      data: [
        {text: { value: 'this is a text field' }}
      ],
      // default row data on row add
      defaultRowData: {text: { value: 'default text field value' }},
      columns: [
        {
          header: 'Text',
          cell: function() { return kintoneUIComponent.createTableCell('text', 'text') }
        },
      ],
      isVisible: true
    });
    var body = document.getElementsByTagName("BODY")[0];
    body.appendChild(table.render());
    
    var button = document.createElement('button');
    button.innerText = 'Hide table';
    button.onclick = function () {
      table.hide();
    };
    body.appendChild(button);
    

    React

    import React from 'react';
    import {render} from 'react-dom';
    import { Table, Text, Button} from '@kintone/kintone-ui-component';
    
    export default class Plugin extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          tableData: [
            {text: 'this is a text field'}
          ],
          // default row data on row add
          defaultRowData: {text: 'default text field value'},
          isVisible: true
        };
      }
    
      handleRowAdd = ({data}) => {
        this.setState({ tableData: data })
        console.log('data: ', data);
      }
    
      handleRowRemove = ({data}) => {
        this.setState({ tableData: data })
        console.log('data: ', data);
      }
    
      handleCellChange = ({data}) => {
        this.setState({ tableData: data })
        console.log('data: ', data);
      }
    
      handleClick = () => {
        this.setState({isVisible: false})
      }
    
      render() {
        const {tableData, isVisible, defaultRowData} = this.state;
        const columns = [
          {
            header: 'Text',
            cell: ({ rowIndex, onCellChange }) => {
              return (
                <Text
                  value={tableData[rowIndex].text}
                  onChange={newValue => onCellChange(newValue, tableData, rowIndex, 'text')}
                />
              )
            }
          },
        ];
        return (
          <div>
          <Table
            columns={columns}
            data={this.state.tableData}
            defaultRowData={defaultRowData}
            onRowAdd={this.handleRowAdd}
            onRowRemove={this.handleRowRemove}
            onCellChange={this.handleCellChange}
            actionButtonsShown={true}
            isVisible={isVisible}
            />
          <button onClick={this.handleClick}>Hide table</button>
          </div>
        );
      }
    }
    render(<Plugin />, kintone.app.getHeaderSpaceElement());
    

    Model

    TableCell

    Note

    Name Type Required Description
    init Function Yes Cell initialization callback.
    Used to initialize DOM of a cell
    update Function Yes Cell update callback.
    Used to update DOM of a cell.
    Sample

    Javascript

    // create built-in cell component
    var textBuiltInCell = function () {
      return kintoneUIComponent.createTableCell('text', 'textBuiltIn');
    };
    
    // create custom cell component
    var textCustomCell = function() {
      return {
        init: function({rowData, updateRowData}) {
            var text = document.createElement('input');
          text.onchange = function(event) {
            updateRowData({textCustom: {value: event.target.value}}, false);
          };
    
          this.textCustom = text;
          return text;
        },
        update: function({ rowData }) {
          this.textCustom.value = rowData.textCustom.value;
        }
      }
    };
    
    var columns = [
      { header: 'Built-in cell', cell: function() { return textBuiltInCell() }},
      { header: 'Custom cell', cell: function() { return textCustomCell() }}
    ];
    
    var initialData = [
        {
        textBuiltIn: { value: 'built-in' },
        textCustom: { value: 'custom' }
        }
    ];
    
    var defaultRowData = {
      textBuiltIn: { value: '' },
      textCustom: { value: '' }
    };
    
    var table = new kintoneUIComponent.Table({
      columns: columns,
      data: initialData,
      defaultRowData: defaultRowData
    });
    document.body.appendChild(table.render());