@andreagiugni/tailwind-dashboard-ui 0.2.0 → 0.3.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) |
+| `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?`, `showSizeSelector?`, `onRowClick?`, `getRowId?`, `emptyContent?` |
 | `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 |
 | `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,25 @@ 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`,
+`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

@@ -552,19 +552,6 @@ 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 Pagination = ({
   currentPage,
   totalPages,
@@ -654,6 +641,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 +669,15 @@ 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,
   showSizeSelector = true,
-  searchable = true,
-  searchPlaceholder = "Search...",
   searchKeys,
+  searchPlaceholder = "Search...",
   defaultSortKey,
   defaultSortDirection = "asc",
   getRowId,
@@ -692,13 +690,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 +708,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 +725,7 @@ function DataTable({
   };
   const sizeOptions = rowsPerPageOptions.length ? rowsPerPageOptions : [];
   const showSelector = pagination && showSizeSelector && sizeOptions.length > 1;
-  const showControls = searchable || showSelector;
+  const showControls = showSearch || showSelector;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -754,7 +752,7 @@ function DataTable({
             ),
             "entries"
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-          searchable && /* @__PURE__ */ jsxRuntime.jsx(
+          showSearch && /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
               type: "search",
@@ -769,7 +767,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(
@@ -834,6 +832,47 @@ function DataTable({
     }
   );
 }
+function Table({
+  children,
+  data,
+  columns,
+  rowsPerPage,
+  rowsPerPageOptions,
+  pagination,
+  showSizeSelector,
+  searchKeys,
+  searchPlaceholder,
+  defaultSortKey,
+  defaultSortDirection,
+  getRowId,
+  onRowClick,
+  emptyContent,
+  className,
+  ...rest
+}) {
+  if (columns && data) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DataDrivenTable,
+      {
+        data,
+        columns,
+        rowsPerPage,
+        rowsPerPageOptions,
+        pagination,
+        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 +3120,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;