Table

<Table> は表を描画するための要素です。

  • XML

<Table items="${items}" rowHeight="5" minRows="5" borderThickness="0.1">
  <TableColumn width="auto">
    <TableColumnHeader>
      <Text>column0 header</Text>
    </TableColumnHeader>
    <TableColumnTemplate>
      <Text>${column0}</Text>
    </TableColumnTemplate>
    <TableColumnFooter>
      <Text>column0 footer</Text>
    </TableColumnFooter>
  </TableColumn>
  <TableColumn width="auto">
    <TableColumnHeader>
      <Text>column1 header</Text>
    </TableColumnHeader>
    <TableColumnTemplate>
      <Text>${column1}</Text>
    </TableColumnTemplate>
    <TableColumnFooter>
      <Text>column1 footer</Text>
    </TableColumnFooter>
  </TableColumn>
</Table>
  • バインディングデータ

{
  "items":[
    {
      "column0":"col0 row0",
      "column1":"col1 row0"
    },
    {
      "column0":"col0 row1",
      "column1":"col1 row1"
    }
  ]
}
描画例

プロパティ

hidden

要素を非表示にするプロパティです。

このプロパティは Boolean を指定します。 規定値は false です。

breakInside

要素内での改行の制御方法を決定するプロパティです。

このプロパティは auto または avoid を指定します。 規定値は auto です。

auto

改ページを要素内でも行う設定です

avoid

改ページを要素内で行うことを避ける設定です。

x

StackLayout専用

要素の横位置を決定するプロパティです。

このプロパティは 実数 を指定します。 規定値は 0.0 です。 単位はミリメートルです。

y

StackLayout専用

要素の縦位置を決定するプロパティです。

このプロパティは 実数 を指定します。 規定値は 0.0 です。 単位はミリメートルです。

origin

StackLayout専用

要素の原点位置を決定するプロパティです。

値は以下のキーワードから選択します。 規定値は topLeft です。

topLeft

原点を左上に設定します。

bottomLeft

原点を左下に設定します。

topRight

原点を右上に設定します。

bottomRight

原点を右下に設定します。

width

StackLayout専用

必須

要素の横幅を設定します。

このプロパティは 0以上の実数 を指定します。 単位はミリメートルです。

items

行ごとのデータが入った配列を設定します。

json の配列を指定します。詳細はページ冒頭の描画例をご覧ください。

rowHeight

行の高さを設定します。

値は 以下から選択して指定します。 規定値は auto です。 単位はミリメートルです。

  • 0以上の実数

  • n:m (n,mは0以上の実数)

    • 内部要素の大きさに応じて最小と最大の範囲で高さを調整します。 n は最小、 m は最大です。最大高さに収まりきらない場合、収まらなかった部分は描画されません

  • auto

    • セルの中の要素が全て描画できる高さまで拡張します

minRows

表示する行数の最低行数を設定します。 与えられたitemsの長さが最低行数に見たない場合、残りの行を空行で埋めます。 指定可能な値は 0以上の整数 です。

規定値は 0 です。

pageBreakCondition

<Table> の1行ごとに改ページを行うかどうかを設定します。 <LayoutBody> の直下の <Table> でのみ使用可能です。 それ以外の場所で指定した場合は無視されます。

指定可能な値は Boolean で、規定値は false です。

headerBackgroundColor

表のヘッダーの背景色を設定します。

このプロパティには Color を設定します。 規定値は transparent です。

footerBackgroundColor

表のヘッダーの背景色を設定します。

このプロパティには Color を設定します。 規定値は transparent です。

borderThickness

罫線の太さを設定します。

このプロパティに設定できる値は BorderThickness です。 規定値は regular です。

borderColor

罫線の色を設定します。

このプロパティに設定できる値は Color です。 規定値は grayscale(0) です。

borderStyle

罫線の種類を設定します。

このプロパティに設定できる値は BorderStyle です。 規定値は solid です。

outerBorderThickness

外枠の罫線の太さを設定します。

このプロパティに設定できる値は BorderThickness または unspecified です。 規定値は unspecified です。

このプロパティは、1個から4個の値を使って指定することができます。 2個以上の値を指定する場合、 a b c d のようにスペース区切り形式で記述します。

1個の値を指定

上下左右の全辺 に同じ値を設定します。

2個の値を指定

1つ目の値を 上下、2つ目の値を 左右 に設定します。

3個の値を指定

1つ目の値を 、2つ目の値を 左右、3つ目の値を に設定します。

4個の値を指定

1つ目の値を 、2つ目の値を 、3つ目の値を 、4つ目の値を に設定します。

outerBorderTopThickness

外枠上側の罫線の太さを設定します。

このプロパティに設定できる値は BorderThickness または unspecified です。 規定値は unspecified です。

outerBorderBottomThickness

外枠下側の罫線の太さを設定します。

このプロパティに設定できる値は BorderThickness または unspecified です。 規定値は unspecified です。

outerBorderLeftThickness

外枠左側の罫線の太さを設定します。

このプロパティに設定できる値は BorderThickness または unspecified です。 規定値は unspecified です。

outerBorderRightThickness

外枠右側の罫線の太さを設定します。

このプロパティに設定できる値は BorderThickness または unspecified です。 規定値は unspecified です。

outerBorderColor

外枠の罫線の色を設定します。

このプロパティに設定できる値は Color または unspecified です。 規定値は unspecified です。

このプロパティは、1個から4個の値を使って指定することができます。 2個以上の値を指定する場合、 a b c d のようにスペース区切り形式で記述します。

1個の値を指定

上下左右の全辺 に同じ値を設定します。

2個の値を指定

1つ目の値を 上下、2つ目の値を 左右 に設定します。

3個の値を指定

1つ目の値を 、2つ目の値を 左右、3つ目の値を に設定します。

4個の値を指定

1つ目の値を 、2つ目の値を 、3つ目の値を 、4つ目の値を に設定します。

outerBorderTopColor

外枠上側の罫線の色を設定します。

このプロパティに設定できる値は Color または unspecified です。 規定値は unspecified です。

outerBorderBottomColor

外枠下側の罫線の色を設定します。

このプロパティに設定できる値は Color または unspecified です。 規定値は unspecified です。

outerBorderLeftColor

外枠左側の罫線の色を設定します。

このプロパティに設定できる値は Color または unspecified です。 規定値は unspecified です。

outerBorderRightColor

外枠右側の罫線の色を設定します。

このプロパティに設定できる値は Color または unspecified です。 規定値は unspecified です。

outerBorderStyle

外枠の罫線の種類を設定します。

このプロパティに設定できる値は BorderStyle または unspecified です。 規定値は unspecified です。

このプロパティは、1個から4個の値を使って指定することができます。 2個以上の値を指定する場合、 a b c d のようにスペース区切り形式で記述します。

1個の値を指定

上下左右の全辺 に同じ値を設定します。

2個の値を指定

1つ目の値を 上下、2つ目の値を 左右 に設定します。

3個の値を指定

1つ目の値を 、2つ目の値を 左右、3つ目の値を に設定します。

4個の値を指定

1つ目の値を 、2つ目の値を 、3つ目の値を 、4つ目の値を に設定します。

outerBorderTopStyle

外枠上側の罫線の種類を設定します。

このプロパティに設定できる値は BorderStyle または unspecified です。 規定値は unspecified です。

outerBorderBottomStyle

外枠下側の罫線の種類を設定します。

このプロパティに設定できる値は BorderStyle または unspecified です。 規定値は unspecified です。

outerBorderLeftStyle

外枠左側の罫線の種類を設定します。

このプロパティに設定できる値は BorderStyle または unspecified です。 規定値は unspecified です。

outerBorderRightStyle

外枠右側の罫線の種類を設定します。

このプロパティに設定できる値は BorderStyle または unspecified です。 規定値は unspecified です。

foreach

この要素を繰り返し描画します。

このプロパティには Array を指定します。