shadcn-ui-react 0.5.3 → 0.6.0

package/README.md

@@ -361,65 +361,113 @@ export default function UserAuthForm() {
 ### 📊 DataTable
 
 ```tsx
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
 import { DataTable } from "shadcn-ui-react";
-import { ColumnDef } from "@tanstack/react-table";
 
 type User = {
   id: number;
   name: string;
   email: string;
+  role: "Admin" | "Editor" | "Viewer";
 };
 
 const columns: ColumnDef<User, any>[] = [
   { accessorKey: "id", header: "ID" },
-  { accessorKey: "name", header: "Name" },
+  {
+    accessorKey: "name",
+    header: "Name",
+    cell: ({ row }) => (
+      <div className="flex items-center gap-2">
+        <div className="h-2 w-2 rounded-full bg-primary" />
+        <span className="font-medium">{row.original.name}</span>
+      </div>
+    ),
+  },
   { accessorKey: "email", header: "Email" },
+  {
+    accessorKey: "role",
+    header: "Role",
+    cell: ({ row }) => (
+      <span className="inline-flex items-center rounded-full border px-2 py-0.5 text-xs">
+        {row.original.role}
+      </span>
+    ),
+  },
 ];
 
 const data: User[] = [
-  { id: 1, name: "John Doe", email: "john@example.com" },
-  { id: 2, name: "Jane Smith", email: "jane@example.com" },
-  { id: 3, name: "Sam Johnson", email: "sam@example.com" },
-  { id: 4, name: "Alice Brown", email: "alice@example.com" },
-  { id: 5, name: "Bob White", email: "bob@example.com" },
-  { id: 6, name: "Charlie Black", email: "charlie@example.com" },
-  { id: 7, name: "Diana Green", email: "diana@example.com" },
-  { id: 8, name: "Eve Blue", email: "eve@example.com" },
-  { id: 9, name: "Frank Yellow", email: "frank@example.com" },
-  { id: 10, name: "Grace Red", email: "grace@example.com" },
+  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Editor" },
+  { id: 3, name: "Sam Johnson", email: "sam@example.com", role: "Viewer" },
+  { id: 4, name: "Alice Brown", email: "alice@example.com", role: "Editor" },
+  { id: 5, name: "Bob White", email: "bob@example.com", role: "Viewer" },
+  { id: 6, name: "Charlie Black", email: "charlie@example.com", role: "Admin" },
+  { id: 7, name: "Diana Green", email: "diana@example.com", role: "Viewer" },
+  { id: 8, name: "Eve Blue", email: "eve@example.com", role: "Editor" },
+  { id: 9, name: "Frank Yellow", email: "frank@example.com", role: "Viewer" },
+  { id: 10, name: "Grace Red", email: "grace@example.com", role: "Admin" },
 ];
 
 const Example = () => {
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(5);
 
-  const paginatedData = data.slice((page - 1) * perPage, page * perPage);
+  const pageCount = useMemo(() => Math.ceil(data.length / perPage), [perPage]);
 
-  const handlePageChange = (newPage: number) => setPage(newPage);
-
-  const handlePageSizeChange = (newPageSize: number) => {
-    setPerPage(newPageSize);
-    setPage(1);
-  };
+  const paginatedData = useMemo(() => {
+    const start = (page - 1) * perPage;
+    const end = page * perPage;
+    return data.slice(start, end);
+  }, [page, perPage]);
 
   return (
-    <div>
-      <h1 className="text-xl font-bold mb-4">Data Table with Pagination</h1>
+    <div className="space-y-4">
+      <div className="space-y-1">
+        <h1 className="text-xl font-bold">DataTable v2</h1>
+        <p className="text-sm text-muted-foreground">
+          Manual pagination + templates + sticky header + accent
+        </p>
+      </div>
 
       <DataTable
         columns={columns}
         data={paginatedData}
-        pageCount={Math.ceil(data.length / perPage)}
+        pageCount={pageCount}
         page={page}
         perPage={perPage}
-        onPageChange={handlePageChange}
-        onPageSizeChange={handlePageSizeChange}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPerPage(size);
+          setPage(1);
+        }}
+        totalRows={data.length}
+        isRowsSelected={false}
         rowPerPageLabel="Rows per page"
         pageLabel="Page"
         ofLabel="of"
         rowsSelectedLabel="rows selected"
-        emptyData={<div>No data available</div>}
+        emptyData={<div className="py-10 text-center">No data available</div>}
+
+        // ✨ NEW (v0.6.6)
+        template="neo"          // neo | glass | compact | minimal | clean | elevated | grid | cards
+        accent="primary"        // primary | emerald | indigo | rose | amber | zinc
+        stickyHeader={true}
+        headerScroll={false}
+        animate={true}
+        heightClassName="h-[420px]" // Important: Define the height for the ScrollArea to work.
+
+        onClick={(row) => {
+          // demo: click in row
+          console.log("Row clicked:", row);
+        }}
+
+        // optional
+        classNames={{
+          // root: "border-primary/20",
+          // th: "text-[10px]",
+          // td: "py-2",
+        }}
       />
     </div>
   );