Bolt Design System

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

Content container for tabular content.