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 (Object)
columns.values Yes Array | Array[] Column labels. Single-level: ["A", "B"]. Multi-level: [["A1", "B1"], ["A2", "B2"]]
columns.names No Array Names for each column level in hierarchical order
columns.dtypes No Array Data type per column ("str", "int", "float", "bool", "datetime", "category")
columns.formatOptions No Object[] Locale formatting options per column (currency, notation, grouping, etc)
index (Object)
index.values Yes Array | Array[] Row labels. Single-level: ["Row1", "Row2"]. Multi-level: [["Group1", "Item1"], ["Group1", "Item2"]]
index.names No Array Names for each index level in hierarchical order
index.dtypes No Array Data type per index level
index.formatOptions No Object[] Locale formatting options per index level

Example Single-Level Structure

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

Example Multi-Level Structure

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