上一篇聊聊刚上手的 DevUI：华为云这套组件库实战体验了 DevUI 的环境和基础组件，今天咱们来啃个硬骨头——DataTable（表格）。

做中后台系统，表格绝对是C位。展示数据、翻页、排序、筛选……需求一个接一个。之前用原生 table 标签写，逻辑写到想吐。这次试了试 DevUI 的 DataTable，说实话，刚开始看文档有点懵，但上手后发现它确实解决了不少痛点。

这篇主要记录下我是怎么把一个基础表格跑起来的，顺便分享几个常用的配置，免得大家跟我一样踩坑。

准备工作：引入模块

第一步还是老样子，别忘了在模块里导入。Angular 的 Standalone 模式下，直接在组件的 imports 里加 DataTableModule 就行。

import { DataTableModule } from 'ng-devui/data-table';

@Component({
  // ...
  imports: [DataTableModule, ...],
})
export class UserTableComponent { }

实战：撸一个用户列表

最简单的表格，其实只要两个东西：数据源 (dataSource) 和 列定义 (d-column)。

假设我们有一堆用户数据，长这样：

// 模拟数据
basicDataSource = [
  { firstName: '张', lastName: '三', gender: '男', dob: '1990-01-01' },
  { firstName: '李', lastName: '四', gender: '女', dob: '1995-05-20' },
  // ... 更多数据
];

HTML 里的写法比我想像中简洁：

<d-data-table [dataSource]="basicDataSource" [scrollable]="true">
  <!-- 序号列 -->
  <d-column field="$index" header="#" width="50px"></d-column>
  
  <!-- 姓名列 -->
  <d-column field="firstName" header="姓" width="100px"></d-column>
  <d-column field="lastName" header="名" width="100px"></d-column>
  
  <!-- 性别列 -->
  <d-column field="gender" header="性别" width="80px"></d-column>
  
  <!-- 日期列 -->
  <d-column field="dob" header="出生日期" fieldType="date" width="150px"></d-column>
</d-data-table>

这里有个细节我觉得很赞：fieldType="date"。加上这个，它自动帮你格式化日期，不用自己写 pipe 或者处理函数，省事！

常用属性速查（附避坑指南）

光会跑 Demo 还没用，实际开发里这几个属性出镜率极高。我整理了一份“人话版”速查表，建议收藏：

1. d-data-table (表格本体)

2. d-column (列定义)

写在最后

DevUI 的表格组件给我的感觉是“下限很高，上限也很高”。
基础功能几行代码就能搞定，满足80%的需求没问题。
但我看了下文档，它还有虚拟滚动、树形表格、拖拽排序这些高级货，下次有复杂需求的时候再专门研究下。

这几天用下来，感觉华为这套东西确实是从实战里打磨出来的，很多默认行为都很符合后台系统的习惯。如果你也在做类似的项目，真的可以试试。

资料

DevUI官网：https://devui.design/home