こんにちは。日本語フォーラムが盛り上がってほしいですね。
テーブルブロックで、２段組みは、[JS Column]でできるようです。
情報を共有します。
[JS Column] の Write Javascriptには、以下のように記述しました。
const React = ctx.libs.React;
const record = ctx.record || {};
const f_order_name = record.f_order_name || ‘-’;
const f_order_date = record.f_order_date || ‘-’;
const f_total_price = record.f_total_price ? Number(record.f_total_price).toLocaleString() : ‘0’;
const f_ship_date = record.f_ship_date || ‘-’;
// — スタイルの定義をここにまとめます —
const boxStyle = { display: ‘flex’, flexDirection: ‘column’, gap: ‘4px’, padding: ‘4px 0’, width: ‘450px’ };
const rowStyle = { display: ‘flex’, justifyContent: ‘space-between’, width: ‘100%’ };
const leftStyle = { width: ‘200px’, display: ‘inline-block’, whiteSpace: ‘nowrap’, overflow: ‘hidden’, textOverflow: ‘ellipsis’ };
const rightStyle = { width: ‘150px’, display: ‘inline-block’, textAlign: ‘right’ };
// — 画面への描画 —
ctx.render(
React.createElement(‘div’, { style: boxStyle },
// 上段（名前 と 申込日）
React.createElement(‘div’, { style: rowStyle },
React.createElement(‘span’, { style: leftStyle }, f_order_name),
React.createElement(‘span’, { style: rightStyle }, f_order_date)
),
// 下段（価格 と 出荷日）
React.createElement(‘div’, { style: rowStyle },
React.createElement(‘span’, { style: leftStyle }, f_total_price + ’ 円’),
React.createElement(‘span’, { style: rightStyle }, f_ship_date)
)
)
);