Table
Use the table shortcode to make your Markdown table responsive.
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 |
{{< 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 >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | 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. |
See the tables documentation in the content section for additional styling options.