Interactive Directives

Reference for interactive directives (code-tabs, data-table)

2 min read 404 words

Interactive directives provide JavaScript-enhanced components for code examples and data tables.

Key Terms

Code Tabs
An interactive tabbed interface ({code-tabs}) for displaying code examples in multiple languages. Users can switch between languages with tab navigation.
Data Table
An interactive table directive ({data-table}) with JavaScript-enhanced features like sorting, filtering, and pagination. Requires Tabulator.js in your theme.

Code Tabs

Create tabbed interfaces for multi-language code examples.

Syntax:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
:::{code-tabs}

### Tab: Language Name
```language
code here
```

### Tab: Another Language
```language
more code
```

:::{/code-tabs}

Note: You can also use### Language Name(without "Tab:" prefix).

Alias:{code_tabs}(underscore variant)

Examples

Python and JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
:::{code-tabs}

### Tab: Python
```python
def hello():
    print("Hello, World!")
```

### Tab: JavaScript
```javascript
function hello() {
    console.log("Hello, World!");
}
```

:::{/code-tabs}

Multiple Languages:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
:::{code-tabs}

### Python
```python
print("Hello")
```

### JavaScript
```javascript
console.log("Hello");
```

### Go
```go
fmt.Println("Hello")
```

:::{/code-tabs}

Rendering

Code tabs render as interactive tabbed interface with:

  • Tab navigation for switching languages
  • Syntax highlighting for each language
  • First tab selected by default

Data Table

Create interactive data tables with sorting, filtering, and pagination (requires Tabulator.js).

Syntax:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
:::{data-table}
:columns: col1,col2,col3
:headers: Header 1,Header 2,Header 3
:sortable: true
:filterable: true
:pagination: true

Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3
Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3
:::

Options:

  • :columns:- Comma-separated column identifiers
  • :headers:- Comma-separated header labels
  • :sortable:- Enable sorting:true,false(default:true)
  • :filterable:- Enable filtering:true,false(default:true)
  • :pagination:- Enable pagination:true,false(default:true)

Examples

Basic Data Table:

1
2
3
4
5
6
7
8
:::{data-table}
:columns: name,type,description
:headers: Name,Type,Description

`get_user` | Function | Get user by ID
`create_user` | Function | Create new user
`update_user` | Function | Update user
:::

With Options:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
:::{data-table}
:columns: name,version,status
:headers: Package,Version,Status
:sortable: true
:filterable: true
:pagination: false

bengal | 0.1.0 | Active
mistune | 3.0.0 | Active
jinja2 | 3.1.0 | Active
:::

Rendering

Data tables render as interactive tables with:

  • Column sorting (click headers)
  • Search/filter functionality
  • Pagination (if enabled)
  • Responsive design

Note: Requires Tabulator.js to be included in your theme.

Best Practices

  1. Code Tabs: Use for comparing code across languages or showing multiple approaches
  2. Data Tables: Use for large datasets that benefit from sorting/filtering
  3. Performance: Consider pagination for very large tables
  4. Accessibility: Ensure JavaScript is enabled for interactive features