Add Table View
Render Data Table
After creating the admin panel layout, you can create a new page.tsx page to manage data in table form.
RavenSaaS has a built-in table view component that can quickly render a data table for various types of list data display.
Such as user lists / order lists, etc.
Display Data in Table View
You just need to import the table view component @/components/admin/dashboard/slots/table, define the data table fields, and pass a data set.
Refer to the built-in admin management system, user list page implementation logic:
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}