@kopexa/data-grid 18.1.0 → 18.3.0

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.
@@ -56,6 +72,7 @@ function DataGrid(props) {
     isLoading = false,
     pageSize = 20,
     cellBorder,
+    columnVisibilityToggle,
     onRowClick,
     ...rest
   } = props;
@@ -100,9 +117,11 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
+      columnVisibilityToggle,
       onRowClick
     }),
     [
@@ -115,9 +134,11 @@ function DataGrid(props) {
       rowBorder,
       cellBorder,
       loadingMode,
+      width,
       emptyMessage,
       isLoading,
       pageSize,
+      columnVisibilityToggle,
       onRowClick
     ]
   );
@@ -161,23 +182,33 @@ 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
     }
   );
 }
+var STICKY_RIGHT_CELL = "sticky end-0 bg-background border-s border-border shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]";
+var stickyRightStyle = (z) => ({
+  position: "sticky",
+  right: 0,
+  zIndex: z
+});
 function DataGridTableHeadRowCell({
   children,
   header,
-  dndRef
+  dndRef,
+  stickyRight
 }) {
   var _a;
   const { styles, columnsPinnable } = useDataGridContext();
@@ -191,13 +222,15 @@ function DataGridTableHeadRowCell({
       ref: dndRef,
       style: {
         "--size": `${header.getSize()}px`,
-        ...columnsPinnable && isPinned && getPinningStyles(column)
+        ...columnsPinnable && isPinned && getPinningStyles(column),
+        ...stickyRight && stickyRightStyle(30)
       },
       "data-pinned": isPinned || void 0,
       "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
       className: (0, import_shared_utils.cn)(
         styles.headerRowCell(),
-        (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
+        (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName,
+        stickyRight && STICKY_RIGHT_CELL
       ),
       children
     },
@@ -234,8 +267,12 @@ function DataGridTableBody({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: (0, import_shared_utils.cn)(styles.body({ className })), ...restProps, children });
 }
 function DataGridTableEmpty() {
-  const { styles, table, emptyMessage } = useDataGridContext();
-  const totalColumns = table.getAllColumns().length;
+  const { styles, table, emptyMessage, columnVisibilityToggle } = useDataGridContext();
+  const { append: hasSettingsColumn } = getSettingsPlacement(
+    table,
+    columnVisibilityToggle
+  );
+  const totalColumns = table.getVisibleLeafColumns().length + (hasSettingsColumn ? 1 : 0);
   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 }) {
@@ -256,7 +293,8 @@ function DataGridTableBodyRowCell({
   children,
   cell,
   dndRef,
-  dndStyle
+  dndStyle,
+  stickyRight
 }) {
   var _a;
   const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
@@ -272,14 +310,16 @@ function DataGridTableBodyRowCell({
       style: {
         "--size": `${column.getSize()}px`,
         ...columnsPinnable && isPinned && getPinningStyles(column),
-        ...dndStyle ? dndStyle : null
+        ...dndStyle ? dndStyle : null,
+        ...stickyRight && stickyRightStyle(10)
       },
       "data-pinned": isPinned || void 0,
       "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
       className: (0, import_shared_utils.cn)(
         styles.bodyRowCell(),
         columnsResizable && column.getCanResize() && "truncate",
-        (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
+        (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
+        stickyRight && STICKY_RIGHT_CELL
       ),
       children
     },
@@ -288,7 +328,8 @@ function DataGridTableBodyRowCell({
 }
 function DataGridTableBodyRowSkeletonCell({
   children,
-  column
+  column,
+  stickyRight
 }) {
   var _a;
   const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
@@ -300,14 +341,16 @@ function DataGridTableBodyRowSkeletonCell({
     {
       style: {
         "--size": `${column.getSize()}px`,
-        ...columnsPinnable && isPinned && getPinningStyles(column)
+        ...columnsPinnable && isPinned && getPinningStyles(column),
+        ...stickyRight && stickyRightStyle(10)
       },
       "data-pinned": isPinned || void 0,
       "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
       className: (0, import_shared_utils.cn)(
         styles.bodyRowSkeletonCell(),
         columnsResizable && column.getCanResize() && "truncate",
-        (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
+        (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
+        stickyRight && STICKY_RIGHT_CELL
       ),
       children
     }
@@ -338,15 +381,33 @@ function DataGridTableBodyRow({
 }
 function DataGridTableBodyRowExpanded({ row }) {
   var _a, _b, _c;
-  const { table, styles } = useDataGridContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: row.getVisibleCells().length, children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
+  const { table, styles, columnVisibilityToggle } = useDataGridContext();
+  const { append: hasSettingsColumn } = getSettingsPlacement(
+    table,
+    columnVisibilityToggle
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: row.getVisibleCells().length + (hasSettingsColumn ? 1 : 0), children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
     var _a2;
     return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
   })) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
 }
+var SETTINGS_COLUMN_WIDTH = 44;
+function getSettingsPlacement(table, enabled) {
+  if (!enabled) return { append: false };
+  if (!table.getAllLeafColumns().some((column) => column.getCanHide())) {
+    return { append: false };
+  }
+  const leafColumns = table.getVisibleLeafColumns();
+  const lastColumn = leafColumns[leafColumns.length - 1];
+  if (lastColumn && lastColumn.accessorFn == null) {
+    return { reuseColumnId: lastColumn.id, append: false };
+  }
+  return { append: true };
+}
 function DataGridTable() {
   const {
     table,
+    styles,
     columnsResizable,
     columnsPinnable,
     stripped,
@@ -354,38 +415,98 @@ function DataGridTable() {
     cellBorder,
     loadingMode,
     isLoading,
-    pageSize
+    pageSize,
+    columnVisibilityToggle
   } = useDataGridContext();
+  const { reuseColumnId, append: showColumnSettings } = getSettingsPlacement(
+    table,
+    columnVisibilityToggle
+  );
+  const headerGroups = table.getHeaderGroups();
+  const settingsCellStyle = {
+    "--size": `${SETTINGS_COLUMN_WIDTH}px`
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBase, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRow, { headerGroup, children: headerGroup.headers.map((header) => {
-      const { column } = header;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRowCell, { header, children: [
-        header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: headerGroups.map((headerGroup, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRow, { headerGroup, children: [
+      headerGroup.headers.map((header) => {
+        const { column } = header;
+        const isReuseColumn = reuseColumnId != null && column.id === reuseColumnId;
+        const reuseToggleHere = isReuseColumn && groupIndex === headerGroups.length - 1;
+        const headerContent = header.isPlaceholder ? null : (0, import_react_table.flexRender)(
           header.column.columnDef.header,
           header.getContext()
-        ),
-        columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
-      ] }, column.id);
-    }) }, headerGroup.id)) }),
+        );
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          DataGridTableHeadRowCell,
+          {
+            header,
+            stickyRight: isReuseColumn,
+            children: [
+              reuseToggleHere ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex w-full items-center justify-center gap-1.5", children: [
+                headerContent,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {})
+              ] }) : headerContent,
+              columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
+            ]
+          },
+          column.id
+        );
+      }),
+      showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "th",
+        {
+          className: (0, import_shared_utils.cn)(styles.headerRowCell(), STICKY_RIGHT_CELL),
+          style: { ...settingsCellStyle, ...stickyRightStyle(30) },
+          children: groupIndex === headerGroups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {}) })
+        }
+      )
+    ] }, headerGroup.id)) }),
     (stripped || !rowBorder) && !cellBorder && !columnsPinnable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableRowSpacer, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
-      var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        DataGridTableBodyRowSkeletonCell,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBodyRowSkeleton, { children: [
+      table.getVisibleFlatColumns().map((column, colIndex) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          DataGridTableBodyRowSkeletonCell,
+          {
+            column,
+            stickyRight: reuseColumnId != null && column.id === reuseColumnId,
+            children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
+          },
+          colIndex.toString()
+        );
+      }),
+      showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "td",
         {
-          column,
-          children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
-        },
-        colIndex.toString()
-      );
-    }) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
+          className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_CELL),
+          style: { ...settingsCellStyle, ...stickyRightStyle(10) }
+        }
+      )
+    ] }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRow, { row, children: row.getVisibleCells().map((cell) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowCell, { cell, children: (0, import_react_table.flexRender)(
-            cell.column.columnDef.cell,
-            cell.getContext()
-          ) }, cell.id);
-        }) }, row.id),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBodyRow, { row, children: [
+          row.getVisibleCells().map((cell) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              DataGridTableBodyRowCell,
+              {
+                cell,
+                stickyRight: reuseColumnId != null && cell.column.id === reuseColumnId,
+                children: (0, import_react_table.flexRender)(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                )
+              },
+              cell.id
+            );
+          }),
+          showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "td",
+            {
+              className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_CELL),
+              style: { ...settingsCellStyle, ...stickyRightStyle(10) }
+            }
+          )
+        ] }, row.id),
         row.getIsExpanded() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowExpanded, { row })
       ] }, row.id);
     }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableEmpty, {}) })
@@ -401,6 +522,52 @@ 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 DataGridHeaderColumnToggle() {
+  const t = (0, import_i18n2.useSafeIntl)();
+  const label = t.formatMessage(dataGridMessages.columns);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridColumnToggle, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.IconButton,
+    {
+      "aria-label": label,
+      tooltip: label,
+      variant: "ghost",
+      size: "sm",
+      className: "shrink-0",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.TableHeaderColumnIcon, {})
+    }
+  ) });
+}
 function DataGridTableRowSelectAll({
   size
 }) {
@@ -450,7 +617,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-EVXFPN6F.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.3.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.3.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/checkbox": "18.3.0",
+    "@kopexa/button": "18.3.0",
+    "@kopexa/shared-utils": "18.3.0",
+    "@kopexa/i18n": "18.3.0",
+    "@kopexa/icons": "18.3.0",
+    "@kopexa/react-utils": "18.3.0",
+    "@kopexa/dropdown-menu": "18.3.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"