SxTable (表格)

  • Implemented

结构化数据展示表格。对齐 Microsoft Fluent UI Blazor DataGrid (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

  • 数据列表展示
  • 轻量级表格排序
  • 可自定义列内容的展示场景

约束说明

  • 需要通过 SxTableColumn 定义列。
  • 当前排序为简化实现，基于 Field 反射排序。

行为说明

  • 点击可排序列切换升/降序。
  • OnRowClick/OnRowDoubleClick 提供行交互回调。
  • ShowHover 控制悬停高亮。

API

Parameters (SxTable)

状态 参数名 类型 默认值 描述
Implemented Items IEnumerable<TItem>? null 表格数据源。
Implemented ShowHover bool true 是否启用悬停高亮。
Implemented ChildContent RenderFragment? null 列定义内容。
Implemented Id (继承) string? null 组件的物理 Id。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented Title (继承) string? null HTML title 属性。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。
Not Implemented Virtualize bool false 是否启用虚拟滚动。
Not Implemented Pagination PaginationState? null 分页状态对象。

Parameters (SxTableColumn)

状态 参数名 类型 默认值 描述
Implemented Title string? null 列标题。
Implemented Field string? null 数据字段名。
Implemented Sortable bool false 是否可排序。
Implemented Width string? null 列宽。
Implemented Align HorizontalAlignment Start 对齐方式。
Implemented ChildContent RenderFragment<TItem>? null 自定义列内容模板。
Implemented Id (继承) string? null 列 Id。

Events

状态 事件名 类型 描述
Implemented OnRowClick EventCallback<DataGridRowClickEventArgs<TItem>> 行点击事件。
Implemented OnRowDoubleClick EventCallback<DataGridRowClickEventArgs<TItem>> 行双击事件。

示例

<SxTable TItem="User" Items="_users">
    <SxTableColumn TItem="User" Title="ID" Field="Id" Sortable="true" />
    <SxTableColumn TItem="User" Title="姓名" Field="Name" />
    <SxTableColumn TItem="User" Title="角色" Field="Role" />
</SxTable>

参考设计 (References)

在 Playground 中打开 →