@stereopt/data-table 0.1.8 → 0.1.10

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
@@ -25,9 +35,6 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/dataTable/DataTable.tsx
-var import_react_table = require("@tanstack/react-table");
-
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -41,13 +48,13 @@ function Table({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
+      "data-slot": "table-container",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "table",
         {
-          "data-slot": "table",
           className: cn("w-full caption-bottom text-sm", className),
+          "data-slot": "table",
           ...props
         }
       )
@@ -58,8 +65,8 @@ function TableHeader({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "thead",
     {
-      "data-slot": "table-header",
       className: cn("[&_tr]:border-b", className),
+      "data-slot": "table-header",
       ...props
     }
   );
@@ -68,8 +75,8 @@ function TableBody({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "tbody",
     {
-      "data-slot": "table-body",
       className: cn("[&_tr:last-child]:border-0", className),
+      "data-slot": "table-body",
       ...props
     }
   );
@@ -78,11 +85,11 @@ function TableRow({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "tr",
     {
-      "data-slot": "table-row",
       className: cn(
         "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
         className
       ),
+      "data-slot": "table-row",
       ...props
     }
   );
@@ -91,11 +98,11 @@ function TableHead({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "th",
     {
-      "data-slot": "table-head",
       className: cn(
         "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
         className
       ),
+      "data-slot": "table-head",
       ...props
     }
   );
@@ -104,60 +111,493 @@ function TableCell({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "td",
     {
-      "data-slot": "table-cell",
       className: cn(
         "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
         className
       ),
+      "data-slot": "table-cell",
       ...props
     }
   );
 }
 
-// src/dataTable/DataTable.tsx
+// 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_runtime2 = require("react/jsx-runtime");
-function DataTable({ columns, data }) {
+// @__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_runtime2.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 });
+  });
+  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_runtime2.jsx)(import_jsx_runtime2.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_runtime3 = 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_runtime3.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_runtime4 = 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: [
+      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: [
+        "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)(
+          Button,
+          {
+            className: "hidden size-8 lg:flex",
+            disabled: !table.getCanPreviousPage(),
+            onClick: () => table.setPageIndex(0),
+            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_runtime4.jsxs)(
+          Button,
+          {
+            className: "size-8",
+            disabled: !table.getCanPreviousPage(),
+            onClick: () => table.previousPage(),
+            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_runtime4.jsxs)(
+          Button,
+          {
+            className: "size-8",
+            disabled: !table.getCanNextPage(),
+            onClick: () => table.nextPage(),
+            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_runtime4.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_runtime4.jsx)("span", { className: "sr-only", children: "Go to last page" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronsRight, {})
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/dataTable/DataTable.tsx
+var import_react_table = require("@tanstack/react-table");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function DataTable({
+  columns,
+  data,
+  config
+}) {
   const table = (0, import_react_table.useReactTable)({
     data,
     columns,
-    getCoreRowModel: (0, import_react_table.getCoreRowModel)()
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getPaginationRowModel: (0, import_react_table.getPaginationRowModel)(),
+    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
+    getFacetedRowModel: (0, import_react_table.getFacetedRowModel)(),
+    getFacetedUniqueValues: (0, import_react_table.getFacetedUniqueValues)(),
+    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,
+  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)(
+          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_runtime5.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        TableRow,
         {
-          colSpan: header.colSpan,
-          style: { width: header.getSize() },
-          children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
-            header.column.columnDef.header,
-            header.getContext()
-          )
+          "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)(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id))
         },
-        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,
-      {
-        className: "h-24 text-center",
-        colSpan: columns.length,
-        children: "No results."
-      }
-    ) }) })
-  ] }) }) });
+        row.id
+      )) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        TableCell,
+        {
+          className: "h-24 text-center",
+          colSpan: columns.length,
+          children: "No results."
+        }
+      ) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.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,10 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef } from '@tanstack/react-table';
 
+type ColumnVisibility<TData> = {
+    [K in keyof TData]?: boolean;
+} & Record<string, boolean>;
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    config?: {
+        columnVisibility?: ColumnVisibility<TData>;
+    };
 }
-declare function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, config, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 export { DataTable, type DataTableProps, DataTable as default };

package/dist/index.d.ts

@@ -1,10 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef } from '@tanstack/react-table';
 
+type ColumnVisibility<TData> = {
+    [K in keyof TData]?: boolean;
+} & Record<string, boolean>;
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    config?: {
+        columnVisibility?: ColumnVisibility<TData>;
+    };
 }
-declare function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, config, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 export { DataTable, type DataTableProps, DataTable as default };