Table

Content container for tabular content.

Published Last updated: 5.2.0 Change log Github NPM
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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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 Install
npm install @bolt/components-table
Dependencies @bolt/components-code-snippet @bolt/core-v3.x @bolt/lazy-queue himalaya