Skip to content

Commit

Permalink
datatables
Browse files Browse the repository at this point in the history
  • Loading branch information
Tsche committed Feb 16, 2024
1 parent 8c45383 commit de0fb1f
Show file tree
Hide file tree
Showing 9 changed files with 1,310 additions and 7 deletions.
12 changes: 8 additions & 4 deletions docs/Doxyfile
Original file line number Diff line number Diff line change
Expand Up @@ -1315,7 +1315,8 @@ HTML_EXTRA_STYLESHEET = docs/style/doxygen-awesome.css \
docs/style/doxygen-awesome-sidebar-only.css \
docs/style/doxygen-awesome-sidebar-only-darkmode-toggle.css \
docs/github-corner.css \
doxygen-awesome/doxygen-awesome-godbolt.css
doxygen-awesome/doxygen-awesome-godbolt.css\
doxygen-awesome/doxygen-awesome-tables.css

# The HTML_EXTRA_FILES tag can be used to specify one or more extra images or
# other source files which should be copied to the HTML output directory. Note
Expand All @@ -1332,9 +1333,12 @@ HTML_EXTRA_FILES = LICENSE \
docs/style/doxygen-awesome-interactive-toc.js \
doxygen-awesome/doxygen-awesome-alerts.js \
doxygen-awesome/doxygen-awesome-charts.js \
doxygen-awesome/doxygen-awesome-tables.js \
doxygen-awesome/doxygen-awesome-godbolt.js \
docs/test_data.json \
docs/test_chart.json
docs/test_chart_data.json \
docs/test_chart.json \
docs/test_table.json \
docs/test_table_data.json

# The HTML_COLORSTYLE tag can be used to specify if the generated HTML output
# should be rendered with a dark or light theme.
Expand All @@ -1347,7 +1351,7 @@ HTML_EXTRA_FILES = LICENSE \
# The default value is: AUTO_LIGHT.
# This tag requires that the tag GENERATE_HTML is set to YES.

HTML_COLORSTYLE = AUTO_LIGHT
HTML_COLORSTYLE = LIGHT

# The HTML_COLORSTYLE_HUE tag controls the color of the HTML output. Doxygen
# will adjust the colors in the style sheet and background images according to
Expand Down
5 changes: 2 additions & 3 deletions docs/charts.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ The `doxygen-awesome-charts` extension allows embedding of frappe charts with cu

## Installation
* Ensure you have doxygen-awesome properly configured for this project
* Add `doxygen-awesome/doxygen-awesome-charts.css` to `HTML_EXTRA_STYLESHEET` in your Doxyfile
* Add `doxygen-awesome/doxygen-awesome-charts.js` to `HTML_EXTRA_FILES` in your Doxyfile

> [!TIP]
Expand Down Expand Up @@ -62,7 +61,7 @@ frappe-chart foo
"#d9f2e5",
"#6e72f4"
],
"data": "test_data.json",
"data": "test_chart_data.json",
"type": "line",
"height": 400,
"lineOptions": {
Expand All @@ -82,7 +81,7 @@ frappe-chart foo
"#d9f2e5",
"#6e72f4"
],
"data": "test_data.json",
"data": "test_chart_data.json",
"type": "line",
"height": 400,
"lineOptions": {
Expand Down
15 changes: 15 additions & 0 deletions docs/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,20 @@
<script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.umd.js"></script>
<script type="text/javascript" src="$relpath^doxygen-awesome-charts.js"></script>

<link href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/fixedheader/4.0.0/css/fixedHeader.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/scroller/2.4.0/css/scroller.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/select/2.0.0/css/select.dataTables.min.css" rel="stylesheet">

<script src="https://cdn.datatables.net/2.0.0/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/4.0.0/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.4.0/js/dataTables.scroller.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/2.0.0/api/row().show().js"></script>
<script src="https://cdn.datatables.net/select/2.0.0/js/dataTables.select.min.js"></script>

<script type="text/javascript" src="$relpath^doxygen-awesome-tables.js"></script>


<script type="text/javascript">
DoxygenAwesomeDarkModeToggle.init();
DoxygenAwesomeInteractiveToc.init();
Expand All @@ -44,6 +58,7 @@
DoxygenAwesomeGodbolt.init();
DoxygenAwesomeAlerts.init();
DoxygenAwesomeCharts.init();
DoxygenAwesomeTables.init();
</script>

<a href="https://github.com/Tsche/doxygen-utils" class="github-corner" title="View source on GitHub" target="_blank" rel="noopener noreferrer">
Expand Down
122 changes: 122 additions & 0 deletions docs/tables.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
# Tables
[TOC]

The `doxygen-awesome-tables` extension allows embedding of datatables with custom markup.


## Usage

## Installation
* Ensure you have doxygen-awesome properly configured for this project
* Add `doxygen-awesome/doxygen-awesome-tables.css` to `HTML_EXTRA_STYLESHEET` in your Doxyfile
* Add `doxygen-awesome/doxygen-awesome-tables.js` to `HTML_EXTRA_FILES` in your Doxyfile

> [!TIP]
> If you have already created a custom `HTML_HEADER` you can skip to step 6
* Run `doxygen -w html header.html delete_me.html delete_me.css` in a command prompt and delete the files called `delete_me`
* Set `HTML_HEADER` to the path of your `header.html` file in your Doxyfile

* Add
```html
<link href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/2.0.0/js/dataTables.min.js"></script>
<script type="text/javascript" src="$relpath^doxygen-awesome-tables.js"></script>
```
to the `<head>` node of your `header.html`

* Activate the extension by also putting
```html
<script type="text/javascript">DoxygenAwesomeTables.init();</script>
```
into your `header.html`'s `<head>` node.

* (Optional) Add your chart input files to `HTML_EXTRA_FILES` in your Doxyfile if you want Doxygen to copy them to the html root for you.

You can now embed tables in your documentation. Note that chart names must be unique since they will be used as id for the `<table>` datatable renders to.

## Example

### Shorthand
tables can easily be embedded using image syntax. Note that the alt name must start with the special marker `datatable` and contain a unique name. The link target should be a JSON file with the chart data in it.
```markdown
![datatable zoinks](test_table.json)
```
This expects a full datatables configuration object.

#### Demo
![datatable zoinks](test_table.json)


### Inline
An alternative way is to provide the chart as code block. In this mode the first line must start with the special marker `datatable` and contain a unique name. Everything but the first line is interpreted as JSON input to datatables.

You can either provide the data as link:
```markdown
'''json
datatable foo
{
"columns": [
{
"className": "dt-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{"data": "name"}, {"data": "position"}, {"data": "office"},
{"data": "salary"}

],
"data": "test_table_data.json",
}
'''

<script type="text/javascript">
// enable detail dropdown for table foo
DoxygenAwesomeTables.detailHandler("foo", (row) => {
return (
'<dl>' +
'<dt>Full name:</dt>' +
'<dd>' + row.name + '</dd>' +
'<dt>Extension number:</dt>' +
'<dd>' + row.extn + '</dd>' +
'<dt>Extra info:</dt>' +
'<dd>And any further details here (images etc)...</dd>' +
'</dl>');
});
</script>
```
```json
datatable foo
{
"columns": [
{
"className": "dt-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{"data": "name"}, {"data": "position"}, {"data": "office"},
{"data": "salary"}

],
"data": "test_table_data.json"
}
```

@htmlonly
<script type="text/javascript">
// enable detail dropdown for table foo
DoxygenAwesomeTables.detailHandler("foo", (row) => {
return (
'<dl>' +
'<dt>Full name:</dt>' +
'<dd>' + row.name + '</dd>' +
'<dt>Extension number:</dt>' +
'<dd>' + row.extn + '</dd>' +
'<dt>Extra info:</dt>' +
'<dd>And any further details here (images etc)...</dd>' +
'</dl>');
});
</script>
@endhtmlonly
File renamed without changes.
Loading

0 comments on commit de0fb1f

Please sign in to comment.