@trackunit/react-table 1.3.176 → 1.3.179

package/index.cjs.js

@@ -820,22 +820,50 @@ const useColumnDragDrop = ({ table, }) => {
  * `ColumnActions` component to render column action controls for a table.
  *
  * @template TData The type of the table row data.
- * @param {object} props Component properties.
+ * @param {ColumnActionsProps} props Component properties.
  * @param {Header<TData, unknown>} props.header The header of the current column provided by React Table.
  * @param {number} props.visibleColumnsCount The number of visible columns in the table.
  */
-const ColumnActions = ({ header, visibleColumnsCount, }) => {
+const ColumnActions = ({ header, visibleColumnsCount, setSorting, getColumn }) => {
     const [t] = useTranslation();
-    const isSorted = header.column.getIsSorted();
-    const canSort = header.column.getCanSort();
-    const canHide = header.column.getCanHide();
-    const canPin = header.column.getCanPin();
-    const isPinned = header.column.getIsPinned();
-    const isAnyActionAvailable = canSort || canPin || (canHide && visibleColumnsCount > 1);
+    const isSorted = react.useMemo(() => header.column.getIsSorted(), [header]);
+    const canSort = react.useMemo(() => header.column.getCanSort(), [header]);
+    const canHide = react.useMemo(() => header.column.getCanHide(), [header]);
+    const canPin = react.useMemo(() => header.column.getCanPin(), [header]);
+    const isPinned = react.useMemo(() => header.column.getIsPinned(), [header]);
+    const showHideColumn = react.useMemo(() => canHide && visibleColumnsCount > 1, [canHide, visibleColumnsCount]);
+    const isAnyActionAvailable = react.useMemo(() => canSort || canPin || showHideColumn, [canPin, canSort, showHideColumn]);
+    const sortByKey = header.column.columnDef.meta?.sortByKey;
+    const sortByColumn = react.useMemo(() => (sortByKey ? getColumn(sortByKey) : undefined), [sortByKey, getColumn]);
+    const isSortedByKey = sortByKey ? sortByColumn?.getIsSorted() : undefined;
+    const showSortAscending = canSort && (sortByKey ? isSortedByKey === "desc" || !isSortedByKey : isSorted === "desc" || !isSorted);
+    const showSortDescending = canSort && (sortByKey ? isSortedByKey === "asc" || !isSortedByKey : isSorted === "asc" || !isSorted);
+    const showClearSorting = canSort && (sortByKey ? isSortedByKey : isSorted);
+    const handleSortAscending = react.useCallback(() => {
+        if (sortByKey) {
+            setSorting([{ id: sortByKey, desc: false }]);
+            return;
+        }
+        header.column.toggleSorting(false);
+    }, [sortByKey, setSorting, header]);
+    const handleSortDescending = react.useCallback(() => {
+        if (sortByKey) {
+            setSorting([{ id: sortByKey, desc: true }]);
+            return;
+        }
+        header.column.toggleSorting(true);
+    }, [sortByKey, setSorting, header]);
+    const handleClearSorting = react.useCallback(() => {
+        if (sortByKey) {
+            sortByColumn?.clearSorting();
+            return;
+        }
+        header.column.clearSorting();
+    }, [sortByKey, sortByColumn, header]);
     if (!isAnyActionAvailable) {
         return null;
     }
-    return (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), size: "extraSmall", variant: "ghost-neutral" }), children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { children: [canSort && (isSorted === "desc" || !isSorted) ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortAscending"), onClick: () => header.column.toggleSorting(false), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowUp", size: "medium" }) })) : null, canSort && (isSorted === "asc" || !isSorted) ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortDescending"), onClick: () => header.column.toggleSorting(true), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowDown", size: "medium" }) })) : null, canSort && isSorted ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.clearSorting"), onClick: () => header.column.clearSorting(), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, canHide && visibleColumnsCount > 1 ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t(isPinned ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
+    return (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), size: "extraSmall", variant: "ghost-neutral" }), children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { children: [showSortAscending ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortAscending"), onClick: handleSortAscending, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowUp", size: "medium" }) })) : null, showSortDescending ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortDescending"), onClick: handleSortDescending, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowDown", size: "medium" }) })) : null, showClearSorting ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.clearSorting"), onClick: handleClearSorting, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, showHideColumn ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t(isPinned ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
                         header.column.pin(isPinned ? false : "left");
                         close();
                     }, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: isPinned ? "Unpin" : "Pin", size: "medium" }) })) : null] })) }));
@@ -922,6 +950,28 @@ const Table = ({ rowHeight = 50, ...props }) => {
     });
     const offsets = useCellsOffset(headerGroups.map(group => group.headers), draggingColumnId);
     const hasResults = props.getRowModel().rows.length > 0;
+    const handleColumnClick = react.useCallback((event, header) => {
+        if (header.column.columnDef.meta?.sortByKey) {
+            const column = props.getColumn(header.column.columnDef.meta.sortByKey);
+            if (column) {
+                const isCurrentlySorted = column.getIsSorted();
+                if (isCurrentlySorted === "desc") {
+                    column.clearSorting();
+                    return;
+                }
+                if (isCurrentlySorted === "asc") {
+                    props.setSorting([{ id: header.column.columnDef.meta.sortByKey, desc: true }]);
+                    return;
+                }
+                props.setSorting([{ id: header.column.columnDef.meta.sortByKey, desc: false }]);
+                return;
+            }
+            return;
+        }
+        else {
+            header.column.getToggleSortingHandler()?.(event);
+        }
+    }, [props]);
     return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
@@ -946,11 +996,13 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                             renderDropIndicator(header.id),
                                             header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { ...getDragHandleProps(header.id, header.isPlaceholder, pinned), className: tailwindMerge.twMerge(cvaColumnHeaderContainer({
                                                     sortable: canSort,
-                                                })), onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-1 truncate", children: [header.column.columnDef.header || header.column.columnDef.meta?.subHeader ? (jsxRuntime.jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsxRuntime.jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
+                                                })), onClick: event => handleColumnClick(event, header), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-1 truncate", children: [header.column.columnDef.header || header.column.columnDef.meta?.subHeader ? (jsxRuntime.jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsxRuntime.jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
                                                                         ? header.column.columnDef.meta.subHeader
-                                                                        : null] })) : null, jsxRuntime.jsx(ColumnSorting, { canSort: canSort, sortingState: header.column.getIsSorted() })] }), jsxRuntime.jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton && header.column.columnDef.meta?.filterName
+                                                                        : null] })) : null, jsxRuntime.jsx(ColumnSorting, { canSort: canSort, sortingState: header.column.columnDef.meta?.sortByKey
+                                                                    ? props.getColumn(header.column.columnDef.meta.sortByKey)?.getIsSorted()
+                                                                    : header.column.getIsSorted() })] }), jsxRuntime.jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton && header.column.columnDef.meta?.filterName
                                                                 ? props.renderFilterButton(header.column.columnDef.meta.filterName)
-                                                                : null, jsxRuntime.jsx(ColumnActions, { header: header, visibleColumnsCount: visibleColumnsCount })] })] })),
+                                                                : null, jsxRuntime.jsx(ColumnActions, { getColumn: props.getColumn, header: header, setSorting: props.setSorting, visibleColumnsCount: visibleColumnsCount })] })] })),
                                             !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
                                     }) }, headerGroup.id));
                             }) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {

package/index.esm.js

@@ -819,22 +819,50 @@ const useColumnDragDrop = ({ table, }) => {
  * `ColumnActions` component to render column action controls for a table.
  *
  * @template TData The type of the table row data.
- * @param {object} props Component properties.
+ * @param {ColumnActionsProps} props Component properties.
  * @param {Header<TData, unknown>} props.header The header of the current column provided by React Table.
  * @param {number} props.visibleColumnsCount The number of visible columns in the table.
  */
-const ColumnActions = ({ header, visibleColumnsCount, }) => {
+const ColumnActions = ({ header, visibleColumnsCount, setSorting, getColumn }) => {
     const [t] = useTranslation();
-    const isSorted = header.column.getIsSorted();
-    const canSort = header.column.getCanSort();
-    const canHide = header.column.getCanHide();
-    const canPin = header.column.getCanPin();
-    const isPinned = header.column.getIsPinned();
-    const isAnyActionAvailable = canSort || canPin || (canHide && visibleColumnsCount > 1);
+    const isSorted = useMemo(() => header.column.getIsSorted(), [header]);
+    const canSort = useMemo(() => header.column.getCanSort(), [header]);
+    const canHide = useMemo(() => header.column.getCanHide(), [header]);
+    const canPin = useMemo(() => header.column.getCanPin(), [header]);
+    const isPinned = useMemo(() => header.column.getIsPinned(), [header]);
+    const showHideColumn = useMemo(() => canHide && visibleColumnsCount > 1, [canHide, visibleColumnsCount]);
+    const isAnyActionAvailable = useMemo(() => canSort || canPin || showHideColumn, [canPin, canSort, showHideColumn]);
+    const sortByKey = header.column.columnDef.meta?.sortByKey;
+    const sortByColumn = useMemo(() => (sortByKey ? getColumn(sortByKey) : undefined), [sortByKey, getColumn]);
+    const isSortedByKey = sortByKey ? sortByColumn?.getIsSorted() : undefined;
+    const showSortAscending = canSort && (sortByKey ? isSortedByKey === "desc" || !isSortedByKey : isSorted === "desc" || !isSorted);
+    const showSortDescending = canSort && (sortByKey ? isSortedByKey === "asc" || !isSortedByKey : isSorted === "asc" || !isSorted);
+    const showClearSorting = canSort && (sortByKey ? isSortedByKey : isSorted);
+    const handleSortAscending = useCallback(() => {
+        if (sortByKey) {
+            setSorting([{ id: sortByKey, desc: false }]);
+            return;
+        }
+        header.column.toggleSorting(false);
+    }, [sortByKey, setSorting, header]);
+    const handleSortDescending = useCallback(() => {
+        if (sortByKey) {
+            setSorting([{ id: sortByKey, desc: true }]);
+            return;
+        }
+        header.column.toggleSorting(true);
+    }, [sortByKey, setSorting, header]);
+    const handleClearSorting = useCallback(() => {
+        if (sortByKey) {
+            sortByColumn?.clearSorting();
+            return;
+        }
+        header.column.clearSorting();
+    }, [sortByKey, sortByColumn, header]);
     if (!isAnyActionAvailable) {
         return null;
     }
-    return (jsx(MoreMenu, { customButton: jsx(IconButton, { icon: jsx(Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), size: "extraSmall", variant: "ghost-neutral" }), children: close => (jsxs(MenuList, { children: [canSort && (isSorted === "desc" || !isSorted) ? (jsx(MenuItem, { label: t("table.columnActions.sortAscending"), onClick: () => header.column.toggleSorting(false), prefix: jsx(Icon, { name: "ArrowUp", size: "medium" }) })) : null, canSort && (isSorted === "asc" || !isSorted) ? (jsx(MenuItem, { label: t("table.columnActions.sortDescending"), onClick: () => header.column.toggleSorting(true), prefix: jsx(Icon, { name: "ArrowDown", size: "medium" }) })) : null, canSort && isSorted ? (jsx(MenuItem, { label: t("table.columnActions.clearSorting"), onClick: () => header.column.clearSorting(), prefix: jsx(Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, canHide && visibleColumnsCount > 1 ? (jsx(MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsx(Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsx(MenuItem, { label: t(isPinned ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
+    return (jsx(MoreMenu, { customButton: jsx(IconButton, { icon: jsx(Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), size: "extraSmall", variant: "ghost-neutral" }), children: close => (jsxs(MenuList, { children: [showSortAscending ? (jsx(MenuItem, { label: t("table.columnActions.sortAscending"), onClick: handleSortAscending, prefix: jsx(Icon, { name: "ArrowUp", size: "medium" }) })) : null, showSortDescending ? (jsx(MenuItem, { label: t("table.columnActions.sortDescending"), onClick: handleSortDescending, prefix: jsx(Icon, { name: "ArrowDown", size: "medium" }) })) : null, showClearSorting ? (jsx(MenuItem, { label: t("table.columnActions.clearSorting"), onClick: handleClearSorting, prefix: jsx(Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, showHideColumn ? (jsx(MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsx(Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsx(MenuItem, { label: t(isPinned ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
                         header.column.pin(isPinned ? false : "left");
                         close();
                     }, prefix: jsx(Icon, { name: isPinned ? "Unpin" : "Pin", size: "medium" }) })) : null] })) }));
@@ -921,6 +949,28 @@ const Table = ({ rowHeight = 50, ...props }) => {
     });
     const offsets = useCellsOffset(headerGroups.map(group => group.headers), draggingColumnId);
     const hasResults = props.getRowModel().rows.length > 0;
+    const handleColumnClick = useCallback((event, header) => {
+        if (header.column.columnDef.meta?.sortByKey) {
+            const column = props.getColumn(header.column.columnDef.meta.sortByKey);
+            if (column) {
+                const isCurrentlySorted = column.getIsSorted();
+                if (isCurrentlySorted === "desc") {
+                    column.clearSorting();
+                    return;
+                }
+                if (isCurrentlySorted === "asc") {
+                    props.setSorting([{ id: header.column.columnDef.meta.sortByKey, desc: true }]);
+                    return;
+                }
+                props.setSorting([{ id: header.column.columnDef.meta.sortByKey, desc: false }]);
+                return;
+            }
+            return;
+        }
+        else {
+            header.column.getToggleSortingHandler()?.(event);
+        }
+    }, [props]);
     return (jsxs(Card, { className: twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
@@ -945,11 +995,13 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                             renderDropIndicator(header.id),
                                             header.isPlaceholder ? null : (jsxs("div", { ...getDragHandleProps(header.id, header.isPlaceholder, pinned), className: twMerge(cvaColumnHeaderContainer({
                                                     sortable: canSort,
-                                                })), onClick: header.column.getToggleSortingHandler(), children: [jsxs("div", { className: "flex flex-1 items-center gap-1 truncate", children: [header.column.columnDef.header || header.column.columnDef.meta?.subHeader ? (jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
+                                                })), onClick: event => handleColumnClick(event, header), children: [jsxs("div", { className: "flex flex-1 items-center gap-1 truncate", children: [header.column.columnDef.header || header.column.columnDef.meta?.subHeader ? (jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
                                                                         ? header.column.columnDef.meta.subHeader
-                                                                        : null] })) : null, jsx(ColumnSorting, { canSort: canSort, sortingState: header.column.getIsSorted() })] }), jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton && header.column.columnDef.meta?.filterName
+                                                                        : null] })) : null, jsx(ColumnSorting, { canSort: canSort, sortingState: header.column.columnDef.meta?.sortByKey
+                                                                    ? props.getColumn(header.column.columnDef.meta.sortByKey)?.getIsSorted()
+                                                                    : header.column.getIsSorted() })] }), jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton && header.column.columnDef.meta?.filterName
                                                                 ? props.renderFilterButton(header.column.columnDef.meta.filterName)
-                                                                : null, jsx(ColumnActions, { header: header, visibleColumnsCount: visibleColumnsCount })] })] })),
+                                                                : null, jsx(ColumnActions, { getColumn: props.getColumn, header: header, setSorting: props.setSorting, visibleColumnsCount: visibleColumnsCount })] })] })),
                                             !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
                                     }) }, headerGroup.id));
                             }) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.3.176",
+  "version": "1.3.179",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,16 +15,16 @@
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.4.141",
-    "@trackunit/shared-utils": "1.5.118",
-    "@trackunit/css-class-variance-utilities": "1.3.118",
-    "@trackunit/ui-icons": "1.3.119",
-    "@trackunit/react-table-base-components": "1.3.159",
-    "@trackunit/react-table-pagination": "1.3.118",
-    "@trackunit/react-form-components": "1.3.159",
-    "@trackunit/i18n-library-translation": "1.3.132",
-    "@trackunit/react-core-contexts-api": "1.4.124",
-    "@trackunit/react-test-setup": "1.0.8"
+    "@trackunit/react-components": "1.4.143",
+    "@trackunit/shared-utils": "1.5.119",
+    "@trackunit/css-class-variance-utilities": "1.3.119",
+    "@trackunit/ui-icons": "1.3.120",
+    "@trackunit/react-table-base-components": "1.3.161",
+    "@trackunit/react-table-pagination": "1.3.119",
+    "@trackunit/react-form-components": "1.3.161",
+    "@trackunit/i18n-library-translation": "1.3.133",
+    "@trackunit/react-core-contexts-api": "1.4.125",
+    "@trackunit/react-test-setup": "1.0.9"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/menus/ColumnActions.d.ts

@@ -1,14 +1,17 @@
-import { Header } from "@tanstack/react-table";
+import { Column, Header, SortingState, Updater } from "@tanstack/react-table";
+interface ColumnActionsProps<TData> {
+    header: Header<TData, unknown>;
+    visibleColumnsCount: number;
+    setSorting: (updater: Updater<SortingState>) => void;
+    getColumn: (columnId: string) => Column<TData, unknown> | undefined;
+}
 /**
  * `ColumnActions` component to render column action controls for a table.
  *
  * @template TData The type of the table row data.
- * @param {object} props Component properties.
+ * @param {ColumnActionsProps} props Component properties.
  * @param {Header<TData, unknown>} props.header The header of the current column provided by React Table.
  * @param {number} props.visibleColumnsCount The number of visible columns in the table.
  */
-declare const ColumnActions: <TData>({ header, visibleColumnsCount, }: {
-    header: Header<TData, unknown>;
-    visibleColumnsCount: number;
-}) => import("react/jsx-runtime").JSX.Element | null;
+declare const ColumnActions: <TData>({ header, visibleColumnsCount, setSorting, getColumn }: ColumnActionsProps<TData>) => import("react/jsx-runtime").JSX.Element | null;
 export default ColumnActions;

package/src/types.d.ts

@@ -31,6 +31,10 @@ declare module "@tanstack/react-table" {
          * Pinned columns remain visible and stationary during horizontal scrolling of the table.
          */
         pinned?: "left" | "right";
+        /**
+         * Indicates that sorting is applied for example based on 'userId', while the column displays 'userDisplayName'.
+         */
+        sortByKey?: string;
     }
 }
 export type Alignment = "left" | "center" | "right";