サンプル：データテーブルデモ

サンプル
#サンプル #Datatable #JSON連携
2026年3月21日

このページでは <Datatable src="..." /> コンポーネントを使って、MDX から直接データテーブルを埋め込む方法を示します。

基本的な使い方

2 つのファイルを用意するだけです。

ファイル役割
src/data/books.jsonデータ配列
src/data/books-table.json列・フィルター・変換定義

あとは MDX に 1 行書くだけでテーブルが展開されます。

<Datatable src="books" />
src はファイル名（拡張子なし）を指定します。src/data/books.json と src/data/books-table.json が読み込まれます。

デモ

ジャンル
タグ

全 8 件

タイトル著者出版年ジャンル評価タグ
達人プログラマーDavid Thomas, Andrew Hunt2020技術書★★★★★プログラミングキャリア
Clean CodeRobert C. Martin2009技術書★★★★★プログラミング設計
イシューからはじめよ安宅和人2010ビジネス★★★★★思考法問題解決
FACTFULNESSHans Rosling2018ノンフィクション★★★★★データ思考法
Designing Data-Intensive ApplicationsMartin Kleppmann2017技術書★★★★★分散システムデータベース
エッセンシャル思考Greg McKeown2014ビジネス★★★★☆生産性思考法
Design PatternsGoF1994技術書★★★★☆プログラミング設計
ゼロ・トゥ・ワンPeter Thiel2014ビジネス★★★☆☆スタートアップビジネス

同じページに複数のテーブルを置く

同じページに複数置くときは id を指定して区別します。

<Datatable src="books" id="books-second" />

テーブル定義ファイル（-table.json）の構造

{
  "columns": [
    { "key": "title",  "label": "タイトル", "align": "left",   "html": true },
    { "key": "rating", "label": "評価",     "align": "center", "html": true }
  ],
  "filters": [
    { "key": "genre", "label": "ジャンル" },
    { "key": "tags",  "label": "タグ", "split": "," }
  ],
  "defaultSort": "rating",
  "defaultAsc": false,
  "transform": {
    "rating": { "type": "stars", "max": 5 },
    "genre":  { "type": "badge", "colors": { "技術書": { "bg": "#dbeafe", "color": "#1d4ed8" } } },
    "tags":   { "type": "tags" },
    "title":  { "type": "link", "hrefField": "id", "basePath": "/books/" }
  }
}

transform で使えるセル変換

種別説明
stars数値を ★☆ で表示。max で最大値を指定
badgecolors マップでキー別の背景色・文字色を指定
tags配列またはカンマ区切り文字列をタグチップで表示
linkhrefField のフィールドを URL に、basePath をプレフィックスに使いリンク化
データを増やしたい場合は src/data/books.json に項目を追加するだけです。テーブル定義を変えずにデータだけ増やせます。

関連ページ

このページへリンクしているページ (2)