Tables | Paw Docs

Tables

表格

Table handles the standard structure, while Td lets you override individual cells for color or colspan.

Table 负责标准结构，Td 则允许你按需覆盖单个单元格的颜色或 colspan。

paw.Tablepaw.Tdpaw.StringNoWrappaw.Small

Covered APIs

涵盖 API

API 接口	Description 说明
`Table`	Renders a table from a header row and a body of Ui cells. 根据表头和 Ui 单元格内容渲染表格。
`Td`	Overrides a single cell when you need colspan or contextual color. 当你需要 colspan 或上下文颜色时，用它覆盖单个单元格。

Minimal Example: Standard data table

最小示例：标准数据表格

Most table cells can stay as normal Paw UI values. Table wraps them into td elements automatically.

大多数表格单元格都可以直接放普通 Paw UI，Table 会自动把它们包成 td。

Action	Status	Notes
Open	Open	StringNoWrap keeps short identifiers on one line.
Archive	Closed	Longer notes can still use Pre when you want preserved whitespace.

paw.Table{
	AlignCenter: true,
	Head: paw.List{
		paw.String("Action"),
		paw.String("Status"),
		paw.String("Notes"),
	},
	Body: [][]paw.Ui{
		{
			paw.Link{Name: "Open"}.Button().Primary(),
			paw.Badge{Text: "Open", Color: paw.ColorPrimary},
			paw.StringNoWrap("StringNoWrap keeps identifiers together."),
		},
	},
}

Advanced Example: Override individual cells with Td

进阶示例：用 Td 覆盖单个单元格

Use Td when you need contextual colors or a colspan cell in the middle of a row.

当你需要上下文颜色或跨列单元格时，使用 Td。

Queued	colspan=2 alert area
worker-a	worker-b	worker-c
Primary summary		Healthy

Name	Index	Icon
Tommy	0	🐶
Jacky	1	🐱

paw.Td{
	Color:   paw.ColorDanger,
	ColSpan: 2,
	Body:    paw.String("colspan=2 alert area"),
}

Notes and Related Docs

说明与相关文档

Notes

说明

Table wraps non-Td cells for you, so only reach for Td when you need extra control over a specific cell.

Table 会自动包裹非 Td 单元格，因此只有在你确实需要额外控制时才用 Td。

StringNoWrap and Small pair well with tables when space is tight.

在空间紧张的表格场景下，StringNoWrap 和 Small 往往很搭。

Notes

Related Pages