Table

Share via

Use the table shortcode to make your Markdown table responsive.

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

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	Comment
breakpoint	select	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
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.

Remarks

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

• Update to Hinode v0.27.13 (b6f5054)

On this page:

Docs

Overview

Arguments

Remarks