Skip to main content
Version: 1.17.1

Table

Overview

The Table component allows the user to display an editable table.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
idstring""Component id name
labelstring""Label for the componentLabel is not displayed if unspecified or empty
actionButtonboolean/ActionButtontrueShow/Hide the add/remove row buttonIf set to true/false, the add/remove buttons are shown/hidden together
If set to the ActionButton object, the add/remove buttons can be shown/hidden separately
headerVisiblebooleantrueShow/Hide the header
visiblebooleantrueShow/Hide the component
columnsArray<Column>[]Column data of the componentWill result an error if the value of columns is not an array
dataArray<object>[]Row data of the componentWill result an error if the value of data is not an array

ActionButton

NameTypeDefaultDescriptionRemark
addbooleantrueShow/Hide the add row button
removebooleantrueShow/Hide the remove row button

Column

NameTypeDefaultDescriptionRemark
fieldstringnullKey of the column
*Required and Unique
It represents the key of the data object
The value associated with that key will be rendered in the column
Will result an error if the field is duplicated in columns or not specified
title *1string/HTMLElement""Header name of the columnIf a string with HTML is set, it will be automatically converted to HTML and displayed as it is
requiredIconbooleanfalseShow/Hide the required icon
visiblebooleantrueShow/Hide the column
render *1function
function(cellData, rowData, rowIndex) {}
nullRenderer of the cellThe return value should be a DOM
Following 3 params provide more information for the function
  • cellData is the data of the current cell rendered
  • rowData is the data of the current row rendered
  • rowIndex is the index number of the current row rendered

If render function is not specified, the cell will display with the default text
caution

*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.

Event

Here is a list of events that can be specified:

NameTypeDescriptionRemark
changefunctionEvent handler when the table data has been changedIt will pass the event object as the argument
You can receive the following values in event.detail
  • change-cell (Triggered if the data in cell is changed)
    • event.detail.type: "change-cell"
    • event.detail.rowIndex: Index number of the changed row
    • event.detail.data: All data of table after change
    • event.detail.oldData: All data of table before change
    • event.detail.field: Changed column's field
  • add-row (Triggered if add row button is clicked)
    • event.detail.type: "add-row"
    • event.detail.rowIndex: Index number of the added row
    • event.detail.data: All data of table after change
    • event.detail.oldData: All data of table before change
  • remove-row (Triggered if remove row button is clicked)
    • event.detail.type: "remove-row"
    • event.detail.rowIndex: Index number of the removed row
    • event.detail.data: All data of table after change
    • event.detail.oldData: All data of table before change

Constructor

Table(options)
Here is a list of available constructors:

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Custom CSS

tip

Please check Custom CSS feature guide at first.

Here is a list of properties that can be used for modifying component style:

Property

NameDescription
--kuc-table-header-background-color
--kuc-table-header-color
--kuc-table-header-font-size
--kuc-table-header-height
--kuc-table-header-{index}-width
  • This property allows you to set the width of certain table columns based on their index values
  • For example, you can use --kuc-table-header-0-width to set the width of the first column
  • Note that the index values start from 0, where 0 corresponds to the first column
  • --kuc-table-header-width
  • This property is used to set the width for all columns in a table, it defines a uniform width for every column
  • If you need to set a specific width for a single column, you can use --kuc-table-header-{index}-width property
  • If you want to add the element that will expand/contract as a child component, you may be able to preserve this behavior by setting --kuc-table-header-width: auto

  • Sample Code

    tip

    Please check the package installation method first.

    Here is a sample code when all parameters are specified:

    const Kuc = Kucs['1.x.x'];

    const space = kintone.app.record.getSpaceElement('space');

    const renderAge = dataCell => {
    const spanElement = document.createElement('span');
    spanElement.innerText = `The age is ${dataCell}`;
    return spanElement;
    };

    const renderName = cellData => {
    const dropdown = new Kuc.Dropdown({
    items: [
    { label: 'John Brown', value: 'john' },
    { label: 'Steven Gerrard', value: 'steven' }
    ],
    value: cellData
    });
    return dropdown;
    };

    const table = new Kuc.Table({
    label: 'Table',
    columns: [
    {
    title: new Kuc.Tooltip({
    title: 'Please select a user',
    container: 'Name'
    }),
    field: 'name',
    render: renderName
    },
    {
    title: 'Address',
    field: 'address'
    },
    {
    title: 'Age',
    field: 'age',
    render: renderAge
    }
    ],
    data: [
    {
    name: 'john',
    age: 32,
    address: 'New York No. 1 Lake Park'
    },
    {
    name: 'steven',
    age: 22,
    address: 'New York No. 2 Lake Park'
    }
    ],
    className: 'options-class',
    id: 'options-id',
    actionButton: true,
    headerVisible: true,
    visible: true
    });

    space.appendChild(table);

    table.addEventListener('change', event => {
    console.log(event);
    });