Grid

TsgcHTMLComponent_Grid — una rejilla de datos HTML con todas las funciones: ordenación, filtrado, exportación a CSV/PDF, edición en línea, agrupación, desplazamiento virtual y consultas con IA, en Delphi, C++ Builder y .NET.

TsgcHTMLComponent_Grid

Define Columns, añade filas (o vincula un dataset), activa las funciones interactivas que quieras y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Grid

Genera

<table> de Bootstrap 5 + script interactivo

Familia

Datos y Tablas

Lenguajes

Delphi, C++ Builder, .NET

Define columnas, añade filas y genera la rejilla

Añade una entrada Columns.Add por campo, añade filas con AddRow, activa ShowSort/ShowFilter/ShowExport y luego lee 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

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Columnas y filas

Columns (cada elemento tiene Title, Name, Width, Align); AddRow(values) añade una fila; Rows expone la lista de respaldo delimitada por tabuladores; Clear la vacía.

Vinculación de datasets

LoadFromDataSet tiene tres sobrecargas — todos los campos, una lista de campos con nombre, o un límite máximo de filas — y DataSource permite una actualización en vivo.

Estilo

Striped, Bordered, Hover, Responsive, Dark y CSSClass se asignan a las clases de tabla de Bootstrap.

Interactividad

ShowSort, ShowFilter, ShowExport (CSV + PDF), InlineEdit con EditMode, y ColumnReorder añaden comportamiento en el lado del cliente.

Agrupación y desplazamiento

ShowGrouping + GroupByColumn generan cabeceras de grupo; VirtualScroll con VisibleRows y VirtualScrollURL carga más filas a medida que aparecen.

Consulta con IA

AIQueryEnabled añade una barra de preguntas (AIQueryPlaceholder, AIQueryButtonText, AIQueryButtonStyle); ProcessAIQuery dispara el evento OnAIQuery.

Sigue explorando

Todos los componentes de sgcHTMLExplora la matriz completa de más de 60 componentes.
Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.
PreciosLicencias Single, Team y Site con código fuente completo.

¿Listo para empezar?

Descarga la prueba gratuita y empieza a crear interfaces web en Delphi, C++ Builder y .NET.