@moontra/moonui 2.3.4 → 2.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/components/ui/data-table-basic.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+import { Input } from "./input";
+import { 
+  Table, 
+  TableBody, 
+  TableCell, 
+  TableHead, 
+  TableHeader, 
+  TableRow 
+} from "./table";
+import {
+  ChevronLeft, 
+  ChevronRight, 
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  Search,
+} from "lucide-react";
+
+/**
+ * Basic DataTable Component
+ * 
+ * A simple data table with sorting, filtering, and pagination.
+ * For advanced features, upgrade to MoonUI Pro.
+ */
+
+interface DataTableBasicProps<TData, TValue> {
+  /**
+   * The table columns definition
+   */
+  columns: ColumnDef<TData, TValue>[];
+  /**
+   * The data to display
+   */
+  data: TData[];
+  /**
+   * Enable/disable sorting
+   */
+  enableSorting?: boolean;
+  /**
+   * Enable/disable pagination
+   */
+  enablePagination?: boolean;
+  /**
+   * Enable/disable global search
+   */
+  enableSearch?: boolean;
+  /**
+   * Default page size
+   */
+  pageSize?: number;
+  /**
+   * Search placeholder text
+   */
+  searchPlaceholder?: string;
+  /**
+   * Empty state message
+   */
+  emptyMessage?: string;
+  /**
+   * Class name
+   */
+  className?: string;
+}
+
+export function DataTableBasic<TData, TValue>({
+  columns,
+  data,
+  enableSorting = true,
+  enablePagination = true,
+  enableSearch = true,
+  pageSize = 10,
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  className,
+}: DataTableBasicProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [globalFilter, setGlobalFilter] = React.useState("");
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: enableSorting ? setSorting : undefined,
+    onGlobalFilterChange: enableSearch ? setGlobalFilter : undefined,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,
+    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
+    getFilteredRowModel: enableSearch ? getFilteredRowModel() : undefined,
+    state: {
+      sorting,
+      globalFilter,
+    },
+    initialState: {
+      pagination: {
+        pageSize,
+      },
+    },
+  });
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Search */}
+      {enableSearch && (
+        <div className="flex items-center">
+          <div className="relative max-w-sm">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder={searchPlaceholder}
+              value={globalFilter}
+              onChange={(event) => setGlobalFilter(event.target.value)}
+              className="pl-8"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder ? null : (
+                        <div
+                          className={cn(
+                            "flex items-center gap-2",
+                            header.column.getCanSort() && "cursor-pointer select-none"
+                          )}
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                          {enableSorting && header.column.getCanSort() && (
+                            <div className="ml-auto">
+                              {header.column.getIsSorted() === "desc" ? (
+                                <ArrowDown className="h-4 w-4" />
+                              ) : header.column.getIsSorted() === "asc" ? (
+                                <ArrowUp className="h-4 w-4" />
+                              ) : (
+                                <ArrowUpDown className="h-4 w-4 opacity-50" />
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {enablePagination && (
+        <div className="flex items-center justify-end space-x-2">
+          <div className="flex-1 text-sm text-muted-foreground">
+            {table.getFilteredRowModel().rows.length} row(s)
+          </div>
+          <div className="space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Previous
+            </Button>
+            <span className="text-sm">
+              Page {table.getState().pagination.pageIndex + 1} of{" "}
+              {table.getPageCount()}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              Next
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Simple sortable header helper
+ */
+export function createSortableHeader(label: string) {
+  return ({ column }: any) => (
+    <Button
+      variant="ghost"
+      className="-ml-3 h-8 data-[state=open]:bg-accent"
+      onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+    >
+      {label}
+      {column.getIsSorted() === "desc" ? (
+        <ArrowDown className="ml-2 h-4 w-4" />
+      ) : column.getIsSorted() === "asc" ? (
+        <ArrowUp className="ml-2 h-4 w-4" />
+      ) : (
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      )}
+    </Button>
+  );
+}
+
+// Export utilities
+export { type ColumnDef } from "@tanstack/react-table";

package/src/components/ui/index.ts

@@ -104,8 +104,10 @@ export {
     CommandSeparator as MoonUICommandSeparator,
 } from "./command";
 
-// DataTable
-export { DataTable as MoonUIDataTable } from "./data-table";
+// DataTable Basic (Free version with limited features)
+export { DataTableBasic as MoonUIDataTableBasic } from "./data-table-basic";
+export { createSortableHeader as moonUICreateSortableHeader } from "./data-table-basic";
+export type { ColumnDef as MoonUIColumnDef } from "./data-table-basic";
 
 // DatePicker
 export {
@@ -322,7 +324,6 @@ export * from "./checkbox";
 export * from "./collapsible";
 export * from "./color-picker";
 export * from "./command";
-export * from "./data-table";
 export * from "./date-picker";
 export * from "./dialog";
 export * from "./draggable-list";

package/src/components/ui/tabs.tsx

@@ -187,7 +187,7 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "moonui-theme",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       animated && "data-[state=active]:animate-fadeIn data-[state=inactive]:animate-fadeOut",
       className
     )}