# AiDataTable
## Description
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.
## 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. |
| 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. |
## 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| 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. |
## Examples
\n**Basic**:
```razor
Compare the options
@if (OptionsPart?.Value is { } optionRows)
{
().FirstOrDefault();
private Task AskForOptionsAsync() => optionsSession.SubmitAsync("Compare the options");
public async ValueTask DisposeAsync()
{
if (renderScheduler is not null) await renderScheduler.DisposeAsync();
await optionsSession.DisposeAsync();
}
```
`AiDemoContentTransports.cs`:
```csharp
public static IBitAiTransport Structured() =>
new AiScriptedTransport((request, token) => AiScript.Stream(token, async yielder =>
{
await yielder(new BitAiMessageStartedEvent());
const string intro = "Four candidates, ranked by how much work each one would be.\n\n";
await foreach (var evt in AiScript.Write(intro, 4, 12, token)) await yielder(evt);
const string json = """
[
{"option":"Server-side rendering","effort":"Low","risk":"Low","notes":"Fastest to ship"},
{"option":"WebAssembly","effort":"Medium","risk":"Low","notes":"Best offline story"},
{"option":"Hybrid per page","effort":"Medium","risk":"Medium","notes":"Two mental models"},
{"option":"Rewrite the front end","effort":"High","risk":"High","notes":"Not this quarter"}
]
""";
// Fourteen characters at a time: the JSON is incomplete until the last slice.
foreach (var slice in AiScript.Slice(json, 14))
{
await AiScript.Pause(70, token);
await yielder(new BitAiStructuredDataDeltaEvent(slice) { SchemaName = "options" });
}
await yielder(new BitAiMessageCompletedEvent());
}));
```
\n**Wide tables**:
```razor
```
```csharp
private readonly JsonElement models = JsonDocument.Parse("""
[
{ "model": "Demo Large", "contextWindow": 200000, "streaming": true, "price": 15 },
{ "model": "Demo Fast", "contextWindow": 128000, "streaming": true, "price": 1.5 },
{ "model": "Local Small", "contextWindow": 32000, "streaming": false, "price": 0 }
]
""").RootElement;
private readonly BitAiDataTableParams[] dataTableParams =
[
new() { Styles = new() { HeaderCell = "text-transform: uppercase", Row = "font-variant-numeric: tabular-nums" } },
];
```
\n**Style & Class**:
```razor