@trackunit/react-table 0.0.228 → 0.0.233

package/index.cjs.js

@@ -41,24 +41,23 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var update__default = /*#__PURE__*/_interopDefaultLegacy(update);
 
 var defaultTranslations = {
-	"table.actionsheet.selected": "{{count}} selected",
 	"layout.actions.reset": "Reset",
-	"table.pagination.of": "of {{count}}",
-	"table.pagination.full": "Showing {{count}} of {{total}} results",
-	"table.pagination.page": "Page",
-	"table.results.plural": "{{count}} results",
-	"table.sorting.toolip": "Adjust sorting and direction",
+	"table.actionsheet.selected": "{{count}} selected",
 	"table.columnFilters.columns": "Columns",
 	"table.columnFilters.hiddenColumnCount": "{{count}} column hidden",
 	"table.columnFilters.hiddenColumnsCount": "{{count}} columns hidden",
 	"table.columnFilters.title": "Visible values",
 	"table.columnFilters.tooltip": "Customize visible values",
+	"table.error": "Something went wrong while fetching the data",
 	"table.exportFileName": "exported-data",
 	"table.format": "Format",
-	"table.results.plural.capped": "{{count}}+ results",
 	"table.noResults": "No results",
-	"table.error": "Something went wrong while fetching the data",
+	"table.pagination.full": "Showing {{count}} of {{total}} results",
+	"table.pagination.of": "of {{count}}",
+	"table.pagination.page": "Page",
 	"table.result": "{{count}} result",
+	"table.results.plural": "{{count}} results",
+	"table.results.plural.capped": "{{count}}+ results",
 	"table.rowDensity.compact": "Compact",
 	"table.rowDensity.spacious": "Spacious",
 	"table.search.placeholder": "Search...",
@@ -67,6 +66,7 @@ var defaultTranslations = {
 	"table.sorting.descending": "Descending",
 	"table.sorting.label": "Sorting",
 	"table.sorting.order": "Order",
+	"table.sorting.toolip": "Adjust sorting and direction",
 	"table.spacing": "Spacing",
 	"table.spacing.toolip": "Adjust row density"
 };
@@ -275,6 +275,18 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
                 moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 
+const noPagination = {
+    isLoading: false,
+    nextPage: () => { },
+    previousPage: () => { },
+    pageInfo: {
+        hasNextPage: false,
+        hasPreviousPage: false,
+        endCursor: null,
+        startCursor: null,
+    },
+};
+
 /**
  * Custom hook for implementing infinite scrolling in a table.
  *
@@ -333,19 +345,19 @@ const useInfiniteScroll = (props) => {
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Table = (_a) => {
-    var _b, _c;
+    var _b, _c, _d;
     var { rowHeight = 75 } = _a, props = __rest(_a, ["rowHeight"]);
     //we need a reference to the scrolling element for logic down below
     const tableContainerRef = React.useRef(null);
     const [t] = useTranslation();
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = useInfiniteScroll({
-        pagination: props.pagination,
+        pagination: props.pagination || noPagination,
         containerRef: tableContainerRef,
         rowSize: props.getRowModel().rows.length || 0,
         rowHeight,
     });
     const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxRuntime.jsxs(reactComponents.Card, { className: `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", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex", children: props.headerRightActions })] })), jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: `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", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center", children: props.headerRightActions })] })), jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -391,7 +403,7 @@ const Table = (_a) => {
                             }) })) : (jsxRuntime.jsx("tbody", { className: "min-h-[400px]", children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), 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("table.pagination.full", {
                             count: props.getRowModel().rows.length,
                             total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.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 })] }))] }));
+                        }) }), ((_d = props.pagination) === null || _d === void 0 ? void 0 : _d.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 })] }))] }));
 };
 
 const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-center"], {
@@ -544,7 +556,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
             densityChosen: selectedDensity,
         });
     };
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.spacing.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsPointingOut", size: "small" }), variant: "ghost-neutral", size: "small", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.spacing") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { children: jsxRuntime.jsxs("div", { className: "flex flex-col justify-start", children: [jsxRuntime.jsx(DensitySelection, { onClick: () => handleClick("compact"), text: t("table.rowDensity.compact"), icon: jsxRuntime.jsx(CompactIcon, {}), isSelected: density === "compact" }), jsxRuntime.jsx(DensitySelection, { onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious"), icon: jsxRuntime.jsx(SpaciousIcon, {}), isSelected: density === "spacious" })] }) }) })] }) }));
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.spacing.toolip"), placement: "bottom", dataTestId: "row-spacing", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsPointingOut", size: "small" }), variant: "ghost-neutral", size: "small", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.spacing") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { children: jsxRuntime.jsxs("div", { className: "flex flex-col justify-start", children: [jsxRuntime.jsx(DensitySelection, { onClick: () => handleClick("compact"), text: t("table.rowDensity.compact"), icon: jsxRuntime.jsx(CompactIcon, {}), isSelected: density === "compact" }), jsxRuntime.jsx(DensitySelection, { onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious"), icon: jsxRuntime.jsx(SpaciousIcon, {}), isSelected: density === "spacious" })] }) }) })] }) }));
 };
 const DensitySelection = ({ text, onClick, icon, isSelected }) => {
     return (jsxRuntime.jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsxRuntime.jsx("div", { className: "mr-1 flex", children: icon }), jsxRuntime.jsx(reactComponents.Text, { weight: "thick", children: text }), isSelected && (jsxRuntime.jsx("div", { className: "justify-endgrow flex", children: jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) }))] }));

package/index.esm.js

@@ -16,24 +16,23 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { SortOrder, validateStringAsAssetSortByProperty, validateStringAsSiteSortByProperty } from '@trackunit/react-core-contexts-api';
 
 var defaultTranslations = {
-	"table.actionsheet.selected": "{{count}} selected",
 	"layout.actions.reset": "Reset",
-	"table.pagination.of": "of {{count}}",
-	"table.pagination.full": "Showing {{count}} of {{total}} results",
-	"table.pagination.page": "Page",
-	"table.results.plural": "{{count}} results",
-	"table.sorting.toolip": "Adjust sorting and direction",
+	"table.actionsheet.selected": "{{count}} selected",
 	"table.columnFilters.columns": "Columns",
 	"table.columnFilters.hiddenColumnCount": "{{count}} column hidden",
 	"table.columnFilters.hiddenColumnsCount": "{{count}} columns hidden",
 	"table.columnFilters.title": "Visible values",
 	"table.columnFilters.tooltip": "Customize visible values",
+	"table.error": "Something went wrong while fetching the data",
 	"table.exportFileName": "exported-data",
 	"table.format": "Format",
-	"table.results.plural.capped": "{{count}}+ results",
 	"table.noResults": "No results",
-	"table.error": "Something went wrong while fetching the data",
+	"table.pagination.full": "Showing {{count}} of {{total}} results",
+	"table.pagination.of": "of {{count}}",
+	"table.pagination.page": "Page",
 	"table.result": "{{count}} result",
+	"table.results.plural": "{{count}} results",
+	"table.results.plural.capped": "{{count}}+ results",
 	"table.rowDensity.compact": "Compact",
 	"table.rowDensity.spacious": "Spacious",
 	"table.search.placeholder": "Search...",
@@ -42,6 +41,7 @@ var defaultTranslations = {
 	"table.sorting.descending": "Descending",
 	"table.sorting.label": "Sorting",
 	"table.sorting.order": "Order",
+	"table.sorting.toolip": "Adjust sorting and direction",
 	"table.spacing": "Spacing",
 	"table.spacing.toolip": "Adjust row density"
 };
@@ -250,6 +250,18 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
                 moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
 };
 
+const noPagination = {
+    isLoading: false,
+    nextPage: () => { },
+    previousPage: () => { },
+    pageInfo: {
+        hasNextPage: false,
+        hasPreviousPage: false,
+        endCursor: null,
+        startCursor: null,
+    },
+};
+
 /**
  * Custom hook for implementing infinite scrolling in a table.
  *
@@ -308,19 +320,19 @@ const useInfiniteScroll = (props) => {
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Table = (_a) => {
-    var _b, _c;
+    var _b, _c, _d;
     var { rowHeight = 75 } = _a, props = __rest(_a, ["rowHeight"]);
     //we need a reference to the scrolling element for logic down below
     const tableContainerRef = useRef(null);
     const [t] = useTranslation();
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize } = useInfiniteScroll({
-        pagination: props.pagination,
+        pagination: props.pagination || noPagination,
         containerRef: tableContainerRef,
         rowSize: props.getRowModel().rows.length || 0,
         rowHeight,
     });
     const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxs(Card, { className: `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", children: props.headerLeftActions }), jsx("div", { className: "flex", children: props.headerRightActions })] })), jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxs(TableRoot, { style: {
+    return (jsxs(Card, { className: `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", children: props.headerLeftActions }), jsx("div", { className: "flex items-center", children: props.headerRightActions })] })), jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxs(TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
@@ -366,7 +378,7 @@ const Table = (_a) => {
                             }) })) : (jsx("tbody", { className: "min-h-[400px]", children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), 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("table.pagination.full", {
                             count: props.getRowModel().rows.length,
                             total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.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 })] }))] }));
+                        }) }), ((_d = props.pagination) === null || _d === void 0 ? void 0 : _d.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 })] }))] }));
 };
 
 const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-center"], {
@@ -519,7 +531,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
             densityChosen: selectedDensity,
         });
     };
-    return (jsx(Tooltip, { label: t("table.spacing.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ArrowsPointingOut", size: "small" }), variant: "ghost-neutral", size: "small", children: jsx("span", { className: "hidden sm:block", children: t("table.spacing") }) }) }), jsx(PopoverContent, { children: jsx(MenuList, { children: jsxs("div", { className: "flex flex-col justify-start", children: [jsx(DensitySelection, { onClick: () => handleClick("compact"), text: t("table.rowDensity.compact"), icon: jsx(CompactIcon, {}), isSelected: density === "compact" }), jsx(DensitySelection, { onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious"), icon: jsx(SpaciousIcon, {}), isSelected: density === "spacious" })] }) }) })] }) }));
+    return (jsx(Tooltip, { label: t("table.spacing.toolip"), placement: "bottom", dataTestId: "row-spacing", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ArrowsPointingOut", size: "small" }), variant: "ghost-neutral", size: "small", children: jsx("span", { className: "hidden sm:block", children: t("table.spacing") }) }) }), jsx(PopoverContent, { children: jsx(MenuList, { children: jsxs("div", { className: "flex flex-col justify-start", children: [jsx(DensitySelection, { onClick: () => handleClick("compact"), text: t("table.rowDensity.compact"), icon: jsx(CompactIcon, {}), isSelected: density === "compact" }), jsx(DensitySelection, { onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious"), icon: jsx(SpaciousIcon, {}), isSelected: density === "spacious" })] }) }) })] }) }));
 };
 const DensitySelection = ({ text, onClick, icon, isSelected }) => {
     return (jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsx("div", { className: "mr-1 flex", children: icon }), jsx(Text, { weight: "thick", children: text }), isSelected && (jsx("div", { className: "justify-endgrow flex", children: jsx(Icon, { name: "Check", size: "small" }) }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.228",
+  "version": "0.0.233",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/Table.d.ts

@@ -3,7 +3,7 @@ import { Table as ReactTable, Row } from "@tanstack/react-table";
 import { CommonProps } from "@trackunit/react-components";
 import { RelayPagination } from "@trackunit/react-table-pagination";
 export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps {
-    pagination: RelayPagination;
+    pagination?: RelayPagination;
     headerLeftActions?: React.ReactNode;
     headerRightActions?: React.ReactNode;
     footerRightActions?: React.ReactNode;

package/src/noPagination.d.ts

@@ -0,0 +1,2 @@
+import { RelayPagination } from "@trackunit/react-table-pagination";
+export declare const noPagination: RelayPagination;

package/src/translation.d.ts

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

@@ -3,6 +3,7 @@ export { createColumnHelper, type ColumnDef, type VisibilityState } from "@tanst
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData extends RowData, TValue> {
         alignment?: Alignment;
+        exportable?: boolean;
         required?: boolean;
         subHeader?: string;
         hiddenByDefault?: boolean;