implement remaining features of the server page (#9)

* implement remaining features of the server page * fix fm init * ?
2026-02-04 04:30:06 +00:00 · 2024-11-21 22:20:14 +08:00
parent 6166d9de3f
commit 33b2ffb40c
18 changed files with 994 additions and 32 deletions
--- a/src/components/xui/virtulized-data-table.tsx
+++ b/src/components/xui/virtulized-data-table.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import {
+    ColumnDef,
+    Row,
+    SortDirection,
+    SortingState,
+    flexRender,
+    getCoreRowModel,
+    getSortedRowModel,
+    useReactTable,
+} from "@tanstack/react-table";
+
+import { TableCell, TableHead, TableRow } from "@/components/ui/table";
+import { HTMLAttributes, forwardRef, useState, useRef, useEffect } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import { cn } from "@/lib/utils"
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+// Original Table is wrapped with a <div> (see https://ui.shadcn.com/docs/components/table#radix-:r24:-content-manual),
+// but here we don't want it, so let's use a new component with only <table> tag
+const TableComponent = forwardRef<
+    HTMLTableElement,
+    React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+    <table
+        ref={ref}
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+    />
+));
+TableComponent.displayName = "TableComponent";
+
+const TableRowComponent = <TData,>(rows: Row<TData>[]) =>
+    function getTableRow(props: HTMLAttributes<HTMLTableRowElement>) {
+        // @ts-expect-error data-index is a valid attribute
+        const index = props["data-index"];
+        const row = rows[index];
+
+        if (!row) return null;
+
+        return (
+            <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="translate-y-[50%]"
+                {...props}
+            >
+                {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                ))}
+            </TableRow>
+        );
+    };
+
+function SortingIndicator({ isSorted }: { isSorted: SortDirection | false }) {
+    if (!isSorted) return null;
+    return (
+        <div>
+            {
+                {
+                    asc: "↑",
+                    desc: "↓",
+                }[isSorted]
+            }
+        </div>
+    );
+}
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    rowComponent?: (rows: Row<TData>[]) => (props: HTMLAttributes<HTMLTableRowElement>) => JSX.Element | null,
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    rowComponent,
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = useState<SortingState>([{
+        id: 'type',
+        desc: true,
+    }]);
+    const table = useReactTable({
+        data,
+        columns,
+        state: {
+            sorting,
+        },
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+    });
+
+    const { rows } = table.getRowModel();
+
+    const [heightState, setHeight] = useState(0)
+    const ref = useRef(null);
+    useEffect(() => {
+        const calculateHeight = () => {
+            if (ref.current) {
+                const virtuosoElement = ref.current;
+                let topOffset = 0;
+                let currentElement = virtuosoElement as any;
+
+                // Calculate the total offset from the top of the document
+                while (currentElement) {
+                    topOffset += currentElement.offsetTop || 0;
+                    currentElement = currentElement.offsetParent as HTMLElement;
+                }
+
+                const totalHeight = window.innerHeight;
+                const calculatedHeight = totalHeight - topOffset;
+
+                setHeight(calculatedHeight);
+            }
+        };
+        window.addEventListener('resize', calculateHeight);
+        calculateHeight(); // Initial calculation
+
+        return () => window.removeEventListener('resize', calculateHeight);
+    }, []);
+
+    return (
+        <div className="rounded-md border" ref={ref} style={{ height: heightState }}>
+            <TableVirtuoso
+                totalCount={rows.length}
+                components={{
+                    Table: TableComponent,
+                    TableRow: rowComponent ? rowComponent(rows) : TableRowComponent(rows),
+                    Scroller: ScrollArea,
+                }}
+                fixedHeaderContent={() =>
+                    table.getHeaderGroups().map((headerGroup) => (
+                        // Change header background color to non-transparent
+                        <TableRow className="bg-card hover:bg-muted" key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <TableHead
+                                        key={header.id}
+                                        colSpan={header.colSpan}
+                                        style={{
+                                            width: header.getSize(),
+                                        }}
+                                    >
+                                        {header.isPlaceholder ? null : (
+                                            <div
+                                                className="flex items-center"
+                                                {...{
+                                                    style: header.column.getCanSort()
+                                                        ? {
+                                                            cursor: "pointer",
+                                                            userSelect: "none",
+                                                        }
+                                                        : {},
+                                                    onClick: header.column.getToggleSortingHandler(),
+                                                }}
+                                            >
+                                                {flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext(),
+                                                )}
+                                                <SortingIndicator
+                                                    isSorted={header.column.getIsSorted()}
+                                                />
+                                            </div>
+                                        )}
+                                    </TableHead>
+                                );
+                            })}
+                        </TableRow>
+                    ))
+                }
+            />
+        </div>
+    );
+}