@kreativa/ui 0.1.1 → 0.1.2

package/dist/index.d.mts

@@ -142,16 +142,18 @@ declare function FormButtonGroup({ cancelText, submitText, loadingText, isLoadin
 interface TableColumn<T> {
     /** Unique key for the column */
     key: string;
-    /** Column header text */
-    header: string;
+    /** Column header text or React element */
+    header: ReactNode;
     /** Function to render cell content */
     render: (item: T) => ReactNode;
     /** Whether this column is sortable */
     sortable?: boolean;
     /** Custom sort function */
     sortFn?: (a: T, b: T) => number;
-    /** Column width (e.g., '200px', '20%') */
+    /** Column width (e.g., '200px', '20%') - used as initial/min width */
     width?: string;
+    /** Minimum column width when resizing */
+    minWidth?: number;
     /** Text alignment */
     align?: 'left' | 'center' | 'right';
 }
@@ -170,18 +172,30 @@ interface TableProps<T> {
     emptyMessage?: string;
     /** Additional class names for the table container */
     className?: string;
+    /** Enable manual column resizing (default: false) */
+    resizable?: boolean;
+    /** Use fixed table layout for consistent column widths */
+    fixedLayout?: boolean;
 }
 /**
- * Table component for displaying tabular data with sorting support.
+ * Table component for displaying tabular data with sorting and optional resizing.
+ *
+ * Features:
+ * - Responsive by default - shrinks with container
+ * - Optional column resizing with drag handles
+ * - Sortable columns
+ * - Loading and empty states
  */
-declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, resizable, fixedLayout, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 type FilterType = 'text' | 'select' | 'multiselect' | 'boolean' | 'date' | 'none';
 interface FilterOption {
     value: string;
     label: string;
 }
-interface DataTableColumn<T> extends Omit<TableColumn<T>, 'sortable'> {
+interface DataTableColumn<T> extends Omit<TableColumn<T>, 'sortable' | 'header'> {
+    /** Column header text (must be string for filter placeholder) */
+    header: string;
     /** Whether this column is sortable (default: true) */
     sortable?: boolean;
     /** Filter type for this column (default: 'text') */

package/dist/index.d.ts

@@ -142,16 +142,18 @@ declare function FormButtonGroup({ cancelText, submitText, loadingText, isLoadin
 interface TableColumn<T> {
     /** Unique key for the column */
     key: string;
-    /** Column header text */
-    header: string;
+    /** Column header text or React element */
+    header: ReactNode;
     /** Function to render cell content */
     render: (item: T) => ReactNode;
     /** Whether this column is sortable */
     sortable?: boolean;
     /** Custom sort function */
     sortFn?: (a: T, b: T) => number;
-    /** Column width (e.g., '200px', '20%') */
+    /** Column width (e.g., '200px', '20%') - used as initial/min width */
     width?: string;
+    /** Minimum column width when resizing */
+    minWidth?: number;
     /** Text alignment */
     align?: 'left' | 'center' | 'right';
 }
@@ -170,18 +172,30 @@ interface TableProps<T> {
     emptyMessage?: string;
     /** Additional class names for the table container */
     className?: string;
+    /** Enable manual column resizing (default: false) */
+    resizable?: boolean;
+    /** Use fixed table layout for consistent column widths */
+    fixedLayout?: boolean;
 }
 /**
- * Table component for displaying tabular data with sorting support.
+ * Table component for displaying tabular data with sorting and optional resizing.
+ *
+ * Features:
+ * - Responsive by default - shrinks with container
+ * - Optional column resizing with drag handles
+ * - Sortable columns
+ * - Loading and empty states
  */
-declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T>({ data, columns, getRowKey, onRowClick, loading, emptyMessage, className, resizable, fixedLayout, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 type FilterType = 'text' | 'select' | 'multiselect' | 'boolean' | 'date' | 'none';
 interface FilterOption {
     value: string;
     label: string;
 }
-interface DataTableColumn<T> extends Omit<TableColumn<T>, 'sortable'> {
+interface DataTableColumn<T> extends Omit<TableColumn<T>, 'sortable' | 'header'> {
+    /** Column header text (must be string for filter placeholder) */
+    header: string;
     /** Whether this column is sortable (default: true) */
     sortable?: boolean;
     /** Filter type for this column (default: 'text') */

package/dist/index.js

@@ -340,10 +340,15 @@ function Table({
   onRowClick,
   loading = false,
   emptyMessage = "No data available",
-  className = ""
+  className = "",
+  resizable = false,
+  fixedLayout = false
 }) {
   const [sortKey, setSortKey] = (0, import_react5.useState)(null);
   const [sortDirection, setSortDirection] = (0, import_react5.useState)(null);
+  const [columnWidths, setColumnWidths] = (0, import_react5.useState)({});
+  const tableRef = (0, import_react5.useRef)(null);
+  const resizingRef = (0, import_react5.useRef)(null);
   const handleHeaderClick = (column) => {
     if (!column.sortable) return;
     if (sortKey === column.key) {
@@ -372,63 +377,133 @@ function Table({
     });
     return sortDirection === "desc" ? sorted.reverse() : sorted;
   }, [data, columns, sortKey, sortDirection]);
+  const handleResizeStart = (0, import_react5.useCallback)(
+    (e, columnKey) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const headerCell = e.currentTarget.parentElement;
+      if (!headerCell) return;
+      const startWidth = headerCell.getBoundingClientRect().width;
+      resizingRef.current = {
+        columnKey,
+        startX: e.clientX,
+        startWidth
+      };
+      document.addEventListener("mousemove", handleResizeMove);
+      document.addEventListener("mouseup", handleResizeEnd);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    []
+  );
+  const handleResizeMove = (0, import_react5.useCallback)((e) => {
+    if (!resizingRef.current) return;
+    const { columnKey, startX, startWidth } = resizingRef.current;
+    const column = columns.find((c) => c.key === columnKey);
+    const minWidth = column?.minWidth ?? 50;
+    const newWidth = Math.max(minWidth, startWidth + (e.clientX - startX));
+    setColumnWidths((prev) => ({
+      ...prev,
+      [columnKey]: newWidth
+    }));
+  }, [columns]);
+  const handleResizeEnd = (0, import_react5.useCallback)(() => {
+    resizingRef.current = null;
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, [handleResizeMove]);
   const getSortIcon = (column) => {
     if (!column.sortable) return null;
     if (sortKey !== column.key) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-gray-400 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }) });
     }
     if (sortDirection === "asc") {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-primary-600 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) });
   };
   const alignmentClasses = {
     left: "text-left",
     center: "text-center",
     right: "text-right"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `overflow-x-auto ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "w-full border-collapse", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "bg-gray-50 border-b border-gray-200", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "th",
-      {
-        className: `
-                  px-4 py-3 text-sm font-semibold text-gray-700
+  const getColumnStyle = (column) => {
+    if (columnWidths[column.key]) {
+      return { width: columnWidths[column.key], minWidth: columnWidths[column.key] };
+    }
+    if (column.width) {
+      return { width: column.width, minWidth: column.minWidth ?? 50 };
+    }
+    return { minWidth: column.minWidth ?? 50 };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `overflow-x-auto ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "table",
+    {
+      ref: tableRef,
+      className: "w-full border-collapse",
+      style: { tableLayout: fixedLayout || resizable ? "fixed" : "auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "bg-gray-50 border-b border-gray-200", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "th",
+          {
+            className: `
+                  px-4 py-3 text-sm font-semibold text-gray-700 relative
                   ${alignmentClasses[column.align ?? "left"]}
                   ${column.sortable ? "cursor-pointer select-none hover:bg-gray-100" : ""}
                 `,
-        style: { width: column.width },
-        onClick: () => handleHeaderClick(column),
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex items-center gap-1 ${column.align === "right" ? "justify-end" : column.align === "center" ? "justify-center" : ""}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: column.header }),
-          getSortIcon(column)
-        ] })
-      },
-      column.key
-    )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-5 h-5 border-2 border-primary-200 border-t-primary-600 rounded-full animate-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Loading..." })
-    ] }) }) }) : sortedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: emptyMessage }) }) : sortedData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "tr",
-      {
-        className: `
+            style: getColumnStyle(column),
+            onClick: () => handleHeaderClick(column),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "div",
+                {
+                  className: `flex items-center gap-1 overflow-hidden ${column.align === "right" ? "justify-end" : column.align === "center" ? "justify-center" : ""}`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate", children: column.header }),
+                    getSortIcon(column)
+                  ]
+                }
+              ),
+              resizable && index < columns.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "div",
+                {
+                  className: "absolute top-0 right-0 w-1 h-full cursor-col-resize bg-transparent hover:bg-primary-300 transition-colors",
+                  onMouseDown: (e) => handleResizeStart(e, column.key),
+                  onClick: (e) => e.stopPropagation()
+                }
+              )
+            ]
+          },
+          column.key
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-5 h-5 border-2 border-primary-200 border-t-primary-600 rounded-full animate-spin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Loading..." })
+        ] }) }) }) : sortedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("td", { colSpan: columns.length, className: "px-4 py-8 text-center text-gray-500", children: emptyMessage }) }) : sortedData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "tr",
+          {
+            className: `
                   border-b border-gray-100 hover:bg-gray-50 transition-colors
                   ${onRowClick ? "cursor-pointer" : ""}
                 `,
-        onClick: () => onRowClick?.(item),
-        children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "td",
-          {
-            className: `px-4 py-3 text-sm text-gray-800 ${alignmentClasses[column.align ?? "left"]}`,
-            style: { width: column.width },
-            children: column.render(item)
+            onClick: () => onRowClick?.(item),
+            children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "td",
+              {
+                className: `px-4 py-3 text-sm text-gray-800 overflow-hidden ${alignmentClasses[column.align ?? "left"]}`,
+                style: getColumnStyle(column),
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "truncate", children: column.render(item) })
+              },
+              column.key
+            ))
           },
-          column.key
-        ))
-      },
-      getRowKey(item)
-    )) })
-  ] }) });
+          getRowKey(item)
+        )) })
+      ]
+    }
+  ) });
 }
 
 // src/components/DataTable.tsx