AI
AiDataTable
Bit.BlazorUI.AI
BitAiDataTable renders a JSON array of objects as a table: one row per object and one column per key, headed by the key written as a label. The columns are the union of the keys of every row, in the order they first appear, so a column a later row brings is never dropped - which is what a table filling in from a model's partial JSON needs. A nested value is shown as its JSON text and a missing one as an empty cell, and a wide table scrolls sideways in its own box rather than widening the conversation around it.
Notes
To use this component, you need to install the
Bit.BlazorUI.AI(opens in a new tab)
nuget package, as described in the Optional steps of the
Getting started page.
BitAiDataTable needs nothing but its Rows, a JsonElement. It is the table
BitAiStructuredDataView and
BitAiArtifactView draw an array of objects with, and the one
to render a tool result or any parsed JSON with yourself. It is a read-only view: the rows are not sorted, filtered or
paged - reach for BitDataGrid of Bit.BlazorUI.Extras for that. The live demo of streaming rows is the
Structured output scenario's too.
The box a wide table scrolls in sideways is a group in the tab order, so the keyboard can reach it and scroll it
in every engine (WebKit makes no scroller focusable on its own), named by its AriaLabel or the Table
string. It is a group rather than a region, so the tables of a page or a chat do not make a run of landmarks.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Hand Rows a JSON array of objects: every object is a row and every key a column, headed by the key
written as a label (contextWindow becomes "Context Window").
| Model | Context Window | Streaming | Price |
|---|---|---|---|
| Demo Large | 200000 | true | 15 |
| Demo Fast | 128000 | true | 1.5 |
| Local Small | 32000 | false | 0 |
Columns & cells
The columns are every key any row has, in the order they first appear - the second row brings tags, the
third owner, and both columns stay. A row without a key leaves its cell empty, as does a null; a nested
object or array is written as its JSON text; numbers and booleans as they were written (true, never
True). A header splits a key at its capitals and its underscores: lastLogin reads "Last Login" and
time_zone "Time zone".
| Id | Name | Active | Last Login | Tags | Owner | Time zone |
|---|---|---|---|---|---|---|
| 1 | Ada | true | 2026-10-20 | |||
| 2 | Grace | false | ["compilers", "navy"] | |||
| 3 | Linus | { "team": "kernel" } | UTC+2 |
Streaming rows
A model streams its rows as JSON text that is incomplete for most of the answer. The session gathers it in a
BitAiStructuredDataPart, whose Value is a lenient parse of what has arrived, so the table fills in
row by row and cell by cell while the JSON is still open. The transport here is a scripted one: no model, no key.
Wide tables
A table wider than the room it has scrolls sideways in its own box rather than widening the page or the
conversation around it. While it overflows, the box is a group in the tab order - Tab to it and scroll it with the
arrow keys - named by the AriaLabel of the table, or the Table text of the strings in force when it has none.
A tabindex written on the table (an attribute, passed through) decides that for it instead.
| Model | Context Window | Max Output | Input Price | Output Price | Latency Ms | Tokens Per Second | Vision | Tools | Json Mode | Region | Released |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Demo Large | 200000 | 32000 | 15 | 75 | 820 | 64 | true | true | true | eu-west | 2026-03-01 |
| Demo Fast | 128000 | 16000 | 1.5 | 6 | 240 | 180 | true | true | true | us-east | 2026-06-15 |
| Local Small | 32000 | 4000 | 0 | 0 | 120 | 95 | false | false | true | on-device | 2025-11-30 |
Cascading parameters
BitParams with a BitAiDataTableParams sets the Classes and Styles of the parts - and the
parameters every component shares, such as Dir or AriaLabel - of every table inside it, rather than
the rows a single table shows. A table keeps what it sets itself: the second one gives Styles of its own,
so the cascaded ones do not reach it.
| Model | Context Window | Streaming | Price |
|---|---|---|---|
| Demo Large | 200000 | true | 15 |
| Demo Fast | 128000 | true | 1.5 |
| Local Small | 32000 | false | 0 |
| Model | Context Window | Streaming | Price |
|---|---|---|---|
| Demo Large | 200000 | true | 15 |
| Demo Fast | 128000 | true | 1.5 |
| Local Small | 32000 | false | 0 |
Style & Class
Style and Class reach the root - the box the table scrolls in - and Styles and
Classes each part. The public --bit-AiDataTable-* variables (see the CSS variables table)
inherit, so set on :root, a container or a table's Style they re-skin every table below.
| Model | Context Window | Streaming | Price |
|---|---|---|---|
| Demo Large | 200000 | true | 15 |
| Demo Fast | 128000 | true | 1.5 |
| Local Small | 32000 | false | 0 |
| Model | Context Window | Streaming | Price |
|---|---|---|---|
| Demo Large | 200000 | true | 15 |
| Demo Fast | 128000 | true | 1.5 |
| Local Small | 32000 | false | 0 |
| Model | Context Window | Streaming | Price |
|---|---|---|---|
| Demo Large | 200000 | true | 15 |
| Demo Fast | 128000 | true | 1.5 |
| Local Small | 32000 | false | 0 |
RTL
In right-to-left text the columns run from the right and every cell starts on its right edge, whether the
direction comes from Dir or from a dir attribute around the table.
| مدل | پنجره زمینه | قیمت |
|---|---|---|
| دمو بزرگ | 200000 | 15 |
| دمو سریع | 128000 | 1.5 |
| مدل | پنجره زمینه | قیمت |
|---|---|---|
| دمو بزرگ | 200000 | 15 |
| دمو سریع | 128000 | 1.5 |
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitAiDataTable CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-AiDataTable-font-size | var(--bit-tpg-fs-sm) | Size of the text of the table. |
| --bit-AiDataTable-color | var(--bit-clr-fg-pri) | Color of the text of the cells. |
| --bit-AiDataTable-background | transparent | Background of the table. |
| --bit-AiDataTable-border-color | var(--bit-clr-brd-pri) | Color of the frame around the table. |
| --bit-AiDataTable-divider-color | var(--bit-clr-brd-sec) | Color of the rules between the rows. |
| --bit-AiDataTable-radius | var(--bit-shp-radius-surface) | Corner of the frame. |
| --bit-AiDataTable-cell-padding | spacing(1) spacing(1.5) | Inset of every cell, header cells included. |
| --bit-AiDataTable-header-background | var(--bit-clr-bg-sec) | Background of the header row. |
| --bit-AiDataTable-header-color | var(--bit-clr-fg-pri) | Color of the text of the header row. |
| --bit-AiDataTable-header-font-weight | var(--bit-tpg-fw-semibold) | Weight of the text of the header row. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiDataTable parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Classes | BitAiDataTableClassStyles? | null | Custom CSS classes for different parts of the data table. |
| Rows | JsonElement | default | The JSON array of objects to render (required): one row per item and one column per key, the columns being the union of the keys of every item in the order they first appear. A cell shows a string as its text, a number or a boolean as the JSON it was written as, a nested object or array as its JSON text, and a null or missing field as nothing. Anything but an array renders an empty table, and an item that is not an object an empty row. A partial payload repaired by BitAiPartialJson.TryParse renders as far as it has arrived. |
| Styles | BitAiDataTableClassStyles? | null | Custom CSS styles for different parts of the data table. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitAiDataTableClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAiDataTable, the box the table scrolls in sideways. |
| Table | string? | null | Custom CSS classes/styles for the table element of the BitAiDataTable. |
| HeaderRow | string? | null | Custom CSS classes/styles for the header row of the BitAiDataTable. |
| HeaderCell | string? | null | Custom CSS classes/styles for each header cell of the BitAiDataTable. |
| Row | string? | null | Custom CSS classes/styles for each body row of the BitAiDataTable. |
| Cell | string? | null | Custom CSS classes/styles for each body cell of the BitAiDataTable. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.