@rovula/ui 0.0.11 → 0.0.13

package/dist/esm/types/components/DataTable/DataTable.d.ts

@@ -1,14 +1,9 @@
-import { ColumnDef } from "@tanstack/react-table";
-export type Payment = {
-    id: string;
-    amount: number;
-    status: "pending" | "processing" | "success" | "failed";
-    email: string;
-};
-export declare const columns: ColumnDef<Payment>[];
-interface DataTableProps<TData, TValue> {
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+export interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    manualSorting?: boolean;
+    onSorting?: (sorting: SortingState) => void;
+    fetchMoreData?: () => void;
 }
-export declare function DataTable<TData, TValue>({ columns, data, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, fetchMoreData, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/DataTable/DataTable.stories.d.ts

@@ -10,6 +10,9 @@ declare const meta: {
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         columns: ColumnDef<unknown, unknown>[];
         data: unknown[];
+        manualSorting?: boolean | undefined;
+        onSorting?: ((sorting: import("@tanstack/react-table").SortingState) => void) | undefined;
+        fetchMoreData?: (() => void) | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/esm/types/components/Table/Table.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const Table: React.ForwardRefExoticComponent<{
+    rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+} & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/esm/types/components/Table/Table.stories.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+    component: React.ForwardRefExoticComponent<{
+        rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+    } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;

package/dist/esm/types/index.d.ts

@@ -8,10 +8,11 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";
 export * from "./components/Table/Table";
+export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
-export type { DropdownProps } from "./components/Dropdown/Dropdown";
+export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 export { cn } from "./utils/cn";

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import * as class_variance_authority_dist_types from 'class-variance-authority/d
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { ClassValue } from 'clsx';
@@ -152,7 +153,9 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const Table: React.ForwardRefExoticComponent<{
+    rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+} & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
@@ -161,6 +164,15 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    manualSorting?: boolean;
+    onSorting?: (sorting: SortingState) => void;
+    fetchMoreData?: () => void;
+}
+declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, fetchMoreData, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
@@ -207,4 +219,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, type ButtonProps, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Input, type InputProps$1 as InputProps, Label, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, type ButtonProps, Checkbox, DataTable, type DataTableProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, type DropdownProps, Input, type InputProps$1 as InputProps, Label, type Options, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, resloveTimestamp };

package/dist/index.js

@@ -10,6 +10,7 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";
 export * from "./components/Table/Table";
+export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 // UTILS

package/dist/src/theme/global.css

@@ -860,6 +860,10 @@ body {
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+}
+
 .inset-0 {
   inset: 0px;
 }
@@ -897,6 +901,10 @@ body {
   right: 1rem;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .top-4 {
   top: 1rem;
 }
@@ -927,6 +935,10 @@ body {
   margin-bottom: auto;
 }
 
+.ml-3 {
+  margin-left: 0.75rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1030,10 +1042,6 @@ body {
   height: 3rem;
 }
 
-.h-24 {
-  height: 6rem;
-}
-
 .h-4 {
   height: 1rem;
 }
@@ -1042,6 +1050,10 @@ body {
   height: 54px;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
@@ -1050,6 +1062,10 @@ body {
   width: 1rem;
 }
 
+.w-8 {
+  width: 2rem;
+}
+
 .w-\[100px\] {
   width: 100px;
 }
@@ -1078,6 +1094,10 @@ body {
   max-width: 32rem;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1086,6 +1106,10 @@ body {
   caption-side: bottom;
 }
 
+.border-collapse {
+  border-collapse: collapse;
+}
+
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1204,10 +1228,18 @@ body {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.self-stretch {
+  align-self: stretch;
+}
+
 .overflow-auto {
   overflow: auto;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -1216,6 +1248,10 @@ body {
   overflow-y: auto;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1406,6 +1442,11 @@ body {
   background-color: rgb(var(--secondary-110) / var(--tw-bg-opacity));
 }
 
+.bg-secondary-80 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--secondary-80) / var(--tw-bg-opacity));
+}
+
 .bg-success {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--success-default) / var(--tw-bg-opacity));
@@ -1522,6 +1563,11 @@ body {
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1778,6 +1824,11 @@ body {
   color: rgb(var(--secondary-110) / var(--tw-text-opacity));
 }
 
+.text-secondary-120 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--secondary-120) / var(--tw-text-opacity));
+}
+
 .text-secondary-130 {
   --tw-text-opacity: 1;
   color: rgb(var(--secondary-130) / var(--tw-text-opacity));
@@ -1823,6 +1874,11 @@ body {
   color: rgb(var(--text-grey-light) / var(--tw-text-opacity));
 }
 
+.text-textcolor-grey-medium {
+  --tw-text-opacity: 1;
+  color: rgb(var(--text-grey-medium) / var(--tw-text-opacity));
+}
+
 .text-warning {
   --tw-text-opacity: 1;
   color: rgb(var(--warning-default) / var(--tw-text-opacity));
@@ -2429,6 +2485,11 @@ body {
   background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
 }
 
+.data-\[state\=selected\]\:bg-grey-20[data-state=selected] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--grey-20) / var(--tw-bg-opacity));
+}
+
 .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
   --tw-text-opacity: 1;
   color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
@@ -2466,8 +2527,12 @@ body {
   }
 }
 
-.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
-  padding-right: 0px;
+.\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {
+  width: 1rem;
+}
+
+.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-4:has([role=checkbox]) {
+  padding-right: 1rem;
 }
 
 .\[\&\>tr\]\:last\:border-b-0:last-child>tr {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -75,6 +75,7 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-table": "^8.17.3",
+    "@tanstack/react-virtual": "^3.5.0",
     "@types/react": "^18.3.2",
     "axios": "^1.6.4",
     "class-variance-authority": "^0.7.0",

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,9 +1,5 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-
-import Button from "../Button/Button";
-import { Label } from "../Label/Label";
-import { Input } from "../Input/Input";
 import { DataTable } from "./DataTable";
 import { ColumnDef } from "@tanstack/react-table";
 
@@ -16,7 +12,10 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div
+        className="p-5 flex flex-1 h-full w-full "
+        style={{ height: "100vh" }}
+      >
         <Story />
       </div>
     ),
@@ -28,16 +27,6 @@ export default meta;
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "amount",
-    header: () => <div className="text-right">Amount</div>,
-    cell: ({ row }: any) => {
-      const amount = parseFloat(row.getValue("amount"));
-      const formatted = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: "USD",
-      }).format(amount);
-
-      return <div className="text-right font-medium">{formatted}</div>;
-    },
   },
   {
     accessorKey: "status",
@@ -48,28 +37,35 @@ const columns: ColumnDef<any>[] = [
 ];
 
 export const Default = {
-  args: {
-    // label: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-  },
+  args: {},
   render: (args) => {
     console.log("args ", args);
     const props: typeof args = {
       ...args,
     };
-    const data = [
-      {
-        id: "728ed52f",
-        amount: 100,
-        status: "pending",
-        email: "m@example.com",
-      },
-    ];
+
+    const data = new Array(20).fill(0).map((__, i) => ({
+      id: "m5gr84i9",
+      amount: i + 1,
+      status: "success",
+      email: "ken99@yahoo.com",
+      email1: "ken99@yahoo.com",
+      email2: "ken99@yahoo.com",
+      email3: "ken99@yahoo.com",
+    }));
 
     return (
-      <div className="flex flex-row gap-4 w-full">
-        <DataTable columns={columns} data={data} />
+      <div className="flex flex-1 h-full flex-row gap-4 w-full">
+        <DataTable
+          columns={columns}
+          data={data}
+          onSorting={(sorting) => {
+            console.log("sorting ", sorting);
+          }}
+          fetchMoreData={() => {
+            console.log("fetchMoreData");
+          }}
+        />
       </div>
     );
   },

package/src/components/DataTable/DataTable.tsx

@@ -1,36 +1,24 @@
-"use client";
-
-import React from "react";
 import {
   ColumnDef,
+  ColumnFiltersState,
+  OnChangeFn,
+  SortingState,
+  VisibilityState,
   flexRender,
   getCoreRowModel,
+  getFilteredRowModel,
+  // getPaginationRowModel,
+  getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
+import React, { useEffect, useRef, useState } from "react";
 
-// This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-export type Payment = {
-  id: string;
-  amount: number;
-  status: "pending" | "processing" | "success" | "failed";
-  email: string;
-};
-
-export const columns: ColumnDef<Payment>[] = [
-  {
-    accessorKey: "status",
-    header: "Status",
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-  },
-  {
-    accessorKey: "amount",
-    header: "Amount",
-  },
-];
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ArrowsUpDownIcon,
+  ClipboardDocumentListIcon,
+} from "@heroicons/react/16/solid";
 
 import {
   Table,
@@ -39,50 +27,122 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "../Table/Table";
 
-interface DataTableProps<TData, TValue> {
+export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
+  manualSorting?: boolean;
+  onSorting?: (sorting: SortingState) => void;
+  fetchMoreData?: () => void;
 }
 
 export function DataTable<TData, TValue>({
-  columns,
   data,
+  columns,
+  manualSorting = false,
+  onSorting,
+  fetchMoreData,
 }: DataTableProps<TData, TValue>) {
+  const tableBodyRef = useRef<HTMLTableSectionElement>(null);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+
   const table = useReactTable({
     data,
     columns,
+    manualSorting,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
+    // getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      // pagination: {
+      //   pageSize: 100,
+      //   pageIndex: 0,
+      // },
+    },
   });
 
+  useEffect(() => {
+    onSorting?.(sorting);
+  }, [sorting, onSorting]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (tableBodyRef.current) {
+        const { scrollTop, scrollHeight, clientHeight } = tableBodyRef.current;
+        if (scrollTop + clientHeight >= scrollHeight - 10) {
+          fetchMoreData?.();
+        }
+      }
+    };
+
+    const tableBodyElement = tableBodyRef.current;
+    if (tableBodyElement) {
+      tableBodyElement.addEventListener("scroll", handleScroll);
+    }
+
+    return () => {
+      if (tableBodyElement) {
+        tableBodyElement.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [fetchMoreData]);
+
+  const isEmpty = table.getRowModel().rows?.length === 0;
+
   return (
-    <div className="rounded-md border">
-      <Table>
-        <TableHeader>
+    <div className="flex w-full h-full rounded-xl overflow-hidden border border-primary-10">
+      <Table className={isEmpty ? "h-full" : ""} rootRef={tableBodyRef}>
+        <TableHeader className="sticky top-0">
           {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
+            <TableRow key={headerGroup.id} className="">
+              {headerGroup.headers.map((header, i) => {
                 return (
                   <TableHead key={header.id}>
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                    <div
+                      className="flex flex-row items-center cursor-pointer"
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                      {{
+                        asc: <ArrowUpIcon className="ml-3 h-4 w-4" />,
+                        desc: <ArrowDownIcon className="ml-3 h-4 w-4" />,
+                      }[header.column.getIsSorted() as string] ??
+                        (header.column.getCanSort() ? (
+                          <ArrowsUpDownIcon className="ml-3 h-4 w-4 text-textcolor-grey-light" />
+                        ) : null)}
+                    </div>
                   </TableHead>
                 );
               })}
             </TableRow>
           ))}
         </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
+        <TableBody className="overflow-y-scroll">
+          {!isEmpty ? (
             table.getRowModel().rows.map((row) => (
               <TableRow
                 key={row.id}
                 data-state={row.getIsSelected() && "selected"}
+                className=""
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
@@ -92,9 +152,15 @@ export function DataTable<TData, TValue>({
               </TableRow>
             ))
           ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+            <TableRow className="h-full self-stretch">
+              <TableCell
+                colSpan={columns.length}
+                className="typography-body1 text-textcolor-grey-medium text-center h-full"
+              >
+                <div className="flex flex-1 h-full flex-col items-center justify-center gap-3">
+                  <ClipboardDocumentListIcon className="w-8 text-secondary-120" />
+                  There is no information yet.
+                </div>
               </TableCell>
             </TableRow>
           )}