Docs

Table

Posted on August 14, 2024  (Last modified on June 10, 2025) • 4 min read • 843 words
Component  
Component  
Share via

Use the table shortcode to make your Markdown table responsive.

Overview   Arguments   Input Type   Remarks  

Overview  

Added in v0.8.0   

  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".

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.

# 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
markdown 
{{< 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 >}}

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
breakpoint select md By default, the table shortcode is responsive for all viewports. When a breakpoint is set, the table will behave normally and not scroll horizontally from the provided breakpoint and up. Use none to disable this behavior. You can specify multiple breakpoints when using positional arguments. Supported values: [none, sm, md, lg, xl, xxl].
class string Class attribute of the table element, e.g. table-striped-columns w-auto.
paging bool v0.24.13      Whether paging is enabled for the table.
pagingOptionPageSelect string v0.27.8      Sets the per page options in the dropdown. Must be an array of integers or arrays in the format [label (string), value (int)]. Requires paging = true.
pagingOptionPerPage int v0.27.8      Sets the maximum number of rows to display on each page. Requires paging = true.
searchable bool v0.24.13      Toggle the ability to search the dataset.
sortable bool v0.24.13      Toggle the ability to sort the columns.
wrap bool v0.28.0      Toggle the last column to wrap to a new row on smaller devices. This setting is not compatible with data tables.
Name Type Required Default
breakpoint select md
By default, the table shortcode is responsive for all viewports. When a breakpoint is set, the table will behave normally and not scroll horizontally from the provided breakpoint and up. Use none to disable this behavior. You can specify multiple breakpoints when using positional arguments. Supported values: [none, sm, md, lg, xl, xxl].
class string
Class attribute of the table element, e.g. table-striped-columns w-auto.
paging bool
v0.24.13      Whether paging is enabled for the table.
pagingOptionPageSelect string
v0.27.8      Sets the per page options in the dropdown. Must be an array of integers or arrays in the format [label (string), value (int)]. Requires paging = true.
pagingOptionPerPage int
v0.27.8      Sets the maximum number of rows to display on each page. Requires paging = true.
searchable bool
v0.24.13      Toggle the ability to search the dataset.
sortable bool
v0.24.13      Toggle the ability to sort the columns.
wrap bool
v0.28.0      Toggle the last column to wrap to a new row on smaller devices. This setting is not compatible with data tables.

Input Type  

Name Type Required Default Comment
categories string, slice Categories to be used as filter. When set, only pages that belong to at least one of the provided categories are retrieved.
keywords string, slice Keywords to be used as filter. When set, only pages that match at least one of the provided keywords are retrieved.
nested bool If set, retrieves all pages below the section or current page recursively. By default, only first-order childs are retrieved.
reverse bool true Sets the sort order to descending.
section string Name of the content section.
sort select yes Key to sort by. Supported values: [date, title, weight].
tags string, slice Tags to be used as filter. When set, only pages that match at least one of the provided tags are retrieved.
Name Type Required Default
categories string, slice
Categories to be used as filter. When set, only pages that belong to at least one of the provided categories are retrieved.
keywords string, slice
Keywords to be used as filter. When set, only pages that match at least one of the provided keywords are retrieved.
nested bool
If set, retrieves all pages below the section or current page recursively. By default, only first-order childs are retrieved.
reverse bool true
Sets the sort order to descending.
section string
Name of the content section.
sort select yes
Key to sort by. Supported values: [date, title, weight].
tags string, slice
Tags to be used as filter. When set, only pages that match at least one of the provided tags are retrieved.

Remarks  

See the Tables Documentation in the content section for additional styling options.

On this page: