メインコンテンツまでスキップ
バージョン: 1.17.1

ReadOnlyTable

Overview

ReadOnlyTable は読み取り専用のテーブルを表示します。


Specification

Property

使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。

NameTypeDefaultDescriptionRemark
classNamestring""コンポーネントの class 名
idstring""コンポーネントの id 名
labelstring""コンポーネントの説明ラベル未指定、あるいは空文字の場合、label は表示されない
rowsPerPagenumber5ページごとの行数小数点以下を指定した場合は、最も近い整数に丸められる
rowsPerPage が正の整数以外の場合、エラーを出力する
paginationbooleantrueページネーションの表示/非表示設定false を指定した場合、ページネーションは非表示になり全ての行が表示される
true を指定した場合、ページネーションは表示され rowsPerPage に指定された行数のみがページごとに表示される
visiblebooleantrueコンポーネントの表示/非表示設定
columnsArray<Column>[]コンポーネントの列データcolumns が配列以外の場合、エラーを出力する
data *1Array<object>[]コンポーネントの行データdata が配列以外の場合、エラーを出力する
注意

*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。

Column

NameTypeDefaultDescriptionRemark
fieldstring""列のキー項目data オブジェクトのキー項目になる
そのキーに関連づけられた値が列に表示される
titlestring""列のヘッダー名
visiblebooleantrue列の表示/非表示設定

Constructor

ReadOnlyTable(options)
使用できるコンストラクタの一覧です。

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}コンポーネントのプロパティを含むオブジェクト

Custom CSS

ヒント

Custom CSS をご確認ください。

コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。

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
  • このプロパティを使用すると、インデックス値に基づいて特定のテーブル列の幅を設定できる
  • 例えば、--kuc-readonly-table-header-0-width を使用して、最初のカラムの幅を設定できる
  • インデックス値は 0 から始まることに注意
  • --kuc-readonly-table-header-width
  • このプロパティを使用すると、テーブル内のすべての列の幅を設定できる
  • 単一のカラムに対して特定の幅を設定する必要がある場合は、--kuc-readonly-table-header-{index}-width プロパティを利用する
  • 伸縮する要素を子コンポーネントとして追加したい場合は、--kuc-readonly-table-header-width: auto を設定することで、この動作を維持できる場合がある

  • Sample Code

    ヒント

    導入と実装方法 をご確認ください。

    全てのパラメータを指定した場合のサンプルコードです。

    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);