Bus UI Data Display

DenseTable keeps dense rows validated before they render.

Use this for comparable rows that share the same column shape. The helper rejects missing headings, mismatched row widths, and unsafe attributes before it emits markup.

Public API

DenseTable(p DenseTableProps) gx.Node

The input model is DenseTableProps, plus DenseTableColumn, DenseTableRow, and DenseTableCell. The result is a Node with the compiled table HTML.

When to use it

Choose DenseTable when the table is a real grid: every row must have the same number of cells, every heading must be present, and you want the helper to validate that shape for you.

Live demo

Loading DenseTable demo...

Example

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

node := ui.DenseTable(ui.DenseTableProps{
  Caption: "Document queue",
  Columns: []ui.DenseTableColumn{
    ui.DenseTableColumnText("title", "Title"),
    ui.DenseTableColumnText("files", "Files"),
    ui.DenseTableColumnText("state", "State"),
  },
  Rows: []ui.DenseTableRow{
    ui.DenseTableRowText("June receipts", "3 files", "Ready"),
  },
})

html, err := gx.RenderHTML(node)

.gx source

In .gx source, author the visible component state as GX markup. Keep the Go API block above for the package helper or render-boundary call.

package busuiexamples

import gx "github.com/busdk/bus-gx/pkg/gx"

func DenseTableExample() gx.Node {
  return <DenseTable caption="Document queue">
    <p>Document queue</p>
  </DenseTable>
}

Use the public pkg/ui facade for this generic table helper.