データ可視化・ダッシュボード
ソート可能テーブル
列ヘッダーをタップすると昇順/降順に並び替わり、矢印で現在の方向を表示する。日本語ダミーデータ5行。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="st-wrap">
<table class="st-table" aria-label="売上テーブル">
<thead>
<tr>
<th class="st-th" data-key="name" data-type="str" tabindex="0">
商品<span class="st-arrow" aria-hidden="true"></span>
</th>
<th class="st-th" data-key="sales" data-type="num" tabindex="0">
売上<span class="st-arrow" aria-hidden="true"></span>
</th>
<th class="st-th" data-key="rank" data-type="num" tabindex="0">
順位<span class="st-arrow" aria-hidden="true"></span>
</th>
</tr>
</thead>
<tbody id="stBody"></tbody>
</table>
</div>