@trackunit/react-table 1.3.138 → 1.3.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.3.138",
+  "version": "1.3.141",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,15 +15,15 @@
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.4.114",
-    "@trackunit/shared-utils": "1.5.97",
-    "@trackunit/css-class-variance-utilities": "1.3.97",
-    "@trackunit/ui-icons": "1.3.97",
-    "@trackunit/react-table-base-components": "1.3.130",
-    "@trackunit/react-table-pagination": "1.3.98",
-    "@trackunit/react-form-components": "1.3.130",
-    "@trackunit/i18n-library-translation": "1.3.106",
-    "@trackunit/react-core-contexts-api": "1.4.100"
+    "@trackunit/react-components": "1.4.117",
+    "@trackunit/shared-utils": "1.5.98",
+    "@trackunit/css-class-variance-utilities": "1.3.98",
+    "@trackunit/ui-icons": "1.3.99",
+    "@trackunit/react-table-base-components": "1.3.133",
+    "@trackunit/react-table-pagination": "1.3.99",
+    "@trackunit/react-form-components": "1.3.133",
+    "@trackunit/i18n-library-translation": "1.3.108",
+    "@trackunit/react-core-contexts-api": "1.4.101"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Table.d.ts

@@ -2,6 +2,7 @@ import { Table as ReactTable, Row } from "@tanstack/react-table";
 import { CommonProps, EmptyStateProps } from "@trackunit/react-components";
 import { RelayPagination } from "@trackunit/react-table-pagination";
 import { ReactElement, ReactNode } from "react";
+import "./table-animations.css";
 export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps {
     pagination?: RelayPagination;
     headerLeftActions?: ReactNode;
@@ -14,6 +15,7 @@ export interface TableProps<TData extends object> extends ReactTable<TData>, Com
     hideFooter?: boolean;
     emptyState?: EmptyStateProps;
     selectionColId?: string;
+    renderFilterButton?: (filterKey: string | string[]) => React.ReactNode;
     isRowClickable?: (row: TData) => boolean;
 }
 /**

package/src/components/TextWithTooltip.d.ts

@@ -0,0 +1,13 @@
+import { TextWeight } from "@trackunit/react-components";
+import { ReactNode } from "react";
+/**
+ * This component is used to display a text with a tooltip.
+ * The tooltip is displayed if the text is truncated with ellipsis.
+ * The text is the text to display.
+ * The tooltipLabel is the label to display in the tooltip.
+ */
+export declare const TextWithTooltip: ({ children, tooltipLabel, weight, }: {
+    children: ReactNode;
+    tooltipLabel?: string;
+    weight?: TextWeight;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/hooks/useCellsOffset.d.ts

@@ -0,0 +1,21 @@
+import { Header } from "@tanstack/react-table";
+/**
+ * The `useCellsOffset` hook calculates column offsets for pinned columns ("left" or "right") in a table.
+ *
+ * @template TData The type of the row data in the table.
+ * @param {Header<TData, unknown>[][]} headerGroups - Array of table header groups.
+ * @param {string | null} draggingColumnId - The ID of the column currently being dragged. If null, no dragging is occurring.
+ * @returns {Array<object>} Returns an array of objects containing `leftOffsets` and `rightOffsets` for each header group.
+ */
+export declare const useCellsOffset: <TData extends object>(headerGroups: Header<TData, unknown>[][], draggingColumnId: string | null) => {
+    leftOffsets: Record<string, {
+        id: string;
+        offset: number;
+        pinned: "left";
+    }>;
+    rightOffsets: Record<string, {
+        id: string;
+        offset: number;
+        pinned: "right";
+    }>;
+}[];

package/src/hooks/useColumnDragDrop.d.ts

@@ -0,0 +1,25 @@
+import { Table as ReactTable } from "@tanstack/react-table";
+interface ColumnDragDropOptions<TData extends object> {
+    table: ReactTable<TData>;
+}
+type ColumnStyles = {
+    [x: string]: number | string | undefined;
+};
+/**
+ * Hook for handling column drag and drop functionality in a table
+ *
+ * @param options - Options including the ReactTable instance and optional callbacks
+ * @returns Object containing drag state and handler functions
+ */
+export declare const useColumnDragDrop: <TData extends object>({ table, }: ColumnDragDropOptions<TData>) => {
+    draggingColumnId: string | null;
+    droppedColumnId: string | null;
+    dropTargetColumnId: string | null;
+    dropPosition: "left" | "right" | null;
+    getHeaderProps: (headerId: string, styles?: ColumnStyles) => React.HTMLAttributes<HTMLTableCellElement>;
+    getDragHandleProps: (headerId: string, isPlaceholder: boolean, pinned?: "left" | "right" | "") => React.HTMLAttributes<HTMLTableCellElement>;
+    renderDropIndicator: (columnId: string) => React.ReactNode;
+    isCellDropTarget: (columnId: string) => boolean;
+    getCellProps: (columnId: string, styles?: ColumnStyles) => React.HTMLAttributes<HTMLTableCellElement>;
+};
+export {};

package/src/menus/ColumnActions.d.ts

@@ -0,0 +1,14 @@
+import { Header } from "@tanstack/react-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 {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;
+export default ColumnActions;

package/src/menus/ColumnFilter.d.ts

@@ -19,5 +19,6 @@ export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends
     columns: Column<TColumnFiltersDragAndDrop, TColumnFiltersDragAndDropValue>[];
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;
     onUserEvent?: (event: "Column Reordering" | "Column Filter", payload: Record<string, unknown>) => void;
-    defaultColumnOrder: ColumnOrderState;
+    isSortDisabled: boolean;
+    visibleColumnsCount: number;
 }

package/src/menus/ColumnSorting.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+type ColumnSortingProps = {
+    canSort: boolean;
+    sortingState?: false | "asc" | "desc";
+};
+/**
+ * The ColumnSorting is used in the table header to indicate the current sort order of the column.
+ * This is a visual only component and does not handle the sorting logic.
+ *
+ * In most cases, we recommend using the Table Component which already handles sorting indication.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {object} props - Props for the sorting indicator.
+ * @param {boolean} [props.canSort] - Indicates the header sorting ability state (ascending/descending).
+ * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
+ * @returns {ReactElement | null} A React element representing the sorting indicator.
+ */
+declare const ColumnSorting: ({ canSort, sortingState }: ColumnSortingProps) => ReactElement | null;
+export default ColumnSorting;

package/src/translation.d.ts

@@ -14,8 +14,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"layout.actions.reset" | "table.actionsheet.selected" | "table.columnFilters.columns" | "table.columnFilters.hiddenColumnCount" | "table.columnFilters.hiddenColumnsCount" | "table.columnFilters.title" | "table.columnFilters.tooltip" | "table.error" | "table.exportFileName" | "table.format" | "table.noResults" | "table.pagination.full" | "table.pagination.full.capped" | "table.pagination.of" | "table.pagination.page" | "table.result" | "table.results.plural" | "table.results.plural.capped" | "table.rowDensity.compact" | "table.rowDensity.spacious" | "table.search.placeholder" | "table.searchPlaceholder" | "table.selection.label" | "table.sorting.ascending" | "table.sorting.descending" | "table.sorting.label" | "table.sorting.order" | "table.sorting.toolip" | "table.spacing" | "table.spacing.toolip">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"layout.actions.reset" | "table.actionsheet.selected" | "table.columnFilters.columns" | "table.columnFilters.hiddenColumnCount" | "table.columnFilters.hiddenColumnsCount" | "table.columnFilters.title" | "table.columnFilters.tooltip" | "table.error" | "table.exportFileName" | "table.format" | "table.noResults" | "table.pagination.full" | "table.pagination.full.capped" | "table.pagination.of" | "table.pagination.page" | "table.result" | "table.results.plural" | "table.results.plural.capped" | "table.rowDensity.compact" | "table.rowDensity.spacious" | "table.search.placeholder" | "table.searchPlaceholder" | "table.selection.label" | "table.sorting.ascending" | "table.sorting.descending" | "table.sorting.label" | "table.sorting.order" | "table.sorting.toolip" | "table.spacing" | "table.spacing.toolip">;
+export declare const useTranslation: () => [TransForLibs<"layout.actions.reset" | "table.actionsheet.selected" | "table.columnActions.clearSorting" | "table.columnActions.hideColumn" | "table.columnActions.pinColumn" | "table.columnActions.sortAscending" | "table.columnActions.sortDescending" | "table.columnActions.unPinColumn" | "table.columnFilters.columns" | "table.columnFilters.hiddenColumnCount" | "table.columnFilters.hiddenColumnsCount" | "table.columnFilters.title" | "table.columnFilters.tooltip" | "table.error" | "table.exportFileName" | "table.format" | "table.noResults" | "table.pagination.full" | "table.pagination.full.capped" | "table.pagination.of" | "table.pagination.page" | "table.result" | "table.results.plural" | "table.results.plural.capped" | "table.rowDensity.compact" | "table.rowDensity.spacious" | "table.search.placeholder" | "table.searchPlaceholder" | "table.selection.label" | "table.sorting.ascending" | "table.sorting.descending" | "table.sorting.label" | "table.sorting.order" | "table.sorting.toolip" | "table.spacing" | "table.spacing.toolip">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"layout.actions.reset" | "table.actionsheet.selected" | "table.columnActions.clearSorting" | "table.columnActions.hideColumn" | "table.columnActions.pinColumn" | "table.columnActions.sortAscending" | "table.columnActions.sortDescending" | "table.columnActions.unPinColumn" | "table.columnFilters.columns" | "table.columnFilters.hiddenColumnCount" | "table.columnFilters.hiddenColumnsCount" | "table.columnFilters.title" | "table.columnFilters.tooltip" | "table.error" | "table.exportFileName" | "table.format" | "table.noResults" | "table.pagination.full" | "table.pagination.full.capped" | "table.pagination.of" | "table.pagination.page" | "table.result" | "table.results.plural" | "table.results.plural.capped" | "table.rowDensity.compact" | "table.rowDensity.spacious" | "table.search.placeholder" | "table.searchPlaceholder" | "table.selection.label" | "table.sorting.ascending" | "table.sorting.descending" | "table.sorting.label" | "table.sorting.order" | "table.sorting.toolip" | "table.spacing" | "table.spacing.toolip">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };

package/src/types.d.ts

@@ -19,6 +19,18 @@ declare module "@tanstack/react-table" {
          * Used for dynamic headers like the selection column that uses a checkbox header in the table but should have a different column name in the Column Filter.
          */
         columnFilterLabel?: string;
+        /**
+         * Allows to overwrite the Column Filter label.
+         * Used for dynamic headers like the selection column that uses a checkbox header in the table but should have a different column name in the Column Filter.
+         */
+        filterName?: string | string[];
+        /**
+         * Specifies whether the column should be pinned (fixed) to the left or right side of the table.
+         * The value "left" pins the column to the left, and "right" pins it to the right.
+         *
+         * Pinned columns remain visible and stationary during horizontal scrolling of the table.
+         */
+        pinned?: "left" | "right";
     }
 }
 export type Alignment = "left" | "center" | "right";