如何在Keystone6自定义页面使用官方组件渲染与后台一致的数据表格

• 导入官方原生组件
  直接使用Keystone Admin UI内置导出的组件，无需额外安装依赖，导入代码如下：

import { PageContainer, DataTable } from '@keystone-6/core/admin-ui/components';
// 若需要实现跳转、空值提示等功能，还可导入以下内置组件
import { Link, Heading } from '@keystone-6/core/admin-ui/components';

• 配置表格列规则
  根据你返回的Member数据结构，定义和官方列表一致的列配置，支持自定义空值显示、渲染逻辑：

const columns = [
  {
    label: 'ID',
    path: 'id',
    // 可选：默认隐藏该列
    isHidden: true,
  },
  {
    label: '用户名',
    path: 'name',
    // 可选：点击跳转到对应数据的编辑页的自定义渲染逻辑
    render: (member) => <Link href={`/members/${member.id}`}>{member.name}</Link>,
  },
  {
    label: '所属公司',
    path: 'companyName',
    // 空值自定义显示逻辑
    render: (member) => member.companyName || <i>未填写</i>,
  }
];

• 页面渲染表格
  将你查询到的members数据直接传入DataTable组件，外层套PageContainer即可和官方页面布局完全统一：

// 你的自定义页面组件
export default function CustomMemberPage() {
  // 此处为你已经通过GraphQL查询拿到的members数据
  const { members } = useYourGraphqlQuery();

  return (
    <PageContainer>
      <Heading type="h3">自定义会员列表</Heading>
      <DataTable
        columns={columns}
        data={members}
        // 可选：开启排序功能，对应字段需要GraphQL查询支持排序
        // isSortable
        // 可选：设置每页显示条数
        // pageSize={20}
      />
    </PageContainer>
  );
}

注意事项 #

• 若需要实现和官方列表完全一致的批量操作、筛选、搜索功能，可直接复用Keystone内置的ListPage组件，传入对应列表的key即可，无需自行编写查询逻辑
• DataTable组件原生支持响应式布局、移动端适配，无需额外调整样式
• 所有内置组件的样式都会自动跟随Keystone后台的主题配置，无需手动编写CSS对齐样式

内容的提问来源于stack exchange，提问作者DEV