@stereopt/data-table 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -111,9 +121,457 @@ 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/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 null;
+    })
+  ] });
+};
+
+// src/components/ui/button.tsx
+var import_class_variance_authority = require("class-variance-authority");
+
+// node_modules/@radix-ui/react-slot/dist/index.mjs
+var dist_exports = {};
+__export(dist_exports, {
+  Root: () => Slot,
+  Slot: () => Slot,
+  Slottable: () => Slottable,
+  createSlot: () => createSlot,
+  createSlottable: () => createSlottable
+});
+var React2 = __toESM(require("react"), 1);
+
+// node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+var React = __toESM(require("react"), 1);
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+
+// node_modules/@radix-ui/react-slot/dist/index.mjs
+var import_jsx_runtime4 = require("react/jsx-runtime");
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React2.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React2.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React2.Children.count(newElement) > 1) return React2.Children.only(null);
+          return React2.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      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_runtime4.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+var Slot = /* @__PURE__ */ createSlot("Slot");
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React2.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React2.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React2.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React2.cloneElement(children, props2);
+    }
+    return React2.Children.count(children) > 1 ? React2.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
+// @__NO_SIDE_EFFECTS__
+function createSlottable(ownerName) {
+  const Slottable2 = ({ children }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+  };
+  Slottable2.displayName = `${ownerName}.Slottable`;
+  Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
+  return Slottable2;
+}
+var Slottable = /* @__PURE__ */ createSlottable("Slottable");
+function isSlottable(child) {
+  return React2.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+// src/components/ui/button.tsx
+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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? dist_exports.Root : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Comp,
+    {
+      className: cn(buttonVariants({ variant, size, className })),
+      "data-size": size,
+      "data-slot": "button",
+      "data-variant": variant,
+      ...props
+    }
+  );
+}
+
+// node_modules/lucide-react/dist/esm/createLucideIcon.js
+var import_react2 = require("react");
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
+var toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
+var toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+
+// node_modules/lucide-react/dist/esm/Icon.js
+var import_react = require("react");
+
+// node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
+var hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+
+// node_modules/lucide-react/dist/esm/Icon.js
+var Icon = (0, import_react.forwardRef)(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => (0, import_react.createElement)(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => (0, import_react.createElement)(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+// node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = (0, import_react2.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react2.createElement)(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+// node_modules/lucide-react/dist/esm/icons/chevron-left.js
+var __iconNode = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+var ChevronLeft = createLucideIcon("chevron-left", __iconNode);
+
+// node_modules/lucide-react/dist/esm/icons/chevron-right.js
+var __iconNode2 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+var ChevronRight = createLucideIcon("chevron-right", __iconNode2);
+
+// node_modules/lucide-react/dist/esm/icons/chevrons-left.js
+var __iconNode3 = [
+  ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
+  ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
+];
+var ChevronsLeft = createLucideIcon("chevrons-left", __iconNode3);
+
+// node_modules/lucide-react/dist/esm/icons/chevrons-right.js
+var __iconNode4 = [
+  ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
+  ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
+];
+var ChevronsRight = createLucideIcon("chevrons-right", __iconNode4);
+
+// src/dataTable/pagination/DataTablePagination.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function DataTablePagination({
+  table
+}) {
+  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_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_runtime6.jsxs)("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          Button,
+          {
+            className: "hidden size-8 lg:flex",
+            disabled: !table.getCanPreviousPage(),
+            onClick: () => table.setPageIndex(0),
+            size: "icon",
+            variant: "outline",
+            children: [
+              /* @__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_runtime6.jsxs)(
+          Button,
+          {
+            className: "size-8",
+            disabled: !table.getCanPreviousPage(),
+            onClick: () => table.previousPage(),
+            size: "icon",
+            variant: "outline",
+            children: [
+              /* @__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_runtime6.jsxs)(
+          Button,
+          {
+            className: "size-8",
+            disabled: !table.getCanNextPage(),
+            onClick: () => table.nextPage(),
+            size: "icon",
+            variant: "outline",
+            children: [
+              /* @__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_runtime6.jsxs)(
+          Button,
+          {
+            className: "hidden size-8 lg:flex",
+            disabled: !table.getCanNextPage(),
+            onClick: () => table.setPageIndex(table.getPageCount() - 1),
+            size: "icon",
+            variant: "outline",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Go to last page" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronsRight, {})
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// 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_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function DataTable({
   columns,
   data,
@@ -127,47 +585,81 @@ 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_runtime2.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        TableHead,
-        {
-          colSpan: header.colSpan,
-          style: { width: header.getSize() },
-          children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
-            header.column.columnDef.header,
-            header.getContext()
-          )
-        },
-        header.id
-      );
-    }) }, headerGroup.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      TableRow,
-      {
-        "data-state": row.getIsSelected() && "selected",
-        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      DataTableControls,
       {
-        className: "h-24 text-center",
-        colSpan: columns.length,
-        children: "No results."
+        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,
+            style: { width: header.getSize() },
+            children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+              header.column.columnDef.header,
+              header.getContext()
+            )
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__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_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_runtime7.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        TableCell,
+        {
+          className: "h-24 text-center",
+          colSpan: columns.length,
+          children: "No results."
+        }
+      ) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DataTablePagination, { table })
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DataTable
 });
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils/mergeClasses.js:
+lucide-react/dist/esm/shared/src/utils/toKebabCase.js:
+lucide-react/dist/esm/shared/src/utils/toCamelCase.js:
+lucide-react/dist/esm/shared/src/utils/toPascalCase.js:
+lucide-react/dist/esm/defaultAttributes.js:
+lucide-react/dist/esm/shared/src/utils/hasA11yProp.js:
+lucide-react/dist/esm/Icon.js:
+lucide-react/dist/esm/createLucideIcon.js:
+lucide-react/dist/esm/icons/chevron-left.js:
+lucide-react/dist/esm/icons/chevron-right.js:
+lucide-react/dist/esm/icons/chevrons-left.js:
+lucide-react/dist/esm/icons/chevrons-right.js:
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.574.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/

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>;
     };
 }