Sample: Datatable Demo

Sample
#sample #Datatable #JSON
March 21, 2026

This page demonstrates how to embed data tables directly from MDX using the <Datatable src="..." /> component.

Basic Usage

All you need is two files:

FileRole
src/data/books.jsonData array
src/data/books-table.jsonColumn, filter, and transform definitions

Then, just add one line to your MDX to display the table.

<Datatable src="books" />
src specifies the filename without extension. It will load src/data/books.json and src/data/books-table.json.

Demo

ジャンル
タグ

全 8 件

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

Multiple Tables on the Same Page

When placing multiple tables on the same page, specify an id to distinguish them.

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

Table Definition File (-table.json) Structure

{
  "columns": [
    { "key": "title",  "label": "Title", "align": "left",   "html": true },
    { "key": "rating", "label": "Rating", "align": "center", "html": true }
  ],
  "filters": [
    { "key": "genre", "label": "Genre" },
    { "key": "tags",  "label": "Tags", "split": "," }
  ],
  "defaultSort": "rating",
  "defaultAsc": false,
  "transform": {
    "rating": { "type": "stars", "max": 5 },
    "genre":  { "type": "badge", "colors": { "Technical": { "bg": "#dbeafe", "color": "#1d4ed8" } } },
    "tags":   { "type": "tags" },
    "title":  { "type": "link", "hrefField": "id", "basePath": "/books/" }
  }
}

Available Cell Transformations in transform

TypeDescription
starsDisplay number as ★☆. Specify maximum with max.
badgeSpecify background and text color per key with colors map.
tagsDisplay array or comma-separated string as tag chips.
linkTurn content into a link using hrefField for the URL and basePath as prefix.
To add more data, simply add items to src/data/books.json. You can increase data without changing the table definition.
Pages linking to this page (2)