@kopexa/data-grid 18.1.0 → 18.2.0

package/dist/chunk-M6DRKGKE.mjs

@@ -0,0 +1,15 @@
+"use client";
+
+// src/data-grid-messages.ts
+import { defineMessages } from "@kopexa/i18n";
+var dataGridMessages = defineMessages({
+  columns: {
+    id: "data-grid.columns",
+    defaultMessage: "Columns",
+    description: "Label for the column visibility toggle button"
+  }
+});
+
+export {
+  dataGridMessages
+};

package/dist/{chunk-KSAE2MI5.mjs → chunk-YJSXJPR4.mjs}

@@ -1,7 +1,14 @@
 "use client";
+import {
+  dataGridMessages
+} from "./chunk-M6DRKGKE.mjs";
 
 // src/data-grid.tsx
+import { Button } from "@kopexa/button";
 import { Checkbox } from "@kopexa/checkbox";
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { useSafeIntl } from "@kopexa/i18n";
+import { TableHeaderColumnIcon } from "@kopexa/icons";
 import { createContext } from "@kopexa/react-utils";
 import { cn } from "@kopexa/shared-utils";
 import { datagrid } from "@kopexa/theme";
@@ -80,6 +87,7 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
@@ -95,6 +103,7 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
@@ -141,14 +150,17 @@ function DataGridTableHeadRow({
 function DataGridTableBase({
   children,
   className,
+  style,
   ...restProps
 }) {
-  const { styles } = useDataGridContext();
+  const { styles, table, width } = useDataGridContext();
+  const minWidth = width === "fixed" ? table.getVisibleLeafColumns().reduce((acc, column) => acc + column.getSize(), 0) : void 0;
   return /* @__PURE__ */ jsx(
     "table",
     {
       "data-slot": "data-grid-table",
       className: styles.table({ className }),
+      style: minWidth ? { minWidth, ...style } : style,
       ...restProps,
       children
     }
@@ -215,7 +227,7 @@ function DataGridTableBody({
 }
 function DataGridTableEmpty() {
   const { styles, table, emptyMessage } = useDataGridContext();
-  const totalColumns = table.getAllColumns().length;
+  const totalColumns = table.getVisibleLeafColumns().length;
   return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
 }
 function DataGridTableBodyRowSkeleton({ children }) {
@@ -381,6 +393,37 @@ function getPinningStyles(column) {
     zIndex: isPinned ? 1 : 0
   };
 }
+function DataGridColumnToggle({
+  label,
+  align = "end",
+  children
+}) {
+  const { table } = useDataGridContext();
+  const t = useSafeIntl();
+  const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+  if (columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: children != null ? children : /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ jsx(TableHeaderColumnIcon, { className: "size-4" }),
+      label != null ? label : t.formatMessage(dataGridMessages.columns)
+    ] }) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { align, children: columns.map((column) => {
+      var _a, _b;
+      return /* @__PURE__ */ jsx(
+        DropdownMenu.CheckboxItem,
+        {
+          checked: column.getIsVisible(),
+          onCheckedChange: (value) => column.toggleVisibility(!!value),
+          onSelect: (event) => event.preventDefault(),
+          children: (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.headerTitle) != null ? _b : column.id
+        },
+        column.id
+      );
+    }) })
+  ] });
+}
 function DataGridTableRowSelectAll({
   size
 }) {
@@ -429,6 +472,7 @@ export {
   DataGrid,
   DataGridContainer,
   DataGridTable,
+  DataGridColumnToggle,
   DataGridTableRowSelectAll,
   DataGridTableRowSelect
 };

package/dist/data-grid-messages.d.mts

@@ -0,0 +1,9 @@
+declare const dataGridMessages: {
+    columns: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+
+export { dataGridMessages };

package/dist/data-grid-messages.d.ts

@@ -0,0 +1,9 @@
+declare const dataGridMessages: {
+    columns: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+
+export { dataGridMessages };

package/dist/data-grid-messages.js

@@ -0,0 +1,38 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/data-grid-messages.ts
+var data_grid_messages_exports = {};
+__export(data_grid_messages_exports, {
+  dataGridMessages: () => dataGridMessages
+});
+module.exports = __toCommonJS(data_grid_messages_exports);
+var import_i18n = require("@kopexa/i18n");
+var dataGridMessages = (0, import_i18n.defineMessages)({
+  columns: {
+    id: "data-grid.columns",
+    defaultMessage: "Columns",
+    description: "Label for the column visibility toggle button"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dataGridMessages
+});

package/dist/data-grid-messages.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  dataGridMessages
+} from "./chunk-M6DRKGKE.mjs";
+export {
+  dataGridMessages
+};

package/dist/data-grid.d.mts

@@ -29,6 +29,22 @@ declare function DataGridContainer({ children, className, }: {
     border?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function DataGridTable<TData>(): react_jsx_runtime.JSX.Element;
+type DataGridColumnToggleProps = {
+    /**
+     * Trigger button label. Defaults to the translated "Columns" message;
+     * ignored when `children` is provided.
+     */
+    label?: string;
+    align?: "start" | "center" | "end";
+    /** Custom trigger; replaces the default button. */
+    children?: ReactNode;
+};
+/**
+ * Dropdown that toggles column visibility. Lists every hideable leaf column
+ * (`enableHiding !== false`) and reflects/sets `columnVisibility` on the table.
+ * Column labels come from `meta.headerTitle`, falling back to the column id.
+ */
+declare function DataGridColumnToggle({ label, align, children, }: DataGridColumnToggleProps): react_jsx_runtime.JSX.Element | null;
 declare function DataGridTableRowSelectAll({ size, }: {
     size?: "sm" | "md" | "lg";
 }): react_jsx_runtime.JSX.Element;
@@ -37,4 +53,4 @@ declare function DataGridTableRowSelect<TData>({ row, size, }: {
     size?: "sm" | "md" | "lg";
 }): react_jsx_runtime.JSX.Element;
 
-export { DataGrid, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll };
+export { DataGrid, DataGridColumnToggle, type DataGridColumnToggleProps, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll };

package/dist/data-grid.d.ts

@@ -29,6 +29,22 @@ declare function DataGridContainer({ children, className, }: {
     border?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function DataGridTable<TData>(): react_jsx_runtime.JSX.Element;
+type DataGridColumnToggleProps = {
+    /**
+     * Trigger button label. Defaults to the translated "Columns" message;
+     * ignored when `children` is provided.
+     */
+    label?: string;
+    align?: "start" | "center" | "end";
+    /** Custom trigger; replaces the default button. */
+    children?: ReactNode;
+};
+/**
+ * Dropdown that toggles column visibility. Lists every hideable leaf column
+ * (`enableHiding !== false`) and reflects/sets `columnVisibility` on the table.
+ * Column labels come from `meta.headerTitle`, falling back to the column id.
+ */
+declare function DataGridColumnToggle({ label, align, children, }: DataGridColumnToggleProps): react_jsx_runtime.JSX.Element | null;
 declare function DataGridTableRowSelectAll({ size, }: {
     size?: "sm" | "md" | "lg";
 }): react_jsx_runtime.JSX.Element;
@@ -37,4 +53,4 @@ declare function DataGridTableRowSelect<TData>({ row, size, }: {
     size?: "sm" | "md" | "lg";
 }): react_jsx_runtime.JSX.Element;
 
-export { DataGrid, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll };
+export { DataGrid, DataGridColumnToggle, type DataGridColumnToggleProps, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll };

package/dist/data-grid.js

@@ -23,18 +23,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var data_grid_exports = {};
 __export(data_grid_exports, {
   DataGrid: () => DataGrid,
+  DataGridColumnToggle: () => DataGridColumnToggle,
   DataGridContainer: () => DataGridContainer,
   DataGridTable: () => DataGridTable,
   DataGridTableRowSelect: () => DataGridTableRowSelect,
   DataGridTableRowSelectAll: () => DataGridTableRowSelectAll
 });
 module.exports = __toCommonJS(data_grid_exports);
+var import_button = require("@kopexa/button");
 var import_checkbox = require("@kopexa/checkbox");
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_i18n2 = require("@kopexa/i18n");
+var import_icons = require("@kopexa/icons");
 var import_react_utils = require("@kopexa/react-utils");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_theme = require("@kopexa/theme");
 var import_react_table = require("@tanstack/react-table");
 var import_react = require("react");
+
+// src/data-grid-messages.ts
+var import_i18n = require("@kopexa/i18n");
+var dataGridMessages = (0, import_i18n.defineMessages)({
+  columns: {
+    id: "data-grid.columns",
+    defaultMessage: "Columns",
+    description: "Label for the column visibility toggle button"
+  }
+});
+
+// src/data-grid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var [DataGridProvider, useDataGridContext] = (
   // biome-ignore lint/suspicious/noExplicitAny: no idea.
@@ -103,6 +120,7 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
@@ -118,6 +136,7 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
@@ -164,14 +183,17 @@ function DataGridTableHeadRow({
 function DataGridTableBase({
   children,
   className,
+  style,
   ...restProps
 }) {
-  const { styles } = useDataGridContext();
+  const { styles, table, width } = useDataGridContext();
+  const minWidth = width === "fixed" ? table.getVisibleLeafColumns().reduce((acc, column) => acc + column.getSize(), 0) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "table",
     {
       "data-slot": "data-grid-table",
       className: styles.table({ className }),
+      style: minWidth ? { minWidth, ...style } : style,
       ...restProps,
       children
     }
@@ -238,7 +260,7 @@ function DataGridTableBody({
 }
 function DataGridTableEmpty() {
   const { styles, table, emptyMessage } = useDataGridContext();
-  const totalColumns = table.getAllColumns().length;
+  const totalColumns = table.getVisibleLeafColumns().length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
 }
 function DataGridTableBodyRowSkeleton({ children }) {
@@ -404,6 +426,37 @@ function getPinningStyles(column) {
     zIndex: isPinned ? 1 : 0
   };
 }
+function DataGridColumnToggle({
+  label,
+  align = "end",
+  children
+}) {
+  const { table } = useDataGridContext();
+  const t = (0, import_i18n2.useSafeIntl)();
+  const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+  if (columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.TableHeaderColumnIcon, { className: "size-4" }),
+      label != null ? label : t.formatMessage(dataGridMessages.columns)
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Content, { align, children: columns.map((column) => {
+      var _a, _b;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_dropdown_menu.DropdownMenu.CheckboxItem,
+        {
+          checked: column.getIsVisible(),
+          onCheckedChange: (value) => column.toggleVisibility(!!value),
+          onSelect: (event) => event.preventDefault(),
+          children: (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.headerTitle) != null ? _b : column.id
+        },
+        column.id
+      );
+    }) })
+  ] });
+}
 function DataGridTableRowSelectAll({
   size
 }) {
@@ -450,6 +503,7 @@ function DataGridTableRowSelect({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DataGrid,
+  DataGridColumnToggle,
   DataGridContainer,
   DataGridTable,
   DataGridTableRowSelect,

package/dist/data-grid.mjs

@@ -2,13 +2,16 @@
 "use client";
 import {
   DataGrid,
+  DataGridColumnToggle,
   DataGridContainer,
   DataGridTable,
   DataGridTableRowSelect,
   DataGridTableRowSelectAll
-} from "./chunk-KSAE2MI5.mjs";
+} from "./chunk-YJSXJPR4.mjs";
+import "./chunk-M6DRKGKE.mjs";
 export {
   DataGrid,
+  DataGridColumnToggle,
   DataGridContainer,
   DataGridTable,
   DataGridTableRowSelect,

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { DataGrid as DataGrid$1, DataGridContainer, DataGridTable, DataGridTableRowSelectAll, DataGridTableRowSelect } from './data-grid.mjs';
-export { DataGridProps } from './data-grid.mjs';
+import { DataGrid as DataGrid$1, DataGridContainer, DataGridTable, DataGridTableRowSelectAll, DataGridTableRowSelect, DataGridColumnToggle } from './data-grid.mjs';
+export { DataGridColumnToggleProps, DataGridProps } from './data-grid.mjs';
 import 'react/jsx-runtime';
 import '@kopexa/theme';
 import '@tanstack/react-table';
@@ -10,6 +10,7 @@ declare const DataGrid: typeof DataGrid$1 & {
     Table: typeof DataGridTable;
     SelectAll: typeof DataGridTableRowSelectAll;
     RowSelect: typeof DataGridTableRowSelect;
+    ColumnToggle: typeof DataGridColumnToggle;
 };
 
 export { DataGrid };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { DataGrid as DataGrid$1, DataGridContainer, DataGridTable, DataGridTableRowSelectAll, DataGridTableRowSelect } from './data-grid.js';
-export { DataGridProps } from './data-grid.js';
+import { DataGrid as DataGrid$1, DataGridContainer, DataGridTable, DataGridTableRowSelectAll, DataGridTableRowSelect, DataGridColumnToggle } from './data-grid.js';
+export { DataGridColumnToggleProps, DataGridProps } from './data-grid.js';
 import 'react/jsx-runtime';
 import '@kopexa/theme';
 import '@tanstack/react-table';
@@ -10,6 +10,7 @@ declare const DataGrid: typeof DataGrid$1 & {
     Table: typeof DataGridTable;
     SelectAll: typeof DataGridTableRowSelectAll;
     RowSelect: typeof DataGridTableRowSelect;
+    ColumnToggle: typeof DataGridColumnToggle;
 };
 
 export { DataGrid };

package/dist/index.js

@@ -26,12 +26,28 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/data-grid.tsx
+var import_button = require("@kopexa/button");
 var import_checkbox = require("@kopexa/checkbox");
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_i18n2 = require("@kopexa/i18n");
+var import_icons = require("@kopexa/icons");
 var import_react_utils = require("@kopexa/react-utils");
 var import_shared_utils = require("@kopexa/shared-utils");
 var import_theme = require("@kopexa/theme");
 var import_react_table = require("@tanstack/react-table");
 var import_react = require("react");
+
+// src/data-grid-messages.ts
+var import_i18n = require("@kopexa/i18n");
+var dataGridMessages = (0, import_i18n.defineMessages)({
+  columns: {
+    id: "data-grid.columns",
+    defaultMessage: "Columns",
+    description: "Label for the column visibility toggle button"
+  }
+});
+
+// src/data-grid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var [DataGridProvider, useDataGridContext] = (
   // biome-ignore lint/suspicious/noExplicitAny: no idea.
@@ -100,6 +116,7 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
@@ -115,6 +132,7 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
@@ -161,14 +179,17 @@ function DataGridTableHeadRow({
 function DataGridTableBase({
   children,
   className,
+  style,
   ...restProps
 }) {
-  const { styles } = useDataGridContext();
+  const { styles, table, width } = useDataGridContext();
+  const minWidth = width === "fixed" ? table.getVisibleLeafColumns().reduce((acc, column) => acc + column.getSize(), 0) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "table",
     {
       "data-slot": "data-grid-table",
       className: styles.table({ className }),
+      style: minWidth ? { minWidth, ...style } : style,
       ...restProps,
       children
     }
@@ -235,7 +256,7 @@ function DataGridTableBody({
 }
 function DataGridTableEmpty() {
   const { styles, table, emptyMessage } = useDataGridContext();
-  const totalColumns = table.getAllColumns().length;
+  const totalColumns = table.getVisibleLeafColumns().length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
 }
 function DataGridTableBodyRowSkeleton({ children }) {
@@ -401,6 +422,37 @@ function getPinningStyles(column) {
     zIndex: isPinned ? 1 : 0
   };
 }
+function DataGridColumnToggle({
+  label,
+  align = "end",
+  children
+}) {
+  const { table } = useDataGridContext();
+  const t = (0, import_i18n2.useSafeIntl)();
+  const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+  if (columns.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, { variant: "outline", size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.TableHeaderColumnIcon, { className: "size-4" }),
+      label != null ? label : t.formatMessage(dataGridMessages.columns)
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Content, { align, children: columns.map((column) => {
+      var _a, _b;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_dropdown_menu.DropdownMenu.CheckboxItem,
+        {
+          checked: column.getIsVisible(),
+          onCheckedChange: (value) => column.toggleVisibility(!!value),
+          onSelect: (event) => event.preventDefault(),
+          children: (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.headerTitle) != null ? _b : column.id
+        },
+        column.id
+      );
+    }) })
+  ] });
+}
 function DataGridTableRowSelectAll({
   size
 }) {
@@ -450,7 +502,8 @@ var DataGrid2 = Object.assign(DataGrid, {
   Container: DataGridContainer,
   Table: DataGridTable,
   SelectAll: DataGridTableRowSelectAll,
-  RowSelect: DataGridTableRowSelect
+  RowSelect: DataGridTableRowSelect,
+  ColumnToggle: DataGridColumnToggle
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,18 +1,21 @@
 "use client";
 import {
   DataGrid,
+  DataGridColumnToggle,
   DataGridContainer,
   DataGridTable,
   DataGridTableRowSelect,
   DataGridTableRowSelectAll
-} from "./chunk-KSAE2MI5.mjs";
+} from "./chunk-YJSXJPR4.mjs";
+import "./chunk-M6DRKGKE.mjs";
 
 // src/index.ts
 var DataGrid2 = Object.assign(DataGrid, {
   Container: DataGridContainer,
   Table: DataGridTable,
   SelectAll: DataGridTableRowSelectAll,
-  RowSelect: DataGridTableRowSelect
+  RowSelect: DataGridTableRowSelect,
+  ColumnToggle: DataGridColumnToggle
 });
 export {
   DataGrid2 as DataGrid

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/data-grid",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "description": "A DataGrid Component",
   "keywords": [
     "data-grid"
@@ -28,13 +28,17 @@
     "motion": ">=12.23.6",
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
-    "@kopexa/theme": "18.1.0"
+    "@kopexa/theme": "18.2.0"
   },
   "dependencies": {
     "@tanstack/react-table": "^8.21.3",
-    "@kopexa/react-utils": "18.1.0",
-    "@kopexa/checkbox": "18.1.0",
-    "@kopexa/shared-utils": "18.1.0"
+    "@kopexa/react-utils": "18.2.0",
+    "@kopexa/checkbox": "18.2.0",
+    "@kopexa/icons": "18.2.0",
+    "@kopexa/button": "18.2.0",
+    "@kopexa/i18n": "18.2.0",
+    "@kopexa/shared-utils": "18.2.0",
+    "@kopexa/dropdown-menu": "18.2.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",
@@ -50,6 +54,7 @@
   "scripts": {
     "build": "tsup src --dts",
     "build:fast": "tsup src",
+    "i18n:extract": "formatjs extract \"src/**/*.{ts,tsx}\" --ignore \"**/*.test.*\" \"**/*.stories.*\" --format simple --out-file ../../core/i18n/tmp/$npm_package_name.en.json",
     "dev": "pnpm build:fast --watch",
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit"