diff --git a/config/postcss.config.js b/config/postcss.config.js index 6e78afd4..a3c21a16 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -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', diff --git a/content/en/docs/latest/components/table.md b/content/en/docs/latest/components/table.md index 1bc534a2..1ea04772 100644 --- a/content/en/docs/latest/components/table.md +++ b/content/en/docs/latest/components/table.md @@ -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 @@ -12,13 +12,19 @@ tags: component {{< release version="v0.8.0" >}} + {{< 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 {{}}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 >}} + 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. diff --git a/content/en/docs/latest/content/tables.md b/content/en/docs/latest/content/tables.md index 559ecdc9..0182cf91 100644 --- a/content/en/docs/latest/content/tables.md +++ b/content/en/docs/latest/content/tables.md @@ -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. @@ -220,3 +221,56 @@ Use `{sm|md|lg|xl|xxl}` to create responsive tables up to a particular breakpoin {{}} {{< /example >}} + +## 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`. + + +{{< example lang="markdown" >}} +{{}} +| # | 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 | +{{}} +{{< /example >}} + diff --git a/hugo_stats.json b/hugo_stats.json index 634829a2..fa478863 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -216,6 +216,7 @@ "d-none-dark", "d-none-light", "d-sm-block", + "data-table", "disabled", "display-1", "display-2", @@ -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", @@ -1027,6 +1029,7 @@ "customization-2", "customization-3", "data-format", + "data-tables", "default-alignment", "default-animation", "default-behavior",