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 | '操作' |
actionType | 操作列ボタンタイプを設定 | string | 'link' |
actionWidth | 操作列幅を設定 | number | 0 |
cellProps | スタイル設定 - セルの分割と結合 | (rowIndex: number,colIndex: number,dataIndex: number,record: object)=>void | - |
columnProps | 行セレクタ設定 - 選択列属性 | () => void | - |
columns | データソースをバインドしてデータ列を設定できます | - | |
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 | ページ設定 - 1ページ当たり表示選択器の選択可能値 | array | [5,10,20] |
pageSizePosition | ページ設定 - 1ページ当たり表示選択器のコンポーネント内での位置 | string | 'end' |
pageSizeSelector | ページ設定 - 1ページ当たり表示選択器タイプ | boolean | false |
pagination | ページ設定 - ページ位置 | string | 'right' |
primaryKey | データ主キーを設定します。データ主キーはデータ内の異なる行を区別するために使用され、行選択および行編集機能にとって重要です。異なる行の主キー値は重複できません。通常、データベースの自動増分IDフィールドを使用します | string | 'id' |
render | 操作項目 - カスタムレンダリングを設定 | (title: object,rowData: object)=>{title} | - |
rowProps | スタイル設定 - セル行属性設定 | (record: object,index: number)=>void | - |
searchBarPlaceholder | トップ操作 - 検索バーのプレースホルダを表示 | string | '検索してください' |
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 | '詳細' |
title | トップ操作 - 操作バーのタイトル | string | '操作' |
title | トップ操作 - 外部リンク操作バー、外部リンク操作タイトル | string | '外部リンク操作' |
titleAddons | 行セレクタ設定 - 選択列列タイトル要素 | (rowData: object,index: number) => ReactNode | - |
titleProps | 行セレクタ設定 - 選択列列タイトル属性 | (rowData: object, index: number) => void | - |
type | ページ設定 - ページタイプ | string | 'normal' |
useStickyLock | 高度設定 - 列固定の最適化 | boolean | false |
useVirtual | スタイル設定 - 仮想スクロール | boolean | false |