Table Props テーブル設定

<StkTable
  ...[props]
/>

API

width

テーブル幅

width?: string;

minWidth

最小テーブル幅 @deprecated 0.9.1 cssセレクター.stk-table-mainで設定

minWidth?: string;

maxWidth

テーブル最大幅 @deprecated 0.9.1 cssセレクター.stk-table-mainで設定

maxWidth?: string;

stripe

シマシマ条纹

stripe?: boolean;

fixedMode

table-layout:fixedを使用するか

fixedMode?: boolean;

headless

ヘッダーを非表示にするか

headless?: boolean;

theme

テーマ、ライト、ダーク

theme?: 'light' | 'dark';

rowHeight

行の高さ

props.autoRowHeight が true の場合、期待値として計算に使用されます。実際の行の高さには影響しません。
動的に変更できます。変更後、表示行数とスクロール高さが自動で再計算されます（行の高さは --row-height で制御され、同期して更新されます）。

rowHeight?: number;

autoRowHeight

可変行の高さにするか

trueに設定すると、props.rowHeight は期待値として計算に使用されます。実際の行の高さには影響しません。

autoRowHeight?: boolean | {
  /** 推定行の高さ（rowHeightより優先） */
  expectedHeight?: number | ((row: DT) => number);
};

rowHover

マウスホバー時の行をハイライトするか

rowHover?: boolean;

rowActive

選択した行をハイライトするか

rowActive?: boolean | {
  /** 行選択機能を有効にするか default: true */
  enabled?: boolean;
  /** 行選択を無効にするか default: () => false */
  disabled?: (row: DT) => boolean;
  /** 選択を解除できるか default: true */
  revokable?: boolean;
};

headerRowHeight

ヘッダー行の高さ。default = rowHeight

動的に変更できます。ヘッダーが占有するボディ行数（pageSize）が再計算されます。

headerRowHeight?: number | null;

footerRowHeight

フッター行の高さ。default = rowHeight

動的に変更できます。フッター行はスクロール領域の下部に固定表示され、仮想スクロールの総高さには含まれません。

footerRowHeight?: number | string | null;

virtual

仮想スクロール

virtual?: boolean;

virtualX

横方向仮想スクロール（列幅を設定する必要があります）

virtualX?: boolean;

columns

テーブル列設定

浅い監視、変更時は参照を修正してください

columns?: StkTableColumn<any>[];

dataSource

データソース

浅い監視、変更時は参照を修正してください

dataSource?: any[];

rowKey

行の一意キー（行の一意値はundefinedにできません）

rowKey?: UniqKeyProp;

colKey

列の一意キー。デフォルトdataIndex

colKey?: UniqKeyProp;

emptyCellText

空値の表示テキスト

emptyCellText?: string | ((option: { row: DT; col: StkTableColumn<DT> }) => string);

noDataFull

データなしの高さがいっぱいになるか

noDataFull?: boolean;

showNoData

データなしを表示するか

showNoData?: boolean;

sortRemote

サーバーサイドソートかどうか、trueの場合はデータをソートしません

sortRemote?: boolean;

showHeaderOverflow

ヘッダーがオーバーフロー時に...を表示するか

showHeaderOverflow?: boolean;

showOverflow

ボディがオーバーフロー時に...を表示するか

showOverflow?: boolean;

showTrHoverClass

行hover classを追加するか

showTrHoverClass?: boolean;

cellHover

マウスホバー時のセルをハイライトするか

cellHover?: boolean;

cellActive

選択したセルをハイライトするか

cellActive?: boolean;

selectedCellRevokable

セルをもう一度クリックして選択を解除できるか (cellActive=true)

selectedCellRevokable?: boolean;

areaSelection

セル範囲選択（ドラッグ選択）を有効にするか

areaSelection?: boolean | {
  /**
   * コピー時のセルテキストフォーマットコールバック。
   * customCellカスタム描画を使用している場合、コピー内容が表示内容と一致するようにこのコールバックを提供するべきです。
   * @param row 行データ
   * @param col 列設定
   * @param rawValue row[col.dataIndex]の元の値
   * @returns クリップボードにコピーするテキスト
   */
  formatCellForClipboard?: (row: DT, col: StkTableColumn<DT>, rawValue: any) => string;
  /**
   * キーボードで選択範囲を移動を有効にするか。
   * 有効にすると、方向キー/Tab/Shift+Tabで選択範囲を移動でき、Excelのような動作になります。
   * この機能を有効にすると、元のキーボードスクロール動作は無効になります。
   * @default false
   */
  keyboard?: boolean;
};

headerDrag

ヘッダーをドラッグできるか。コールバック関数をサポート。

headerDrag?:
  | boolean
  | {
      /**
       * 列交換モード
       * - none - 何もしない
       * - insert - 挿入（デフォルト値）
       * - swap - 交換
       */
      mode?: 'none' | 'insert' | 'swap';
      /** ドラッグを無効にする列 */
      disabled?: (col: StkTableColumn<DT>) => boolean;
    };

rowClassName

行にclassNameを追加

rowClassName?: (row: any, i: number) => string;

colResizable

列幅をドラッグできるか（v-model:columnsを設定する必要があります） 設定しない 列のminWidth、必ず widthを設定してください列幅ドラッグ時、各列にはwidthが必要で、minWidth/maxWidthは効果がありません。table widthは"fit-content"になります。

props.columnsのwidth属性が自動更新されます

colResizable?: boolean | {
  /** ドラッグを無効にする列 */
  disabled?: (col: StkTableColumn<DT>) => boolean;
};

colMinWidth

ドラッグ可能な最小列幅

colMinWidth?: number;

bordered

セル分割線。デフォルトは横縦両方あり "h" - 横線のみ "v" - 縦線のみ "body-v" - ボディのみ縦線 "body-h" - ボディのみ横線

bordered?: boolean | 'h' | 'v' | 'body-v' | 'body-h';

autoResize

仮想スクロールの高さと幅を自動再計算。デフォルトtrue [非反応式] 関数を渡すとリサイズ後のコールバックになります

autoResize?: boolean | (() => void);

fixedColShadow

固定列の影を表示するか。パフォーマンス節約のため、デフォルトはfalse。

fixedColShadow?: boolean;

optimizeVue2Scroll

vue2スクロールを最適化

optimizeVue2Scroll?: boolean;

sortConfig

ソート設定

sortConfig?: {
  /** 空値を下に配置するか */
  emptyToBottom: boolean,
  /** デフォルトソート（1.初期化時にトリガー 2.ソート方向がnullのときにトリガー） */
  defaultSort?: {
      dataIndex: keyof T;
      order: Order;
  };
  /**
   * 文字列ソートにString.prototype.localCompareを使用するか
   * デフォルトtrue（歴史的な設計問題、互換性のためデフォルトtrue）
   */
  stringLocaleCompare?: boolean;
},

hideHeaderTitle

ヘッダーマウスホバーのタイトルを非表示。dataIndex配列を渡せます

hideHeaderTitle?: boolean | string[];

highlightConfig

ハイライト設定

highlightConfig?: {
  /** ハイライト持続時間(s) */
  duration?: number;
  /** ハイライトフレームレート*/
  fps?: number;
};

seqConfig

番号列設定

seqConfig?: {
  /** 番号列の開始インデックス ページネーション対応 */
  startIndex?: number;
};

expandConfig

展開行設定

expandConfig?: {
  height?: number;
};

dragRowConfig

行ドラッグ設定

dragRowConfig?: {
  mode?: 'none' | 'insert' | 'swap';
};

cellFixedMode

固定ヘッダー、固定列の実装方式。 [非反応式] relative：固定列はprops.columnsの両端に配置する必要があります。

列幅が変更される可能性がある場合は慎重に使用してください。
複数レベルヘッダーの固定列は慎重に使用してください

低バージョンブラウザーでは只能是'relative'、

cellFixedMode?: 'sticky' | 'relative';

smoothScroll

スムーズスクロールするか

default: chrome < 85 || chrome > 120 ? true : false
false: wheelイベントでスクロール。スクロール过快による白画面を防止。
true: wheelイベントを使用しないスクロール。マウスホイールスクロールがよりスムーズに。白画面が発生する可能性あり。

smoothScroll?: boolean;

scrollRowByRow

整数行単位の縦スクロール

scrollbar：スクロールバードラッグのみ有効、白画面問題の処理に使用可能(v0.7.2)

scrollRowByRow?: boolean | 'scrollbar';

scrollbar

カスタムスクロールバー設定

false: カスタムスクロールバーを無効化
true: デフォルト設定のカスタムスクロールバーを有効化
ScrollbarOptions: カスタムスクロールバーを有効化して設定

scrollbar?: boolean | {
  /** スクロールバーを有効にするか */
  enabled?: boolean;
  /** 垂直スクロールバー幅 default: 8 */
  width?: number;
  /** 水平スクロールバー高さ default: 8 */
  height?: number;
  /** スクロールバースライダー最小幅 default: 20 */
  minWidth?: number;
  /** スクロールバースライダー最小高さ default: 20 */
  minHeight?: number;
};

treeConfig

ツリー設定

treeConfig?: {
  /** デフォルトですべてのツリーノードを展開 */
  defaultExpandAll?: boolean;
  /** デフォルトで展開するノードキー */
  defaultExpandKeys?: UniqKey[];
  /** デフォルトで展開ずるレイヤー数 */
  defaultExpandLevel?: number;
  /** 子ノードの遅延読み込みを有効化、デフォルト false <Badge type="tip" text="^1.2.7" /> */
  lazy?: boolean;
  /** 子行配列を resolve する Promise を返す遅延読み込み関数 <Badge type="tip" text="^1.2.7" /> */
  loadMethod?: (row: DT, col: StkTableColumn<DT>) => Promise<DT[]>;
  /** 遅延読み込み時に「子ノードあり」を判定するフィールド名、デフォルト 'hasChildren' <Badge type="tip" text="^1.2.7" /> */
  hasChildField?: string;
  /** loadMethod が reject された時のコールバック <Badge type="tip" text="^1.2.7" /> */
  onLoadError?: (error: unknown, row: DT, col: StkTableColumn<DT>) => void;
  /** ツリー列のインデント領域に階層ごとに縦のガイドラインを描画、デフォルト false <Badge type="tip" text="^1.2.7" /> */
  showGuide?: boolean;
};

遅延読み込み（lazy）

有効化すると、「子ノードありマーク済み但未読み込み」の行を展開時に loadMethod(row, col) を呼び、resolve された子ノードを自動で展平データに統合します。
展開可能判定：行の children が存在するか row[hasChildField]（デフォルト hasChildren）が真なら展開矢印を表示、どちらも無ければリーフノード。
読み込み中、行に @private フィールド __T_LOADING__ を設定し、**行全体（<tr>）**に is-tree-loading クラスを付与し、矢印位置に組み込みローディングアイコンを表示します。成功はキャッシュ（再リクエストなし）され、失敗は折りたたみのまま次回展開で再試行され onLoadError を呼びます。
lazy 時、defaultExpandAll / defaultExpandLevel と setTreeExpand(..., { all: true } / { level }) は未読み込み分岐で展開を停止します（暗黙的な連鎖読み込みなし）；setTreeExpand(row, { parents: true }) は未読み込みの祖先をオンデマンドで連鎖読み込みします。

詳しくはツリー - 子ノードの遅延読み込みを参照してください。

インデントガイドライン（showGuide）

有効化すると、tree-node 列が行のインデント領域に階層ごとに縦のガイドラインを描画します。祖先スロットのみを描画し、行自身のコントロールマスには線を引きません。デフォルト false、無効時は従来のインデントのみを維持します。
CSS 変数で見た目を変更可能：--tree-guide-color（色）、--tree-guide-width（線幅、デフォルト 1px）、--tree-guide-mask（破線マスク、デフォルト none は実線。縦の repeating グラデーションで交差させて破線に、例：repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 8px)）。ダークテーマは個別のデフォルト値を持ちます。
より広い矢印／アイコンに差し替える場合は --tree-indent-width（既定 16px）を上書きすれば、インデントマス・コントロール枠・ガイド線のピッチが連動します。tree-node 列に customCell を当ててセル全体を自作する描画（フォルダ開閉アイコンの例付き）はファイル管理ツリーを参照してください。

詳しくはツリー - インデントガイドラインを参照してください。

experimental

実験的機能設定

experimental?: {
  /** transformでスクロールをシミュレート */
  scrollY?: boolean;
};

footerData

テーブルフッター合計行データ

footerData?: DT[];

Table Props テーブル設定 ​

API ​

width ​

minWidth ​

maxWidth ​

stripe ​

fixedMode ​

headless ​

theme ​

rowHeight ​

autoRowHeight ​

rowHover ​

rowActive ​

headerRowHeight ​

footerRowHeight ​

virtual ​

virtualX ​

columns ​

dataSource ​

rowKey ​

colKey ​

emptyCellText ​

noDataFull ​

showNoData ​

sortRemote ​

showHeaderOverflow ​

showOverflow ​

showTrHoverClass ​

cellHover ​

cellActive ​

selectedCellRevokable ​

areaSelection ​

headerDrag ​

rowClassName ​

colResizable ​

colMinWidth ​

bordered ​

autoResize ​

fixedColShadow ​

optimizeVue2Scroll ​

sortConfig ​

hideHeaderTitle ​

highlightConfig ​

seqConfig ​

expandConfig ​

dragRowConfig ​

cellFixedMode ​

smoothScroll ​

scrollRowByRow ​

scrollbar ​

treeConfig ​

experimental ​

footerData ​