@rowakit/table 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -12,6 +12,30 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * @packageDocumentation
  */
 
+/**
+ * Filter value shape for server-side filtering.
+ */
+type FilterValue = {
+    op: 'contains';
+    value: string;
+} | {
+    op: 'equals';
+    value: string | number | boolean | null;
+} | {
+    op: 'in';
+    value: Array<string | number>;
+} | {
+    op: 'range';
+    value: {
+        from?: string;
+        to?: string;
+    };
+};
+/**
+ * Filters map: field name → filter value.
+ * Undefined values represent cleared filters.
+ */
+type Filters = Record<string, FilterValue | undefined>;
 /**
  * Query parameters passed to the fetcher function.
  *
@@ -29,8 +53,8 @@ interface FetcherQuery {
         /** Sort direction */
         direction: 'asc' | 'desc';
     };
-    /** Optional filters (key-value pairs) */
-    filters?: Record<string, unknown>;
+    /** Optional filters (omitted when empty) */
+    filters?: Filters;
 }
 /**
  * Result returned from the fetcher function.
@@ -66,7 +90,11 @@ type Fetcher<T> = (query: FetcherQuery) => Promise<FetcherResult<T>>;
  * These represent the built-in column types that can be created
  * via the `col.*` helper factory.
  */
-type ColumnKind = 'text' | 'date' | 'boolean' | 'actions' | 'custom';
+type ColumnKind = 'text' | 'date' | 'boolean' | 'actions' | 'custom' | 'badge' | 'number';
+/**
+ * Badge tone options for status/enum columns.
+ */
+type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger';
 /**
  * Base column definition properties shared across all column types.
  */
@@ -81,6 +109,12 @@ interface BaseColumnDef<T> {
     sortable?: boolean;
     /** Optional field name to extract from row data (for sortable columns) */
     field?: keyof T & string;
+    /** Column width in pixels */
+    width?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Enable text truncation with ellipsis */
+    truncate?: boolean;
 }
 /**
  * Text column definition.
@@ -106,6 +140,25 @@ interface BooleanColumnDef<T> extends BaseColumnDef<T> {
     field: keyof T & string;
     format?: (value: boolean) => string;
 }
+/**
+ * Badge column definition for status/enum fields.
+ */
+interface BadgeColumnDef<T> extends BaseColumnDef<T> {
+    kind: 'badge';
+    field: keyof T & string;
+    map?: Record<string, {
+        label: string;
+        tone: BadgeTone;
+    }>;
+}
+/**
+ * Number column definition.
+ */
+interface NumberColumnDef<T> extends BaseColumnDef<T> {
+    kind: 'number';
+    field: keyof T & string;
+    format?: Intl.NumberFormatOptions | ((value: number, row: T) => string);
+}
 /**
  * Actions column definition.
  */
@@ -127,7 +180,7 @@ interface CustomColumnDef<T> extends BaseColumnDef<T> {
 /**
  * Union type for all column definitions.
  */
-type ColumnDef<T> = TextColumnDef<T> | DateColumnDef<T> | BooleanColumnDef<T> | ActionsColumnDef<T> | CustomColumnDef<T>;
+type ColumnDef<T> = TextColumnDef<T> | DateColumnDef<T> | BooleanColumnDef<T> | BadgeColumnDef<T> | NumberColumnDef<T> | ActionsColumnDef<T> | CustomColumnDef<T>;
 /**
  * Row action definition.
  *
@@ -168,6 +221,12 @@ interface TextOptions {
     sortable?: boolean;
     /** Optional formatter function */
     format?: (value: unknown) => string;
+    /** Column width in pixels */
+    width?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Enable text truncation with ellipsis */
+    truncate?: boolean;
 }
 interface DateOptions {
     /** Optional custom header label */
@@ -176,6 +235,12 @@ interface DateOptions {
     sortable?: boolean;
     /** Optional date formatter function */
     format?: (value: Date | string | number) => string;
+    /** Column width in pixels */
+    width?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Enable text truncation with ellipsis */
+    truncate?: boolean;
 }
 interface BooleanOptions {
     /** Optional custom header label */
@@ -184,6 +249,43 @@ interface BooleanOptions {
     sortable?: boolean;
     /** Optional boolean formatter function */
     format?: (value: boolean) => string;
+    /** Column width in pixels */
+    width?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Enable text truncation with ellipsis */
+    truncate?: boolean;
+}
+interface BadgeOptions {
+    /** Optional custom header label */
+    header?: string;
+    /** Enable sorting for this column */
+    sortable?: boolean;
+    /** Value-to-badge mapping */
+    map?: Record<string, {
+        label: string;
+        tone: BadgeTone;
+    }>;
+    /** Column width in pixels */
+    width?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Enable text truncation with ellipsis */
+    truncate?: boolean;
+}
+interface NumberOptions<T = unknown> {
+    /** Optional custom header label */
+    header?: string;
+    /** Enable sorting for this column */
+    sortable?: boolean;
+    /** Formatting options: Intl.NumberFormatOptions or custom formatter */
+    format?: Intl.NumberFormatOptions | ((value: number, row: T) => string);
+    /** Column width in pixels */
+    width?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Enable text truncation with ellipsis */
+    truncate?: boolean;
 }
 /**
  * Create a text column definition.
@@ -222,6 +324,37 @@ declare function date<T>(field: keyof T & string, options?: DateOptions): DateCo
  * ```
  */
 declare function boolean<T>(field: keyof T & string, options?: BooleanOptions): BooleanColumnDef<T>;
+/**
+ * Create a badge column definition for status/enum fields.
+ *
+ * @example
+ * ```ts
+ * col.badge('status')
+ * col.badge('status', {
+ *   map: {
+ *     active: { label: 'Active', tone: 'success' },
+ *     paused: { label: 'Paused', tone: 'warning' },
+ *     disabled: { label: 'Disabled', tone: 'danger' }
+ *   }
+ * })
+ * ```
+ */
+declare function badge<T>(field: keyof T & string, options?: BadgeOptions): BadgeColumnDef<T>;
+/**
+ * Create a number column definition.
+ *
+ * @example
+ * ```ts
+ * col.number('amount')
+ * col.number('price', {
+ *   format: { style: 'currency', currency: 'USD' }
+ * })
+ * col.number('count', {
+ *   format: (val, row) => `${val} items`
+ * })
+ * ```
+ */
+declare function number<T>(field: keyof T & string, options?: NumberOptions<T>): NumberColumnDef<T>;
 /**
  * Create an actions column definition.
  *
@@ -267,6 +400,7 @@ declare function actions<T>(actions: ActionDef<T>[]): ActionsColumnDef<T>;
  * })
  * ```
  */
+declare function custom<T>(field: keyof T & string, render: (row: T) => ReactNode): CustomColumnDef<T>;
 declare function custom<T>(options: {
     /** Unique column identifier */
     id: string;
@@ -301,6 +435,8 @@ declare const col: {
     readonly text: typeof text;
     readonly date: typeof date;
     readonly boolean: typeof boolean;
+    readonly badge: typeof badge;
+    readonly number: typeof number;
     readonly actions: typeof actions;
     readonly custom: typeof custom;
 };
@@ -318,6 +454,8 @@ interface SmartTableProps<T> {
     rowKey?: keyof T | ((row: T) => string | number);
     /** Optional CSS class name for the table container */
     className?: string;
+    /** Enable filters (default: false) */
+    enableFilters?: boolean;
 }
 /**
  * RowaKitTable - Server-side table component for internal/business apps.
@@ -370,7 +508,7 @@ interface SmartTableProps<T> {
  * }
  * ```
  */
-declare function RowaKitTable<T>({ fetcher, columns, defaultPageSize, pageSizeOptions, rowKey, className, }: SmartTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function RowaKitTable<T>({ fetcher, columns, defaultPageSize, pageSizeOptions, rowKey, className, enableFilters, }: SmartTableProps<T>): react_jsx_runtime.JSX.Element;
 /**
  * @deprecated Use RowaKitTable instead. SmartTable is kept as an alias for backward compatibility.
  */
@@ -386,4 +524,4 @@ declare const SmartTable: typeof RowaKitTable;
 
 declare const VERSION = "0.1.0";
 
-export { type ActionDef, type ActionsColumnDef, type BaseColumnDef, type BooleanColumnDef, type ColumnDef, type ColumnKind, type CustomColumnDef, type DateColumnDef, type Fetcher, type FetcherQuery, type FetcherResult, RowaKitTable, SmartTable, type SmartTableProps, type TextColumnDef, VERSION, col };
+export { type ActionDef, type ActionsColumnDef, type BadgeColumnDef, type BadgeTone, type BaseColumnDef, type BooleanColumnDef, type ColumnDef, type ColumnKind, type CustomColumnDef, type DateColumnDef, type Fetcher, type FetcherQuery, type FetcherResult, type FilterValue, type Filters, type NumberColumnDef, RowaKitTable, SmartTable, type SmartTableProps, type TextColumnDef, VERSION, col };

package/dist/index.js

@@ -9,7 +9,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) {
@@ -19,7 +22,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) {
@@ -29,7 +35,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) {
@@ -39,19 +74,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
 };
@@ -99,6 +147,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__ */ 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__ */ jsx("div", { className: "rowakit-table-actions", children: column.actions.map((action) => {
         const isDisabled = isLoading || action.disabled === true || typeof action.disabled === "function" && action.disabled(row);
@@ -143,7 +210,8 @@ function RowaKitTable({
   defaultPageSize = 20,
   pageSizeOptions = [10, 20, 50],
   rowKey,
-  className = ""
+  className = "",
+  enableFilters = false
 }) {
   const [dataState, setDataState] = useState({
     state: "idle",
@@ -154,8 +222,27 @@ function RowaKitTable({
     page: 1,
     pageSize: defaultPageSize
   });
+  const [filters, setFilters] = useState({});
   const [confirmState, setConfirmState] = useState(null);
   const requestIdRef = useRef(0);
+  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]);
   useEffect(() => {
     const currentRequestId = ++requestIdRef.current;
     setDataState((prev) => ({ ...prev, state: "loading" }));
@@ -223,38 +310,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__ */ jsxs("div", { className: `rowakit-table${className ? ` ${className}` : ""}`, children: [
+    hasActiveFilters && /* @__PURE__ */ jsx("div", { className: "rowakit-table-filter-controls", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: handleClearAllFilters,
+        className: "rowakit-button rowakit-button-secondary",
+        type: "button",
+        children: "Clear all filters"
+      }
+    ) }),
     /* @__PURE__ */ jsxs("table", { children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("thead", { children: [
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("th", {}, column.id);
+          }
+          const filterValue = filters[field];
+          if (column.kind === "badge") {
+            const options = column.map ? Object.keys(column.map) : [];
+            return /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ 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__ */ jsx("option", { value: "", children: "All" }),
+                  options.map((opt) => /* @__PURE__ */ 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__ */ jsx("th", { children: /* @__PURE__ */ 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__ */ jsx("option", { value: "", children: "All" }),
+                  /* @__PURE__ */ jsx("option", { value: "true", children: "True" }),
+                  /* @__PURE__ */ 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__ */ jsx("th", { children: /* @__PURE__ */ jsxs("div", { className: "rowakit-filter-date-range", children: [
+              /* @__PURE__ */ 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__ */ 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__ */ jsx("th", { children: /* @__PURE__ */ 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: numValue });
+                  } else {
+                    handleClearFilter(field);
+                  }
+                } else {
+                  handleFilterChange(field, { op: "contains", value: rawValue });
+                }
+              }
+            }
+          ) }, column.id);
+        }) })
+      ] }),
       /* @__PURE__ */ jsxs("tbody", { children: [
         isLoading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: columns.length, className: "rowakit-table-loading", children: [
           /* @__PURE__ */ jsx("div", { className: "rowakit-table-loading-spinner" }),
@@ -275,7 +514,24 @@ function RowaKitTable({
         isEmpty && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ 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__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { children: renderCell(column, row, isLoading, setConfirmState) }, column.id)) }, key);
+          return /* @__PURE__ */ 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__ */ 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);
         })
       ] })
     ] }),