Blazor 中创建可复用的 DataGrid 组件，核心是封装通用逻辑（分页、排序、列配置、行点击等），同时保持对业务数据和样式的完全开放。不需要第三方库，纯 Razor 组件 + C# 即可实现高内聚、低耦合的网格。
定义灵活的列配置模型
避免硬编码列名，用泛型 + 表达式树提取字段名和显示文本。定义一个
DataGridColumn<titem></titem>类： 包含
Field（
Expression<func object>></func>）用于绑定与排序
Title字符串控制表头文字
Width、
Sortable、
Visible等开关属性 支持自定义模板：用
RenderFragment<titem></titem>替代默认单元格渲染
这样使用者只需传入列集合，无需修改组件内部代码就能增删列或定制某列内容。
封装分页与排序状态管理
把
CurrentPage、
PageSize、
SortField、
SortDirection封装进一个
DataGridState<titem></titem>类，并提供
ApplySorting和
ApplyPaging扩展方法处理
IQueryable<titem></titem>或
IEnumerable<titem></titem>。 在组件中用
@bind-CurrentPage支持双向绑定，方便父组件响应页码变化 排序点击列头时，自动切换升/降序，触发
StateHasChanged()分页控件（如页码按钮、跳转输入框）复用同一套状态，不重复维护逻辑
暴露关键事件与生命周期钩子
真正可复用的组件必须让使用者能干预行为。为
DataGrid添加：
RowClick：回调参数为
TItem，支持导航或弹窗详情
OnDataRequested：异步委托，用于加载远程数据（替代直接传
Items）
OnInitializedAsync内触发首次加载，配合
IsLoading状态显示骨架屏
ChildContent渲染空白态、加载中、无数据提示，比写 if-else 更清晰
样式与响应式适配建议
默认用 Bootstrap 或 Tailwind 的基础表格类（如
table table-striped），但不要锁死 CSS： 通过
Class参数接收额外 class 名，叠加自定义样式 列宽支持
px、
%、
fr（若用 Flex/Grid 布局） 小屏幕下启用水平滚动：外层加
<div class="overflow-x-auto"> <li>选中行高亮？加 <code>:hover或绑定
selectedItem动态加 class
基本上就这些。组件越早抽象出“什么不变”（状态管理、事件流）和“什么可变”（列定义、模板、样式），复用性就越强。
