Table

Overview  

  Important

Bootstrap styling attributes require an explicit class argument as of release v0.22.0  . For example, use the following argument to accentuate a table with table-striped: class="table-striped".

Responsive Table  

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.

{{< table >}}
| #  | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
| 1. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
| 2. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
| 3. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
{{< /table >}}

Data Table  

Include the module simple-datatables to add advanced controls to your table. Features include in-line pagination, search, and sorting. Include the module in the frontmatter of your content page:

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

As an example, the following shortcode displays a responsive table that is searchable, sortable, and enables paging (paginate) with a page size (pagination) of 5.

{{< table searchable="true" sortable="true" paginate="true" pagination=5 >}}
| #   | 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 |
{{< /table >}}

Configuration  

With Simple Datatables  enabled, add the attribute data-table to the class of any Markdown table. The following arguments are supported:

Styling  

The file assets/scss/components/_table.scss defines the Hinode-specific styling of the table shortcode.

.datatable-container {
    border-bottom: none if($enable-important-utilities, !important, null);
}

.datatable-bottom {
    padding-top: 0 if($enable-important-utilities, !important, null);
}

.datatable-sorter {
    padding-left: 0;
    padding-right: 1rem;
}

.table-border-bottom-wrap {
    border-bottom-style: none !important
}

@if $enable-dark-mode {
    @include color-mode(dark) {
        .table-striped, .table-striped-columns {
            --bs-table-striped-bg: var(--bs-tertiary-bg);
            --bs-table-striped-color: var(--bs-body-color);
        }

        .table-hover {
            --bs-table-hover-bg: var(--bs-tertiary-bg);
            --bs-table-striped-color: var(--bs-body-color);
        }

        .datatable-pagination-list-item {
            &:hover,
            &:focus,
            &.datatable-active {
                color: var(--bs-body-bg) !important;
            }
        } 
    }
}

Arguments  

The shortcode supports the following arguments:

Input Type