カスタムセル

• StkTableColumn['customCell'] でボディセルの内容をカスタマイズします。
• StkTableColumn['customHeaderCell'] でヘッダーセルの内容をカスタマイズします。

customCell と customHeaderCell の使い方は基本的に同じです。ここでは customCell を例に説明します。

推奨事項

• customCell は要素（div、span など）でラップすることを推奨します。そうでないと、<td> の子ノードが TextNode となり、レイアウトの問題が発生する可能性があります。
• customCell のルート要素に inline/inline-block/inline-flex などのインライン要素を設定する場合は慎重に行ってください。このレイアウトは仮想リストで行の高さを引き伸ばす可能性があります。

Reactコンポーネントで使用

Reactコンポーネントを渡すことができます。コンポーネントの props は CustomCellProps 型で特別に定義する必要があります。

ベストプラクティス

columns は単一のファイルに記述してエクスポートしてください。

column.ts

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

YieldCell.tsx

import type { CustomCellProps } from 'stk-table-react/src/StkTable/index';
import type { DataType } from './types';

export default function YieldCell(props: CustomCellProps<DataType>) {
    let className = '';
    if (props.cellValue > 0) {
        className = 'color-up';
    } else if (props.cellValue < 0) {
        className = 'color-down';
    }
    return (
        <span className={className}>
            {props.cellValue > 0 ? '+' : ''}
            {(props.cellValue * 100).toFixed(4)}%
        </span>
    );
}

types.ts

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

style.css

.color-up {
    color: #2fc87b;
}
.color-down {
    color: #ff2b48;
}

loading

JSXで使用

customCell は JSX を直接返すこともでき、簡単な変更に便利です。

たとえば、数値に100を掛けて****単位を追加します。

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

const columns: StkTableColumn<any>[] = [
    {
        title: '利回り',
        dataIndex: 'yield',
        customCell: ({ cellValue }) => <span>{cellValue * 100}%</span>,
    },
]

セルの値に基づいてスタイルを設定することもできます：

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

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

API

プロパティ	props	デフォルト	説明
customCell	ComponentType<CustomCellProps>	-	カスタムセル描画コンポーネント
customHeaderCell	ComponentType<CustomHeaderCellProps>	-	カスタムヘッダーセル描画コンポーネント

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
     * - 展開: column設定を返す
     */
    expanded?: StkTableColumn<any>;
    /** ツリーノードの現在の行が展開されているか */
    treeExpanded?: boolean;
};

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