Data Tables#

View Markdown

csv-table and json-table fences are opt-in. When enabled, those fences become a static HTML table. Cell text is escaped. No client JavaScript is required. Disabled fences stay ordinary code blocks.

Option	Type	Default
`dataTables`	`boolean` / `DataTableOptions`	`false`
`dataTables.rootDir`	`string`	project
`dataTables.missing`	`"error"` / `"warn"`	`"error"`

import { oxContent } from "@ox-content/vite-plugin";

export default {
  plugins: [
    oxContent({
      dataTables: true,
    }),
  ],
};

Authoring#

This site enables dataTables, so the next block is a live table.

Options
Option	Type	Default
highlight	boolean	false

```csv-table title="Options"
Option,Type,Default
highlight,boolean,false
```

Fence languages are csv-table and json-table.
The first CSV row is the header. Quoted fields may contain commas.
JSON may be an array of objects, an array of arrays, or { "headers": [...], "rows": [[...]] }.
title="..." becomes a <caption>.
Fences inside other fences, indented code, or inline code are left alone.

Import a file#

Once inline data works, a fence can load a file. @/ and / resolve from rootDir (the Vite project root unless you set it). Relative paths resolve from the current Markdown file. .. cannot leave that root.

```csv-table src="@/content/data/options.csv" title="From CSV"

```

From CSV
Option	Type	Default
highlight	boolean	false
lineNumbers	boolean	true

A single path in the fence body is also an import:

```json-table
./options.json
```

Name	Type	Default
highlight	boolean	false
lineNumbers	boolean	true

Missing files use missing. The default is "error" (reported as a transform diagnostic). "warn" leaves the fence as a code block and does not record an error. Malformed CSV/JSON always reports an actionable diagnostic.

oxContent({
  dataTables: {
    rootDir: "docs",
    missing: "warn",
  },
});

Data Tables#

Authoring#

Import a file#

Related#