wc-flatbread-table

Web component

<flatbread-table> is a web component for displaying structured table data with these key features:

Below you'll find examples demonstrating the component's features and usage.

Output

Event

HTML

<!-- html -->
<flatbread-table src="data/example.json" locale="nl-NL"></flatbread-table>

Specifications

Attributes

CSS hooks

Events

Event Detail Description
data-changed Data object Fired when the component's data is updated
cell-click {value, source, row, col} Fired when a cell is clicked, providing cell information

Data

Field Required Type Description
values Yes 2D Array Table data content arranged in rows and columns
columns Yes Array Column labels (single-level): ["A", "B"]
Array[] Column labels (multi-level): [["A1", "B1"], ["A2", "B2"]]
index Yes Array Row labels (single-level): ["Row1", "Row2"]
Array[] Row labels (multi-level): [["Group1", "Item1"], ["Group1", "Item2"]]
columnNames No Array Names for each column level in hierarchical order
indexNames No Array Names for each index level in hierarchical order
dtypes No Array Data type per column ("str", "int", "float", "bool", "datetime", "category")
formatOptions No Object[] Locale formatting options per column (currency, notation, grouping, etc)

Example Single-Level Structure

{
    "values": [[1, 2], [3, 4]],
    "columns": ["A", "B"],
    "index": ["Row1", "Row2"],
    "columnNames": ["Products"],
    "indexNames": ["Items"],
    "dtypes": ["int", "int"]
}

Example Multi-Level Structure

{
    "values": [[1, 2], [3, 4]],
    "columns": [["2023", "Q1"], ["2023", "Q2"]],
    "index": [["Region1", "City1"], ["Region1", "City2"]],
    "columnNames": ["Year", "Quarter"],
    "indexNames": ["Region", "City"],
    "dtypes": ["int", "int"]
}