fix: [dev-5] DataGrid rendering performance is slow

[Bartsz]

🐛 Bug Report

DataGrid takes a lot of time to apply changes after sorting or grouping (reordering columns also takes a lot of time).
For 200 rows and ~8 columns it takes ~500ms from click to show changes

💻 Repro or Code Sample

Steps to reproduce:

1. Open weather page
2. Sort by any column.

@page "/weather"
@using System.Diagnostics
@inject ILogger<Weather> Logger

<PageTitle>Weather</PageTitle>
 
<FluentDataGrid Id="weathergrid"
                Items="@forecasts"
                OnSortChanged="@HandleOnSortChanged" 
                GridTemplateColumns="1fr 1fr 1fr 2fr" TGridItem=WeatherForecast>
    <PropertyColumn Title="Date" Property="@(c => c!.Date)" Sortable="true" Align="DataGridCellAlignment.Start" />
    <PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Sortable="true" Align="DataGridCellAlignment.Center" />
    <PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Sortable="true" Align="DataGridCellAlignment.Center" />
    <PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Sortable="true" Align="DataGridCellAlignment.End" />
</FluentDataGrid>

@code {
    private IQueryable<WeatherForecast>? forecasts;
    private Stopwatch _eventToRenderWatch = new();
    private int _renderCount;

    private void HandleOnSortChanged()
    {
        _eventToRenderWatch.Restart();
    }
    protected override void OnInitialized()
    {
        base.OnInitialized();

        forecasts = Enumerable.Range(1, 505).Select(index => new WeatherForecast
        {
            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = (index % 5) switch
            {
                0 => "Freezing",
                1 => "Bracing",
                2 => "Chilly",
                3 => "Cool",
                4 => "Mild",
            }
        })
         .ToList()
         .AsQueryable();
    }

    protected override void OnAfterRender(bool firstRender)
    {
        _renderCount++;

        if (_eventToRenderWatch.IsRunning)
        {
            _eventToRenderWatch.Stop();
            Debug.WriteLine($"Event to render: {_eventToRenderWatch.Elapsed.TotalMilliseconds,7:N6}ms");
            _eventToRenderWatch.Reset();
        }
        Debug.WriteLine($"Render #{_renderCount}, firstRender={firstRender}"); 
    }

    public class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

🤔 Expected Behavior

At discussed scale, this should take less than few frames to render, less then 30ms would be good target to display changes - within 2 rendered frames on 60Hz refresh rate monitor.

😯 Current Behavior

Applying changes takes a lot of time and rendering/layout on the browser side is not an issue as seen on the screenshot below.
Screenshot from template project "weather" page with 505 rows and 4 columns => event takes 600ms in release mode
Layerize, Pre-paint and Layout takes total of ~65ms after the event.

On this screenshot I think we can see that the wasm.function[213] takes 500ms and only 50ms is self time

I've tried to see a CPU Usage profile from .NET but it doesn't show any detailed split.

💁 Possible Solution

🔦 Context

N/A

🌍 Your Environment

• Windows, Laptop PC
• Google Chrome
• .NET10, Blazor, Fluent UI v5 RC3

[vnbaaij]

Thanks for the extensive report but I can't run the demo code as-is:

error CS8509: The switch expression does not handle all possible values of its input type (it is not exhaustive). For example, the pattern '6' is not covered. Fail Fast: Build cancelled because project "FluentUI.Demo.Client" failed at 21:44:52.

For this one I think it actually might be better if you just create a repo with a project. That way we know we are all looking at the same things. Just pasting this into a new page in the demo environment might dilute the findings.

Our DataGrid is a 'beefed up' version of the QuickGrid component. Could be interesting to test against that standard component as well to see if the measured results are because of the way these components work or if it is because of our changes. Would be great if you want to/can help us with that.

[Bartsz]

I've just checked against QuickGrid and it is fast enough - 48ms for the event handling and 10ms for layout.
Repo available at https://github.com/Bartsz/fluentui-datagrid.git
I've checked against FluentUI v4 and it has same issue.

Issue is actually not related to sorting, it is just rendering issue. When you jump between two grids you'll notice that QuickGrid loads instantly and DataGrid takes time.

Image of Quick Grid loading from performance recorder

[Bartsz]

I've added virtualization toggles to both grids and in case od Fluent DataGrid it solves the problem, so it seems lees likely to be affected by "large" amount of data and more to do with rendering.

Side note - while working on Sorting, you've fixed a bug with QuickGrid where after removing virtualization, sorting stops working.

[vnbaaij]

I've added virtualization toggles to both grids and in case od Fluent DataGrid it solves the problem, so it seems lees likely to be affected by "large" amount of data and more to do with rendering.

What do you mean with 'less likely'? I think the slower rendering is caused by having a large dataset. When using Virtualize, only the on-screen shown rows are re-rendered (plus a few extra below or above the visible area so much less work to do

Side note - while working on Sorting, you've fixed a bug with QuickGrid where after removing virtualization, sorting stops working.

Not sure what you mean with this. Can you explain/rephrase?

[vnbaaij]

I think this is a good candidate to engage the Copilot Profiler Agent on. Unfortunately, I am out of tokens for this month so this needs to wait for a bit. If you, or anyone else want to have a go at this, that would be great of course,

[Bartsz]

I've added virtualization toggles to both grids and in case od Fluent DataGrid it solves the problem, so it seems lees likely to be affected by "large" amount of data and more to do with rendering.

What do you mean with 'less likely'? I think the slower rendering is caused by having a large dataset. When using Virtualize, only the on-screen shown rows are re-rendered (plus a few extra below or above the visible area so much less work to do

Absolutely, it is directly proportional to dataset size. Maybe I have a wrong mental model but my assumption was that there is clear separation in preparing data and then passing the data to generate Render Tree (generating html). My guess is that it has to to with second part.

My reasoning was following:
Given that

• DataGrid is based on QuickGrid
• DataGrid is slower then QuickGrid
• Virtualization "solves" the problem, regardless of dataset size

If the issue was with a bad code related to handling input dataset (by handling I mean all the steps before executing steps necessary for rendering), virtualization wouldn't impact the first step of processing data - whole dataset has to be process for sorting and therefore total time would be similar. Therefore (maybe wrongly) I'd guess that it is something wrong with last phase of passing the data to "rendering functions". It could be issue with keys and generating Render Batch but that I'd guess is unlikely given 500ms for 2000 elements (500 rows x 4 columns).
It is also possible that virtualization is a first step in the pipeline, using something like LINQ dataset.Take(screenRowsCount + margin) and my argument fails. That's why I said it is more likely to do with rendering.

Side note - while working on Sorting, you've fixed a bug with QuickGrid where after removing virtualization, sorting stops working.

Not sure what you mean with this. Can you explain/rephrase?

Steps to reproduce based on provided repo:

1. Open "Quick Grid" page
2. Toggle Virtualize to On
3. Sort By Date - confirm it sorts
4. Sort By Date again - confirm it sorts
5. Toggle Virtualize Off
6. Sort by Date or any other column - it doesn't work anymore by any column.

Repeat above steps for "FluentUI DataGrid" and sorting works after toggling Virtualize to Off - although with an expected lag.

As to profiling, I've checked it and at least when using nuget I get almost nothing - to the extent that even tooltip on button Analyze says Not enough info

[Bartsz]

I've done some thinking and talking to paid GPT and I started from noticing the difference between QuickGrid and Fluent DataGrid rendered html structure.

QuickGrid

FluentUI DataGrid

I hope I'm not offending by stating something obvious, however according to chat research which found https://learn.microsoft.com/en-us/aspnet/core/blazor/performance/rendering?view=aspnetcore-10.0 , each html node comment

<!--!-->

represents logical anchor for Blazor and it is created by each nested component in razor structure.
and in the article why can read:

In a test performed by the ASP.NET Core product unit engineers, a rendering overhead of around 0.06 ms per component instance was seen in a Blazor WebAssembly app. The test app rendered a simple component that accepts three parameters. Internally, the overhead is largely due to retrieving per-component state from dictionaries and passing and receiving parameters. By multiplication, you can see that adding 2,000 extra component instances would add 0.12 seconds to the rendering time and the UI would begin feeling slow to users.

This doesn't directly explain 500ms but at least 120ms of which would be ~25% of the issue. However there is a huge difference in complexity between QuickGrid and DataGrid and this might be the culprit.
Additionally, Fluent <td> has more attributes

• col-index - plenty of usage of this in .ts too much for me to quickly understand it and suggest alternative.
• style
  • grid-column maybe this could be skipped and generated by code. On column change, sort columns by attribute e.g. columnOrder and column order would be generated by html nodes order.

 @for (var colIndex = 0; colIndex < _columns.Count; colIndex++)
            {
                var col = _columns[colIndex]; // columns  could be presorted on drag & drop or loading spec

• • height maybe this could be moved to CSS`
• role maybe this could be optional for users who want grid to behave more like spreadsheet
• tab-index - like above and for inputs and buttons which are focusable, this is not needed?

QuickGrid

private void RenderRow(RenderTreeBuilder __builder, int rowIndex, TGridItem item)
    {
        var rowClass = RowClass?.Invoke(item);
        var combinedClass = OnRowClick.HasDelegate
            ? string.IsNullOrEmpty(rowClass) ? "row-clickable" : $"row-clickable {rowClass}"
            : rowClass;
        var rowClick = OnRowClick.HasDelegate ? EventCallback.Factory.Create<MouseEventArgs>(this, () => OnRowClick.InvokeAsync(item)) : default;

        <tr @key="@(ItemKey(item))"
            aria-rowindex="@rowIndex"
            class="@combinedClass"
            @onclick="@rowClick">
            @foreach (var col in _columns)
            {
                <td class="@ColumnClass(col)" @key="@col">@{ col.CellContent(__builder, item); }</td>
            }
        </tr>
    }

FluentUI DataGrid

  private void RenderRow(RenderTreeBuilder __builder, int rowIndex, TGridItem item)
    {
        var rowClass = RowClass?.Invoke(item) ?? null;
        var rowStyle = RowStyle?.Invoke(item) ?? null;

        <FluentDataGridRow @key="@(ItemKey(item))" aria-rowindex="@rowIndex" Class="@rowClass" Style="@rowStyle" TGridItem="TGridItem" Item="@item">
            @for (var colIndex = 0; colIndex < _columns.Count; colIndex++)
            {
                var col = _columns[colIndex];

                string? tooltip = col.Tooltip ? @col.RawCellContent(item) : null;

                <FluentDataGridCell GridColumn=@(colIndex + 1) Class="@ColumnJustifyClass(col)" Style="@col.Style" @key="@col" TGridItem="TGridItem" Item="@item" title="@tooltip" aria-label="@tooltip" tabindex="@(col.DisableCellFocus ? null : 0)">
                    @if (col.HierarchicalToggle && item is IHierarchicalGridItem hierarchicalItem)
                    {
                        <span class="hierarchical-toggle-container" style="margin-inline-start: calc(var(--spacingHorizontalL) * @hierarchicalItem.Depth);">
                            <span @onclick:stopPropagation="true" class="hierarchical-expander @(hierarchicalItem.IsCollapsed ? "hierarchical-collapsed" : "hierarchical-expanded")">
                                @if (hierarchicalItem.HasChildren)
                                {
                                    <FluentButton aria-label="@Localizer[Localization.LanguageResource.DataGrid_ToggleNesting]" Appearance="ButtonAppearance.Subtle" Size="ButtonSize.Small" Class="hierarchical-expand-button" OnClick="@(() => ToggleExpandedAsync(item))">
                                        <FluentIcon Width="12" Value="@(new CoreIcons.Regular.Size20.ChevronRight())" Color="Color.Default" />
                                    </FluentButton>
                                }
                            </span>
                            @((RenderFragment)(__builder => col.CellContent(__builder, item)))
                        </span>
                    }
                    else
                    {
                        @((RenderFragment)(__builder => col.CellContent(__builder, item)))
                    }
                </FluentDataGridCell>
            }
        </FluentDataGridRow>
    }

[vnbaaij]

This doesn't directly explain 500ms but at least 120ms of which would be ~25% of the issue. However there is a huge difference in complexity between QuickGrid and DataGrid and this might be the culprit.
Additionally, Fluent has more attributes

As you already said, there is quite a big difference in not only complexity but also in possibilities. think we shouldn't focus on QuickGrid too much but more as a guideline we can try to follow to improve things for the FluentDataGrid.

I can't go into your observations too much now, but at least role and tabindex are there and needed because of accessibility requirements. If we need to sacrifice some performance for having good a11y support, than so be it. A11y is non-negotiable as far as I'm concerned,

[Bartsz]

Absolutely, feature wise it is a huge improvement and I understand your stance on those features.
I downloaded the repo and tried to rewrite (sorry for butchering your code, but it is just to test the hypothesis of simplifing structure)

Initial times with 500 rows @ debug ms / release ms
QuicGrid 62-69ms / 37ms
DataGrid 1100ms / 600ms

After flattening to below code, render time goes down to 280ms-312ms in debug

    private void RenderNonVirtualizedRows(RenderTreeBuilder __builder)
{
//...
foreach (var item in _internalGridContext.Items)
{
    rowIndex++;
    var rowClass = RowClass?.Invoke(item) ?? null;
    var rowStyle = RowStyle?.Invoke(item) ?? null;
    var rowId = item?.GetHashCode().ToString();

    <CascadingValue Value="this" Name="OwningRow">
        <tr id="@Id"
            @key="@(ItemKey(item))"
            class="@rowClass" style="@rowStyle" data-row-index=@rowIndex aria-rowindex="@rowIndex" role="row" row-type="@(DataGridRowType.Default)"
            @onkeydown="@(e => Task.CompletedTask)" @onclick="@(e => Task.CompletedTask)" @ondblclick="@(e => Task.CompletedTask)" @onfocus="@(e => Task.CompletedTask)"
            @attributes="AdditionalAttributes">

            @for (var colIndex = 0; colIndex < _columns.Count; colIndex++)
            {
                var col = _columns[colIndex];
                var cellId = rowId + colIndex.ToString();
                string? tooltip = col.Tooltip ? @col.RawCellContent(item) : null;
                <td id="@Id"
                    @key="@col"
                    col-index=@(colIndex + 1) class="@ColumnJustifyClass(col)" style="@col.Style" role="gridcell" title="@tooltip" aria-label="@tooltip" tabindex="@(col.DisableCellFocus ? null : 0)"
                    @onkeydown="@(e => Task.CompletedTask)" @onclick="@(e => Task.CompletedTask)" @onfocus="@(e => Task.CompletedTask)"
                    @attributes="AdditionalAttributes">

                    @if (col.HierarchicalToggle && item is IHierarchicalGridItem hierarchicalItem)
                    {
                        <span class="hierarchical-toggle-container" style="margin-inline-start: calc(var(--spacingHorizontalL) * @hierarchicalItem.Depth);">
                            <span @onclick:stopPropagation="true" class="hierarchical-expander @(hierarchicalItem.IsCollapsed ? "hierarchical-collapsed" : "hierarchical-expanded")">
                                @if (hierarchicalItem.HasChildren)
                                {
                                    <FluentButton aria-label="@Localizer[Localization.LanguageResource.DataGrid_ToggleNesting]" Appearance="ButtonAppearance.Subtle" Size="ButtonSize.Small" Class="hierarchical-expand-button" OnClick="@(() => ToggleExpandedAsync(item))">
                                        <FluentIcon Width="12" Value="@(new CoreIcons.Regular.Size20.ChevronRight())" Color="Color.Default" />
                                    </FluentButton>
                                }
                            </span>
                            @((RenderFragment)(__builder => col.CellContent(__builder, item)))
                        </span>
                    }
                    else
                    {
                        @((RenderFragment)(__builder => col.CellContent(__builder, item)))
                    }
                </td>
            }
        </tr>
    </CascadingValue>
}
}

and the structure now has one logical marker <!--!--> which is generated by <CascadingValue>

After removing following:

• <CascadingValue> => goes down to 210-225ms debug
• id from rows and cells => 190-200ms debug
• data-row-index from <tr> => marginal improvement if any (obvious since we removed only 500 elements
• data-row-index from => 160-180ms debug - surprisingly resizing and reordering works, event though FluentDataGrid.razor.ts uses those attributes. However I think that those can be replaced with direct elements manipulation - see below.

In release mode it goes down to around 130-140ms.
There is still room for improvement but it is now more or less acceptable. It will also impact Virtualized rows which with original implementation, take just as much time to render 20 rows as simplified structure renders 500.

After above changes, I've played with resizing and reordering and I've noticed that function EnableColumnResizing in FluentDataGrid.razor.ts takes 23ms, which is now becoming significant, and might requires attention - it spends half od it's time on triggering Layout and Recalculation. Unfortunately i don't see any obvious issue - maybe small caching opportunity but nothing significant.

Accessing cells at column index

Assumption: cells are getting new col index as soon as columns are reordered, so col index and col position inside <tr> element is always aligned. When I was dragging the columns, this assumption held true, at least superficially.

Direct access instead of querySelectorAll should be 2x faster. Not very important since we're talking about sub ms times for big tables but it adds up.

 /**
  * Applies a cumulative sticky offset to all cells in a column and returns the new
  * running total to be used by the next column in the sequence.
  */
 function applyOffset(header: HTMLElement, offset: number, side: 'insetInlineStart' | 'insetInlineEnd'): number {
   const colIndex = header.getAttribute('col-index');
   if (!colIndex) { return offset; }

   // since cell index is always aligned with cell position in row, we can do this
   let table: HTMLTableElement = gridElement as HTMLTableElement;
   const rows = table.rows;
   const colIndexNum = Number(colIndex);
   for (let i = 0; i < rows.length; i++) {
     const cell = rows.item(i)?.cells.item(colIndexNum)
     if (!cell) continue;
     cell.style[side] = offset + 'px';
   }

   //instead of this
   (gridElement.querySelectorAll(`[col-index="${colIndex}"]`) as NodeListOf<HTMLElement>)
     .forEach(cell => { cell.style[side] = offset + 'px'; });

   return offset + headerWidth(header);
 }

[vnbaaij]

After flattening to below code, render time goes down to 280ms-312ms in debug

Well, that is a very good improvement already!

Am I correct with assuming that with flattening you've basically 'inlined' the FluetDataGridRow and FluentDataGridCell components? Doing that is an option but it would eliminate the option of specifying a grid declaratively (ie define a grid by only using components). I think that is an acceptable, breaking, change we can consider for v5. Another option would be to introduce a parameter and offer both the optimized and non-optimized rendering options.

I think it would help if you can create a (draft) PR against this repo so that we can checkout your changes more easily, can verify against our unit tests, etc.

Thanks for your effort so far!

[Bartsz]

Am I correct with assuming that with flattening you've basically 'inlined' the FluetDataGridRow and FluentDataGridCell components? Doing that is an option but it would eliminate the option of specifying a grid declaratively (ie define a grid by only using components). I think that is an acceptable, breaking, change we can consider for v5. Another option would be to introduce a parameter and offer both the optimized and non-optimized rendering options.

Exactly, inlining by copy, paste, fix. From row and cell component into rows loop.

I looked at MudBlazor and they have similar issue with rendering at 300ms in Release mode.

<tbody class="mud-table-body">
   <!--!-->
   <!--!-->
   <tr class="mud-table-row " style="">
      <!--!-->
      <td data-label="Nr" class="mud-table-cell" style="">6/20/2026</td>
      <!--!-->
      <td data-label="TemperatureC" class="mud-table-cell" style="">-5</td>
      <!--!-->
      <td data-label="TemperatureF" class="mud-table-cell" style="">24</td>
      <!--!-->
      <td data-label="Summary" class="mud-table-cell" style="">Bracing</td>
      <!--!-->
   <!-- more rows !-->
</tbody>

However I'm thinking what strategy and architecture to adopt to get peak performance. It would require change in approach, to rely more on JS side and less on Blazor side. It might also not be feasible due to factors I don't see.
Just to check the reference performance, I've created an attached table manager.
On my computer I get

• 10ms to generate 500 rows, (stringify, parse and replace table)
• 4 ms to sort.
• 9ms to add multiple attributes
  That would an entitlement in Lean Six Sigma lingo.

I don't know of a method that would provide a render tree directly to JS based on which JS could replicate html structure from Blazor code, and going all the way to manually parsing Render Tree from Blazor or writing a new framework is a bit too much 😆 , so next best thing that comes to my mind is:

1. Blazor renders initial table
2. After that, full control over existing table is given to JS 'Table Controler' class with functions

• dataReplaced()
  • get references of all necessary elements (header cells, rows, etc)
  • possible if it receives information on attributes per column, it could inject all the 'aria', 'role', etc. attributes to each column cell, so that full functionality is met while maintaining peak performance.
• reorderData(indices, column , order)
  • this would receive list of objects { id: id of an object, position: position in new ordering } and reorder rows based on it
  • update indicators of header cells by manipulating classes
  • this way we could relay on whatever sorting function is defined in C#, which will sort the rows and invoke JS function with new order data
• colapse(groupId)
  • this could probably be done only in JS as maybe Blazor doesn't need to know which row is collapsed
• addRow(id, sortOrder)
  • when adding, removing or replacing rows of streamed data, we could create a second <tbody style="display:none"> where Blazor would render complete row
  • JSFunction would be invoked and take the row from second tbody and move html element into the main tbody or if action .
  • if sortOrder was provided rows would be ordered and if not, row would appear at the end.
• removeRow(id)
  • same as above but simpler
• replaceRow(id)
  • same as add but simpler

3. After any changes in rows are made on the Blazor side, data is normally updated by blazor and JS class function dataReplaced() is called. JS will reload all references to objects.

Any updates in inputs can be automatically send back to Blazor by automatically adding listeners to enabled inputs and sending back {id, odlValue, newValue}

In summary, what we get assuming happy path, is:

• full functionality of DataGrid
• 'native' JS performance of sorting, reordering etc.
• decent performance of initial grid rendering (after trimming everything while keeping components, we could go down to 200ms at 500rows)

JS Code for Table Performance test in JS

Copy paste to console in browser

class WeatherForecastTableManager {
  /**
   * @param {HTMLElement|string} root
   * @param {Partial<TableManagerOptions>} [options]
   */
  constructor(root, options = {}) {
    /** @type {HTMLElement} */
    this.root = typeof root === "string"
      ? /** @type {HTMLElement} */ (document.querySelector(root))
      : root;

    if (!this.root) {
      throw new Error("Root element not found.");
    }

    /** @type {TableManagerOptions} */
    this.options = {
      rowCount: options.rowCount ?? 500,
      benchmarkIterations: options.benchmarkIterations ?? 100,
      benchmarkFrameMs: options.benchmarkFrameMs ?? 20
    };

    /** @type {TableColumn[]} */
    this.columns = [
      { key: "id", label: "Id" },
      { key: "date", label: "Date" },
      { key: "temperatureC", label: "Temperature C" },
      { key: "temperatureF", label: "Temperature F" },
      { key: "summary", label: "Summary" }
    ];

    /** @type {WeatherForecast[]} */
    this.items = [];

    /** @type {string} */
    this.jsonString = "";

    /** @type {HTMLDivElement|null} */
    this.controls = null;

    /** @type {HTMLButtonElement|null} */
    this.replaceDataButton = null;

    /** @type {HTMLButtonElement|null} */
    this.addAttributesButton = null;

    /** @type {HTMLButtonElement|null} */
    this.sortDataReplaceButton = null;

    /** @type {HTMLButtonElement|null} */
    this.sortDataReorderButton = null;

    /** @type {HTMLPreElement|null} */
    this.output = null;

    /** @type {HTMLTableElement|null} */
    this.table = null;

    /** @type {HTMLTableSectionElement|null} */
    this.thead = null;

    /** @type {HTMLTableSectionElement|null} */
    this.tbody = null;

    /** @type {HTMLTableSectionElement|null} */
    this.tfoot = null;

    /** @type {Map<number, HTMLTableRowElement>} */
    this.rowById = new Map();

    /** @type {HTMLTableRowElement[]}*/
    this.rows = [];

    /** @type {Map<number, WeatherForecast>} */
    this.itemById = new Map();

    /** @type {Record<string, boolean>} */
    this.sortDirections = {};
  }

  /**
   * Renders controls, table, thead, tbody, and tfoot,
   * then stores references to the created elements.
   *
   * @returns {void}
   */
  initialize() {
    this.root.textContent = "";

    this.jsonString = this.createJson(this.options.rowCount);
    this.replaceData(this.jsonString);

    this.controls = document.createElement("div");
    this.controls.style.display = "flex";
    this.controls.style.gap = "8px";
    this.controls.style.marginBottom = "8px";

    this.replaceDataButton = document.createElement("button");
    this.replaceDataButton.textContent = "replace data";
    this.replaceDataButton.addEventListener("click", () => {
      void this.runBenchmark("replace data", () => {
        this.jsonString = this.createJson(this.options.rowCount);
        this.replaceData(this.jsonString);
        this.renderData();
      });
    });

    this.addAttributesButton = document.createElement("button");
    this.addAttributesButton.textContent = "add attributes";
    this.addAttributesButton.addEventListener("click", () => {
      void this.runBenchmark("add attribuets", () => { 
        this.renderData();
        this.addAttributes();
      });
    });

    this.sortDataReplaceButton = document.createElement("button");
    this.sortDataReplaceButton.textContent = "sort data replace";
    this.sortDataReplaceButton.addEventListener("click", () => {
      void this.runBenchmark("sort data replace", () => {
        this.sortElements("temperatureC", "replace");
      });
    });

    this.sortDataReorderButton = document.createElement("button");
    this.sortDataReorderButton.textContent = "sort data reorder";
    this.sortDataReorderButton.addEventListener("click", () => {
      void this.runBenchmark("sort data reorder", () => {
        this.sortElements("temperatureC", "reorder");
      });
    });

    for (const button of [
      this.replaceDataButton,
      this.sortDataReplaceButton,
      this.sortDataReorderButton,
      this.addAttributesButton
    ]) {
      button.style.appearance = "none";
      button.style.border = "1px solid #d0d7de";
      button.style.borderRadius = "8px";
      button.style.background = "linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%)";
      button.style.boxShadow = "0 1px 2px rgba(16, 24, 40, 0.08)";
      button.style.color = "#24292f";
      button.style.cursor = "pointer";
      button.style.font = "500 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
      button.style.padding = "8px 12px";
      button.style.transition = "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease";

      button.addEventListener("mouseenter", () => {
        button.style.background = "linear-gradient(180deg, #f6f8fa 0%, #eef1f4 100%)";
        button.style.borderColor = "#afb8c1";
        button.style.boxShadow = "0 2px 4px rgba(16, 24, 40, 0.12)";
      });

      button.addEventListener("mouseleave", () => {
        button.style.background = "linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%)";
        button.style.borderColor = "#d0d7de";
        button.style.boxShadow = "0 1px 2px rgba(16, 24, 40, 0.08)";
        button.style.transform = "translateY(0)";
      });

      button.addEventListener("mousedown", () => {
        button.style.transform = "translateY(1px)";
      });

      button.addEventListener("mouseup", () => {
        button.style.transform = "translateY(0)";
      });
    }

    this.output = document.createElement("pre");
    this.output.style.margin = "8px 0";
    this.output.style.whiteSpace = "pre-wrap";

    this.controls.append(
      this.replaceDataButton,
      this.sortDataReplaceButton,
      this.sortDataReorderButton,
      this.addAttributesButton
    );

    this.table = document.createElement("table");
    this.table.style.borderCollapse = "collapse";
    this.table.style.width = "100%";

    this.thead = document.createElement("thead");
    this.tbody = document.createElement("tbody");
    this.tfoot = document.createElement("tfoot");

    const headerRow = document.createElement("tr");

    for (const column of this.columns) {
      const th = document.createElement("th");
      th.textContent = column.label;
      th.dataset.column = column.key;
      th.style.border = "1px solid #ccc";
      th.style.padding = "4px 8px";
      th.style.cursor = "pointer";
      th.style.textAlign = "left";

      th.addEventListener("click", () => {
        this.sortElements(column.key, "reorder");
      });

      headerRow.append(th);
    }

    this.thead.append(headerRow);

    const footerRow = document.createElement("tr");
    const footerCell = document.createElement("td");
    footerCell.colSpan = this.columns.length;
    footerCell.textContent = `Rows: ${this.items.length}`;
    footerCell.style.border = "1px solid #ccc";
    footerCell.style.padding = "4px 8px";
    footerRow.append(footerCell);
    this.tfoot.append(footerRow);

    this.table.append(this.thead, this.tbody, this.tfoot);
    this.root.append(this.controls, this.output, this.table);

    this.renderData();
  }

  /**
   * Creates JSON from WeatherForecast records and also stores it inside the class.
   *
   * @param {number} [count]
   * @returns {string}
   */
  createJson(count = this.options.rowCount) {
    /** @type {string[]} */
    const summaries = [
      "Freezing",
      "Bracing",
      "Chilly",
      "Cool",
      "Mild",
      "Warm",
      "Balmy",
      "Hot",
      "Sweltering",
      "Scorching"
    ];

    /** @type {WeatherForecast[]} */
    const data = Array.from({ length: count }, (_, index) => {
      const temperatureC = Math.floor(Math.random() * 75) - 20;

      return {
        id: index + 1,
        date: `2026-06-${String((index % 30) + 1).padStart(2, "0")}`,
        temperatureC,
        temperatureF: 32 + Math.trunc(temperatureC / 0.5556),
        summary: summaries[index % summaries.length]
      };
    });

    this.jsonString = JSON.stringify(data);
    return this.jsonString;
  }

  /**
   * Parses a JSON string and replaces the internal object list.
   *
   * @param {string} jsonString
   * @returns {void}
   */
  replaceData(jsonString) {
    /** @type {WeatherForecast[]} */
    const parsed = JSON.parse(jsonString);

    this.items = parsed;
    this.rebuildItemIndex();
  }

  /**
   * Generates all <tr> and <td> elements through a documentFragment,
   * then replaces tbody with a single replaceChildren() call.
   *
   * @returns {void}
   */
  renderData() {
    if (!this.tbody) {
      throw new Error("Table is not initialized.");
    }

    const fragment = document.createDocumentFragment();
    this.rowById.clear();
    this.rows = [];

    for (const item of this.items) {
      const row = this.createRow(item);
      fragment.append(row);
      this.rowById.set(item.id, row);
      this.rows.push(row);
    }

    this.tbody.replaceChildren(fragment);
    this.updateFooter();
  }

  /**
   * Finds an object by id, replaces it in the array,
   * finds the matching <tr> by id, and replaces the cell contents.
   *
   * @param {WeatherForecast} object
   * @returns {boolean}
   */
  replaceElement(object) {
    const index = this.items.findIndex(item => item.id === object.id);

    if (index === -1) {
      return false;
    }

    this.items[index] = object;
    this.itemById.set(object.id, object);

    const row = this.rowById.get(object.id);

    if (!row) {
      return false;
    }

    this.updateRowCells(row, object);
    return true;
  }

  addAttributes() {
    for (const row of this.rows) {
      row.setAttribute("aria-lable", "value 1")
      row.setAttribute("role", "row")
      let colIndex = 0;

      for (const cell of row.cells) {
          
          cell.setAttribute("col-index", colIndex++);
          cell.setAttribute("aria-label", colIndex++);
          cell.setAttribute("role", "cell");
      }
    }
  }

  /**
   * Sorts elements by column.
   *
   * mode = "replace":
   * - sorts the array
   * - does not change the <tr> order
   * - replaces values in each cell if they are different
   *
   * mode = "reorder":
   * - gets the existing tbody children
   * - sorts the existing <tr> objects
   * - runs replaceChildren() with the same <tr> elements, only in a new order
   *
   * @param {WeatherForecastKey} column
   * @param {SortMode} [mode]
   * @returns {void}
   */
  sortElements(column, mode = "replace") {
    const ascending = !(this.sortDirections[column] ?? false);
    this.sortDirections[column] = ascending;

    if (mode === "replace") {
      this.sortElementsByArrayAndReplaceCells(column, ascending);
      return;
    }

    this.sortElementsByReorderRows(column, ascending);
  }

  /**
   * Implementation 1:
   * sorts the array and replaces values in cells
   * if the value is different.
   *
   * @param {WeatherForecastKey} column
   * @param {boolean} ascending
   * @returns {void}
   */
  sortElementsByArrayAndReplaceCells(column, ascending) {
    this.items.sort((a, b) => this.compareValues(a[column], b[column], ascending));
    this.rebuildItemIndex();

    if (!this.tbody) {
      throw new Error("Table is not initialized.");
    }

    /** @type {HTMLTableRowElement[]} */
    const rows = Array.from(this.tbody.children)
      .filter(node => node instanceof HTMLTableRowElement);

    this.rowById.clear();

    for (let i = 0; i < this.items.length; i++) {
      const item = this.items[i];
      const row = rows[i];

      if (!row) {
        continue;
      }

      row.dataset.id = String(item.id);
      this.updateRowCells(row, item);
      this.rowById.set(item.id, row);
    }
  }

  /**
   * Implementation 2:
   * sorts existing <tr> elements by the value of a specific cell
   * and runs replaceChildren() with the same elements.
   *
   * @param {WeatherForecastKey} column
   * @param {boolean} ascending
   * @returns {void}
   */
  sortElementsByReorderRows(column, ascending) {
    if (!this.tbody) {
      throw new Error("Table is not initialized.");
    }

    /** @type {HTMLTableRowElement[]} */
    const rows = Array.from(this.tbody.children)
      .filter(node => node instanceof HTMLTableRowElement);

    rows.sort((rowA, rowB) => {
      const valueA = this.getCellValue(rowA, column);
      const valueB = this.getCellValue(rowB, column);

      return this.compareValues(valueA, valueB, ascending);
    });

    this.tbody.replaceChildren(...rows);

    this.items = rows
      .map(row => Number(row.dataset.id))
      .map(id => this.itemById.get(id))
      .filter(Boolean);

    this.rebuildItemIndex();
    this.rowById.clear();

    for (const row of rows) {
      const id = Number(row.dataset.id);
      this.rowById.set(id, row);
    }
  }

  /**
   * Benchmarks a synchronous function 100 times.
   * After each iteration, runs delay: benchmarkFrameMs - elapsed.
   *
   * @param {string} name
   * @param {() => void} action
   * @returns {Promise<BenchmarkResult>}
   */
  async runBenchmark(name, action) {
    /** @type {number[]} */
    const times = [];

    for (let i = 0; i < this.options.benchmarkIterations; i++) {
      const start = performance.now();

      action();

      const end = performance.now();
      const elapsed = end - start;

      times.push(elapsed);

      const delayMs = Math.max(0, this.options.benchmarkFrameMs - elapsed);
      await this.delay(delayMs);
    }

    const result = this.aggregateBenchmark(name, times);
    this.printBenchmarkResult(result);

    return result;
  }

  /**
   * @param {WeatherForecast} item
   * @returns {HTMLTableRowElement}
   */
  createRow(item) {
    const row = document.createElement("tr");
    row.dataset.id = String(item.id);

    for (const column of this.columns) {
      const cell = document.createElement("td");

      cell.dataset.column = column.key;
      cell.textContent = String(item[column.key]);
      cell.style.border = "1px solid #ccc";
      cell.style.padding = "4px 8px";

      row.append(cell);
    }

    return row;
  }

  /**
   * @param {HTMLTableRowElement} row
   * @param {WeatherForecast} item
   * @returns {void}
   */
  updateRowCells(row, item) {
    for (const column of this.columns) {
      const cell = row.querySelector(`td[data-column="${column.key}"]`);

      if (!cell) {
        continue;
      }

      const nextValue = String(item[column.key]);

      if (cell.textContent !== nextValue) {
        cell.textContent = nextValue;
      }
    }
  }

  /**
   * @param {HTMLTableRowElement} row
   * @param {WeatherForecastKey} column
   * @returns {string|number}
   */
  getCellValue(row, column) {
    const cell = row.querySelector(`td[data-column="${column}"]`);

    if (!cell) {
      return "";
    }

    const text = cell.textContent ?? "";

    if (column === "id" || column === "temperatureC" || column === "temperatureF") {
      return Number(text);
    }

    return text;
  }

  /**
   * @returns {void}
   */
  rebuildItemIndex() {
    this.itemById.clear();

    for (const item of this.items) {
      this.itemById.set(item.id, item);
    }
  }

  /**
   * @returns {void}
   */
  updateFooter() {
    if (!this.tfoot) {
      return;
    }

    const cell = this.tfoot.querySelector("td");

    if (cell) {
      cell.textContent = `Rows: ${this.items.length}`;
    }
  }

  /**
   * @param {unknown} a
   * @param {unknown} b
   * @param {boolean} ascending
   * @returns {number}
   */
  compareValues(a, b, ascending) {
    /** @type {number} */
    let result;

    if (typeof a === "number" && typeof b === "number") {
      result = a - b;
    } else {
      result = String(a).localeCompare(String(b), undefined, {
        numeric: true,
        sensitivity: "base"
      });
    }

    return ascending ? result : -result;
  }

  /**
   * @param {number} ms
   * @returns {Promise<void>}
   */
  delay(ms) {
    return new Promise(resolve => {
      setTimeout(resolve, ms);
    });
  }

  /**
   * @param {string} name
   * @param {number[]} times
   * @returns {BenchmarkResult}
   */
  aggregateBenchmark(name, times) {
    const total = times.reduce((sum, value) => sum + value, 0);
    const avg = total / times.length;
    const min = Math.min(...times);
    const max = Math.max(...times);

    return {
      name,
      iterations: times.length,
      total,
      avg,
      min,
      max
    };
  }

  /**
   * @param {BenchmarkResult} result
   * @returns {void}
   */
  printBenchmarkResult(result) {
    const text = [
      `${result.name}`,
      `iterations: ${result.iterations}`,
      `total: ${result.total.toFixed(3)} ms`,
      `avg: ${result.avg.toFixed(3)} ms`,
      `min: ${result.min.toFixed(3)} ms`,
      `max: ${result.max.toFixed(3)} ms`
    ].join("\n");

    console.log(result);

    if (this.output) {
      this.output.textContent = text;
    }
  }
}


const root = document.createElement("div");
document.body.append(root);

const manager = new WeatherForecastTableManager(root, {
  rowCount: 500,
  benchmarkIterations: 100,
  benchmarkFrameMs: 20
});

manager.initialize();



/**
 * @typedef {Object} WeatherForecast
 * @property {number} id
 * @property {string} date
 * @property {number} temperatureC
 * @property {number} temperatureF
 * @property {string|null} summary
 */

/**
 * @typedef {"id"|"date"|"temperatureC"|"temperatureF"|"summary"} WeatherForecastKey
 */

/**
 * @typedef {Object} TableColumn
 * @property {WeatherForecastKey} key
 * @property {string} label
 */

/**
 * @typedef {"replace"|"reorder"} SortMode
 */

/**
 * @typedef {Object} TableManagerOptions
 * @property {number} rowCount
 * @property {number} benchmarkIterations
 * @property {number} benchmarkFrameMs
 */

/**
 * @typedef {Object} BenchmarkResult
 * @property {string} name
 * @property {number} iterations
 * @property {number} total
 * @property {number} avg
 * @property {number} min
 * @property {number} max
 */