In één oogopslag

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

Familie

Data en tabellen

Talen

Delphi, C++ Builder, .NET

QuickStart

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

Referentie

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.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

Grid