@trackunit/react-table 2.8.6 → 2.8.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.js +5 -7
- package/index.esm.js +6 -8
- package/package.json +10 -10
- package/src/Table.d.ts +3 -3
- package/migrations/entry.js.map +0 -1
package/index.cjs.js
CHANGED
|
@@ -1444,7 +1444,7 @@ const ColumnSorting = ({ canSort, sortingState = false }) => {
|
|
|
1444
1444
|
*
|
|
1445
1445
|
* ```
|
|
1446
1446
|
*/
|
|
1447
|
-
const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...props }) => {
|
|
1447
|
+
const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ref, ...props }) => {
|
|
1448
1448
|
//we need a reference to the scrolling element for logic down below
|
|
1449
1449
|
const tableScrollElementRef = react.useRef(null);
|
|
1450
1450
|
const [t] = useTranslation();
|
|
@@ -1527,10 +1527,8 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
|
|
|
1527
1527
|
header.column.getToggleSortingHandler()?.(event);
|
|
1528
1528
|
}
|
|
1529
1529
|
}, [props]);
|
|
1530
|
-
return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], style: style, children: [(props.headerLeftActions
|
|
1531
|
-
|
|
1532
|
-
((props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
|
|
1533
|
-
(props.headerRightActions !== undefined && props.headerRightActions !== null))
|
|
1530
|
+
return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], ref: ref, style: style, children: [sharedUtils.nonNullable(props.headerLeftActions) || sharedUtils.nonNullable(props.headerRightActions) ? (jsxRuntime.jsxs("div", { className: "flex-wrap-reverse-readable items-center gap-2 p-2", children: [sharedUtils.nonNullable(props.headerLeftActions) ? (jsxRuntime.jsx(reactComponents.HorizontalOverflowScroller, { className: "w-auto min-w-0", children: jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }) })) : null, sharedUtils.nonNullable(props.headerRightActions) ? (jsxRuntime.jsx(reactComponents.HorizontalOverflowScroller, { className: "ml-auto w-auto min-w-0", children: jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions }) })) : null] })) : null, props.subHeaderActions, jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", (sharedUtils.nonNullable(props.headerLeftActions) || sharedUtils.nonNullable(props.headerRightActions)) &&
|
|
1531
|
+
!sharedUtils.nonNullable(props.subHeaderActions)
|
|
1534
1532
|
? "border-t"
|
|
1535
1533
|
: ""), ref: tableScrollElementRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
|
|
1536
1534
|
height: hasResults ? "auto" : "100%",
|
|
@@ -1626,7 +1624,7 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
|
|
|
1626
1624
|
}
|
|
1627
1625
|
}) })) : (jsxRuntime.jsx("tbody", { className: cvaTBody({
|
|
1628
1626
|
emptyState: !loading && (props.noDataMessage === undefined || props.noDataMessage === ""),
|
|
1629
|
-
}), children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0", "data-testid": "table-loading-spinner" })) : props.noDataMessage !== undefined && props.noDataMessage !== "" ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", "data-testid": "table-footer", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: typeof props.pagination?.pageInfo?.count === "number"
|
|
1627
|
+
}), children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0", "data-testid": "table-loading-spinner" })) : props.noDataMessage !== undefined && props.noDataMessage !== "" ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 p-2", "data-testid": "table-footer", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: typeof props.pagination?.pageInfo?.count === "number"
|
|
1630
1628
|
? t(props.pagination.pageInfo.isCountCapped ? "table.pagination.full.capped" : "table.pagination.full", {
|
|
1631
1629
|
count: props.getRowModel().rows.length,
|
|
1632
1630
|
total: props.pagination.pageInfo.count,
|
|
@@ -1634,7 +1632,7 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
|
|
|
1634
1632
|
: t(props.pagination?.pageInfo?.hasNextPage ? "table.pagination.full.capped" : "table.pagination.full", {
|
|
1635
1633
|
count: props.getRowModel().rows.length,
|
|
1636
1634
|
total: props.getRowModel().rows.length,
|
|
1637
|
-
}) }), props.pagination?.isLoading ? (jsxRuntime.jsx("span", {
|
|
1635
|
+
}) }), props.pagination?.isLoading ? (jsxRuntime.jsx("span", { children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, sharedUtils.nonNullable(props.footerRightActions) ? (jsxRuntime.jsx(reactComponents.HorizontalOverflowScroller, { className: "ml-auto w-auto min-w-0", children: jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.footerRightActions }) })) : null] }))] }));
|
|
1638
1636
|
};
|
|
1639
1637
|
const cvaTBody = cssClassVarianceUtilities.cva({
|
|
1640
1638
|
base: ["min-h-[40dvh]"],
|
package/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
|
|
3
|
-
import { Icon, MenuItem, Button, Tooltip, useOverflowItems, MoreMenu, MenuContent, Spacer, usePersistedState, useDebounce, Text, cvaInteractableItem, Popover, PopoverTrigger, IconButton, PopoverContent, cvaMenuList, cvaMenu, useBidirectionalScroll, noPagination, Card, Spinner, EmptyState } from '@trackunit/react-components';
|
|
3
|
+
import { Icon, MenuItem, Button, Tooltip, useOverflowItems, MoreMenu, MenuContent, Spacer, usePersistedState, useDebounce, Text, cvaInteractableItem, Popover, PopoverTrigger, IconButton, PopoverContent, cvaMenuList, cvaMenu, useBidirectionalScroll, noPagination, Card, HorizontalOverflowScroller, Spinner, EmptyState } from '@trackunit/react-components';
|
|
4
4
|
import { Link } from '@tanstack/react-router';
|
|
5
5
|
import { objectValues, VISIBLE_ONLY_COLUMN_VISIBILITY_KEY, objectKeys, nonNullable, objectEntries } from '@trackunit/shared-utils';
|
|
6
6
|
import { useMemo, Children, cloneElement, useCallback, useRef, useState, useEffect, createElement } from 'react';
|
|
@@ -1443,7 +1443,7 @@ const ColumnSorting = ({ canSort, sortingState = false }) => {
|
|
|
1443
1443
|
*
|
|
1444
1444
|
* ```
|
|
1445
1445
|
*/
|
|
1446
|
-
const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...props }) => {
|
|
1446
|
+
const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ref, ...props }) => {
|
|
1447
1447
|
//we need a reference to the scrolling element for logic down below
|
|
1448
1448
|
const tableScrollElementRef = useRef(null);
|
|
1449
1449
|
const [t] = useTranslation();
|
|
@@ -1526,10 +1526,8 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
|
|
|
1526
1526
|
header.column.getToggleSortingHandler()?.(event);
|
|
1527
1527
|
}
|
|
1528
1528
|
}, [props]);
|
|
1529
|
-
return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], style: style, children: [(props.headerLeftActions
|
|
1530
|
-
|
|
1531
|
-
((props.headerLeftActions !== undefined && props.headerLeftActions !== null) ||
|
|
1532
|
-
(props.headerRightActions !== undefined && props.headerRightActions !== null))
|
|
1529
|
+
return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], ref: ref, style: style, children: [nonNullable(props.headerLeftActions) || nonNullable(props.headerRightActions) ? (jsxs("div", { className: "flex-wrap-reverse-readable items-center gap-2 p-2", children: [nonNullable(props.headerLeftActions) ? (jsx(HorizontalOverflowScroller, { className: "w-auto min-w-0", children: jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }) })) : null, nonNullable(props.headerRightActions) ? (jsx(HorizontalOverflowScroller, { className: "ml-auto w-auto min-w-0", children: jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions }) })) : null] })) : null, props.subHeaderActions, jsx("div", { className: twMerge("h-full overflow-x-auto overflow-y-scroll border-b border-neutral-200", (nonNullable(props.headerLeftActions) || nonNullable(props.headerRightActions)) &&
|
|
1530
|
+
!nonNullable(props.subHeaderActions)
|
|
1533
1531
|
? "border-t"
|
|
1534
1532
|
: ""), ref: tableScrollElementRef, children: jsxs(TableRoot, { style: {
|
|
1535
1533
|
height: hasResults ? "auto" : "100%",
|
|
@@ -1625,7 +1623,7 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
|
|
|
1625
1623
|
}
|
|
1626
1624
|
}) })) : (jsx("tbody", { className: cvaTBody({
|
|
1627
1625
|
emptyState: !loading && (props.noDataMessage === undefined || props.noDataMessage === ""),
|
|
1628
|
-
}), children: jsx("tr", { children: jsx("td", { className: "b-0", children: loading ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0", "data-testid": "table-loading-spinner" })) : props.noDataMessage !== undefined && props.noDataMessage !== "" ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", "data-testid": "table-footer", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: typeof props.pagination?.pageInfo?.count === "number"
|
|
1626
|
+
}), children: jsx("tr", { children: jsx("td", { className: "b-0", children: loading ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0", "data-testid": "table-loading-spinner" })) : props.noDataMessage !== undefined && props.noDataMessage !== "" ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), hideFooter ? null : (jsxs("div", { className: "flex flex-wrap items-center gap-2 p-2", "data-testid": "table-footer", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: typeof props.pagination?.pageInfo?.count === "number"
|
|
1629
1627
|
? t(props.pagination.pageInfo.isCountCapped ? "table.pagination.full.capped" : "table.pagination.full", {
|
|
1630
1628
|
count: props.getRowModel().rows.length,
|
|
1631
1629
|
total: props.pagination.pageInfo.count,
|
|
@@ -1633,7 +1631,7 @@ const Table = ({ rowHeight = 50, loading = false, hideFooter = false, style, ...
|
|
|
1633
1631
|
: t(props.pagination?.pageInfo?.hasNextPage ? "table.pagination.full.capped" : "table.pagination.full", {
|
|
1634
1632
|
count: props.getRowModel().rows.length,
|
|
1635
1633
|
total: props.getRowModel().rows.length,
|
|
1636
|
-
}) }), props.pagination?.isLoading ? (jsx("span", {
|
|
1634
|
+
}) }), props.pagination?.isLoading ? (jsx("span", { children: jsx(Spinner, { size: "small" }) })) : null, nonNullable(props.footerRightActions) ? (jsx(HorizontalOverflowScroller, { className: "ml-auto w-auto min-w-0", children: jsx("div", { className: "flex items-center gap-2", children: props.footerRightActions }) })) : null] }))] }));
|
|
1637
1635
|
};
|
|
1638
1636
|
const cvaTBody = cva({
|
|
1639
1637
|
base: ["min-h-[40dvh]"],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-table",
|
|
3
|
-
"version": "2.8.
|
|
3
|
+
"version": "2.8.8",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -11,15 +11,15 @@
|
|
|
11
11
|
"react-dnd": "16.0.1",
|
|
12
12
|
"react-dnd-html5-backend": "16.0.1",
|
|
13
13
|
"tailwind-merge": "^2.0.0",
|
|
14
|
-
"@trackunit/react-components": "3.1.
|
|
15
|
-
"@trackunit/react-core-hooks": "1.22.
|
|
16
|
-
"@trackunit/shared-utils": "1.16.
|
|
17
|
-
"@trackunit/css-class-variance-utilities": "2.0.
|
|
18
|
-
"@trackunit/ui-icons": "1.14.
|
|
19
|
-
"@trackunit/react-table-base-components": "2.9.
|
|
20
|
-
"@trackunit/react-form-components": "2.7.
|
|
21
|
-
"@trackunit/i18n-library-translation": "2.5.
|
|
22
|
-
"@trackunit/iris-app-runtime-core-api": "1.18.
|
|
14
|
+
"@trackunit/react-components": "3.1.6",
|
|
15
|
+
"@trackunit/react-core-hooks": "1.22.3",
|
|
16
|
+
"@trackunit/shared-utils": "1.16.53",
|
|
17
|
+
"@trackunit/css-class-variance-utilities": "2.0.18",
|
|
18
|
+
"@trackunit/ui-icons": "1.14.47",
|
|
19
|
+
"@trackunit/react-table-base-components": "2.9.8",
|
|
20
|
+
"@trackunit/react-form-components": "2.7.8",
|
|
21
|
+
"@trackunit/i18n-library-translation": "2.5.3",
|
|
22
|
+
"@trackunit/iris-app-runtime-core-api": "1.18.3",
|
|
23
23
|
"zod": "^3.25.76"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
package/src/Table.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Table as ReactTable, Row } from "@tanstack/react-table";
|
|
2
|
-
import { CommonProps, EmptyStateProps, RelayPagination, type Styleable } from "@trackunit/react-components";
|
|
2
|
+
import { CommonProps, EmptyStateProps, Refable, RelayPagination, type Styleable } from "@trackunit/react-components";
|
|
3
3
|
import { ReactElement, ReactNode } from "react";
|
|
4
4
|
import "./table-animations.css";
|
|
5
|
-
export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps, Styleable {
|
|
5
|
+
export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps, Styleable, Refable<HTMLDivElement> {
|
|
6
6
|
/**
|
|
7
7
|
* Relay-style pagination object for infinite scroll. Use with `usePaginationQuery` hook
|
|
8
8
|
* to automatically handle fetching more data as the user scrolls.
|
|
@@ -177,4 +177,4 @@ export interface TableProps<TData extends object> extends ReactTable<TData>, Com
|
|
|
177
177
|
*
|
|
178
178
|
* ```
|
|
179
179
|
*/
|
|
180
|
-
export declare const Table: <TData extends object>({ rowHeight, loading, hideFooter, style, ...props }: TableProps<TData>) => ReactElement;
|
|
180
|
+
export declare const Table: <TData extends object>({ rowHeight, loading, hideFooter, style, ref, ...props }: TableProps<TData>) => ReactElement;
|
package/migrations/entry.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/table/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}
|