Skip to main content
Version: 1.17.1

ReadOnlyTable

Overview​

The ReadOnlyTable component allows the user to display a read-only mode 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
rowsPerPagenumber5Number of table rows per pageRound off to the nearest whole number when the decimal point is set
Will result an error if the value of rowsPerPage is not a positive integer
paginationbooleantrueShow/Hide the paginationIf setting false, pagination is hidden and all rows are displayed
If setting true, pagination is displayed and only the number of rows set in rowsPerPage are displayed
visiblebooleantrueShow/Hide the component
columnsArray<Column>[]Column data of the componentWill result an error if the value of columns is not an array
data *1Array<object>[]Row data of the componentWill result an error if the value of data is not an array
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.

Column​

NameTypeDefaultDescriptionRemark
fieldstring""Key of the columnIt represents the key of the data object
The value associated with that key will be rendered in the column
titlestring""Header name of the column
visiblebooleantrueShow/Hide the column

Constructor​

ReadOnlyTable(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-readonly-table-header-background-color
--kuc-readonly-table-header-color
--kuc-readonly-table-header-font-size
--kuc-readonly-table-header-height
--kuc-readonly-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-readonly-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-readonly-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-readonly-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-readonly-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 readOnlyTable = new Kuc.ReadOnlyTable({
      label: 'ReadOnlyTable',
      columns: [
        {
          title: 'Number',
          field: 'index'
        },
        {
          title: 'City',
          field: 'name'
        },
        {
          title: 'Country',
          field: 'country'
        },
        {
          title: 'Population',
          field: 'population'
        },
        {
          title: 'Coordinates',
          field: 'coordinates'
        },
        {
          title: 'Link',
          field: 'link'
        }
      ],
      data: [
        {
          index: '1',
          name: 'HoChiMinh',
          country: 'Vietnam',
          population: '8,371,000',
          coordinates: '10.762622, 106.660172',
          link: '<a href="https://en.wikipedia.org/wiki/Ho_Chi_Minh_City" target="_blank">Vietnam: Ho Chi Minh City</a>'
        },
        {
          index: '2',
          name: 'Tokyo',
          country: 'Japan',
          population: '14,000,000',
          coordinates: '35.689487, 139.691711',
          link: '<a href="https://en.wikipedia.org/wiki/Tokyo" target="_blank">Japan: Tokyo</a>'
        },
        {
          index: '3',
          name: 'New York',
          country: 'USA',
          population: '8,400,000',
          coordinates: '40.712776, -74.005974',
          link: '<a href="https://en.wikipedia.org/wiki/New_York_City" target="_blank">USA: New York City</a>'
        }
      ],
      className: 'sample-class',
      id: 'sample-id',
      visible: true,
      pagination: true,
      rowsPerPage: 3
    });
    space.appendChild(readOnlyTable);
    Last updated on