TablePc スプレッドシート - DingTalk Help Center

行と列でデータを表示します。

使用シーン

Table は、高度にカスタマイズ可能でアクセシブルな HTML テーブルとしてデータをレンダリングします。構造化データを表形式で表示することがコア機能です。
さまざまなパラメータを指定して、並び替え、フィルター、スクロール、列の固定などの機能をテーブルに追加できます。

コンポーネント例

コンポーネントのプロパティ

プロパティ	説明	タイプ	デフォルト
`actionBar`	上部アクションバーを設定します。	`array`	`[{title: {zh_CN: '操作1',en_US: 'Action 1',type: 'i18n'},option: 'callback'}]`
`actionFixed`	操作列を固定します。	`string`	`'none'`
`actionHidden`	操作列を非表示にするかどうかを設定します。	`boolean`	`false`
`actionTitle`	操作列のタイトルを設定します。	`string`	`'Action'`
`actionType`	操作列のボタンタイプを設定します。	`string`	`'link'`
`actionWidth`	操作列の列幅を設定します。	`number`	`0`
`cellProps`	スタイルと外観の設定 — セルの分割と結合。	`(rowIndex: number,colIndex: number,dataIndex: number,record: object)=>void`	-
`columnProps`	行セレクターの設定 — 選択列のプロパティ。	`() => void`	-
`columns`	データソースをバインドしてデータ列を設定します。	TableColumn[]	-
`data`	データソース	`any[]`	-
`dataSourceType`	データソースのタイプ	`'data' \| 'url'`	`'data'`
`device`	アクション項目の設定 — 特定のデバイスで表示。	`string`	-
`emptyContent`	スタイルと外観の設定 — 空データのレンダリング。	`() => ReactNode`	-
`expandedRowIndent`	折り畳み / ツリー形式のスプレッドシートの設定 — 折り畳みを有効化。追加レンダリングされる行のインデント。	`array`	`[]`
`expandedRowRender`	折り畳み / ツリー形式のスプレッドシートの設定 — 折り畳みを有効化。追加レンダリングされる行のレンダリング関数。	`(record: object, index: number) => ReactNode`	-
`fixedHeader`	スタイルと外観の設定 — ヘッダーを固定するかどうか。	`boolean`	`true`
`getExpandedColProps`	折り畳み / ツリー形式のスプレッドシートの設定 — 折り畳みを有効化。追加レンダリングされる行のプロパティを設定。	`(record: object, index: number) => ReactNode`	-
`getProps`	行セレクターの設定 — セレクターのプロパティ。	`(rowData: object, index: number) => void`	-
`hasExpandedRowCtrl`	折り畳み / ツリー形式のスプレッドシートの設定 — 折り畳みを有効化。折り畳みボタン。	`boolean`	`true`
`hasHeader`	スタイルと外観の設定 — ヘッダーを表示。	`boolean`	`true`
`isDisabled`	上部アクションバーの設定 — ページナビゲーション。無効化するかどうか。	`boolean`	-
`isExpand`	折り畳み / ツリー形式のスプレッドシートの設定 — 折り畳みを有効化。	`boolean`	`false`
`isPagination`	ページネーション設定 — ページネーションを使用。	`boolean`	`true`
`isPagination`	ページネーション設定 — 1 ページのみの場合にページャーを非表示にするかどうか。	`boolean`	`false`
`isTree`	折り畳み / ツリー形式のスプレッドシートの設定 — ツリーモードを有効化。	`boolean`	`false`
`loading`	読み込み中の状態が有効かどうか。	`boolean`	`false`
`loadingComponent`	スタイルと外観の設定 — 読み込み中コンポーネントを設定。	`()=>ReactNode`	-
`maxBodyHeight`	スタイルと外観の設定 — ヘッダーを固定するかどうか。コンテンツ領域の最大高さ。	`number`	`0`
`maxWebShownActionCount`	表示するアクションの最大数を設定します。	`number`	`3`
`mobileActionsStyle`	モバイル専用設定 — 展開モード、アクションのスタイル。	`string`	-
`mobileDefaultCardColumns`	モバイル専用設定 — 展開モード、デフォルトのフィールド数。	`string`	`4`
`mobileExpanViewMode`	モバイル専用設定 — 展開モード。	`string`	`normal`
`mobileMargin`	モバイル専用設定 — デフォルトの余白を設定。	`number`	`0`
`mobileMode`	モバイル専用設定 — 表示スタイル。	`string`	`normal`
`mode`	アクション項目の設定 — 編集状態で表示。	`string`	`'VIEW'`
`mode`	行セレクターの設定 — タイプ。	`'single' \| 'multiple'`	`'multiple'`
`noPadding`	プレミアム — 余白を非表示に設定。	`boolean`	`false`
`onCellDataChange`	操作設定 — 編集モードでデータが変更されたときにトリガー。	`({data: object}) => void`	-
`onChange`	行セレクターの設定 — 選択変更時のコールバック。	`(selectedRowKeys: array,records: array)=>void`	-
`onColumnsChange`	上部アクションバーの設定 — 列フィルターのコールバック。	`(columns: object)=>void`	-
`onFetchData`	操作設定 — ページネーション、検索、または並び替え時にトリガー。	`({params: object}) => void`	-
`onResizeChange`	操作設定 — 列サイズが変更されたときにトリガー。	`({dataIndex: string, value:number}) => void`	-
`onRowClick`	操作設定 — レコードをクリックしたときにトリガー。	`({record: object, index:number, evt:object}) => void`	-
`onRowMouseEnter`	操作設定 — マウスをレコードにホバーしたときにトリガー。	`({record: object, index: number, evt: object}) => void`	-
`onRowMouseLeave`	操作設定 — マウスがレコードから離れたときにトリガー。	`({record: object, index:number, evt:object}) => void`	-
`onRowOpen`	折り畳み / ツリー形式のスプレッドシートの設定 — 折り畳みを有効化。展開 / 折り畳み時にトリガーされるイベント。	`(openRowKeys: array, currentRowKey: string, expanded: boolean, currentRecord: object) => void`	-
`onSelect`	行セレクターの設定 — 単一行選択時のコールバック。	`({selected: boolean,rowData: object,selectedRows: array})=>void`	-
`onSelectAll`	行セレクターの設定 — すべて選択時のコールバック。	`(selected: boolean,selectedRows: array)=>void`	-
`openRowKeys`	折り畳み / ツリー形式のスプレッドシートの設定 — 折り畳みを有効化。デフォルトで展開する行。	`string[]`	-
`pageMode`	上部アクションバーの設定 — ページナビゲーション、関連付けられたページの状態。	`string`	-
`pageShowCount`	ページネーション設定 — 表示するページ番号の数。	`number`	`5`
`pageSize`	ページネーション設定 — pageSize	`number`	`10`
`pageSizeList`	ページネーション設定 — ページサイズセレクターで利用可能な値。	`array`	`[5,10,20]`
`pageSizePosition`	ページネーション設定 — コンポーネント内でのページサイズセレクターの位置。	`string`	`'end'`
`pageSizeSelector`	ページネーション設定 — ページサイズセレクターのタイプ。	`boolean`	`false`
`pagination`	ページネーション設定 — ページネーションの表示位置。	`string`	`'right'`
`primaryKey`	データのメインキーを設定します。メインキーはデータ内の行を区別するために使用され、行の選択や行の編集に不可欠です。メインキーの値は行ごとに一意である必要があります。通常はデータベースの自動採番 ID フィールドを使用します。	`string`	`'id'`
`render`	アクション項目の設定 — カスタムレンダリング。	`(title: object,rowData: object)=>{title}`	-
`rowProps`	スタイルと外観の設定 — セル行プロパティの設定。	`(record: object,index: number)=>void`	-
`searchBarPlaceholder`	上部アクションバーの設定 — 検索バーのプレースホルダー。	`string`	`'Search'`
`selectedRowKeys`	行セレクターの設定 — 選択済みの行。	`string[]`	-
`setEmptyContent`	スタイルと外観の設定 — 空データのカスタムレンダリング。	`boolean`	`false`
`setLoadingComponent`	スタイルと外観の設定 — カスタム読み込み中コンポーネント。	`boolean`	`false`
`shape`	ページネーション設定 — 前へ / 次へボタンのスタイル。	`string`	`arrow-only`
`showActionBar`	上部アクションバーの設定 — アクションバーを表示。	`boolean`	`true`
`showCustomBarItem`	上部アクションバーの設定 — カスタム領域を表示。	`boolean`	`false`
`showCustomCoulmn`	上部アクションバーの設定 — 列フィルターを表示。	`boolean`	`false`
`showCustomCoulmn`	上部アクションバーの設定 — カスタム領域のレンダリング。	`()=>void`	-
`showLinkBar`	上部アクションバーの設定 — 外部リンクバーを表示するかどうか。	`boolean`	`true`
`showMiniPager`	ページネーション設定 — 上部にミニページャーを表示するかどうか（PC 表示のみ）。	`boolean`	`false`
`showRowSelector`	行セレクターの設定 — 表示するかどうか。	`boolean`	`false`
`showSearch`	上部アクションバーの設定 — 検索バーを表示。	`boolean`	`true`
`size`	ページネーション設定 — ページネーションのサイズ。	`string`	`'medium'`
`stickyHeader`	スタイルと外観の設定 — ヘッダーを固定表示（sticky）にするかどうか。	`boolean`	`false`
`theme`	スタイルと外観の設定 — 件名。	`string`	`'split'`
`title`	アクション項目の設定 — タイトル。	`string`	`'Details'`
`title`	上部アクションバーの設定 — アクションバーのタイトル。	`string`	`'Action'`
`title`	上部アクションバーの設定 — 外部リンクアクションバー、外部リンクアクションのタイトル。	`string`	`'External Link Action'`
`titleAddons`	行セレクターの設定 — 選択列のヘッダー要素。	`(rowData: object,index: number) => ReactNode`	-
`titleProps`	行セレクターの設定 — 選択列のヘッダープロパティ。	`(rowData: object, index: number) => void`	-
`type`	ページネーション設定 — ページネーションのタイプ。	`string`	`'normal'`
`useStickyLock`	プレミアム — 列固定の最適化を設定。	`boolean`	`false`
`useVirtual`	スタイルと外観の設定 — 仮想スクロール。	`boolean`	`false`