2.23.0

Table

Table Component in Bolt

Table layout for tabular content. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-table
Overview Usage Schema Edit this page Testing Steps
  {% 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 %}

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.

          • [items]:
            • Type: any
            • Properties:
              • content
                • Type: string
              • attributes
                • Type: object
    • 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

          • [items]:
            • Type: any
            • Properties:
              • content
                • Type: string
              • attributes
                • Type: object
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

      • [items]:
        • Type: any
        • Properties:
          • content
            • Type: string
          • attributes
            • Type: object
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

      • [items]:
        • Type: any
        • Properties:
          • content
            • Type: string
          • attributes
            • Type: object
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
  • true or false
first_col_fixed_width

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

boolean false
  • true or false
Debug Panel