@axzydev/axzy_ui_system 1.3.3 → 1.3.4

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/molecules/table/table.doc.mdx

@@ -42,6 +42,7 @@ Basic data table with column definitions, sorting, and configurable visual varia
 | `minWidth` | `number` | — | Minimum column width in px, applied to header and body cells via inline style. |
 | `align` | `"left" \| "center" \| "right"` | `"left"` | Horizontal alignment of the column's header and cells. |
 | `truncate` | `boolean` | `false` | Truncates overflowing cell content with an ellipsis and exposes the raw string/number via the native `title` attribute. |
+| `filter` | `true \| "catalog" \| "search" \| "date" \| "date-range"` | `false` | Filter control rendered in the header. `true` = text/number input (or boolean toggle when `type: "boolean"`); `"catalog"` = `ITSelect` fed by `catalogOptions.data`; `"search"` = `ITSearchSelect` typeahead fed by `catalogOptions.data` (optional `catalogOptions.onSearch` for server-side search); `"date"` / `"date-range"` = `ITDatePicker` single/range, bounded by `dateFilterOptions`. |
 
 ## Usage
 
@@ -67,6 +68,15 @@ const data = [
   onRowClick={(row, event) => console.log(row, event.type)}
 />
 
+// Filter modes: ITSearchSelect typeahead + ITDatePicker single / range
+const filterColumns = [
+  { key: 'role', label: 'Role', type: 'string', filter: 'search', catalogOptions: { data: roles } },
+  { key: 'lastLogin', label: 'Last login', type: 'date', filter: 'date', dateFilterOptions: { maxDate: new Date() } },
+  { key: 'hiredAt', label: 'Hired', type: 'date', filter: 'date-range', dateFilterOptions: { maxDate: new Date() } },
+];
+
+<ITTable columns={filterColumns} data={data} />
+
 // No horizontal scroll: fixed layout + per-column widths + truncation
 const fixedColumns = [
   { key: 'name',  label: 'Name',  type: 'string', width: '30%', truncate: true },
@@ -81,6 +91,7 @@ const fixedColumns = [
 
 - `columns[].render` provides custom cell rendering via render function
 - `columns[].sortable` enables column header sort toggles
+- `columns[].filter` supports `true` (text/number input, or boolean toggle for `type: "boolean"`), `"catalog"` (`ITSelect`), `"search"` (`ITSearchSelect` typeahead; add `catalogOptions.onSearch` for server-side search), and `"date"` / `"date-range"` (`ITDatePicker`; bound with `dateFilterOptions: { minDate, maxDate }`). Filtering is client-side: `"date"` matches the whole day, `"date-range"` includes both ends (`startOfDay` / `endOfDay`).
 - `onRowClick` fires in **both** the table and cards views. The event is a `MouseEvent` for pointer interaction and a `KeyboardEvent` for Enter/Space activation.
 - Clicks/keys that start inside an interactive child (`button`, `a`, `input`, `select`, `textarea`, `[role="button"]`, `[role="link"]`, `[data-row-click-ignore]`) do **not** trigger `onRowClick`.
 - When `onRowClick` is omitted no `cursor-pointer`, focus ring, `tabIndex`, or `role` is added.

package/src/components/molecules/table/table.props.ts

@@ -3,6 +3,18 @@ import { TableDensity, TableSize, TableVariants } from "@/types/table.types";
 /** Data type of a table column, controls default rendering, filter UI, and sort comparison. */
 export type ColumnType = "string" | "date" | "number" | "boolean" | "actions" | "catalog";
 
+/**
+ * Per-column filter mode, set through `Column.filter`.
+ *
+ * - `true` — text/number input (or boolean toggle when `type: "boolean"`).
+ * - `"catalog"` — `ITSelect` dropdown populated from `catalogOptions`.
+ * - `"search"` — `ITSearchSelect` typeahead populated from `catalogOptions`
+ *   (respects `catalogOptions.onSearch` for server-side search).
+ * - `"date"` — `ITDatePicker` single-date filter.
+ * - `"date-range"` — `ITDatePicker` in range mode.
+ */
+export type ColumnFilterMode = boolean | "catalog" | "search" | "date" | "date-range";
+
 /** A single selectable entry for a `"catalog"`-type column's filter/value lookup. */
 export interface CatalogOption {
   /** Unique identifier matched against the row's field value. */
@@ -23,8 +35,8 @@ export interface Column<T = any> {
   currencyMX?: boolean;
   /** Custom action buttons/content rendered for a `"actions"`-type column. Receives the full row object. */
   actions?: (row: T) => React.ReactNode;
-  /** Enables per-column filtering. Pass `true` for a text/number/boolean filter matching `type`, or `"catalog"` to filter against `catalogOptions`. @default false */
-  filter?: boolean | "catalog";
+  /** Enables per-column filtering. Pass `true` for a text/number/boolean filter matching `type`, `"catalog"` for an `ITSelect` fed by `catalogOptions`, `"search"` for an `ITSearchSelect` typeahead, or `"date"` / `"date-range"` for an `ITDatePicker`. @default false */
+  filter?: ColumnFilterMode;
   /** Column data type. Drives default cell rendering, filter UI, and sort comparison. */
   type: ColumnType;
   /** Whether clicking the header sorts by this column. Ignored for `type: "actions"`. @default false */
@@ -45,6 +57,22 @@ export interface Column<T = any> {
     loading?: boolean;
     /** Shows an error state in the filter UI when the catalog failed to load. @default false */
     error?: boolean;
+    /**
+     * Server-side search handler for a `filter: "search"` column. When provided,
+     * `ITSearchSelect` delegates filtering to this callback (debounced) instead
+     * of filtering `data` locally; the parent is expected to update `data`.
+     */
+    onSearch?: (query: string) => void;
+  };
+  /**
+   * Date bounds applied by the `"date"` and `"date-range"` filters, forwarded to
+   * the underlying `ITDatePicker`. Ignored by every other filter mode.
+   */
+  dateFilterOptions?: {
+    /** Earliest selectable date. */
+    minDate?: Date;
+    /** Latest selectable date. */
+    maxDate?: Date;
   };
   /**
    * Fixed column width. A `number` is treated as pixels (`width: 120` → `120px`);

package/src/components/molecules/table/table.stories.tsx

@@ -325,3 +325,33 @@ export const VirtualizedLargeDataset: Story = {
     itemsPerPageOptions: [50, 100, 250],
   } as any,
 };
+
+// --- COLUMN FILTER MODES ---
+
+const filterModeColumns: Column<User>[] = [
+  { key: "name", label: "Name", type: "string", filter: true },
+  {
+    key: "roleId",
+    label: "Role (ITSearchSelect)",
+    type: "catalog",
+    filter: "search",
+    catalogOptions: { data: mockRoles },
+  },
+  {
+    key: "lastLogin",
+    label: "Last login (ITDatePicker range)",
+    type: "date",
+    filter: "date-range",
+    dateFilterOptions: { maxDate: new Date() },
+    render: (row) => new Date(row.lastLogin).toLocaleDateString("es-MX"),
+  },
+];
+
+export const WithSearchAndDateFilters: Story = {
+  args: {
+    columns: filterModeColumns,
+    data: generateMockData(25),
+    title: "Filtros: ITSearchSelect + ITDatePicker (rango)",
+    defaultItemsPerPage: 8,
+  } as any,
+};

package/src/components/molecules/table/table.tsx

@@ -15,6 +15,9 @@ import { MdOutlineSwapVert } from "react-icons/md";
 import ITInput from "@/components/atoms/input/input";
 import ITPagination from "@/components/molecules/pagination/pagination";
 import ITSelect from "@/components/molecules/select/select";
+import ITSearchSelect from "@/components/molecules/search-select/search-select";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
+import { isSameDay, startOfDay, endOfDay } from "date-fns";
 import { Column, ITTableProps } from "./table.props";
 import ITText from "@/components/atoms/text/text";
 import {
@@ -146,21 +149,39 @@ export default function ITTable<T extends Record<string, unknown>>({
 
   const filteredData = sortedData.filter((row) =>
     columns.every((col) => {
-      if (
-        !col.filter ||
-        filters[col.key] === undefined ||
-        filters[col.key] === ""
-      )
+      const rawFilter = filters[col.key];
+      if (!col.filter || rawFilter === undefined || rawFilter === "") return true;
+      // A date range with both ends empty means "no filter".
+      if (Array.isArray(rawFilter) && rawFilter[0] == null && rawFilter[1] == null) {
         return true;
+      }
 
       const value = getNestedValue(row, col.key);
-      const filterValue = String(filters[col.key]).toLowerCase();
+
+      if (col.filter === "date" || col.filter === "date-range") {
+        const rowDate = value instanceof Date ? value : new Date(String(value));
+        if (isNaN(rowDate.getTime())) return false;
+        if (col.filter === "date") {
+          return isSameDay(rowDate, rawFilter as Date);
+        }
+        const [start, end] = rawFilter as [Date | null, Date | null];
+        if (start && rowDate.getTime() < startOfDay(start).getTime()) return false;
+        if (end && rowDate.getTime() > endOfDay(end).getTime()) return false;
+        return true;
+      }
+
+      if (col.filter === "search") {
+        // The search-select stores the exact option value (id).
+        return String(value) === String(rawFilter);
+      }
+
+      const filterValue = String(rawFilter).toLowerCase();
 
       switch (col.type) {
         case "number":
           return String(value).includes(filterValue);
         case "boolean":
-          return value === filters[col.key];
+          return value === rawFilter;
         case "catalog": {
           if (!col.catalogOptions) return true;
           const catalogItem = col.catalogOptions.data.find(
@@ -283,6 +304,81 @@ export default function ITTable<T extends Record<string, unknown>>({
       );
     }
 
+    if (col.filter === "search" && col.catalogOptions) {
+      if (col.catalogOptions.loading) {
+        return (
+          <FaSpinner
+            className="animate-spin"
+            aria-label="Cargando opciones"
+            title="Cargando opciones"
+          />
+        );
+      }
+
+      if (col.catalogOptions.error) {
+        return <ITText as="span" className="text-danger-500 text-xs">Error cargando</ITText>;
+      }
+
+      const searchValue = filters[col.key];
+      return (
+        <ITSearchSelect
+          name={`filter-${col.key}`}
+          options={col.catalogOptions.data.map((item) => ({
+            value: item.id,
+            label: item.name,
+          }))}
+          value={
+            typeof searchValue === "string" || typeof searchValue === "number"
+              ? searchValue
+              : ""
+          }
+          onChange={(value) => handleFilterChange(col.key, value === "" ? undefined : value)}
+          onSearch={col.catalogOptions.onSearch}
+          isLoading={col.catalogOptions.loading}
+          size="sm"
+          placeholder="Buscar..."
+          clearable
+          className="w-full"
+          onBlur={() => { }}
+        />
+      );
+    }
+
+    if (col.filter === "date") {
+      const dateValue = filters[col.key];
+      return (
+        <ITDatePicker
+          name={`filter-${col.key}`}
+          value={dateValue instanceof Date ? dateValue : undefined}
+          onChange={(e) => handleFilterChange(col.key, e.target.value as Date)}
+          minDate={col.dateFilterOptions?.minDate}
+          maxDate={col.dateFilterOptions?.maxDate}
+          size="sm"
+          placeholder="dd/mm/aaaa"
+          className="w-full"
+        />
+      );
+    }
+
+    if (col.filter === "date-range") {
+      const rangeValue = filters[col.key];
+      return (
+        <ITDatePicker
+          name={`filter-${col.key}`}
+          range
+          value={Array.isArray(rangeValue) ? rangeValue : undefined}
+          onChange={(e) =>
+            handleFilterChange(col.key, e.target.value as [Date | null, Date | null])
+          }
+          minDate={col.dateFilterOptions?.minDate}
+          maxDate={col.dateFilterOptions?.maxDate}
+          size="sm"
+          placeholder="dd/mm/aaaa - dd/mm/aaaa"
+          className="w-full"
+        />
+      );
+    }
+
     return (
       <ITInput
         name={`filter-${col.key}`}

package/src/components/organisms/data-table/ITDataTable.doc.mdx

@@ -14,7 +14,7 @@ Advanced server-side data table with automatic pagination, column sorting, and f
 | `columns` | `Column<T>[]` | — | Column definitions with key, label, type, sortable, filter, render, plus layout fields: `width` (`number` px or CSS `string`), `minWidth` (px), `align` (`"left" \| "center" \| "right"`), and `truncate` (ellipsis + native `title`). |
 | `fetchData` | `(params: ITDataTableFetchParams) => Promise<ITDataTableResponse<T>>` | — | Async callback triggered on pagination, filter, or sort change. Must return `{ data, total }`. |
 | `debounceMs` | `number` | `500` | Delay in ms before firing fetch after filter state changes. |
-| `externalFilters` | `Record<string, string \| number \| boolean \| Date>` | `{}` | Filters managed outside the table (e.g., date pickers) merged with internal column filters. |
+| `externalFilters` | `ColumnFilters` | `{}` | Filters managed outside the table (e.g., date pickers) merged with internal column filters. Values may be scalars, a `Date`, or a `[start, end]` tuple. |
 | `loadingIndicator` | `ReactNode` | `<FaSpinner />` | Custom element shown while loading. |
 | `fetchOnMount` | `boolean` | `true` | Whether to fetch data on initial mount. |
 | `reloadTrigger` | `number \| string \| boolean` | — | Changing this value forces a re-fetch. Use after mutations. |
@@ -56,6 +56,15 @@ import { ITDataTable } from '@axzydev/axzy_ui_system';
   variant="bordered"
 />
 
+// Search + date filters (values arrive in params.filters)
+<ITDataTable
+  columns={[
+    { key: 'role', label: 'Role', type: 'string', filter: 'search', catalogOptions: { data: roles, onSearch: (q) => api.searchRoles(q) } },
+    { key: 'hiredAt', label: 'Hired', type: 'date', filter: 'date-range', dateFilterOptions: { maxDate: new Date() } },
+  ]}
+  fetchData={async (params) => api.fetchItems(params)}
+/>
+
 // No horizontal scroll: fixed layout + per-column widths + truncation
 <ITDataTable
   columns={[
@@ -71,7 +80,7 @@ import { ITDataTable } from '@axzydev/axzy_ui_system';
 
 ## Notes
 
-- Column filters support `"catalog"` (dropdown), `true` (text input), and `boolean` (tri-state toggle).
+- Column filters support `true` (text/number input, or boolean tri-state toggle for `type: "boolean"`), `"catalog"` (`ITSelect`), `"search"` (`ITSearchSelect` typeahead; add `catalogOptions.onSearch` for server-side search), and `"date"` / `"date-range"` (`ITDatePicker`, bounded by `dateFilterOptions`). In `fetchData(params)`, `params.filters[key]` is a `Date` for `"date"`, a `[start, end]` tuple for `"date-range"`, and the scalar/id otherwise.
 - The `externalFilters` prop allows integrating external filter controls like date pickers without building filter UI into the table itself.
 - Debounce prevents excessive API calls while the user types in filter inputs.
 - A loading skeleton overlay covers the table body while fetching, keeping the header visible.

package/src/components/organisms/data-table/ITDataTable.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { startOfDay, endOfDay } from 'date-fns';
 import ITDataTable from './dataTable';
 import { ITDataTableFetchParams, ITDataTableResponse } from './dataTable.props';
 import ITCard from '@/components/molecules/card/card';
@@ -243,6 +244,78 @@ export const WithRowClick: Story = {
   },
 };
 
+export const WithSearchAndDateFilters: Story = {
+  render: () => {
+    const searchDateFetch = useCallback(
+      async (params: ITDataTableFetchParams): Promise<ITDataTableResponse<any>> => {
+        await new Promise((r) => setTimeout(r, 400));
+        let filtered = [...MOCK_DATA];
+
+        Object.entries(params.filters).forEach(([key, value]) => {
+          if (value === undefined || value === '') return;
+
+          if (key === 'role') {
+            filtered = filtered.filter((item) => item.role === value);
+          } else if (key === 'createdAt') {
+            if (Array.isArray(value)) {
+              const [rangeStart, rangeEnd] = value as [Date | null, Date | null];
+              if (!rangeStart && !rangeEnd) return;
+              filtered = filtered.filter((item) => {
+                const time = new Date(item.createdAt).getTime();
+                if (rangeStart && time < startOfDay(rangeStart).getTime()) return false;
+                if (rangeEnd && time > endOfDay(rangeEnd).getTime()) return false;
+                return true;
+              });
+            } else if (value instanceof Date) {
+              filtered = filtered.filter(
+                (item) => new Date(item.createdAt).toDateString() === value.toDateString()
+              );
+            }
+          }
+        });
+
+        const start = (params.page - 1) * params.limit;
+        return { data: filtered.slice(start, start + params.limit), total: filtered.length };
+      },
+      []
+    );
+
+    const filterColumns = useMemo(
+      () => [
+        { key: 'username', label: 'Usuario', type: 'string' as const, filter: true, sortable: true },
+        {
+          key: 'role',
+          label: 'Rol (ITSearchSelect)',
+          type: 'string' as const,
+          filter: 'search' as const,
+          sortable: true,
+          catalogOptions: { data: ROLES.map((role) => ({ id: role, name: role })) },
+          render: (row: any) => <ITBadget label={row.role} />,
+        },
+        {
+          key: 'createdAt',
+          label: 'Alta (ITDatePicker range)',
+          type: 'date' as const,
+          filter: 'date-range' as const,
+          sortable: true,
+          dateFilterOptions: { maxDate: new Date() },
+          render: (row: any) => new Date(row.createdAt).toLocaleDateString('es-MX'),
+        },
+      ],
+      []
+    );
+
+    return (
+      <ITDataTable
+        title="Filtros: ITSearchSelect + ITDatePicker (rango)"
+        columns={filterColumns as any}
+        fetchData={searchDateFetch}
+        defaultItemsPerPage={8}
+      />
+    );
+  },
+};
+
 export const SkeletonLoading: Story = {
   args: {
     title: 'Cargando Datos...',

package/src/components/organisms/data-table/dataTable.props.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { Column } from "@/components/molecules/table/table.props";
-import { TableDensity } from "@/types/table.types";
+import { ColumnFilters, TableDensity } from "@/types/table.types";
 
 /** Parameters passed to `fetchData` every time pagination, filters, or sorting change. */
 export interface ITDataTableFetchParams {
@@ -8,8 +8,12 @@ export interface ITDataTableFetchParams {
   page: number;
   /** Number of rows requested per page. */
   limit: number;
-  /** Active per-column filter values (from `Column.filter`), keyed by column `key`. */
-  filters: Record<string, string | number | boolean | Date>;
+  /**
+   * Active per-column filter values (from `Column.filter`), keyed by column
+   * `key`. Scalars for text/number/boolean/date filters, a `Date` for
+   * `filter: "date"`, and a `[start, end]` tuple for `filter: "date-range"`.
+   */
+  filters: ColumnFilters;
   /** Active sort, present only when the user has clicked a sortable column header. */
   sort?: {
     /** Column `key` currently sorted by. */
@@ -50,7 +54,7 @@ export interface ITDataTableProps<T extends Record<string, unknown>> {
    * Filters managed outside of the ITDataTable (e.g. a date range picker).
    * These will be merged with the internal column filters before calling fetchData.
    */
-  externalFilters?: Record<string, string | number | boolean | Date>;
+  externalFilters?: ColumnFilters;
 
   /**
    * Custom element to display instead of the default spinner while `isLoading` is true.

package/src/components/organisms/data-table/dataTable.tsx

@@ -9,6 +9,8 @@ import { MdOutlineSwapVert } from "react-icons/md";
 import ITInput from "@/components/atoms/input/input";
 import ITPagination from "@/components/molecules/pagination/pagination";
 import ITSelect from "@/components/molecules/select/select";
+import ITSearchSelect from "@/components/molecules/search-select/search-select";
+import ITDatePicker from "@/components/molecules/date-picker/datePicker";
 import { Column } from "@/components/molecules/table/table.props";
 import { formatCurrencyMX, isInteractiveTarget } from "@/utils/table.utils";
 import { ITDataTableProps } from "./dataTable.props";
@@ -253,6 +255,76 @@ export default function ITDataTable<T extends Record<string, unknown>>({
       );
     }
 
+    if (col.filter === "search" && col.catalogOptions) {
+      if (col.catalogOptions.loading) {
+        return <FaSpinner className="animate-spin" aria-label="Cargando opciones" title="Cargando opciones" />;
+      }
+      if (col.catalogOptions.error) {
+        return <ITText as="span" className="text-danger-500 text-xs">Error cargando</ITText>;
+      }
+      const searchValue = filters[col.key];
+      return (
+        <ITSearchSelect
+          name={`filter-${col.key}`}
+          options={col.catalogOptions.data.map((item) => ({
+            value: item.id,
+            label: item.name,
+          }))}
+          value={
+            typeof searchValue === "string" || typeof searchValue === "number"
+              ? searchValue
+              : ""
+          }
+          onChange={(value) => handleFilterChange(col.key, value === "" ? undefined : value)}
+          onSearch={col.catalogOptions.onSearch}
+          isLoading={col.catalogOptions.loading}
+          size="sm"
+          placeholder="Buscar..."
+          clearable
+          className="w-full"
+          onBlur={() => {}}
+          disabled={isLoading}
+        />
+      );
+    }
+
+    if (col.filter === "date") {
+      const dateValue = filters[col.key];
+      return (
+        <ITDatePicker
+          name={`filter-${col.key}`}
+          value={dateValue instanceof Date ? dateValue : undefined}
+          onChange={(e) => handleFilterChange(col.key, e.target.value as Date)}
+          minDate={col.dateFilterOptions?.minDate}
+          maxDate={col.dateFilterOptions?.maxDate}
+          size="sm"
+          placeholder="dd/mm/aaaa"
+          className="w-full"
+          disabled={isLoading}
+        />
+      );
+    }
+
+    if (col.filter === "date-range") {
+      const rangeValue = filters[col.key];
+      return (
+        <ITDatePicker
+          name={`filter-${col.key}`}
+          range
+          value={Array.isArray(rangeValue) ? rangeValue : undefined}
+          onChange={(e) =>
+            handleFilterChange(col.key, e.target.value as [Date | null, Date | null])
+          }
+          minDate={col.dateFilterOptions?.minDate}
+          maxDate={col.dateFilterOptions?.maxDate}
+          size="sm"
+          placeholder="dd/mm/aaaa - dd/mm/aaaa"
+          className="w-full"
+          disabled={isLoading}
+        />
+      );
+    }
+
     return (
       <ITInput
         name={`filter-${col.key}`}

package/src/hooks/useTableState.ts

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
+import type { ColumnFilters, ColumnFilterValue } from "@/types/table.types";
 
 interface SortConfig {
   key: string;
@@ -13,30 +14,35 @@ export interface UseTableStateOptions {
 export interface UseTableStateResult {
   currentPage: number;
   itemsPerPage: number;
-  filters: Record<string, string | boolean | number>;
+  filters: ColumnFilters;
   sortConfig: SortConfig | null;
   totalPages: number;
   setTotalPages: (pages: number) => void;
   goToPage: (page: number) => void;
   handleItemsPerPageChange: (value: number) => void;
-  handleFilterChange: (
-    key: string,
-    value: string | boolean | number | undefined
-  ) => void;
+  handleFilterChange: (key: string, value: ColumnFilterValue | undefined) => void;
   handleSort: (key: string, sortable?: boolean) => void;
   resetPage: () => void;
   clearFilters: () => void;
 }
 
+/**
+ * A filter value is considered empty when it should be removed from the filter
+ * map: `undefined`/`null`/`""`, or a date range whose both ends are null.
+ */
+const isEmptyFilterValue = (value: ColumnFilterValue | undefined): boolean => {
+  if (value === undefined || value === null || value === "") return true;
+  if (Array.isArray(value)) return value[0] == null && value[1] == null;
+  return false;
+};
+
 export function useTableState({
   defaultItemsPerPage = 10,
   initialSort = null,
 }: UseTableStateOptions = {}): UseTableStateResult {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(defaultItemsPerPage);
-  const [filters, setFilters] = useState<
-    Record<string, string | boolean | number>
-  >({});
+  const [filters, setFilters] = useState<ColumnFilters>({});
   const [sortConfig, setSortConfig] = useState<SortConfig | null>(initialSort);
   const [totalPages, setTotalPages] = useState(1);
 
@@ -58,14 +64,14 @@ export function useTableState({
   }, []);
 
   const handleFilterChange = useCallback(
-    (key: string, value: string | boolean | number | undefined) => {
+    (key: string, value: ColumnFilterValue | undefined) => {
       setFilters((prev) => {
-        if (value === undefined || value === null || value === "") {
+        if (isEmptyFilterValue(value)) {
           const next = { ...prev };
           delete next[key];
           return next;
         }
-        return { ...prev, [key]: value };
+        return { ...prev, [key]: value as ColumnFilterValue };
       });
       setCurrentPage(1);
     },

package/src/index.ts

@@ -107,7 +107,7 @@ import type { ITSlideToggleProps } from "./components/atoms/slide/slide.props";
 import type { ITSliderProps } from "./components/atoms/slider/slider.props";
 import type { ITStackProps } from "./components/atoms/stack/stack.props";
 import type { ITStatCardProps } from "./components/molecules/stat-card/stat-card.props";
-import type { ITTableProps, Column } from "./components/molecules/table/table.props";
+import type { ITTableProps, Column, ColumnFilterMode } from "./components/molecules/table/table.props";
 import type { ITTextProps } from "./components/atoms/text/text.props";
 import type { ITTextareaProps } from "./components/atoms/textarea/textarea.props";
 import type { ITTabsProps, ITTabItem } from "./components/molecules/tabs/tabs.props";
@@ -115,7 +115,7 @@ import type { ITTripleFilterProps, ITTripleFilterOption } from "./components/org
 import type { ITToastProps } from "./components/organisms/toast/toast.props";
 import type { ITWysiwygProps } from "./components/molecules/wysiwyg/wysiwyg.props";
 import type { FieldConfig, FieldConfigV2 } from "./types/field.types";
-import type { TableDensity } from "./types/table.types";
+import type { ColumnFilters, ColumnFilterValue, TableDensity } from "./types/table.types";
 
 // UTILS
 import ITDropfile, { UploadStatus, FileTypeEnum } from "./components/organisms/dropfile/dropfile";
@@ -157,7 +157,7 @@ export {
 };
 
   export type {
-    Column, FieldConfig,
+    Column, ColumnFilters, ColumnFilterMode, ColumnFilterValue, FieldConfig,
     FieldConfigV2,
     ITAccordionItem, ITAccordionProps,
     ITAlertProps, ITAvatarProps, ITBadgetProps,