カスタムセル

StkTableColumn['customCell'] を介してボディセルコンテンツをカスタマイズします。
StkTableColumn['customHeaderCell'] を介してヘッダーセルコンテンツをカスタマイズします。

customCell と customHeaderCell は同様の方法で使用されます。ここで customCell を例として使用します。

推奨事項

customCell を要素（div、spanなど）でラップすることをお勧めします。そうしないと、TextNode が <td> の子要素として存在するとレイアウト問題が発生する可能性があります。
customCell のルート要素をインライン要素（inline、inline-block、inline-flexなど）に設定することに注意してください。このレイアウトは仮想リストで行の高さを引き伸ばす可能性があります。

ツリーノード列 / 展開列

tree-node / expand 列にも customCell を指定できます。組み込みの「レベル別のインデント + ガイド線」と「矢印 / 遅延ローディング」は stkTreeIndent・stkFoldIcon スロットとして渡され、CustomCellProps には level / expandable / treeLoading も追加されています。完全な例はファイル管理ツリーを参照してください。

公開ツリーセルコンポーネント

パッケージのエントリーポイントから、次の3つの再利用可能なコンポーネントをインポートできます。

StkTreeCell：customCell コンテキストで動作する完全なツリーセル。tree-node 列にそのまま指定できます。
StkTreeIndent：level に応じたインデントと任意のガイド線を描画します。offset（CSS 長さ）はガイド線だけを平行移動し、独自の展開アイコンの中心に合わせるために使います（両側のアイコン幅を揃えてください）。組み込みの矢印の中心はセル内 4px で、ガイド線は既定でそこに揃います。中央寄せの同幅アイコンでは中心が --tree-indent-width の半分になるため、offset="4px"（差分）を渡します。
StkTreeFoldIcon：expandable、loading、expanded に応じて矢印、ローディング、末端行のプレースホルダを描画します。

columns.tsComposedTreeCell.vue

import { StkTreeCell } from 'stk-table-vue';
import ComposedTreeCell from './ComposedTreeCell.vue';

export const columns = [{
    type: 'tree-node',
    dataIndex: 'name',
    customCell: StkTreeCell,
}];

export const columns2 = [{
    type: 'tree-node',
    dataIndex: 'name',
    customCell: ComposedTreeCell,
}];

vue

<script setup lang="ts">
import { StkTreeFoldIcon, StkTreeIndent } from 'stk-table-vue';
import type { CustomCellProps } from 'stk-table-vue';

const props = defineProps<CustomCellProps<Record<string, any>>>();
</script>

<template>
    <div class="composed-tree-cell">
        <StkTreeIndent :level="props.level ?? 0" />
        <StkTreeFoldIcon
            :expandable="props.expandable"
            :loading="props.treeLoading"
            :expanded="props.treeExpanded"
        />
        <span>{{ props.cellValue }}</span>
    </div>
</template>

<style>
.composed-tree-cell {
    height: 100%;
    display: flex;
    align-items: center;
}
</style>

StkTreeFoldIcon は状態を外部から与える表示コンポーネントです。StkTable 内では展開可能な状態に data-stk-fold が付き、委譲処理で展開されます。ローディング中はこの属性を持ちません。スタイルは --tree-indent-width、--tree-guide-color、--tree-guide-width、--tree-guide-mask で変更できます。

Vue SFC での使用

Vue SFC コンポーネントの受け渡しをサポートしています。Vueコンポーネントのpropsは CustomCellProps 型で特に定義する必要があります。

ベストプラクティス

列を別ファイルで定義してエクスポートすることをお勧めします。

column.tsYieldCell.vuetypes.ts

import { StkTableColumn } from 'stk-table-vue/src/StkTable/index';
import type { DataType } from './types';
import YieldCell from './YieldCell.vue';
export const columns: StkTableColumn<DataType> = [{
    title: '歩留まり',
    dataIndex: 'yield',
    customCell: YieldCell
}]

vue

<script lang="ts" setup>
import { computed } from 'vue';
import { DataType } from './types';
import { CustomCellProps } from 'stk-table-vue/src/StkTable/types/index';

const props = defineProps<CustomCellProps<DataType>>();
const className = computed(() => {
    let name = '';
    if (props.cellValue > 0) {
        name = 'color-up';
    } else if (props.cellValue < 0) {
        name = 'color-down';
    }
    return name;
});
</script>
<template>
    <span :class="className">{{ props.cellValue > 0 ? '+' : '' }}{{ (props.cellValue * 100).toFixed(4) }}%</span>
</template>
<style>
.color-up {
    color: #2fc87b;
}
.color-down {
    color: #ff2b48;
}
</style>

export type DataType = {
    name: string;
    yield: number;
};

Render関数 h での使用

単純な変更の場合、レンダリング関数を直接使用する方が便利です。

たとえば、値に100を掛けるて単位を追加できます。

import { h } from 'vue';
import { StkTableColumn } from 'stk-table-vue/src/StkTable/index';
const columns: StkTableColumn<any>[] = [
    {
        title: '歩留まり',
        dataIndex: 'yield',
        customCell: ({ cellValue }) => h('span', cellValue * 100 + '%'),
    },
]

JSX での使用

JSXを使用するには、JSX環境をインストールする必要があります。

ビルドツール	プラグイン
vite	@vitejs/plugin-vue-jsx
webpack + babel	@vue/babel-plugin-jsx
webpack + swc	swc-plugin-vue-jsx
rspack	swc-plugin-vue-jsx

tsx

import { StkTableColumn } from 'stk-table-vue/src/StkTable/index';

const columns:StkTableColumn<any>[] = [
    {
        title: '名前',
        dataIndex: 'name',
        customCell: ({ row, col, cellValue }) => {
            return <span style="color: red">{cellValue}</span>;
        },
    },
]

API

プロパティ	props	デフォルト	説明
customCell	(props: CustomCellProps) => VNode	-	カスタムセルレンダリング関数
customHeaderCell	(props: CustomHeaderCellProps) => VNode	-	カスタムヘッダーセルレンダリング関数

types

customCell props 型

export type CustomCellProps<T extends Record<string, any>> = {
    row: T;
    col: StkTableColumn<T>;
    /** row[col.dataIndex] の値 */
    cellValue: any;
    rowIndex: number;
    /** 
     * 列インデックス（0から開始）
     * 
     * 注意：
     * - virtual-xでは、そうでない場合は仮想リスト内のインデックスを表します
     */
    colIndex: number;
    /**
     * 現在の行が展開されているかどうか
     * - 展開されていない：null
     * - 展開されている：列設定を返します
     */
    expanded?: StkTableColumn<any>;
    /** 現在のツリーノード行が展開されているかどうか */
    treeExpanded?: boolean;
    /** ツリー内のレベル（根は 0）。非ツリーデータでは常に 0 */
    level?: number;
    /** 展開可能かどうか（children 済み、または遅延モードで子ノード付きマーク）。非ツリーデータでは常に false */
    expandable?: boolean;
    /** 子ノードを遅延読み込み中か。非ツリーデータと非遅延モードでは常に false */
    treeLoading?: boolean;
    /** `treeConfig.showGuide` に従って階層ガイド線を描画するか。`tree-node` 列のみ値が入ります */
    showGuide?: boolean;
};

export type CustomHeaderCellProps<T extends Record<string, any>> = {
    col: StkTableColumn<T>;
    rowIndex: number;
    /** 
     * 列インデックス（0から開始）
     * 
     * 注意：
     * - virtual-xでは、そうでない場合は仮想リスト内のインデックスを表します
     */
    colIndex: number;
};

カスタムセル ​

公開ツリーセルコンポーネント ​

Vue SFC での使用 ​

Render関数 h での使用 ​

JSX での使用 ​

API ​

types ​