Grid

TsgcHTMLComponent_Grid — een functierijk HTML-dataraster met sorteren, filteren, CSV/PDF-export, inline bewerken, groeperen, virtueel scrollen en AI-query, in Delphi, C++ Builder en .NET.

TsgcHTMLComponent_Grid

Definieer Columns, voeg rijen toe (of koppel een dataset), schakel de interactieve functies in die je wilt en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_Grid

Rendert

Bootstrap 5 <table> + interactief script

Talen

Delphi, C++ Builder, .NET

Definieer kolommen, voeg rijen toe, render het

Voeg per veld een Columns.Add-vermelding toe, voeg rijen toe met AddRow, schakel ShowSort/ShowFilter/ShowExport in en lees dan 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

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Kolommen en rijen

Columns (elk item heeft Title, Name, Width, Align); AddRow(values) voegt een rij toe; Rows biedt de tab-gescheiden achterliggende lijst; Clear leegt hem.

Datasetbinding

LoadFromDataSet heeft drie overloads — alle velden, een benoemde veldlijst of een maximaal aantal rijen — en DataSource stuurt een live vernieuwing aan.

Styling

Striped, Bordered, Hover, Responsive, Dark en CSSClass komen overeen met Bootstrap-tabel-classes.

Interactiviteit

ShowSort, ShowFilter, ShowExport (CSV + PDF), InlineEdit met EditMode en ColumnReorder voegen client-side gedrag toe.

Groeperen en scrollen

ShowGrouping + GroupByColumn renderen groepskoppen; VirtualScroll met VisibleRows en VirtualScrollURL laadt meer rijen bij het zichtbaar worden.

AI-query

AIQueryEnabled voegt een vraagbalk toe (AIQueryPlaceholder, AIQueryButtonText, AIQueryButtonStyle); ProcessAIQuery activeert het OnAIQuery-event.

Vraag het in gewone taal

Wijs een TsgcHTMLAIAssistant toe aan AIAssistant en de vraagbalk zet een zin om in filters, sorteringen, een groepering en markeringen, gevalideerd tegen je kolommen voordat er iets wordt toegepast. AIPersistState bewaart de query in de sessie, en de kolomassistent (AIPrompt en AIMode op een kolom, OnAIColumnValues) stelt waarden voor die de gebruiker rij voor rij accepteert of afwijst.

Blijf ontdekken

Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.
Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.
Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.
PrijzenSingle-, Team- en Site-licenties met volledige broncode.
De beste deal: All-AccessElk eSeGeCe-product, inclusief Premium-ondersteuning, vanaf €1,059 per jaar.
Bekijk de All-Access-prijzen

Klaar om te beginnen?

Download de gratis proefversie en begin met het bouwen van web-UI's in Delphi, C++ Builder en .NET.