@rowakit/table 0.1.0 → 0.2.1

package/dist/index.cjs

@@ -11,7 +11,10 @@ function text(field, options) {
     field,
     header: options?.header,
     sortable: options?.sortable ?? false,
-    format: options?.format
+    format: options?.format,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
   };
 }
 function date(field, options) {
@@ -21,7 +24,10 @@ function date(field, options) {
     field,
     header: options?.header,
     sortable: options?.sortable ?? false,
-    format: options?.format
+    format: options?.format,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
   };
 }
 function boolean(field, options) {
@@ -31,7 +37,36 @@ function boolean(field, options) {
     field,
     header: options?.header,
     sortable: options?.sortable ?? false,
-    format: options?.format
+    format: options?.format,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
+  };
+}
+function badge(field, options) {
+  return {
+    id: field,
+    kind: "badge",
+    field,
+    header: options?.header,
+    sortable: options?.sortable ?? false,
+    map: options?.map,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
+  };
+}
+function number(field, options) {
+  return {
+    id: field,
+    kind: "number",
+    field,
+    header: options?.header,
+    sortable: options?.sortable ?? false,
+    format: options?.format,
+    width: options?.width,
+    align: options?.align,
+    truncate: options?.truncate
   };
 }
 function actions(actions2) {
@@ -41,19 +76,32 @@ function actions(actions2) {
     actions: actions2
   };
 }
-function custom(options) {
+function custom(arg1, arg2) {
+  if (typeof arg1 === "string") {
+    if (typeof arg2 !== "function") {
+      throw new Error("col.custom(field, render): render must be a function");
+    }
+    return {
+      id: arg1,
+      kind: "custom",
+      field: arg1,
+      render: arg2
+    };
+  }
   return {
-    id: options.id,
+    id: arg1.id,
     kind: "custom",
-    header: options.header,
-    field: options.field,
-    render: options.render
+    header: arg1.header,
+    field: arg1.field,
+    render: arg1.render
   };
 }
 var col = {
   text,
   date,
   boolean,
+  badge,
+  number,
   actions,
   custom
 };
@@ -101,6 +149,25 @@ function renderCell(column, row, isLoading, setConfirmState) {
       }
       return value ? "Yes" : "No";
     }
+    case "badge": {
+      const value = row[column.field];
+      const valueStr = String(value ?? "");
+      const mapped = column.map?.[valueStr];
+      const label = mapped?.label ?? valueStr;
+      const tone = mapped?.tone ?? "neutral";
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rowakit-badge rowakit-badge-${tone}`, children: label });
+    }
+    case "number": {
+      const value = row[column.field];
+      const numValue = Number(value ?? 0);
+      if (column.format) {
+        if (typeof column.format === "function") {
+          return column.format(numValue, row);
+        }
+        return new Intl.NumberFormat(void 0, column.format).format(numValue);
+      }
+      return numValue.toLocaleString();
+    }
     case "actions": {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-actions", children: column.actions.map((action) => {
         const isDisabled = isLoading || action.disabled === true || typeof action.disabled === "function" && action.disabled(row);
@@ -145,7 +212,8 @@ function RowaKitTable({
   defaultPageSize = 20,
   pageSizeOptions = [10, 20, 50],
   rowKey,
-  className = ""
+  className = "",
+  enableFilters = false
 }) {
   const [dataState, setDataState] = react.useState({
     state: "idle",
@@ -156,8 +224,27 @@ function RowaKitTable({
     page: 1,
     pageSize: defaultPageSize
   });
+  const [filters, setFilters] = react.useState({});
   const [confirmState, setConfirmState] = react.useState(null);
   const requestIdRef = react.useRef(0);
+  react.useEffect(() => {
+    if (!enableFilters) return;
+    const activeFilters = {};
+    let hasFilters = false;
+    for (const [field, value] of Object.entries(filters)) {
+      if (value !== void 0) {
+        activeFilters[field] = value;
+        hasFilters = true;
+      }
+    }
+    const filtersToSend = hasFilters ? activeFilters : void 0;
+    setQuery((prev) => ({
+      ...prev,
+      filters: filtersToSend,
+      page: 1
+      // Reset page to 1 when filters change
+    }));
+  }, [filters, enableFilters]);
   react.useEffect(() => {
     const currentRequestId = ++requestIdRef.current;
     setDataState((prev) => ({ ...prev, state: "loading" }));
@@ -225,38 +312,190 @@ function RowaKitTable({
     }
     return query.sort.direction === "asc" ? " \u2191" : " \u2193";
   };
+  const handleFilterChange = (field, value) => {
+    setFilters((prev) => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+  const handleClearFilter = (field) => {
+    setFilters((prev) => {
+      const newFilters = { ...prev };
+      delete newFilters[field];
+      return newFilters;
+    });
+  };
+  const handleClearAllFilters = () => {
+    setFilters({});
+  };
   const isLoading = dataState.state === "loading";
   const isError = dataState.state === "error";
   const isEmpty = dataState.state === "empty";
   const totalPages = Math.ceil(dataState.total / query.pageSize);
   const canGoPrevious = query.page > 1 && !isLoading;
   const canGoNext = query.page < totalPages && !isLoading;
+  const hasActiveFilters = enableFilters && Object.values(filters).some((v) => v !== void 0);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rowakit-table${className ? ` ${className}` : ""}`, children: [
+    hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-filter-controls", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: handleClearAllFilters,
+        className: "rowakit-button rowakit-button-secondary",
+        type: "button",
+        children: "Clear all filters"
+      }
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("table", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => {
-        const isSortable = column.kind !== "actions" && (column.kind === "custom" ? false : column.sortable === true);
-        const field = column.kind === "actions" ? "" : column.kind === "custom" ? column.field : column.field;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "th",
-          {
-            onClick: isSortable ? () => handleSort(String(field)) : void 0,
-            role: isSortable ? "button" : void 0,
-            tabIndex: isSortable ? 0 : void 0,
-            onKeyDown: isSortable ? (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleSort(String(field));
+      /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => {
+          const isSortable = column.kind !== "actions" && (column.kind === "custom" ? false : column.sortable === true);
+          const field = column.kind === "actions" ? "" : column.kind === "custom" ? column.field : column.field;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "th",
+            {
+              onClick: isSortable ? () => handleSort(String(field)) : void 0,
+              role: isSortable ? "button" : void 0,
+              tabIndex: isSortable ? 0 : void 0,
+              onKeyDown: isSortable ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSort(String(field));
+                }
+              } : void 0,
+              "aria-sort": isSortable && query.sort?.field === String(field) ? query.sort.direction === "asc" ? "ascending" : "descending" : void 0,
+              style: {
+                width: column.width ? `${column.width}px` : void 0,
+                textAlign: column.align
+              },
+              className: column.truncate ? "rowakit-cell-truncate" : void 0,
+              children: [
+                getHeaderLabel(column),
+                isSortable && getSortIndicator(String(field))
+              ]
+            },
+            column.id
+          );
+        }) }),
+        enableFilters && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "rowakit-table-filter-row", children: columns.map((column) => {
+          const field = column.kind === "actions" || column.kind === "custom" ? "" : String(column.field);
+          const canFilter = field && column.kind !== "actions";
+          if (!canFilter) {
+            return /* @__PURE__ */ jsxRuntime.jsx("th", {}, column.id);
+          }
+          const filterValue = filters[field];
+          if (column.kind === "badge") {
+            const options = column.map ? Object.keys(column.map) : [];
+            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                className: "rowakit-filter-select",
+                value: filterValue?.op === "equals" ? String(filterValue.value ?? "") : "",
+                onChange: (e) => {
+                  const value = e.target.value;
+                  if (value === "") {
+                    handleClearFilter(field);
+                  } else {
+                    handleFilterChange(field, { op: "equals", value });
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
+                  options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
+                ]
               }
-            } : void 0,
-            "aria-sort": isSortable && query.sort?.field === String(field) ? query.sort.direction === "asc" ? "ascending" : "descending" : void 0,
-            children: [
-              getHeaderLabel(column),
-              isSortable && getSortIndicator(String(field))
-            ]
-          },
-          column.id
-        );
-      }) }) }),
+            ) }, column.id);
+          }
+          if (column.kind === "boolean") {
+            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                className: "rowakit-filter-select",
+                value: filterValue?.op === "equals" && typeof filterValue.value === "boolean" ? String(filterValue.value) : "",
+                onChange: (e) => {
+                  const value = e.target.value;
+                  if (value === "") {
+                    handleClearFilter(field);
+                  } else {
+                    handleFilterChange(field, { op: "equals", value: value === "true" });
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "true", children: "True" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "false", children: "False" })
+                ]
+              }
+            ) }, column.id);
+          }
+          if (column.kind === "date") {
+            const fromValue = filterValue?.op === "range" ? filterValue.value.from ?? "" : "";
+            const toValue = filterValue?.op === "range" ? filterValue.value.to ?? "" : "";
+            return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-filter-date-range", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "date",
+                  className: "rowakit-filter-input",
+                  placeholder: "From",
+                  value: fromValue,
+                  onChange: (e) => {
+                    const from = e.target.value || void 0;
+                    const to = toValue || void 0;
+                    if (!from && !to) {
+                      handleClearFilter(field);
+                    } else {
+                      handleFilterChange(field, { op: "range", value: { from, to } });
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "date",
+                  className: "rowakit-filter-input",
+                  placeholder: "To",
+                  value: toValue,
+                  onChange: (e) => {
+                    const to = e.target.value || void 0;
+                    const from = fromValue || void 0;
+                    if (!from && !to) {
+                      handleClearFilter(field);
+                    } else {
+                      handleFilterChange(field, { op: "range", value: { from, to } });
+                    }
+                  }
+                }
+              )
+            ] }) }, column.id);
+          }
+          const isNumberColumn = column.kind === "number";
+          return /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: isNumberColumn ? "number" : "text",
+              className: "rowakit-filter-input",
+              placeholder: `Filter ${getHeaderLabel(column)}...`,
+              value: filterValue?.op === "contains" ? filterValue.value : filterValue?.op === "equals" && typeof filterValue.value === "string" ? filterValue.value : filterValue?.op === "equals" && typeof filterValue.value === "number" ? String(filterValue.value) : "",
+              onChange: (e) => {
+                const rawValue = e.target.value;
+                if (rawValue === "") {
+                  handleClearFilter(field);
+                } else if (isNumberColumn) {
+                  const numValue = Number(rawValue);
+                  if (!isNaN(numValue)) {
+                    handleFilterChange(field, { op: "equals", value: rawValue });
+                  } else {
+                    handleClearFilter(field);
+                  }
+                } else {
+                  handleFilterChange(field, { op: "contains", value: rawValue });
+                }
+              }
+            }
+          ) }, column.id);
+        }) })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
         isLoading && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: columns.length, className: "rowakit-table-loading", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-table-loading-spinner" }),
@@ -277,7 +516,24 @@ function RowaKitTable({
         isEmpty && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: columns.length, className: "rowakit-table-empty", children: "No data" }) }),
         dataState.state === "success" && dataState.items.map((row) => {
           const key = getRowKey(row, rowKey);
-          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: renderCell(column, row, isLoading, setConfirmState) }, column.id)) }, key);
+          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((column) => {
+            const cellClass = [
+              column.kind === "number" ? "rowakit-cell-number" : "",
+              column.truncate ? "rowakit-cell-truncate" : ""
+            ].filter(Boolean).join(" ") || void 0;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                className: cellClass,
+                style: {
+                  width: column.width ? `${column.width}px` : void 0,
+                  textAlign: column.align || (column.kind === "number" ? "right" : void 0)
+                },
+                children: renderCell(column, row, isLoading, setConfirmState)
+              },
+              column.id
+            );
+          }) }, key);
         })
       ] })
     ] }),