Table

Table layout for tabular content.

Getting Started

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

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

Table layout for tabular content.

Name Type Value(s) Description Default
attributes object

A Drupal-style attributes object with extra attributes to append to this component.

 N/A
headers object
    • top
        • cells

          Each item represents a cell in the top header.

          • [items]:
            • Type: any
            • Properties:
              • content
                • Type: string
              • attributes
                • Type: object
    • side
        • cells

          Each item represents a cell in the side header.

          • [items]:
            • Type: any
            • Properties:
              • content
                • Type: string
              • attributes
                • Type: object

Generates top and side headers, each can contain an array of cells.

 N/A
rows* array
    • cells

      Each item represents a cell in a row.

      • [items]:
        • Type: any
        • Properties:
          • content
            • Type: string
          • attributes
            • Type: object

Generates an array of rows, each can contain an array of cells.

 N/A
footer object
    • cells

      Each item represents a cell in the footer.

      • [items]:
        • Type: any
        • Properties:
          • content
            • Type: string
          • attributes
            • Type: object

Generates a table footer, can contain an array of cells.

 N/A
format string
  • regular OR numeric

Display either a regular table or a more complex numeric table.

 regular
borderless boolean

Removes the vertical border in between cells.

 false
first_col_fixed_width boolean

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

 false