> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # TablePc スプレッドシート > TablePc コンポーネントの詳細ドキュメント。データソースのバインド、並び替え、フィルター、列の固定などのプロパティやイベントを解説します。リストデータを表示するためのコアコンポーネントです。 行と列でデータを表示します。 ## 使用シーン * 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\[\]](/ja/open/yida/components/interface#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` |