Table

Compact row-and-column presentation for aligned text and numeric values.

Purpose: Present compact aligned text values when row and column comparison is the task.
Use when: Use for a small table that benefits from a graphic layout while retaining a clear row-and-column structure.
Avoid when: Avoid for long, sortable, filterable, or interactive data sets; use semantic HTML tables for those jobs.
Equivalent data: The adjacent semantic HTML table preserves headers and every cell value for keyboard and assistive-technology navigation.

Three people, their age, address, tags, and available action.

Accessible data table

Name	Age	Address	Tag	Action
John Brown	32	New York No. 1 Lake Park	nice, developer	Send Mail
Jim Green	42	London No. 1 Lake Park	wow	Send Mail
Joe Black	32	Sidney No. 1 Lake Park	cool, teacher	Send Mail

Usage Example

@table.Table(table.Config{
  Label: "People directory",
  Columns: []table.Column{
    {Header: "Name", Span: 2},
    {Header: "Age"},
    {Header: "Address", Span: 3},
    {Header: "Tag", Span: 2},
    {Header: "Action", Span: 2},
  },
  Rows: [][]string{
    {"John Brown", "32", "New York No. 1 Lake Park", "nice, developer", "Send Mail"},
    {"Jim Green", "42", "London No. 1 Lake Park", "wow", "Send Mail"},
    {"Joe Black", "32", "Sidney No. 1 Lake Park", "cool, teacher", "Send Mail"},
  },
})

Explicit presentation overrides

Color, numeric alignment, and cell backgrounds can emphasize values while headers and cells remain easy to scan.

Accessible data table

Name	Price	Change
Datadog Inc	97.32	-7.49%
Hashicorp Inc	28.66	-9.25%
Gitlab Inc	51.63	+4.32%

Explicit presentation overrides

cfg := table.Config{
  Label: "Market changes",
  Columns: []table.Column{
    {Header: "Name"},
    {Header: "Price", Align: table.AlignEnd},
    {Header: "Change", Align: table.AlignEnd},
  },
  Rows: [][]string{
    {"Datadog Inc", "97.32", "-7.49%"},
    {"Hashicorp Inc", "28.66", "-9.25%"},
    {"Gitlab Inc", "51.63", "+4.32%"},
  },
  Colors: table.Colors{
    Surface: "#1c1c20", HeaderBackground: "#505050",
    HeaderText: "#ffffff", Text: "#ffffff",
  },
  CellStyle: marketChangeStyle,
}
@table.Table(cfg)

Choosing a table

Use the vector treatment for concise visual presentation. Keep the semantic table beside it whenever readers need to navigate headers and cells directly.

Go API

v0.0.1

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso-charts/components/table

Enabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.

Open v0.0.1 API