Table Basic

Content container for tabular content.

Published

Last updated: 5.5.0

Github

NPM

Twig Usage

{% include '@bolt-components-table-basic/table-basic.twig' with {
  headers: {
    top: {
      cells: [
        'Column 1',
        'Column 2',
        'Column 3',
      ]
    },
    side: {
      cells: [
        'Row 1',
        'Row 2',
        'Row 3',
        'Footer',
      ]
    }
  },
  rows: [
    {
      cells: [
        'R1C1',
        'R1C2',
        'R1C3',
      ]
    },
    {
      cells: [
        'R2C1',
        'R2C2',
        'R2C3',
      ]
    },
    {
      cells: [
        'R3C1',
        'R3C2',
        'R3C3',
      ]
    }
  ],
  footer: {
    cells: [
      'FC1',
      'FC2',
      'FC3',
    ]
  }
} only %}

Schema

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
headers	Generates top and side headers, each can contain an array of `cells`.	`object`	—	`top` `cells` Each item represents a cell in the top header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys. See below `side` `cells` Each item represents a cell in the side header. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys See below
rows *	Generates an array of rows, each can contain an array of `cells`.	`array`	—	`cells` Each item represents a cell in a row. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys See below
footer	Generates a table footer, can contain an array of `cells`.	`object`	—	`cells` Each item represents a cell in the footer. Accepts either a renderable item (shorthand) or an item with 'content' and 'attributes' keys See below
format	Display either a regular table or a more complex numeric table.	`string`	`regular`	`regular` or `numeric`
borderless	Removes the vertical border in between cells.	`boolean`	`false`	—
fixed_width_table	The table's layout ignores the content and instead uses the table's width. Makes each column of the same width. With this prop table doesn't have horizontal scroll but squeezes on smaller screens.`fixed_width_columns` doesn't work with this prop together.	`boolean`	`false`	—
fixed_width_columns	Sets the number of columns that will be the width of the longest text.	`string`	`none`	`none`, `first`, `second`, `first-two`
caption	Set a table caption, displayed below the table content.	`string`	—	—

Install

npm install @bolt/components-table-basic

Dependencies

@bolt/components-code-snippet

@bolt/core-v3.x

@bolt/lazy-queue

himalaya

Table Basic

A table that provides basic display options

Important Notes:

Demo

With Rows Only

R1C1	R1C2	R1C3
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

With Top Headers

Column 1	Column 2	Column 3
R1C1	R1C2	R1C3
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

With Side Headers

Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3

With Top and Side Headers

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3

With Headers and Footer

	Column 1	Column 2	Column 3
Row 1	R1C1	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3
Footer	FC1	FC2	FC3

Real Example

	Item number	Description	Assemblies
Build 2.0.1.0 — SR-49969	SR-49941	This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed.	OpenSpan.UpdaterService.Remoting.dll OpenSpan.Updater.ServerClientInterface.dll OpenSpan.Updater.ScheduledTasks.dll OpenSpan.Updater.PrePostOperation.dll OpenSpan.Updater.Git.dll OpenSpan.VersionFinder.exe OpenSpan.UpdaterService.exe OpenSpan.Updater.X509tool.exe OpenSpan.Updater.UserHelper.exe OpenSpan.Updater.UninstallHelper.exe OpenSpan.Updater.RuntimeLauncher.exe OpenSpan.Updater.InstallHelper.exe OpenSpan.Updater.Initializer.exe
Build 1.1.360 — SR-44891	SR-44869	This hotfix changes the system to better handle long file names. It also enhances VersionFinder to sort the list of branches, making it easier to find a specific branch.	OpenSpan.Updater.Git.dll
Build 1.1.360 — SR-44891	SR-43163	This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated.	OpenSpan.Updater.Git.dll OpenSpan.Updater.Initializer.exe OpenSpan.Updater.InstallHelper.exe OpenSpan.Updater.PrePostOperation.dll OpenSpan.Updater.PreReqCheck.dll OpenSpan.Updater.RuntimeLauncher.exe OpenSpan.Updater.ScheduledTasks.dll OpenSpan.Updater.ServerClientInterface.dll OpenSpan.Updater.ServerClientInterface.Tester.exe OpenSpan.Updater.UninstallHelper.exe OpenSpan.Updater.UserHelper.exe OpenSpan.Updater.X509tool.exe OpenSpan.UpdaterService.Remoting.dll OpenSpan.UpdaterService.exe
Build 1.1.354 — SR-44889	SR-44850	This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches.	ManagedOpenSsl.dll

Twig

Verbatim

HTML

Verbatim

Table Basic Numeric

Updates the table display to best display numbers.

Important Notes:

Demo

Regular Format

	Pts	Reb	Ast	Stl	Blk
Michael Jordan	70	10	2	5	1
Toni Kukoc	21	15	10	3	4
Steve Kerr	5	2	20	5	0
Total	91	27	32	13	5

Numeric Format

	Pts	Reb	Ast	Stl	Blk
Michael Jordan	70	10	2	5	1
Toni Kukoc	21	15	10	3	4
Steve Kerr	5	2	20	5	0
Total	91	27	32	13	5

Twig

Verbatim

HTML

Verbatim

Table Basic Borderless

Remove the vertical border in between cells.

Important Notes:

Demo

	Description	Team	Vehicle Form
Optimus Prime	The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron.	Autobots	Peterbilt Truck
Bumblebee	One of Optimus Prime's most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons.	Autobots	VW Beetle

Twig

Verbatim

HTML

Verbatim

Table Basic Fixed Width for First Column

A table with the firsts column matching the width of the content

Important Notes:

Demo

Set column widths to be flexible.

Prop	Number	Description	Type
attributes	1	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
headers	2	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
rows	3	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`array`
format	4	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`string`

Set the width of the first column to be as wide as the longest text.

Prop	Number	Description	Type
attributes	1	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
headers	2	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
rows	3	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`array`
format	4	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`string`

Set the width of the second column to be as wide as the longest text.

Prop	Number	Description	Type
attributes	1	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
headers	2	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
rows	3	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`array`
format	4	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`string`

Set the width of the first two columns to be as wide as the longest text.

Prop	Number	Description	Type
attributes	1	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
headers	2	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`object`
rows	3	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`array`
format	4	Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.	`string`

Twig

Verbatim

HTML

Verbatim

tables basic

table basic docs

Table Basic

Content container for tabular content.

table basic

With Rows Only

With Top Headers

With Side Headers

With Top and Side Headers

With Headers and Footer

Real Example

table basic format variations

Regular Format

Numeric Format

table basic borderless

table basic column fixed width

Set column widths to be flexible.

Set the width of the first column to be as wide as the longest text.

Set the width of the second column to be as wide as the longest text.

Set the width of the first two columns to be as wide as the longest text.

tables basic

table basic docs Show Code Hide Code

Table Basic

Content container for tabular content.

table basic Show Code Hide Code

With Rows Only

With Top Headers

With Side Headers

With Top and Side Headers

With Headers and Footer

Real Example

table basic format variations Show Code Hide Code

Regular Format

Numeric Format

table basic borderless Show Code Hide Code

table basic column fixed width Show Code Hide Code

Set column widths to be flexible.

Set the width of the first column to be as wide as the longest text.

Set the width of the second column to be as wide as the longest text.

Set the width of the first two columns to be as wide as the longest text.

table basic docs

table basic

table basic format variations

table basic borderless

table basic column fixed width