Bolt Design System

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

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`

Table

Published

Overview

Install via NPM

Usage

Schema