Grid

TsgcHTMLComponent_Grid — a feature-rich HTML data grid with sorting, filtering, CSV/PDF export, inline edit, grouping, virtual scroll and AI query, in Delphi, C++ Builder and .NET.

TsgcHTMLComponent_Grid

Define Columns, push rows (or bind a dataset), toggle the interactive features you want, then read the HTML property.

Component class

TsgcHTMLComponent_Grid

Renders

Bootstrap 5 <table> + interactive script

Family

Data & Tables

Languages

Delphi, C++ Builder, .NET

Define columns, add rows, render it

Add a Columns.Add entry per field, push rows with AddRow, enable ShowSort/ShowFilter/ShowExport, then read HTML.

uses
  sgcHTML_Component_Grid;

var
  oGrid: TsgcHTMLComponent_Grid;
begin
  oGrid := TsgcHTMLComponent_Grid.Create(nil);
  try
    oGrid.TableID := 'orders';
    oGrid.Striped := True;
    oGrid.Hover := True;
    oGrid.ShowSort := True;
    oGrid.ShowFilter := True;
    oGrid.ShowExport := True;

    oGrid.Columns.Add.Title := 'Customer';
    oGrid.Columns.Add.Title := 'Country';
    oGrid.Columns.Add.Title := 'Total';

    oGrid.AddRow(['Alfreds', 'Germany', '1,200']);
    oGrid.AddRow(['Around the Horn', 'UK', '1,900']);

    WebModule.Response := oGrid.HTML;   // Bootstrap table + script
  finally
    oGrid.Free;
  end;
end;

// Or bind it straight to a dataset:
oGrid.LoadFromDataSet(qryOrders);
// includes: sgcHTML_Component_Grid.hpp

TsgcHTMLComponent_Grid *oGrid = new TsgcHTMLComponent_Grid(NULL);
try
{
  oGrid->TableID = "orders";
  oGrid->Striped = true;
  oGrid->Hover = true;
  oGrid->ShowSort = true;
  oGrid->ShowFilter = true;
  oGrid->ShowExport = true;

  oGrid->Columns->Add()->Title = "Customer";
  oGrid->Columns->Add()->Title = "Country";
  oGrid->Columns->Add()->Title = "Total";

  oGrid->AddRow(OPENARRAY(String, ("Alfreds", "Germany", "1,200")));
  oGrid->AddRow(OPENARRAY(String, ("Around the Horn", "UK", "1,900")));

  String html = oGrid->HTML;   // Bootstrap table + script
}
__finally
{
  delete oGrid;
}
using esegece.sgcWebSockets;

var grid = new TsgcHTMLComponent_Grid();
grid.TableID = "orders";
grid.Striped = true;
grid.Hover = true;
grid.ShowSort = true;
grid.ShowFilter = true;
grid.ShowExport = true;

grid.Columns.Add().Title = "Customer";
grid.Columns.Add().Title = "Country";
grid.Columns.Add().Title = "Total";

grid.AddRow(new string[] { "Alfreds", "Germany", "1,200" });
grid.AddRow(new string[] { "Around the Horn", "UK", "1,900" });

string html = grid.HTML;   // Bootstrap table + script

Key properties & methods

The members you reach for most often.

Columns & rows

Columns (each item has Title, Name, Width, Align); AddRow(values) appends a row; Rows exposes the tab-delimited backing list; Clear empties it.

Dataset binding

LoadFromDataSet has three overloads — all fields, a named field list, or a max-row cap — and DataSource drives a live refresh.

Styling

Striped, Bordered, Hover, Responsive, Dark and CSSClass map to Bootstrap table classes.

Interactivity

ShowSort, ShowFilter, ShowExport (CSV + PDF), InlineEdit with EditMode, and ColumnReorder add client-side behaviour.

Grouping & scrolling

ShowGrouping + GroupByColumn render group headers; VirtualScroll with VisibleRows and VirtualScrollURL loads more rows on reveal.

AI query

AIQueryEnabled adds an ask-bar (AIQueryPlaceholder, AIQueryButtonText, AIQueryButtonStyle); ProcessAIQuery fires the OnAIQuery event.

Keep exploring

All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.

Ready to Get Started?

Download the free trial and start building web UIs in Delphi, C++ Builder and .NET.