apex:dataTable
一連のデータを反復処理することで定義される HTML テーブルです。1 行あたり 1 つのデータ項目に関する情報を表示します。<apex:dataTable> の本文には、データの各項目で表示する情報の種類を指定する 1 つ以上の列コンポーネントが含まれます。データセットには最大 1,000 個の項目を含めることができます。
Salesforce.com API バージョン 20.0 以降が稼動している Visualforce ページでは、このコンポーネントに <apex:repeat> タグを含めて列を生成できます。
<apex:panelGrid> も参照してください。
このコンポーネントでは、「html-」プレフィックスを使用した HTML パススルー属性がサポートされています。パススルー属性は、生成されたテーブルの <tbody> タグに適用されます。
例
1<!-- For this example to render properly, you must associate the Visualforce page
2
3with a valid account record in the URL.
4
5For example, if 001D000000IRt53 is the account ID, the resulting URL should be:
6
7https://Salesforce_instance/apex/myPage?id=001D000000IRt53
8
9See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->
10
11
12
13<!-- Page: -->
14
15<apex:page controller="dataTableCon" id="thePage">
16
17 <apex:dataTable value="{!accounts}" var="account" id="theTable" rowClasses="odd,even"
18
19 styleClass="tableClass">
20
21 <apex:facet name="caption">table caption</apex:facet>
22
23 <apex:facet name="header">table header</apex:facet>
24
25 <apex:facet name="footer">table footer</apex:facet>
26
27 <apex:column>
28
29 <apex:facet name="header">Name</apex:facet>
30
31 <apex:facet name="footer">column footer</apex:facet>
32
33 <apex:outputText value="{!account.name}"/>
34
35 </apex:column>
36
37 <apex:column>
38
39 <apex:facet name="header">Owner</apex:facet>
40
41 <apex:facet name="footer">column footer</apex:facet>
42
43 <apex:outputText value="{!account.owner.name}"/>
44
45 </apex:column>
46
47 </apex:dataTable>
48
49</apex:page>
50
51
52
53/*** Controller: ***/
54
55
56
57public class dataTableCon {
58
59
60
61 List<Account> accounts;
62
63
64
65 public List<Account> getAccounts() {
66
67 if(accounts == null) accounts = [select name, owner.name from account limit 10];
68
69 return accounts;
70
71 }
72
73}上述の例では次の HTML を表示します。
1<table class="tableClass" id="thePage:theTable" border="0" cellpadding="0" cellspacing="0">
2
3 <colgroup span="2"></colgroup>
4
5 <caption>table caption</caption>
6
7 <thead>
8
9 <tr>
10
11 <td colspan="2" scope="colgroup">table header</td>
12
13 </tr>
14
15 <tr>
16
17 <td scope="col">Name</td>
18
19 <td scope="col">Owner</td>
20
21 </tr>
22
23 </thead>
24
25 <tfoot>
26
27 <tr>
28
29 <td scope="col">column footer</td>
30
31 <td scope="col">column footer</td>
32
33 </tr>
34
35 <tr>
36
37 <td colspan="2" scope="colgroup">table footer</td>
38
39 </tr>
40
41 </tfoot>
42
43 <tbody>
44
45 <tr class="odd">
46
47 <td>Bass Manufacturing</td>
48
49 <td>Doug Chapman</td>
50
51 </tr>
52
53 <tr class="even">
54
55 <td>Ball Corp</td>
56
57 <td>Alan Ball</td>
58
59 </tr>
60
61 <tr class="odd">
62
63 <td>Wessler Co.</td>
64
65 <td>Jill Wessler</td>
66
67 </tr>
68
69 </tbody>
70
71</table>属性
| 属性名 | 属性型 | 説明 | 必須項目 | API バージョン | 通用範囲 |
|---|---|---|---|---|---|
| align | String | 表示される HTML テーブルのページに対する位置。使用できる値には、「left」、「center」、または「right」があります。指定されていない状態にすると、この値はデフォルトの「left」に設定されます。 | 10.0 | グローバル | |
| bgcolor | String | 表示される HTML テーブルの背景色。 | 10.0 | グローバル | |
| border | String | 表示される HTML テーブルの周囲のフレームの幅 (ピクセル単位)。 | 10.0 | グローバル | |
| captionClass | String | caption facet が指定されている場合、表示される HTML テーブルのキャプションの表示に使用されるスタイルクラス。この属性は、主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 | 10.0 | グローバル | |
| captionStyle | String | caption facet が指定されている場合、表示される HTML テーブルのキャプションの表示に使用されるスタイル。この属性は、主に、インライン CSS スタイルを追加するために使用されます。 | 10.0 | グローバル | |
| cellpadding | String | 各テーブルセルの境界線とそのコンテンツ間のスペース。この属性の値がピクセル単位の長さである場合、4 辺の余白のすべてでコンテンツからの距離がこの値に設定されます。属性の値がパーセント単位の長さである場合は、上下の余白は利用可能な縦方向のスペースのパーセントに基づいてコンテンツからの距離が上下均等の長さに分割され、左右の余白は利用可能な横方向のスペースのパーセントに基づいてコンテンツからの距離が左右均等の長さに分割されます。 | 10.0 | グローバル | |
| cellspacing | String | 各テーブルセルの境界線とそのセルを囲む他のセルの境界線および/またはテーブルの境界の間のスペース。この値はピクセルまたはパーセント単位で指定する必要があります。 | 10.0 | グローバル | |
| columnClasses | String | テーブルの列に関連付けられている 1 つ以上のクラスのカンマ区切りのリスト。主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。複数のクラスが指定されている場合、クラスはすべての列に繰り返し適用されます。たとえば、columnClasses="classA, classB" と指定すると、最初の列は classA でスタイル設定され、2 番目の列は classB でスタイル設定され、3 番目の列は classA でスタイル設定され、4 番目の列は classB でスタイル設定されます (以下同様)。 | 10.0 | グローバル | |
| columns | Integer | このテーブルの列数。 | 10.0 | グローバル | |
| columnsWidth | String | 各テーブル列に適用される幅のカンマ区切りのリスト。値はピクセルで表すことができます (columnsWidth="100px, 100px" など)。 | 10.0 | グローバル | |
| dir | String | 生成された HTML コンポーネントの読み取り方向。使用可能な値には「RTL」(右から左) または「LTR」(左から右) があります。 | 10.0 | グローバル | |
| first | Integer | テーブルに視覚的に表示される反復処理の最初の要素。ここで、0 は value 属性で指定されている一連のデータの最初の要素のインデックスです。たとえば、value 属性で指定されている一連のレコードの最初の 2 つの要素を表示しない場合は、first="2" と設定します。 | 10.0 | グローバル | |
| footerClass | String | footer facet が指定されている場合、表示される HTML テーブルのフッター (一番下の行) を表示するために使用されるスタイルクラス。この属性は、主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 | 10.0 | グローバル | |
| frame | String | このテーブルに引かれる境界線。使用できる値には、「none」、「above」、「below」、「hsides」、「vsides」、「lhs」、「rhs」、「box」、および「border」があります。指定されていない場合、この値はデフォルトの「border」に設定されます。 | 10.0 | グローバル | |
| headerClass | String | header facet が指定されている場合、表示される HTML テーブルのヘッダーの表示に使用されるスタイルクラス。この属性は、主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 | 10.0 | グローバル | |
| id | String | ページの他のコンポーネントが dataTable コンポーネントを参照できるようにする識別子。 | 10.0 | グローバル | |
| lang | String | 「en」または「en-US」など、生成された HTML 出力の基本言語。この属性についての詳細は、W3C 仕様を参照してください。 | 10.0 | グローバル | |
| onclick | String | onclick イベントが発生した場合 (ユーザがデータテーブルをクリックした場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| ondblclick | String | ondblclick イベントが発生した場合 (ユーザがデータテーブルをダブルクリックした場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onkeydown | String | onkeydown イベントが発生した場合 (ユーザがキーボードのキーを押した場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onkeypress | String | onkeypress イベントが発生した場合 (ユーザがキーボードのキーを押したか、押したままにした場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onkeyup | String | onkeyup イベントが発生した場合 (ユーザがキーボードのキーを放した場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onmousedown | String | onmousedown イベントが発生した場合 (ユーザがマウスボタンをクリックした場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onmousemove | String | onmousemove イベントが発生した場合 (ユーザがマウスポインタを移動した場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onmouseout | String | onmouseout イベントが発生した場合 (ユーザがデータテーブルからマウスポインタを移動した場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onmouseover | String | onmouseover イベントが発生した場合 (ユーザがマウスポインタをデータテーブルに重ねた場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onmouseup | String | onmouseup イベントが発生した場合 (ユーザがマウスボタンを放した場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onRowClick | String | onRowClick イベントが発生した場合 (ユーザがデータテーブルの行をクリックした場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onRowDblClick | String | onRowDblClick イベントが発生した場合 (ユーザがデータテーブルの行をダブルクリックした場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onRowMouseDown | String | onRowMouseDown イベントが発生した場合 (ユーザがデータテーブルの行でマウスボタンをクリックした場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onRowMouseMove | String | onRowMouseMove イベントが発生した場合 (ユーザがマウスポインタをデータテーブルの行に重ねた場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onRowMouseOut | String | onRowMouseOut イベントが発生した場合 (ユーザがデータテーブルの行からマウスポインタを移動した場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onRowMouseOver | String | onRowMouseOver イベントが発生した場合 (ユーザがマウスポインタをデータテーブルの行に重ねた場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| onRowMouseUp | String | onRowMouseUp イベントが発生した場合 (ユーザがデータテーブルの行の上でマウスボタンを放した場合) に呼び出される JavaScript。 | 10.0 | グローバル | |
| rendered | Boolean | コンポーネントをページに表示するかどうかを指定する boolean 値。指定されていない場合、この値はデフォルトの true に設定されます。 | 10.0 | グローバル | |
| rowClasses | String | テーブルの行に関連付けられている 1 つ以上のクラスのカンマ区切りのリスト。主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。複数のクラスが指定されている場合、それらのクラスがすべての行に繰り返し適用されます。たとえば、columnRows="classA, classB" と指定すると、最初の行は classA でスタイル設定され、2 番目の行は classB でスタイル設定され、3 番目の行は classA でスタイル設定され、4 番目の行は classB でスタイル設定されます (以下同様)。 | 10.0 | グローバル | |
| rows | Integer | このテーブルの行数。 | 10.0 | グローバル | |
| rules | String | このテーブルのセルの間に引かれる境界線。使用できる値には、「none」、「groups」、「rows」、「cols」、および「all」があります。指定されていない場合、この値はデフォルトの「none」に設定されます。 | 10.0 | グローバル | |
| style | String | dataTable コンポーネントの表示に使用されるスタイル。主に、インライン CSS スタイルを追加するために使用されます。 | 10.0 | グローバル | |
| styleClass | String | dataTable コンポーネントの表示に使用されるスタイルクラス。主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 | 10.0 | グローバル | |
| summary | String | セクション 508 の準拠に関するテーブルの目的と構造の概要。 | 10.0 | グローバル | |
| title | String | ユーザがコンポーネントにマウスポインタを重ねたときにツールチップとして表示されるテキスト。 | 10.0 | グローバル | |
| value | Object | テーブルに表示されるデータのコレクション。 | はい | 10.0 | グローバル |
| var | String | value 属性で指定するデータのコレクションの 1 つの要素を表す変数の名前。この変数を使用して、dataTable コンポーネントタグの本文に要素自体を表示できます。 | はい | 10.0 | グローバル |
| width | String | テーブル全体の幅。利用可能な横方向の合計スペースに対する相対パーセント (width="80%" など)、またはピクセル数 (width="800px" など) のいずれかとして表されます。 | 10.0 | グローバル |
Facet
| facet 名 | 説明 | API バージョン |
|---|---|---|
| caption | テーブルのキャプションに表示されるコンポーネント。テーブルのキャプションの表示は、name="caption" を含む facet によって制御されるため、caption facet が dataTable コンポーネントの本文に表示される順序は重要ではありません。 | 10.0 |
| footer | テーブルのフッター行に表示されるコンポーネント。テーブルの最後の行の表示は、name="footer" を含む facet によって制御されるため、footer facet が dataTable コンポーネントの本文に表示される順序は重要ではありません。 | 10.0 |
| header | テーブルのヘッダー行に表示されるコンポーネント。テーブルの最初の行の表示は、name="header" を含む facet によって制御されるため、header facet が dataTable コンポーネントの本文に表示される順序は重要ではありません。 | 10.0 |