2.21.0

Table

Table Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-table
Source code
View on Github
Dependencies
@bolt/core-v3.x himalaya

Overview

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

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.

          • [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