Grid

TsgcHTMLComponent_Grid — um data grid HTML rico em recursos com ordenação, filtro, exportação CSV/PDF, edição inline, agrupamento, scroll virtual e consulta por IA, em Delphi, C++ Builder e .NET.

TsgcHTMLComponent_Grid

Defina as Columns, adicione linhas (ou vincule um dataset), ative os recursos interativos que você quer e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Grid

Renderiza

<table> do Bootstrap 5 + script interativo

Família

Dados & Tabelas

Linguagens

Delphi, C++ Builder, .NET

Defina colunas, adicione linhas, renderize

Adicione uma entrada Columns.Add por campo, adicione linhas com AddRow, ative ShowSort/ShowFilter/ShowExport e então leia 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

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Colunas & linhas

Columns (cada item tem Title, Name, Width, Align); AddRow(values) adiciona uma linha; Rows expõe a lista de respaldo delimitada por tabulação; Clear a esvazia.

Vinculação a dataset

LoadFromDataSet tem três sobrecargas — todos os campos, uma lista de campos nomeados ou um limite máximo de linhas — e DataSource aciona uma atualização ao vivo.

Estilização

Striped, Bordered, Hover, Responsive, Dark e CSSClass mapeiam para classes de tabela do Bootstrap.

Interatividade

ShowSort, ShowFilter, ShowExport (CSV + PDF), InlineEdit com EditMode e ColumnReorder adicionam comportamento no lado do cliente.

Agrupamento & rolagem

ShowGrouping + GroupByColumn renderizam cabeçalhos de grupo; VirtualScroll com VisibleRows e VirtualScrollURL carrega mais linhas ao revelar.

Consulta por IA

AIQueryEnabled adiciona uma barra de pergunta (AIQueryPlaceholder, AIQueryButtonText, AIQueryButtonStyle); ProcessAIQuery dispara o evento OnAIQuery.

Continue explorando

Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.
Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.
PreçosLicenças Single, Team e Site com código-fonte completo.

Pronto para Começar?

Baixe a versão de avaliação gratuita e comece a construir UIs web em Delphi, C++ Builder e .NET.