@stereopt/data-table 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -121,6 +121,73 @@ function TableCell({ className, ...props }) {
   );
 }
 
+// src/components/ui/input.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "input",
+    {
+      className: cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      "data-slot": "input",
+      type,
+      ...props
+    }
+  );
+}
+
+// src/dataTable/filters/DataTableFilter.tsx
+var DataTableFilter = ({
+  table,
+  filter
+}) => {
+  switch (filter.type) {
+    case "select": {
+      throw Error("Select Filter not implemented yet");
+    }
+    case "date": {
+      throw Error("Date Filter not implemented yet");
+    }
+    default:
+      throw new Error("Type not Implemented", filter.type);
+  }
+};
+
+// src/dataTable/DataTableControls.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DataTableControls = ({
+  table,
+  search,
+  filters
+}) => {
+  const value = table.getState().globalFilter ?? "";
+  const setValue = table.setGlobalFilter;
+  if (!filters && !search) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-4 pb-4", children: [
+    search && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Input,
+      {
+        className: "max-w-sm",
+        onChange: (event) => setValue(() => event.target.value),
+        placeholder: search?.placeholder,
+        value
+      }
+    ),
+    filters?.map((filter) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        DataTableFilter,
+        {
+          filter,
+          table
+        },
+        filter.column.toString()
+      );
+    })
+  ] });
+};
+
 // src/components/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
 
@@ -170,7 +237,7 @@ function composeRefs(...refs) {
 }
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -188,9 +255,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React2.isValidElement(newElement) ? React2.cloneElement(newElement, void 0, newChildren) : null });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React2.isValidElement(newElement) ? React2.cloneElement(newElement, void 0, newChildren) : null });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -217,7 +284,7 @@ var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
 // @__NO_SIDE_EFFECTS__
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
@@ -266,7 +333,7 @@ function getElementRef(element) {
 }
 
 // src/components/ui/button.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -304,7 +371,7 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? dist_exports.Root : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Comp,
     {
       className: cn(buttonVariants({ variant, size, className })),
@@ -437,25 +504,25 @@ var __iconNode4 = [
 var ChevronsRight = createLucideIcon("chevrons-right", __iconNode4);
 
 // src/dataTable/pagination/DataTablePagination.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function DataTablePagination({
   table
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between px-2 pt-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-muted-foreground flex-1 text-sm", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between px-2 pt-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-muted-foreground flex-1 text-sm", children: [
       table.getFilteredRowModel().rows.length,
       " rows"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
         "Page ",
         table.getState().pagination.pageIndex + 1,
         " of",
         " ",
         table.getPageCount() || 1
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           Button,
           {
             className: "hidden size-8 lg:flex",
@@ -464,12 +531,12 @@ function DataTablePagination({
             size: "icon",
             variant: "outline",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Go to first page" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronsLeft, {})
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Go to first page" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronsLeft, {})
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           Button,
           {
             className: "size-8",
@@ -478,12 +545,12 @@ function DataTablePagination({
             size: "icon",
             variant: "outline",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Go to previous page" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronLeft, {})
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Go to previous page" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronLeft, {})
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           Button,
           {
             className: "size-8",
@@ -492,12 +559,12 @@ function DataTablePagination({
             size: "icon",
             variant: "outline",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Go to next page" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronRight, {})
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Go to next page" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronRight, {})
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           Button,
           {
             className: "hidden size-8 lg:flex",
@@ -506,8 +573,8 @@ function DataTablePagination({
             size: "icon",
             variant: "outline",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Go to last page" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronsRight, {})
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Go to last page" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronsRight, {})
             ]
           }
         )
@@ -516,9 +583,19 @@ function DataTablePagination({
   ] });
 }
 
+// src/lib/search.ts
+var import_match_sorter_utils = require("@tanstack/match-sorter-utils");
+var fuzzyFilterFn = (searchableColumns) => (row, columnId, filterValue, addMeta) => {
+  if (!searchableColumns) return false;
+  if (!searchableColumns.includes(columnId)) return false;
+  const itemRank = (0, import_match_sorter_utils.rankItem)(row.getValue(columnId), filterValue);
+  addMeta({ itemRank });
+  return itemRank.passed;
+};
+
 // src/dataTable/DataTable.tsx
 var import_react_table = require("@tanstack/react-table");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function DataTable({
   columns,
   data,
@@ -532,15 +609,24 @@ function DataTable({
     getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
     getFacetedRowModel: (0, import_react_table.getFacetedRowModel)(),
     getFacetedUniqueValues: (0, import_react_table.getFacetedUniqueValues)(),
+    globalFilterFn: fuzzyFilterFn(config?.search?.filterFields),
     autoResetPageIndex: false,
     initialState: {
       columnVisibility: config?.columnVisibility
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Table, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      DataTableControls,
+      {
+        filters: config?.filters,
+        search: config?.search,
+        table
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           TableHead,
           {
             colSpan: header.colSpan,
@@ -553,17 +639,17 @@ function DataTable({
           header.id
         );
       }) }, headerGroup.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         TableRow,
         {
           "data-state": row.getIsSelected() && "selected",
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableCell, { className: "truncate max-w-0", children: (0, import_react_table.flexRender)(
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableCell, { className: "truncate max-w-0", children: (0, import_react_table.flexRender)(
             cell.column.columnDef.cell,
             cell.getContext()
           ) }, cell.id))
         },
         row.id
-      )) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         TableCell,
         {
           className: "h-24 text-center",
@@ -572,7 +658,7 @@ function DataTable({
         }
       ) }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DataTablePagination, { table })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DataTablePagination, { table })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.d.cts

@@ -1,6 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef } from '@tanstack/react-table';
 
+type Filter<TData> = {
+    column: keyof TData;
+    type: "select" | "date";
+};
+
+type Search<TData> = {
+    filterFields: (keyof TData)[];
+    placeholder: string;
+};
+type Filters<TData> = Filter<TData>[];
 type ColumnVisibility<TData> = {
     [K in keyof TData]?: boolean;
 } & Record<string, boolean>;
@@ -8,6 +18,8 @@ interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     config?: {
+        search?: Search<TData>;
+        filters?: Filters<TData>;
         columnVisibility?: ColumnVisibility<TData>;
     };
 }

package/dist/index.d.ts

@@ -1,6 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef } from '@tanstack/react-table';
 
+type Filter<TData> = {
+    column: keyof TData;
+    type: "select" | "date";
+};
+
+type Search<TData> = {
+    filterFields: (keyof TData)[];
+    placeholder: string;
+};
+type Filters<TData> = Filter<TData>[];
 type ColumnVisibility<TData> = {
     [K in keyof TData]?: boolean;
 } & Record<string, boolean>;
@@ -8,6 +18,8 @@ interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
     config?: {
+        search?: Search<TData>;
+        filters?: Filters<TData>;
         columnVisibility?: ColumnVisibility<TData>;
     };
 }

package/dist/index.js

@@ -90,6 +90,73 @@ function TableCell({ className, ...props }) {
   );
 }
 
+// src/components/ui/input.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      className: cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      "data-slot": "input",
+      type,
+      ...props
+    }
+  );
+}
+
+// src/dataTable/filters/DataTableFilter.tsx
+var DataTableFilter = ({
+  table,
+  filter
+}) => {
+  switch (filter.type) {
+    case "select": {
+      throw Error("Select Filter not implemented yet");
+    }
+    case "date": {
+      throw Error("Date Filter not implemented yet");
+    }
+    default:
+      throw new Error("Type not Implemented", filter.type);
+  }
+};
+
+// src/dataTable/DataTableControls.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DataTableControls = ({
+  table,
+  search,
+  filters
+}) => {
+  const value = table.getState().globalFilter ?? "";
+  const setValue = table.setGlobalFilter;
+  if (!filters && !search) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 pb-4", children: [
+    search && /* @__PURE__ */ jsx3(
+      Input,
+      {
+        className: "max-w-sm",
+        onChange: (event) => setValue(() => event.target.value),
+        placeholder: search?.placeholder,
+        value
+      }
+    ),
+    filters?.map((filter) => {
+      return /* @__PURE__ */ jsx3(
+        DataTableFilter,
+        {
+          filter,
+          table
+        },
+        filter.column.toString()
+      );
+    })
+  ] });
+};
+
 // src/components/ui/button.tsx
 import { cva } from "class-variance-authority";
 
@@ -139,7 +206,7 @@ function composeRefs(...refs) {
 }
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -157,9 +224,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx2(SlotClone, { ...slotProps, ref: forwardedRef, children: React2.isValidElement(newElement) ? React2.cloneElement(newElement, void 0, newChildren) : null });
+      return /* @__PURE__ */ jsx4(SlotClone, { ...slotProps, ref: forwardedRef, children: React2.isValidElement(newElement) ? React2.cloneElement(newElement, void 0, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx2(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx4(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -186,7 +253,7 @@ var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
 // @__NO_SIDE_EFFECTS__
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ jsx2(Fragment2, { children });
+    return /* @__PURE__ */ jsx4(Fragment2, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
@@ -235,7 +302,7 @@ function getElementRef(element) {
 }
 
 // src/components/ui/button.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -273,7 +340,7 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? dist_exports.Root : "button";
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     Comp,
     {
       className: cn(buttonVariants({ variant, size, className })),
@@ -406,25 +473,25 @@ var __iconNode4 = [
 var ChevronsRight = createLucideIcon("chevrons-right", __iconNode4);
 
 // src/dataTable/pagination/DataTablePagination.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function DataTablePagination({
   table
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 pt-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex-1 text-sm", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-2 pt-4", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "text-muted-foreground flex-1 text-sm", children: [
       table.getFilteredRowModel().rows.length,
       " rows"
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
         "Page ",
         table.getState().pagination.pageIndex + 1,
         " of",
         " ",
         table.getPageCount() || 1
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxs2(
           Button,
           {
             className: "hidden size-8 lg:flex",
@@ -433,12 +500,12 @@ function DataTablePagination({
             size: "icon",
             variant: "outline",
             children: [
-              /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Go to first page" }),
-              /* @__PURE__ */ jsx4(ChevronsLeft, {})
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to first page" }),
+              /* @__PURE__ */ jsx6(ChevronsLeft, {})
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           Button,
           {
             className: "size-8",
@@ -447,12 +514,12 @@ function DataTablePagination({
             size: "icon",
             variant: "outline",
             children: [
-              /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Go to previous page" }),
-              /* @__PURE__ */ jsx4(ChevronLeft, {})
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to previous page" }),
+              /* @__PURE__ */ jsx6(ChevronLeft, {})
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           Button,
           {
             className: "size-8",
@@ -461,12 +528,12 @@ function DataTablePagination({
             size: "icon",
             variant: "outline",
             children: [
-              /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Go to next page" }),
-              /* @__PURE__ */ jsx4(ChevronRight, {})
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to next page" }),
+              /* @__PURE__ */ jsx6(ChevronRight, {})
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           Button,
           {
             className: "hidden size-8 lg:flex",
@@ -475,8 +542,8 @@ function DataTablePagination({
             size: "icon",
             variant: "outline",
             children: [
-              /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Go to last page" }),
-              /* @__PURE__ */ jsx4(ChevronsRight, {})
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Go to last page" }),
+              /* @__PURE__ */ jsx6(ChevronsRight, {})
             ]
           }
         )
@@ -485,6 +552,16 @@ function DataTablePagination({
   ] });
 }
 
+// src/lib/search.ts
+import { rankItem } from "@tanstack/match-sorter-utils";
+var fuzzyFilterFn = (searchableColumns) => (row, columnId, filterValue, addMeta) => {
+  if (!searchableColumns) return false;
+  if (!searchableColumns.includes(columnId)) return false;
+  const itemRank = rankItem(row.getValue(columnId), filterValue);
+  addMeta({ itemRank });
+  return itemRank.passed;
+};
+
 // src/dataTable/DataTable.tsx
 import {
   flexRender,
@@ -495,7 +572,7 @@ import {
   getPaginationRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -509,15 +586,24 @@ function DataTable({
     getFilteredRowModel: getFilteredRowModel(),
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
+    globalFilterFn: fuzzyFilterFn(config?.search?.filterFields),
     autoResetPageIndex: false,
     initialState: {
       columnVisibility: config?.columnVisibility
     }
   });
-  return /* @__PURE__ */ jsxs2("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx5("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ jsxs2(Table, { children: [
-      /* @__PURE__ */ jsx5(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx5(TableRow, { children: headerGroup.headers.map((header) => {
-        return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs3("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx7(
+      DataTableControls,
+      {
+        filters: config?.filters,
+        search: config?.search,
+        table
+      }
+    ),
+    /* @__PURE__ */ jsx7("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ jsxs3(Table, { children: [
+      /* @__PURE__ */ jsx7(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx7(TableRow, { children: headerGroup.headers.map((header) => {
+        return /* @__PURE__ */ jsx7(
           TableHead,
           {
             colSpan: header.colSpan,
@@ -530,17 +616,17 @@ function DataTable({
           header.id
         );
       }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx5(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx7(
         TableRow,
         {
           "data-state": row.getIsSelected() && "selected",
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx5(TableCell, { className: "truncate max-w-0", children: flexRender(
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx7(TableCell, { className: "truncate max-w-0", children: flexRender(
             cell.column.columnDef.cell,
             cell.getContext()
           ) }, cell.id))
         },
         row.id
-      )) : /* @__PURE__ */ jsx5(TableRow, { children: /* @__PURE__ */ jsx5(
+      )) : /* @__PURE__ */ jsx7(TableRow, { children: /* @__PURE__ */ jsx7(
         TableCell,
         {
           className: "h-24 text-center",
@@ -549,7 +635,7 @@ function DataTable({
         }
       ) }) })
     ] }) }),
-    /* @__PURE__ */ jsx5(DataTablePagination, { table })
+    /* @__PURE__ */ jsx7(DataTablePagination, { table })
   ] });
 }
 export {

package/dist/styles.css

@@ -88,35 +88,11 @@
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 1px;
 }
-.border-border {
-  border-color: var(--color-border);
-}
 .border-transparent {
   border-color: transparent;
 }
-.bg-background {
-  background-color: var(--color-background);
-}
-.bg-destructive\/10 {
-  background-color: color-mix(in srgb, 0 84.2% 60.2% 10%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
-  }
-}
-.bg-muted {
-  background-color: var(--color-muted);
-}
-.bg-muted\/50 {
-  background-color: color-mix(in srgb, 0 0% 96.1% 50%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
-  }
-}
-.bg-primary {
-  background-color: var(--color-primary);
-}
-.bg-secondary {
-  background-color: var(--color-secondary);
+.bg-transparent {
+  background-color: transparent;
 }
 .bg-clip-padding {
   background-clip: padding-box;
@@ -136,24 +112,6 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
-.text-destructive {
-  color: var(--color-destructive);
-}
-.text-foreground {
-  color: var(--color-foreground);
-}
-.text-muted-foreground {
-  color: var(--color-muted-foreground);
-}
-.text-primary {
-  color: var(--color-primary);
-}
-.text-primary-foreground {
-  color: var(--color-primary-foreground);
-}
-.text-secondary-foreground {
-  color: var(--color-secondary-foreground);
-}
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -161,6 +119,9 @@
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
 }
+.filter {
+  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: var(--tw-ease, ease);
@@ -179,48 +140,20 @@
   -webkit-user-select: none;
   user-select: none;
 }
-.hover\:bg-destructive\/20 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: color-mix(in srgb, 0 84.2% 60.2% 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
-      }
-    }
+.file\:inline-flex {
+  &::file-selector-button {
+    display: inline-flex;
   }
 }
-.hover\:bg-muted {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--color-muted);
-    }
-  }
-}
-.hover\:bg-muted\/50 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: color-mix(in srgb, 0 0% 96.1% 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
-      }
-    }
-  }
-}
-.hover\:bg-secondary\/80 {
-  &:hover {
-    @media (hover: hover) {
-      background-color: color-mix(in srgb, 0 0% 96.1% 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
-      }
-    }
+.file\:border-0 {
+  &::file-selector-button {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
   }
 }
-.hover\:text-foreground {
-  &:hover {
-    @media (hover: hover) {
-      color: var(--color-foreground);
-    }
+.file\:bg-transparent {
+  &::file-selector-button {
+    background-color: transparent;
   }
 }
 .hover\:underline {
@@ -230,41 +163,12 @@
     }
   }
 }
-.focus-visible\:border-destructive\/40 {
-  &:focus-visible {
-    border-color: color-mix(in srgb, 0 84.2% 60.2% 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
-    }
-  }
-}
-.focus-visible\:border-ring {
-  &:focus-visible {
-    border-color: var(--color-ring);
-  }
-}
 .focus-visible\:ring-3 {
   &:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
-.focus-visible\:ring-destructive\/20 {
-  &:focus-visible {
-    --tw-ring-color: color-mix(in srgb, 0 84.2% 60.2% 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
-    }
-  }
-}
-.focus-visible\:ring-ring\/50 {
-  &:focus-visible {
-    --tw-ring-color: color-mix(in srgb, 0 0% 3.6% 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
-    }
-  }
-}
 .active\:not-aria-\[haspopup\]\:translate-y-px {
   &:active {
     &:not(*[aria-haspopup]) {
@@ -278,42 +182,14 @@
     pointer-events: none;
   }
 }
-.disabled\:opacity-50 {
+.disabled\:cursor-not-allowed {
   &:disabled {
-    opacity: 50%;
-  }
-}
-.has-aria-expanded\:bg-muted\/50 {
-  &:has(*[aria-expanded="true"]) {
-    background-color: color-mix(in srgb, 0 0% 96.1% 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
-    }
-  }
-}
-.aria-expanded\:bg-muted {
-  &[aria-expanded="true"] {
-    background-color: var(--color-muted);
-  }
-}
-.aria-expanded\:bg-secondary {
-  &[aria-expanded="true"] {
-    background-color: var(--color-secondary);
-  }
-}
-.aria-expanded\:text-foreground {
-  &[aria-expanded="true"] {
-    color: var(--color-foreground);
-  }
-}
-.aria-expanded\:text-secondary-foreground {
-  &[aria-expanded="true"] {
-    color: var(--color-secondary-foreground);
+    cursor: not-allowed;
   }
 }
-.aria-invalid\:border-destructive {
-  &[aria-invalid="true"] {
-    border-color: var(--color-destructive);
+.disabled\:opacity-50 {
+  &:disabled {
+    opacity: 50%;
   }
 }
 .aria-invalid\:ring-3 {
@@ -322,106 +198,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 }
-.aria-invalid\:ring-destructive\/20 {
-  &[aria-invalid="true"] {
-    --tw-ring-color: color-mix(in srgb, 0 84.2% 60.2% 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
-    }
-  }
-}
-.data-\[state\=selected\]\:bg-muted {
-  &[data-state="selected"] {
-    background-color: var(--color-muted);
-  }
-}
-.dark\:border-input {
-  @media (prefers-color-scheme: dark) {
-    border-color: var(--color-input);
-  }
-}
-.dark\:bg-destructive\/20 {
-  @media (prefers-color-scheme: dark) {
-    background-color: color-mix(in srgb, 0 84.2% 60.2% 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
-    }
-  }
-}
-.dark\:bg-input\/30 {
-  @media (prefers-color-scheme: dark) {
-    background-color: color-mix(in srgb, 0 0% 89.8% 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
-    }
-  }
-}
-.dark\:hover\:bg-destructive\/30 {
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, 0 84.2% 60.2% 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
-        }
-      }
-    }
-  }
-}
-.dark\:hover\:bg-input\/50 {
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, 0 0% 89.8% 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-input) 50%, transparent);
-        }
-      }
-    }
-  }
-}
-.dark\:hover\:bg-muted\/50 {
-  @media (prefers-color-scheme: dark) {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, 0 0% 96.1% 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
-        }
-      }
-    }
-  }
-}
-.dark\:focus-visible\:ring-destructive\/40 {
-  @media (prefers-color-scheme: dark) {
-    &:focus-visible {
-      --tw-ring-color: color-mix(in srgb, 0 84.2% 60.2% 40%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
-      }
-    }
-  }
-}
-.dark\:aria-invalid\:border-destructive\/50 {
-  @media (prefers-color-scheme: dark) {
-    &[aria-invalid="true"] {
-      border-color: color-mix(in srgb, 0 84.2% 60.2% 50%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
-      }
-    }
-  }
-}
-.dark\:aria-invalid\:ring-destructive\/40 {
-  @media (prefers-color-scheme: dark) {
-    &[aria-invalid="true"] {
-      --tw-ring-color: color-mix(in srgb, 0 84.2% 60.2% 40%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
-      }
-    }
-  }
-}
 .\[\&_svg\]\:pointer-events-none {
   & svg {
     pointer-events: none;
@@ -444,18 +220,6 @@
     border-width: 0px;
   }
 }
-.\[a\]\:hover\:bg-primary\/80 {
-  &:is(a) {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, 0 0% 9% 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
-        }
-      }
-    }
-  }
-}
 .\[\&\>tr\]\:last\:border-b-0 {
   &>tr {
     &:last-child {
@@ -464,43 +228,6 @@
     }
   }
 }
-:root, :host {
-  --color-background: 0 0% 100%;
-  --color-foreground: 0 0% 3.6%;
-  --color-muted: 0 0% 96.1%;
-  --color-muted-foreground: 0 0% 45.1%;
-  --color-destructive: 0 84.2% 60.2%;
-  --color-border: 0 0% 89.8%;
-  --color-input: 0 0% 89.8%;
-  --color-primary: 0 0% 9%;
-  --color-primary-foreground: 0 0% 98%;
-  --color-secondary: 0 0% 96.1%;
-  --color-secondary-foreground: 0 0% 9%;
-  --color-ring: 0 0% 3.6%;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: 0 0% 3.6%;
-    --color-foreground: 0 0% 98%;
-    --color-card: 0 0% 3.6%;
-    --color-card-foreground: 0 0% 98%;
-    --color-popover: 0 0% 3.6%;
-    --color-popover-foreground: 0 0% 98%;
-    --color-muted: 0 0% 14.9%;
-    --color-muted-foreground: 0 0% 63.9%;
-    --color-accent: 0 0% 98%;
-    --color-accent-foreground: 0 0% 9%;
-    --color-destructive: 0 62.8% 30.6%;
-    --color-destructive-foreground: 0 0% 98%;
-    --color-border: 0 0% 14.9%;
-    --color-input: 0 0% 14.9%;
-    --color-primary: 0 0% 98%;
-    --color-primary-foreground: 0 0% 9%;
-    --color-secondary: 0 0% 14.9%;
-    --color-secondary-foreground: 0 0% 98%;
-    --color-ring: 0 0% 83.1%;
-  }
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -511,6 +238,59 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -596,6 +376,19 @@
     *, ::before, ::after, ::backdrop {
       --tw-border-style: solid;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stereopt/data-table",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Simple reusable React data table component",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -65,6 +65,7 @@
   },
   "dependencies": {
     "@tailwindcss/postcss": "^4.2.2",
+    "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",