Bolt Design System

Twig Usage

{% include '@bolt-components-table/table.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`	—
first_col_fixed_width	Sets the width of the first column to be as wide as the longest text.	`boolean`	`false`	—
caption	Set a table caption, displayed below the table content.	`string`	—	—

Install

npm install @bolt/components-table

Dependencies

@bolt/components-code-snippet

@bolt/core-v3.x

@bolt/lazy-queue

himalaya

Table

Content container for tabular content.