Sgcwebsockets HTML Data

sgcHTML Data Display

Eighteen widgets for showing structured data on a server-rendered page: grids and tables, trees, pivots, calendars and schedulers, gantt and kanban boards, diagrams and maps, plus the operational views (activity feed, audit trail, log viewer, job progress, PDF viewer, presence).

Read sgcwebsockets-html-core first for the page builder and the edition gate. sgcHTML is All-Access only, needs Indy, and is absent on Android and iOS.

The thing worth knowing before anything else: most of these load straight from a TDataSet. If the data is already in a Delphi dataset, the widget is usually one method call, not a loop.

When to use this skill

• Put a table or grid of data on a page, with sorting, paging and search
• Show hierarchical data as a tree or a tree grid
• Cross-tabulate with a pivot table
• Show a calendar, a scheduler, a gantt chart or a kanban board
• Draw a diagram, or plot points on a map
• Show an activity feed, an audit trail, a log or a running job's progress
• Embed a PDF, or show who is currently online

Components in this skill

All are prefixed TsgcHTMLComponent_.

Loading from a dataset

This is the shortest path from Delphi data to a rendered page, and each widget takes the fields it needs:

// a paged, sortable table straight from a query
FTable.LoadFromDataSet(qryCustomers, 25);   // 25 rows per page

// a tree grid needs to know which field points at the parent row
FTreeGrid.LoadFromDataSet(qryAccounts, 'ID', 'PARENT_ID');

// a scheduler needs the title and the two dates
FScheduler.LoadFromDataSet(qryBookings, 'SUBJECT', 'STARTS', 'ENDS');

The dataset is read at the point you call it. Changing the dataset afterwards does not update the page by itself; call it again, or use the shared DataSource and DataAutoRefresh properties described in sgcwebsockets-html-forms, which every widget in the pack carries.

Where a widget has no dataset shape that fits, build it item by item instead:

FGrid.Clear;
FGrid.AddRow(['ACME Ltd', 'London', '4200']);

FScheduler.AddEvent('Standup', Now, Now + (15 / 1440), hcPrimary, False);

FTreeGrid.AddNode('3', '1', ['Sub-account', 'active']);

Before you start, ask the developer

Use a structured question tool if your host has one, for example Claude Code's AskUserQuestion. Otherwise ask in chat:

1. Where does the data come from? A TDataSet means LoadFromDataSet and almost no code. Anything else means building rows by hand.
2. How much data? Paging matters at a few hundred rows. LoadFromDataSet on a table takes a page size for exactly this reason, and rendering fifty thousand rows into one page will not end well.
3. Grid or DataTable? _Grid is the simpler table. _DataTable adds paging and the interactive features. Ask before picking.
4. Read-only or interactive? Sorting and searching are properties. Editing is a different conversation, because it needs a form and a submit path.

Things that catch people out

• LoadFromDataSet is a snapshot, not a live binding. It reads the dataset when called, and the page will not follow later changes on its own.
• The field names passed to LoadFromDataSet are the dataset's field names, not the column captions. A wrong name fails at runtime, not at compile time.
• _Grid and _DataTable are different components with different capabilities. Reaching for paging on _Grid and not finding it means you wanted _DataTable.
• A tree grid needs both the id field and the parent id field, and rows whose parent is missing from the same result set simply do not appear.
• Everything here still needs PageBuilder assigned, like every sgcHTML widget. Without it the component renders nowhere and says nothing.
• These render HTML from your data. Anything user-supplied that reaches a cell should be treated as untrusted, exactly as it would be in any web page.

Routing

• Find a component: reference/components-index.md lists every component, its unit, and its edition, grouped by Reg module.
• Uses clause: add the component's unit: value (shown on its API page) to your uses clause. Nothing compiles without it.
• API detail: reference/api/<Component>.md has the Properties, Events and Methods, each in both Delphi and C++Builder form.
• Option / enum / event types: property and event types link to reference/types/<TypeName>.md, which documents the sub-properties of option classes, the values of enums, and the parameter list of event handlers.
• Examples: examples/index.md is the full demo catalog; examples/<Component>.md is a focused, real usage snippet for the most-used components.
• Concepts: concepts/overview.md (getting started + uses-clause rule) and concepts/editions-and-features.md (which components your edition includes).
• Bundled resources: concepts/resources.md lists the browser-side assets (JavaScript, HTML, CSS) the server components serve or embed, so a browser client works without an external CDN.
• Version history: reference/history.md lists what changed in each sgcWebSockets release.

Editions

Components are gated by edition (Professional, Enterprise, All-Access) or by a feature define. Check the edition column in the components index, or concepts/editions-and-features.md, before relying on a component.

Only public and published members are documented. Method bodies, private fields and protected members are intentionally not included.