@a2v2ai/uikit 1.0.1 → 1.1.1

package/DataTable/DataTable.tsx

@@ -16,6 +16,14 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "../Pagination/Pagination"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../Select/Select"
+import { Typography } from "../Typography/Typography"
 import { Skeleton } from "../Skeleton/Skeleton"
 
 interface DataTableColumn<T> {
@@ -33,6 +41,8 @@ interface DataTablePagination {
   pageSize: number
   total: number
   onChange: (page: number) => void
+  pageSizeOptions?: number[]
+  onPageSizeChange?: (size: number) => void
 }
 
 interface DataTableScroll {
@@ -48,6 +58,8 @@ interface DataTableProps<T extends object> {
   scroll?: DataTableScroll
   loading?: boolean
   loadingRows?: number
+  onRowClick?: (record: T, index: number) => void
+  rowsPerPageLabel?: string
 }
 
 const getPageNumbers = (current: number, totalPages: number): (number | "ellipsis")[] => {
@@ -86,6 +98,8 @@ const DataTable = <T extends object>({
   scroll,
   loading,
   loadingRows = 5,
+  onRowClick,
+  rowsPerPageLabel = "Rows per page",
 }: DataTableProps<T>) => {
   const getRowKey = (record: T): string => {
     if (typeof rowKey === "function") {
@@ -136,7 +150,13 @@ const DataTable = <T extends object>({
               </TableRow>
             ))
           : dataSource.map((record, index) => (
-              <TableRow key={getRowKey(record)}>
+              <TableRow
+                key={getRowKey(record)}
+                onClick={
+                  onRowClick ? () => onRowClick(record, index) : undefined
+                }
+                className={onRowClick ? "cursor-pointer" : undefined}
+              >
                 {columns.map((column) => (
                   <TableCell key={column.key}>
                     {getCellValue(record, column, index)}
@@ -161,42 +181,81 @@ const DataTable = <T extends object>({
         tableContent
       )}
 
-      {pagination && totalPages > 1 && (
-        <div className="mt-4">
-          <Pagination>
-            <PaginationContent>
-              <PaginationItem>
-                <PaginationPrevious
-                  disabled={pagination.current === 1}
-                  onClick={() => pagination.onChange(pagination.current - 1)}
-                />
-              </PaginationItem>
-
-              {pageNumbers.map((page, index) => (
-                <PaginationItem key={index}>
-                  {page === "ellipsis" ? (
-                    <PaginationEllipsis />
-                  ) : (
-                    <PaginationLink
-                      isActive={page === pagination.current}
-                      onClick={() => pagination.onChange(page)}
+      {pagination &&
+        ((pagination.pageSizeOptions && pagination.pageSizeOptions.length > 0) ||
+          totalPages > 1) && (
+          <div className="mt-4 flex items-center justify-center gap-6">
+            {pagination.pageSizeOptions &&
+              pagination.pageSizeOptions.length > 0 && (
+                <div className="flex items-center gap-2">
+                  <Typography
+                    variant="body3"
+                    color="main-700"
+                    className="whitespace-nowrap"
+                  >
+                    {rowsPerPageLabel}
+                  </Typography>
+                  {/* Fixed-width wrapper: SelectTrigger has its own w-full wrapper. */}
+                  <div className="w-20">
+                    <Select
+                      value={String(pagination.pageSize)}
+                      onValueChange={(value) =>
+                        pagination.onPageSizeChange?.(Number(value))
+                      }
                     >
-                      {page}
-                    </PaginationLink>
-                  )}
-                </PaginationItem>
-              ))}
-
-              <PaginationItem>
-                <PaginationNext
-                  disabled={pagination.current === totalPages}
-                  onClick={() => pagination.onChange(pagination.current + 1)}
-                />
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-        </div>
-      )}
+                      <SelectTrigger size="small" aria-label={rowsPerPageLabel}>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {pagination.pageSizeOptions.map((option) => (
+                          <SelectItem key={option} value={String(option)}>
+                            {option}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              )}
+
+            {totalPages > 1 && (
+              <Pagination className="mx-0 w-auto justify-end">
+                <PaginationContent>
+                  <PaginationItem>
+                    <PaginationPrevious
+                      disabled={pagination.current === 1}
+                      onClick={() => pagination.onChange(pagination.current - 1)}
+                    />
+                  </PaginationItem>
+
+                  {pageNumbers.map((page, index) => (
+                    <PaginationItem key={index}>
+                      {page === "ellipsis" ? (
+                        <PaginationEllipsis />
+                      ) : (
+                        <PaginationLink
+                          isActive={page === pagination.current}
+                          onClick={() => pagination.onChange(page)}
+                        >
+                          {page}
+                        </PaginationLink>
+                      )}
+                    </PaginationItem>
+                  ))}
+
+                  <PaginationItem>
+                    <PaginationNext
+                      disabled={pagination.current === totalPages}
+                      onClick={() =>
+                        pagination.onChange(pagination.current + 1)
+                      }
+                    />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+            )}
+          </div>
+        )}
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2v2ai/uikit",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "type": "module",
   "author": "Arulraj V & abofficial1997@gmail.com",
   "description": "A React UI component library built with shadcn/ui and Tailwind CSS",