Skip to main content
DOMTable generates HTML table elements as strings. It covers the complete table hierarchy: table, thead, tbody, tfoot, tr, th, td, and caption. All methods accept the standard options shape with support for custom attributes.

​
Import

import { DOMTable } from "@anikitenko/fdo-sdk";

​
Constructor

new DOMTable()
No parameters. DOMTable extends DOM and inherits the full styling and attribute utilities.

​
Common options shape

Every method accepts an optional options parameter and an optional id: 
{
  classes?: string[];
  style?: Record<string, string>;
  disableDefaultClass?: boolean;
  customAttributes?: Record<string, string>; // Arbitrary HTML attributes
}

​
Methods

​
createTable

Creates a <table> element wrapping thead, tbody, tfoot, and caption children. 
createTable(
  children: any[],
  options?: Partial<typeof DOM.DEFAULT_OPTIONS & { customAttributes?: Record<string, string> }>,
  id?: string
): string
​
children
any[]
required
Child elements — typically the output of createTableHead, createTableBody, createTableFoot, and createCaption.

​
createTableHead

Creates a <thead> element. 
createTableHead(
  children: any[],
  options?: Partial<typeof DOM.DEFAULT_OPTIONS & { customAttributes?: Record<string, string> }>,
  id?: string
): string
​
children
any[]
required
Typically tr elements containing th header cells.

​
createTableBody

Creates a <tbody> element. 
createTableBody(
  children: any[],
  options?: Partial<typeof DOM.DEFAULT_OPTIONS & { customAttributes?: Record<string, string> }>,
  id?: string
): string
​
children
any[]
required
Typically tr elements containing td data cells.

​
createTableFoot

Creates a <tfoot> element. 
createTableFoot(
  children: any[],
  options?: Partial<typeof DOM.DEFAULT_OPTIONS & { customAttributes?: Record<string, string> }>,
  id?: string
): string

​
createTableRow

Creates a <tr> (table row) element. 
createTableRow(
  children: any[],
  options?: Partial<typeof DOM.DEFAULT_OPTIONS & { customAttributes?: Record<string, string> }>,
  id?: string
): string
​
children
any[]
required
th or td cell elements.

​
createTableHeader

Creates a <th> (table header cell) element. Use otherProps to set scope, colspan, rowspan, or other th-specific attributes. 
createTableHeader(
  children: any[],
  options?: Partial<typeof DOM.DEFAULT_OPTIONS & { customAttributes?: Record<string, string> }>,
  id?: string,
  otherProps?: Record<string, any>
): string
​
children
any[]
required
The cell content — can include other DOM element strings.
​
otherProps
object
Additional HTML attributes such as scope, colspan, rowspan.
table.createTableHeader(["Name"], {}, undefined, { scope: "col" });
table.createTableHeader(["Region"], {}, undefined, { scope: "col", colspan: "2" });

​
createTableCell

Creates a <td> (table data cell) element. 
createTableCell(
  children: any[],
  options?: Partial<typeof DOM.DEFAULT_OPTIONS & { customAttributes?: Record<string, string> }>,
  id?: string,
  otherProps?: Record<string, any>
): string
​
children
any[]
required
The cell content — plain text strings or nested DOM element strings.
​
otherProps
object
Additional HTML attributes such as colspan, rowspan.

​
createCaption

Creates a <caption> element — a table title rendered above the table. 
createCaption(
  children: any[],
  options?: Partial<typeof DOM.DEFAULT_OPTIONS & { customAttributes?: Record<string, string> }>,
  id?: string
): string

​
Complete table example

import { DOMTable, DOMText } from "@anikitenko/fdo-sdk";

const table = new DOMTable();
const text = new DOMText();

// Header row
const thead = table.createTableHead([
  table.createTableRow([
    table.createTableHeader([text.createStrongText("Environment")], {}, undefined, { scope: "col" }),
    table.createTableHeader([text.createStrongText("Status")],      {}, undefined, { scope: "col" }),
    table.createTableHeader([text.createStrongText("Latency")],     {}, undefined, { scope: "col" }),
  ]),
]);

// Data rows
const tbody = table.createTableBody([
  table.createTableRow([
    table.createTableCell(["Production"]),
    table.createTableCell([text.createSpanText("Healthy",  { style: { color: "#1f8a3d" } })]),
    table.createTableCell(["42ms"]),
  ]),
  table.createTableRow([
    table.createTableCell(["Staging"]),
    table.createTableCell([text.createSpanText("Degraded", { style: { color: "#b06d00" } })]),
    table.createTableCell(["190ms"]),
  ]),
]);

// Caption + assemble
const caption = table.createCaption([text.createStrongText("Runtime Health Snapshot")]);

const dataTable = table.createTable(
  [caption, thead, tbody],
  {
    style: {
      width: "100%",
      borderCollapse: "collapse",
      marginTop: "12px",
    },
  },
  "health-table"
);

const tfoot = table.createTableFoot([
  table.createTableRow([
    table.createTableCell(["Total"], {}, undefined, { colspan: "2" }),
    table.createTableCell(["3 environments"]),
  ]),
]);

const fullTable = table.createTable([caption, thead, tbody, tfoot]);
Pass the output of DOMText methods directly as children to table cells — for example, text.createStrongText("Header") — to apply inline styles or semantic markup inside cells without breaking the table structure.