Skip to content

Document data tables #446

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
markdumay merged 1 commit into from
Jul 13, 2024
Merged

Document data tables #446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions config/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
'./_vendor/github.com/gethinode/hinode/assets/scss/components/_syntax-light.scss',
'./_vendor/github.com/gethinode/hinode/assets/scss/theme/fonts.scss',
'./_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
'./_vendor/github.com/gethinode/mod-simple-datatables/dist/simple-datatables.scss',
'./_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
'./_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
'./_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
Expand Down
8 changes: 7 additions & 1 deletion content/en/docs/latest/components/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
author: Mark Dumay
title: Table
date: 2024-01-06
date: 2024-07-13
description: Use the table shortcode to make your Markdown table responsive.
layout: docs
icon: fas table
Expand All @@ -12,13 +12,19 @@ tags: component

{{< release version="v0.8.0" >}}

<!-- markdownlint-disable MD036 MD037 -->
{{< alert >}}
**New in v0.24.13**

- Tables now support advanced controls such as paging, search, and sorting. These controls require the module `simple-datatables`. See the {{</* link "../content/tables#data-tables" >}}data tables configuration{{< /link */>}} for more details.

**New in v0.22.0**

- The prefix `table-responsive-` has been dropped to denote a responsive size. Instead, use `{sm|md|lg|xl|xxl}` to create responsive tables up to a particular breakpoint.
- Bootstrap styling attributes now require an explicit class argument. For example, use the following argument to accentuate a table with table-striped: `class="table-striped"`.

{{< /alert >}}
<!-- markdownlint-enable MD036 MD037 -->

Use the table shortcode to make your markdown table responsive. Responsive tables scroll horizontally to improve the layout on smaller screens. The following example illustrates how this works.

Expand Down
56 changes: 55 additions & 1 deletion content/en/docs/latest/content/tables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
title: Tables
description: Enhance out-of-the-box Markdown tables with Bootstrap styling.
date: 2024-01-06
date: 2024-07-13
layout: docs
modules: ["simple-datatables"]
---

Hugo supports out-of-the box Markdown tables. Hinode enhances the basic tables with optional styling features provided by Bootstrap. The following paragraphs illustrate how to use basic tables, how to accent them, how to adjust the borders, and how to make the table more compact.
Expand Down Expand Up @@ -220,3 +221,56 @@ Use `{sm|md|lg|xl|xxl}` to create responsive tables up to a particular breakpoin
{{</* /table */>}}
{{< /example >}}
<!-- markdownlint-enable MD037 -->

## Data tables

{{< release version="v0.24.13" >}}

Include the module `simple-datatables` to add advanced controls to your table. Features include in-line pagination, search, and sorting. {{< link "../configuration/modules" >}}Enable the module{{< /link >}} in the frontmatter of your content page:

```yml
---
modules: ["simple-datatables"]
---
```

As an example, the following shortcode displays a responsive table that is `searchable`, supports `sorting`, and enables `paging`.

<!-- markdownlint-disable MD037 -->
{{< example lang="markdown" >}}
{{</* table sortable="true" paging="true" searchable="true" */>}}
| # | Heading |
|-----|---------|
| 1. | Item 1 |
| 2. | Item 2 |
| 3. | Item 3 |
| 4. | Item 4 |
| 5. | Item 5 |
| 6. | Item 6 |
| 7. | Item 7 |
| 8. | Item 8 |
| 9. | Item 9 |
| 10. | Item 10 |
| 11. | Item 11 |
| 12. | Item 12 |
| 13. | Item 13 |
| 14. | Item 14 |
| 15. | Item 15 |
| 16. | Item 16 |
| 17. | Item 17 |
| 18. | Item 18 |
| 19. | Item 19 |
| 20. | Item 20 |
| 21. | Item 21 |
| 22. | Item 22 |
| 23. | Item 23 |
| 24. | Item 24 |
| 25. | Item 25 |
| 26. | Item 26 |
| 27. | Item 27 |
| 28. | Item 28 |
| 29. | Item 29 |
| 30. | Item 30 |
{{</* /table */>}}
{{< /example >}}
<!-- markdownlint-enable MD037 -->
3 changes: 3 additions & 0 deletions hugo_stats.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@
"d-none-dark",
"d-none-light",
"d-sm-block",
"data-table",
"disabled",
"display-1",
"display-2",
Expand Down Expand Up @@ -611,6 +612,7 @@
"row",
"row-cols-1",
"row-cols-2",
"row-cols-auto",
"row-cols-lg-3",
"row-cols-md-2",
"row-cols-md-3",
Expand Down Expand Up @@ -1027,6 +1029,7 @@
"customization-2",
"customization-3",
"data-format",
"data-tables",
"default-alignment",
"default-animation",
"default-behavior",
Expand Down