Skip to content

NumberCell 数値フォーマットセル

NumberCell は組み込みの表示専用セルで、数値を読みやすいテキストにフォーマットします。小数点以下の桁数、桁区切り、接頭辞・接尾辞、符号表示、パーセント、単位の短縮(万/億、K/M/B)、および空値のプレースホルダーに対応します。市場気配値・金額・統計データの表示によく使われます。

基本的な使い方

createNumberCell ファクトリ関数で NumberCell コンポーネントを作成し、customCell として使用します。数値の位置揃えには、列に align: 'right' を設定することをおすすめします。

loading
ts
const { NumberCell } = createNumberCell({ decimals: 2 });

const columns = [
    { title: '现价', dataIndex: 'price', align: 'right', customCell: NumberCell() },
];

列ごとに異なるフォーマット

createNumberCell は 1 つのフォーマットを固定します。列ごとに異なるフォーマット(価格は小数 2 桁、出来高は万単位など)が必要な場合は、複数のインスタンスを作成してください。

設定オプション

createNumberCell は設定オブジェクト CreateNumberCellOptionsFormatNumberOptions と同一)を受け取ります:

プロパティデフォルト説明
decimalsnumber-小数点以下の桁数(四捨五入)。省略時は小数を処理しません
thousandsbooleantrue桁区切りを使用するか
prefixstring''接頭辞(例:¥$
suffixstring''接尾辞(例:
showSignbooleanfalse正の数に + 記号を強制表示するか(負の数は常に -
percentbooleanfalseパーセントモード:値 ×100 に % を付加。abbr と排他
abbr'cn' | 'en'-単位の短縮:cn=万/億、en=K/M/B。percent と排他
abbrDecimalsnumber2短縮後に保持する小数桁数
placeholderstring'--'空値(null/undefined/'')または非数値のプレースホルダー

単位の短縮

abbr は桁数に応じて値を短縮し、単位を付加します:

  • abbr: 'cn':1 億以上は 、1 万以上は で表示(例:123451.23万1234567891.23億
  • abbr: 'en'K(千)/ M(百万)/ B(十億)で短縮(例:15001.50K25000002.50M

短縮後の小数桁数は abbrDecimals(デフォルト 2)で制御します。

formatNumber

フォーマットロジックは純粋関数 formatNumber(value, options) として提供され、エクスポートされています。セル以外(合計行、ツールチップなど)でも直接再利用できます:

ts
import { formatNumber } from 'stk-table-solid';

formatNumber(1234567.891, { decimals: 2 }); // '1,234,567.89'
formatNumber(0.0523, { percent: true, decimals: 2, showSign: true }); // '+5.23%'

MITライセンスの下で公開されています