テーマ

組み込みの light と dark テーマがあります。

props.theme = light|dark でテーマを切り替えます。対応するスタイルセレクターは .stk-table.light .stk-table.dark

ページの右上のテーマ切替ボタンをクリックすると效果を確認できます。

loading

CSS 変数

StkTable は豊富な CSS 変数を提供しており、テーブルのスタイルをカスタマイズできます。これらの変数を上書きすることで、パーソナライズされたカスタマイズが可能です。

インタラクティブデモ

以下はインタラクティブデモで、CSS 変数をリアルタイムに調整して効果を確認できます：

loading

使用例

<template>
    <StkTable :style="customVars" :columns="columns" :data-source="data" />
</template>

<script setup>
import { ref } from 'vue';

const customVars = ref({
    '--row-height': '36px',
    '--border-color': '#e0e0e0',
    '--td-bgc': '#fafafa',
    '--th-bgc': '#f0f0f0',
    '--highlight-color': '#ff5722',
});
</script>

または CSS で上書き：

.my-custom-table {
    --row-height: 36px;
    --border-color: #e0e0e0;
    --td-bgc: #fafafa;
    --th-bgc: #f0f0f0;
    --highlight-color: #ff5722;
}

ツリーガイド線の変数

treeConfig.showGuide を有効にした場合（ツリー - 階層ガイド線参照）、--tree-guide-color（色）、--tree-guide-width（太さ）、--tree-guide-mask（破線マスク）、--tree-indent-width（インデント 1 段の幅）でガイド線とインデントの外観を調整できます。上のインタラクティブデモの「ツリーガイド線」グループでリアルタイムに調整して効果を確認できます（ダークテーマには各自のデフォルト値があります）。

WARNING

--row-height は見た目の行の高さのみを決めます。仮想リストモードではスクロールの幾何計算（表示行数・総高さ・スペーサの高さ）が row-height prop に基づいて行われるため、CSS 変数だけを変更して row-height を変えないと両者が一致せず、空白帯や行のずれが発生します。

可変行高モード（auto-row-height）ではコンポーネントは --row-height を出力せず、行の高さはセルの内容で決まります。