@trackunit/react-table 1.3.222 → 1.3.224

package/index.cjs.js

@@ -503,6 +503,39 @@ const Sorting = ({ columns, }) => {
     return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: currentSortDirection === "asc" ? (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowUp", size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsxs(reactComponents.MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue ?? "", children: sortableColumns.map(column => (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
+/**
+ * A table component that displays an empty state when there are no data entries available.
+ *
+ * @param {EmptyStateTableProps} props - The props for the component.
+ * @param {string} [props.className] - Additional class names for styling.
+ * @param {EmptyStateProps} [props.emptyState] - Optional configuration for customizing the EmptyState component.
+ * @returns {ReactElement} A table body element containing the empty state.
+ */
+const EmptyStateTable = ({ className, emptyState }) => {
+    const [t] = useTranslation();
+    return (jsxRuntime.jsx("tbody", { className: className, children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...emptyState }) }) }) }));
+};
+
+/**
+ * A component to display a loading state with a spinner.
+ *
+ * @param {CommonProps} props - The props for the component, including an optional `className`.
+ * @returns {ReactElement} A table body element displaying a centered spinner.
+ */
+const LoadingState = ({ className }) => {
+    return (jsxRuntime.jsx("tbody", { className: className, children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" }) }) }) }));
+};
+
+/**
+ * Component to display a "No Data" state.
+ *
+ * @param {NoDataMessageStateProps} props - The props for the component.
+ * @returns {ReactElement} A component rendering a message for empty data states.
+ */
+const NoDataMessageState = ({ message, className }) => {
+    return (jsxRuntime.jsx("tbody", { className: className, children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: message }) }) }));
+};
+
 /**
  * This component is used to display a text with a tooltip.
  * The tooltip is displayed if the text is truncated with ellipsis.
@@ -1005,7 +1038,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                                                 : 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: {
+                            }) }), props.loading ? (jsxRuntime.jsx(LoadingState, { className: cvaTBody({ emptyState: false }) })) : props.noDataMessage && !hasResults ? (jsxRuntime.jsx(NoDataMessageState, { className: cvaTBody({ emptyState: false }), message: props.noDataMessage })) : !hasResults ? (jsxRuntime.jsx(EmptyStateTable, { className: cvaTBody({ emptyState: true }), emptyState: props.emptyState })) : (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
                                 height: `${getTotalSize()}px`,
                                 flexGrow: 1,
                             }, children: getVirtualItems().map((virtualRow, index) => {
@@ -1060,7 +1093,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                                 jsxRuntime.jsx("div", { className: "grid h-full items-center p-0", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) })));
                                         }) }, row.id));
                                 }
-                            }) })) : (jsxRuntime.jsx("tbody", { className: cvaTBody({ emptyState: !props.loading && !props.noDataMessage }), children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: props.loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t(props.pagination?.pageInfo?.isCountCapped ? "table.pagination.full.capped" : "table.pagination.full", {
+                            }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t(props.pagination?.pageInfo?.isCountCapped ? "table.pagination.full.capped" : "table.pagination.full", {
                             count: props.getRowModel().rows.length,
                             total: props.pagination?.pageInfo?.count || 0,
                         }) }), props.pagination?.isLoading ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, cvaInteractableItem, Text, Tooltip, Popover, PopoverTrigger, PopoverContent, IconButton, Card, Spinner, EmptyState } from '@trackunit/react-components';
+import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, cvaInteractableItem, Text, Tooltip, Popover, PopoverTrigger, PopoverContent, EmptyState, Spinner, IconButton, Card } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
 import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback, createElement } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -502,6 +502,39 @@ const Sorting = ({ columns, }) => {
     return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: currentSortDirection === "asc" ? (jsx(Icon, { name: "BarsArrowUp", size: "small" })) : (jsx(Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsx(PopoverContent, { children: jsxs(MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue ?? "", children: sortableColumns.map(column => (jsx(RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
+/**
+ * A table component that displays an empty state when there are no data entries available.
+ *
+ * @param {EmptyStateTableProps} props - The props for the component.
+ * @param {string} [props.className] - Additional class names for styling.
+ * @param {EmptyStateProps} [props.emptyState] - Optional configuration for customizing the EmptyState component.
+ * @returns {ReactElement} A table body element containing the empty state.
+ */
+const EmptyStateTable = ({ className, emptyState }) => {
+    const [t] = useTranslation();
+    return (jsx("tbody", { className: className, children: jsx("tr", { children: jsx("td", { className: "b-0", children: jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...emptyState }) }) }) }));
+};
+
+/**
+ * A component to display a loading state with a spinner.
+ *
+ * @param {CommonProps} props - The props for the component, including an optional `className`.
+ * @returns {ReactElement} A table body element displaying a centered spinner.
+ */
+const LoadingState = ({ className }) => {
+    return (jsx("tbody", { className: className, children: jsx("tr", { children: jsx("td", { className: "b-0", children: jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" }) }) }) }));
+};
+
+/**
+ * Component to display a "No Data" state.
+ *
+ * @param {NoDataMessageStateProps} props - The props for the component.
+ * @returns {ReactElement} A component rendering a message for empty data states.
+ */
+const NoDataMessageState = ({ message, className }) => {
+    return (jsx("tbody", { className: className, children: jsx("tr", { children: jsx("td", { className: "b-0", children: message }) }) }));
+};
+
 /**
  * This component is used to display a text with a tooltip.
  * The tooltip is displayed if the text is truncated with ellipsis.
@@ -1004,7 +1037,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                                                 : 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: {
+                            }) }), props.loading ? (jsx(LoadingState, { className: cvaTBody({ emptyState: false }) })) : props.noDataMessage && !hasResults ? (jsx(NoDataMessageState, { className: cvaTBody({ emptyState: false }), message: props.noDataMessage })) : !hasResults ? (jsx(EmptyStateTable, { className: cvaTBody({ emptyState: true }), emptyState: props.emptyState })) : (jsx(Tbody, { className: "text-sm font-normal", style: {
                                 height: `${getTotalSize()}px`,
                                 flexGrow: 1,
                             }, children: getVirtualItems().map((virtualRow, index) => {
@@ -1059,7 +1092,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
                                                 jsx("div", { className: "grid h-full items-center p-0", children: flexRender(cell.column.columnDef.cell, cell.getContext()) })));
                                         }) }, row.id));
                                 }
-                            }) })) : (jsx("tbody", { className: cvaTBody({ emptyState: !props.loading && !props.noDataMessage }), children: jsx("tr", { children: jsx("td", { className: "b-0", children: props.loading ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t(props.pagination?.pageInfo?.isCountCapped ? "table.pagination.full.capped" : "table.pagination.full", {
+                            }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t(props.pagination?.pageInfo?.isCountCapped ? "table.pagination.full.capped" : "table.pagination.full", {
                             count: props.getRowModel().rows.length,
                             total: props.pagination?.pageInfo?.count || 0,
                         }) }), props.pagination?.isLoading ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.3.222",
+  "version": "1.3.224",
   "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.172",
-    "@trackunit/shared-utils": "1.5.141",
-    "@trackunit/css-class-variance-utilities": "1.3.141",
-    "@trackunit/ui-icons": "1.3.141",
-    "@trackunit/react-table-base-components": "1.3.195",
-    "@trackunit/react-table-pagination": "1.3.141",
+    "@trackunit/react-components": "1.4.173",
+    "@trackunit/shared-utils": "1.5.142",
+    "@trackunit/css-class-variance-utilities": "1.3.142",
+    "@trackunit/ui-icons": "1.3.142",
+    "@trackunit/react-table-base-components": "1.3.196",
+    "@trackunit/react-table-pagination": "1.3.142",
     "@trackunit/react-form-components": "1.3.198",
-    "@trackunit/i18n-library-translation": "1.3.162",
-    "@trackunit/react-core-contexts-api": "1.4.149",
-    "@trackunit/react-test-setup": "1.0.31"
+    "@trackunit/i18n-library-translation": "1.3.163",
+    "@trackunit/react-core-contexts-api": "1.4.150",
+    "@trackunit/react-test-setup": "1.0.32"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/EmptyStateTable.d.ts

@@ -0,0 +1,15 @@
+import { CommonProps, EmptyStateProps } from "@trackunit/react-components";
+import { ReactElement } from "react";
+interface EmptyStateTableProps extends CommonProps {
+    emptyState?: EmptyStateProps;
+}
+/**
+ * A table component that displays an empty state when there are no data entries available.
+ *
+ * @param {EmptyStateTableProps} props - The props for the component.
+ * @param {string} [props.className] - Additional class names for styling.
+ * @param {EmptyStateProps} [props.emptyState] - Optional configuration for customizing the EmptyState component.
+ * @returns {ReactElement} A table body element containing the empty state.
+ */
+export declare const EmptyStateTable: ({ className, emptyState }: EmptyStateTableProps) => ReactElement;
+export {};

package/src/components/LoadingState.d.ts

@@ -0,0 +1,9 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactElement } from "react";
+/**
+ * A component to display a loading state with a spinner.
+ *
+ * @param {CommonProps} props - The props for the component, including an optional `className`.
+ * @returns {ReactElement} A table body element displaying a centered spinner.
+ */
+export declare const LoadingState: ({ className }: CommonProps) => ReactElement;

package/src/components/NoDataMessageState.d.ts

@@ -0,0 +1,13 @@
+import { CommonProps } from "@trackunit/react-components";
+import { ReactElement } from "react";
+interface NoDataMessageStateProps extends CommonProps {
+    message?: ReactElement | string;
+}
+/**
+ * Component to display a "No Data" state.
+ *
+ * @param {NoDataMessageStateProps} props - The props for the component.
+ * @returns {ReactElement} A component rendering a message for empty data states.
+ */
+export declare const NoDataMessageState: ({ message, className }: NoDataMessageStateProps) => ReactElement;
+export {};