HUD Dashboard Tables – corner Layout Overlays

ctx.table.new(position, columns, rows, bg, border_c, border_w)

Initializes a new rectangular table layout in one of the viewport corners.

const myTable = ctx.table.new(
  ctx.position.bottom_right, 
  2, 
  4, 
  'rgba(26, 26, 46, 0.85)', 
  'rgba(57, 62, 70, 0.4)', 
  1
);

table.cell(col, row, text, options)

Exposes properties to populates cell values, backgrounds, and styling alignments. Options:

myTable.cell(0, 0, 'Metric', { 
  bgcolor: '#222831', 
  color: '#00adb5', 
  size: ctx.size.normal, 
  halign: 'center' 
});

Available Cell Options:

color: Text color (e.g. hex, rgb, rgba).
bgcolor: Cell background fill color.
size: Text size constant (from ctx.size).
halign: Horizontal text alignment: 'left' | 'center' | 'right'.
font: Custom font family string override.
border_color: Border outline color for the cell.
border_width: Thickness of cell borders.

table.set_merge(tableObj, startCol, startRow, endCol, endRow)

Merges a rectangular grid of cells (from startCol, startRow to endCol, endRow) into a single large cell. Perfect for table titles or wide data segments.

table.set_merge(myTable, 0, 0, 1, 0); // Merges columns 0 and 1 in row 0

Alignments & Constants

Exposed structures mapping layout constants on ctx:

ctx.position

Anchors HUD panels to screen bounds:

ctx.position.top_left
ctx.position.top_right
ctx.position.bottom_left
ctx.position.bottom_right

ctx.size

Formats cell text sizes dynamically:

ctx.size.tiny
ctx.size.small
ctx.size.normal
ctx.size.large
ctx.size.huge