# Interactive Directives

URL: /docs/reference/directives/interactive/
Section: directives
Tags: reference, directives, interactive, code-tabs, data-table

--------------------------------------------------------------------------------

Interactive Directives 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 Code Tabs: Use for comparing code across languages or showing multiple approaches Data Tables: Use for large datasets that benefit from sorting/filtering Performance: Consider pagination for very large tables Accessibility: Ensure JavaScript is enabled for interactive features Related Layout Directives - Static tabs and cards Formatting Directives - List tables (static)

--------------------------------------------------------------------------------

Metadata:
- Author: lbliii
- Word Count: 472
- Reading Time: 2 minutes