@andreagiugni/tailwind-dashboard-ui 0.2.0 → 0.4.0

package/README.md

@@ -152,9 +152,9 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `Dropdown` | `isOpen`, `onClose`, `children`, (+native div) |
 | `DropdownItem` | `variant` (default/primary/outline, like Button), `bgColor`/`textColor`/`borderColor` overrides, `tag` (a/button), `href`, `onClick`, `onItemClick`, `baseClassName` (full override) |
 | `Modal` | `isOpen`, `onClose`, `showCloseButton`, `isFullscreen`, `closeOnBackdrop?`, `closeOnEsc?`; **alert preset** → `variant` (`success`/`info`/`warning`/`danger`) + `title`, `description`, `actionText?`, `onAction?`; (+native div) |
-| `Table` / `TableHeader` / `TableBody` / `TableRow` / `TableCell` | `children`, `isHeader` (cell), (+native table elements; `onClick` / `onDoubleClick` on rows & cells) |
-| `Pagination` | `currentPage`, `totalPages`, `onPageChange` |
-| `DataTable` | `data`, `columns` (`key`, `header`, `sortable?`, `align?`, `render?`), `rowsPerPage?`, `rowsPerPageOptions?`, `searchable?`, `searchKeys?`, `defaultSortKey?` / `defaultSortDirection?`, `pagination?`, `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` — generic, search + per-column sort + pagination built in |
+| `Table` (composable) | `TableHeader` / `TableBody` / `TableRow` / `TableCell` with `children`, `isHeader` (cell), (+native table elements; `onClick` / `onDoubleClick` on rows & cells) |
+| `Table` (data-driven) | pass `data` + `columns` (`key`, `header`, `sortable?`, `align?`, `render?`, `className?`) to get search + per-column sort + pagination: `rowsPerPage?` (max rows/page, default 10), `rowsPerPageOptions?`, `searchKeys?` (**search box shown only when provided**), `searchPlaceholder?`, `defaultSortKey?` / `defaultSortDirection?`, `pagination?`, `paginationAlign?` (`left`/`center`/`right`/`full`, default `right`), `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` |
+| `Pagination` | `currentPage`, `totalPages`, `onPageChange`, `align?` (`left`/`center`/`right`/`full` — `full` pins Previous/Next to the edges with page indices centered) |
 | `Breadcrumb` | `pageTitle`, `items?`, (+native) |
 | `ThemeToggleButton` | `theme?` (controlled), `onToggle?`, (+native button) |
 | `Card` | `title?`, `description?`, `icon?`, `image?`, `imageAlt?`, `horizontal?`, `footer?`, `children?`, (+native div) (+override) |
@@ -232,14 +232,18 @@ const Editor = dynamic(
 />
 ```
 
-## Data table
+## Table
 
-`DataTable` is a generic, batteries-included table: pass your `data` array and a `columns`
-definition and you get live search, per-column click-to-sort, a "Show N entries" selector and
-pagination out of the box. Light/dark styling follows the standard `.dark` variant.
+`Table` has **two modes**, both under the same component:
+
+1. **Composable** — use `Table` / `TableHeader` / `TableBody` / `TableRow` / `TableCell` as thin,
+   styled wrappers around the native table elements when you want full control over the markup.
+2. **Data-driven** — pass a `data` array and a `columns` definition and you get live search,
+   per-column click-to-sort, a "Show N entries" selector and pagination out of the box. The mode
+   switches on automatically as soon as `columns` is provided.
 
 ```tsx
-import { DataTable, type DataTableColumn } from '@andreagiugni/tailwind-dashboard-ui';
+import { Table, type TableColumn } from '@andreagiugni/tailwind-dashboard-ui';
 
 type Person = { name: string; office: string; salary: number };
 
@@ -249,7 +253,7 @@ const people: Person[] = [
   // …
 ];
 
-const columns: DataTableColumn<Person>[] = [
+const columns: TableColumn<Person>[] = [
   { key: 'name', header: 'User', sortable: true },
   { key: 'office', header: 'Office', sortable: true },
   {
@@ -261,23 +265,26 @@ const columns: DataTableColumn<Person>[] = [
   },
 ];
 
-<DataTable
+<Table
   data={people}
   columns={columns}
-  rowsPerPage={5}
+  rowsPerPage={5}              // max rows per page (default 10)
   rowsPerPageOptions={[5, 10, 25]}
   defaultSortKey="name"
-  searchKeys={['name', 'office']}
+  searchKeys={['name', 'office']} // omit to hide the search box
   onRowClick={(row) => console.log(row)}
 />
 ```
 
-Key props: `data`, `columns` (each: `key`, `header`, `sortable?`, `align?`, `render?`,
+Key data-driven props: `data`, `columns` (each: `key`, `header`, `sortable?`, `align?`, `render?`,
 `className?`), `rowsPerPage` (default 10), `rowsPerPageOptions` (default `[5,10,25,50]`),
-`searchable` / `searchPlaceholder` / `searchKeys`, `defaultSortKey` / `defaultSortDirection`,
-`pagination`, `showSizeSelector`, `onRowClick`, `getRowId`, `emptyContent`. It is built on the
-exported `Table`, `Input` and `Pagination` primitives — drop down to those directly if you need
-full control over the markup.
+`searchKeys` / `searchPlaceholder`, `defaultSortKey` / `defaultSortDirection`, `pagination`,
+`paginationAlign` (`left` / `center` / `right` / `full`, default `right`), `showSizeSelector`,
+`onRowClick`, `getRowId`, `emptyContent`.
+
+> **Search visibility:** the search input renders **only** when you pass a non-empty `searchKeys`
+> array — those are also the exact fields the query matches. Omit `searchKeys` (or pass `[]`) to
+> hide search entirely.
 
 ## License
 

package/dist/index.cjs

@@ -31,7 +31,7 @@ function styleOverride({
 }
 var sizeClasses = {
   sm: "px-4 py-3 text-sm",
-  md: "px-5 py-3.5 text-sm"
+  md: "px-5 py-2.5 text-sm"
 };
 var variantClasses = {
   primary: "bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600 disabled:bg-brand-300",
@@ -552,77 +552,87 @@ var Dropzone = ({
     }
   );
 };
-var Table = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("table", { className: chunkYERNSNT4_cjs.cn("min-w-full", className), ...rest, children });
-var TableHeader = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className, ...rest, children });
-var TableBody = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { className, ...rest, children });
-var TableRow = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className, ...rest, children });
-var TableCell = ({
-  children,
-  isHeader = false,
-  className,
-  ...rest
-}) => {
-  const Tag = isHeader ? "th" : "td";
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, ...rest, children });
+var navButton = "flex h-10 items-center justify-center rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-700 shadow-theme-xs hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]";
+var justifyByAlign = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
 };
 var Pagination = ({
   currentPage,
   totalPages,
-  onPageChange
+  onPageChange,
+  align
 }) => {
   const pagesAroundCurrent = Array.from(
     { length: Math.min(3, totalPages) },
     (_, i) => i + Math.max(currentPage - 1, 1)
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center ", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick: () => onPageChange(currentPage - 1),
-        disabled: currentPage === 1,
-        "aria-label": "Previous",
-        className: chunkYERNSNT4_cjs.cn(
-          "mr-2.5 flex items-center h-10 justify-center rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-gray-700 shadow-theme-xs hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] text-sm"
-        ),
-        children: "Previous"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      currentPage > 3 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2", children: "..." }),
-      pagesAroundCurrent.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => onPageChange(page),
-          "aria-current": currentPage === page ? "page" : void 0,
-          className: chunkYERNSNT4_cjs.cn(
-            "flex w-10 items-center justify-center h-10 rounded-lg text-sm font-medium",
-            currentPage === page ? (
-              // active page keeps its color on hover (no hover restyle)
-              "bg-brand-500 text-white"
-            ) : (
-              // hover effect applies only to non-active page indices
-              "text-gray-700 hover:bg-blue-500/[0.08] hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-500"
-            )
-          ),
-          children: page
-        },
-        page
-      )),
-      currentPage < totalPages - 2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2", children: "..." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+  const prev = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage - 1),
+      disabled: currentPage === 1,
+      "aria-label": "Previous",
+      className: navButton,
+      children: "Previous"
+    }
+  );
+  const indices = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    currentPage > 3 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2", children: "..." }),
+    pagesAroundCurrent.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        onClick: () => onPageChange(currentPage + 1),
-        disabled: currentPage === totalPages,
-        "aria-label": "Next",
+        onClick: () => onPageChange(page),
+        "aria-current": currentPage === page ? "page" : void 0,
         className: chunkYERNSNT4_cjs.cn(
-          "ml-2.5 flex items-center justify-center rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-gray-700 shadow-theme-xs text-sm hover:bg-gray-50 h-10 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
+          "flex w-10 items-center justify-center h-10 rounded-lg text-sm font-medium",
+          currentPage === page ? (
+            // active page keeps its color on hover (no hover restyle)
+            "bg-brand-500 text-white"
+          ) : (
+            // hover effect applies only to non-active page indices
+            "text-gray-700 hover:bg-blue-500/[0.08] hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-500"
+          )
         ),
-        children: "Next"
-      }
-    )
+        children: page
+      },
+      page
+    )),
+    currentPage < totalPages - 2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2", children: "..." })
   ] });
+  const next = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage + 1),
+      disabled: currentPage === totalPages,
+      "aria-label": "Next",
+      className: navButton,
+      children: "Next"
+    }
+  );
+  if (align === "full") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between", children: [
+      prev,
+      indices,
+      next
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkYERNSNT4_cjs.cn(
+        "flex items-center gap-2.5",
+        align && "w-full",
+        align && justifyByAlign[align]
+      ),
+      children: [
+        prev,
+        indices,
+        next
+      ]
+    }
+  );
 };
 var Input = ({
   className,
@@ -654,6 +664,18 @@ var Input = ({
     hint && /* @__PURE__ */ jsxRuntime.jsx("p", { className: chunkYERNSNT4_cjs.cn("mt-1.5 text-xs", error ? "text-error-500" : success ? "text-success-500" : "text-gray-500"), children: hint })
   ] });
 };
+var TableHeader = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { className, ...rest, children });
+var TableBody = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { className, ...rest, children });
+var TableRow = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className, ...rest, children });
+var TableCell = ({
+  children,
+  isHeader = false,
+  className,
+  ...rest
+}) => {
+  const Tag = isHeader ? "th" : "td";
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, ...rest, children });
+};
 var alignClass = {
   left: "text-left",
   center: "text-center",
@@ -670,16 +692,16 @@ function SortIcon({
     /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "currentColor", "aria-hidden": "true", className: active && direction === "desc" ? on : off, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6 1 1h8z" }) })
   ] });
 }
-function DataTable({
+function DataDrivenTable({
   data,
   columns,
   rowsPerPage = 10,
   rowsPerPageOptions = [5, 10, 25, 50],
   pagination = true,
+  paginationAlign = "right",
   showSizeSelector = true,
-  searchable = true,
-  searchPlaceholder = "Search...",
   searchKeys,
+  searchPlaceholder = "Search...",
   defaultSortKey,
   defaultSortDirection = "asc",
   getRowId,
@@ -692,13 +714,13 @@ function DataTable({
   const [sortKey, setSortKey] = React5.useState(defaultSortKey);
   const [sortDir, setSortDir] = React5.useState(defaultSortDirection);
   const [page, setPage] = React5.useState(1);
+  const showSearch = !!(searchKeys && searchKeys.length > 0);
   const filtered = React5.useMemo(() => {
-    const keys = searchKeys ?? columns.map((c) => c.key);
     const q = search.trim().toLowerCase();
     let rows = data;
-    if (searchable && q) {
+    if (showSearch && q) {
       rows = rows.filter(
-        (row) => keys.some((k) => String(row[k] ?? "").toLowerCase().includes(q))
+        (row) => searchKeys.some((k) => String(row[k] ?? "").toLowerCase().includes(q))
       );
     }
     if (sortKey) {
@@ -710,7 +732,7 @@ function DataTable({
       });
     }
     return rows;
-  }, [data, columns, search, searchable, searchKeys, sortKey, sortDir]);
+  }, [data, search, showSearch, searchKeys, sortKey, sortDir]);
   const total = filtered.length;
   const totalPages = pagination ? Math.max(1, Math.ceil(total / pageSize)) : 1;
   const current = Math.min(page, totalPages);
@@ -727,7 +749,8 @@ function DataTable({
   };
   const sizeOptions = rowsPerPageOptions.length ? rowsPerPageOptions : [];
   const showSelector = pagination && showSizeSelector && sizeOptions.length > 1;
-  const showControls = searchable || showSelector;
+  const showControls = showSearch || showSelector;
+  const counterText = total === 0 ? "Showing 0 entries" : `Showing ${start + 1} to ${Math.min(start + pageSize, total)} of ${total} entries`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -754,7 +777,7 @@ function DataTable({
             ),
             "entries"
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-          searchable && /* @__PURE__ */ jsxRuntime.jsx(
+          showSearch && /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
               type: "search",
@@ -769,7 +792,7 @@ function DataTable({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto border-y border-gray-100 dark:border-white/[0.05]", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto border-y border-gray-100 dark:border-white/[0.05]", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: "border-b border-gray-100 bg-gray-50 dark:border-white/[0.05] dark:bg-white/[0.06]", children: /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: columns.map((col) => {
             const isActive = sortKey === col.key;
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -826,14 +849,83 @@ function DataTable({
             pageRows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length, className: "px-5 py-6 text-center text-sm text-gray-400", children: emptyContent }) })
           ] })
         ] }) }),
-        pagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: total === 0 ? "Showing 0 entries" : `Showing ${start + 1} to ${Math.min(start + pageSize, total)} of ${total} entries` }),
-          totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(Pagination, { currentPage: current, totalPages, onPageChange: setPage })
-        ] })
+        pagination && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: paginationAlign === "right" ? (
+          // Default layout: entry counter on the left, controls on the right.
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: counterText }),
+            totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(Pagination, { currentPage: current, totalPages, onPageChange: setPage })
+          ] })
+        ) : (
+          // Aligned layout: controls aligned/stretched, counter underneath.
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+            totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              Pagination,
+              {
+                align: paginationAlign,
+                currentPage: current,
+                totalPages,
+                onPageChange: setPage
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: chunkYERNSNT4_cjs.cn(
+                  "text-sm text-gray-500 dark:text-gray-400",
+                  paginationAlign === "center" && "text-center"
+                ),
+                children: counterText
+              }
+            )
+          ] })
+        ) })
       ]
     }
   );
 }
+function Table({
+  children,
+  data,
+  columns,
+  rowsPerPage,
+  rowsPerPageOptions,
+  pagination,
+  paginationAlign,
+  showSizeSelector,
+  searchKeys,
+  searchPlaceholder,
+  defaultSortKey,
+  defaultSortDirection,
+  getRowId,
+  onRowClick,
+  emptyContent,
+  className,
+  ...rest
+}) {
+  if (columns && data) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DataDrivenTable,
+      {
+        data,
+        columns,
+        rowsPerPage,
+        rowsPerPageOptions,
+        pagination,
+        paginationAlign,
+        showSizeSelector,
+        searchKeys,
+        searchPlaceholder,
+        defaultSortKey,
+        defaultSortDirection,
+        getRowId,
+        onRowClick,
+        emptyContent,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("table", { className: chunkYERNSNT4_cjs.cn("min-w-full", className), ...rest, children });
+}
 var ChevronIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -3081,7 +3173,6 @@ exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.Code = Code;
-exports.DataTable = DataTable;
 exports.DatePicker = DatePicker;
 exports.DateTimePicker = DateTimePicker;
 exports.Drawer = Drawer;