添加表格视图
渲染数据表格
在创建完管理后台布局之后，你可以新建一个 page.tsx 页面，用数据表的形式管理数据。
RavenSaaS 内置了一个表格视图组件，可以快速渲染一个数据表格，用于各类列表形式的数据展示。
比如 用户列表 / 订单列表等。
在表格视图中显示数据
你只需要 import 表格视图组件 @/components/admin/dashboard/slots/table，定义数据表格字段，再传递一份 data 即可。
参考系统内置的后台管理系统，用户列表页面实现逻辑：
components/admin/dashboard/slots/table
1import { TableColumn } from "@/types/blocks/table";
2import TableSlot from "@/components/admin/dashboard/slots/table";
3import { Table as TableSlotType } from "@/types/slots/table";
4import moment from "moment";
5import { getUsers } from "@/models/user";
6import { checkIsAdminAndLogin } from "@/lib/common";
7import { redirect } from "next/navigation";
8
9export default async function Users() {
10 const isAdmin = await checkIsAdminAndLogin();
11 if (!isAdmin) return redirect("/auth/signin");
12
13 const users = await getUsers(1, 10);
14
15 const columns: TableColumn[] = [
16 { name: "uuid", title: "UUID" },
17 { name: "email", title: "Email" },
18 { name: "nickname", title: "Name" },
19 {
20 name: "avatar_url",
21 title: "Avatar",
22 callback: (row) => (
23 <img src={row.avatar_url} className="w-10 h-10 rounded-full" />
24 ),
25 },
26 {
27 name: "created_at",
28 title: "Created At",
29 callback: (row) => moment(row.created_at).format("YYYY-MM-DD HH:mm:ss"),
30 },
31 ];
32
33 const table: TableSlotType = {
34 title: "All Users",
35 columns,
36 data: users || null,
37 };
38
39 return <TableSlot {...table} />;
40}