# Sgcwebsockets HTML Data

> sgcHTML Data Display

- Skill: `esegece-com/sgcwebsockets-html-data` (Agent Skill, multi-file: 93 files)
- Install (CLI): `npx skillmds@latest add esegece-com/sgcwebsockets-html-data`
- Raw SKILL.md: https://api.skillmd.com/api/skills/esegece-com/sgcwebsockets-html-data/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: esegece-com (https://skillmd.com/u/esegece-com)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/esegece-com/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

| Group | Components |
| --- | --- |
| Tabular | `_DataTable`, `_Grid`, `_TreeGrid`, `_PivotTable` |
| Hierarchical | `_TreeView` |
| Time | `_Calendar`, `_Scheduler`, `_Gantt`, `_Timeline` |
| Boards and shapes | `_KanbanBoard`, `_Diagram`, `_Map` |
| Operational | `_ActivityFeed`, `_AuditTrail`, `_LogViewer`, `_JobProgress`, `_Presence` |
| Documents | `_PDFViewer` |

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:

```pascal
// 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:

```pascal
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.