@purpurds/table 7.6.0 → 7.7.0
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/dist/LICENSE.txt +20 -20
- package/dist/cell-types/link-cell.d.ts.map +1 -1
- package/dist/story-utils/column-def.d.ts.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/table-column-header-cell.d.ts.map +1 -1
- package/dist/table-export-drawer.d.ts +2 -2
- package/dist/table-export-drawer.d.ts.map +1 -1
- package/dist/table-header.d.ts.map +1 -1
- package/dist/table-row-cell-skeleton.d.ts.map +1 -1
- package/dist/table-row-cell.d.ts.map +1 -1
- package/dist/table.cjs.js +79 -79
- package/dist/table.cjs.js.map +1 -1
- package/dist/table.d.ts +1 -1
- package/dist/table.d.ts.map +1 -1
- package/dist/table.es.js +7734 -8000
- package/dist/table.es.js.map +1 -1
- package/dist/types.d.ts +3 -2
- package/dist/types.d.ts.map +1 -1
- package/dist/use-truncated-hook.d.ts +1 -0
- package/dist/use-truncated-hook.d.ts.map +1 -1
- package/dist/utils/custom-functions.d.ts +1 -0
- package/dist/utils/custom-functions.d.ts.map +1 -1
- package/package.json +23 -23
- package/src/cell-types/link-cell.tsx +5 -2
- package/src/cell-types/number-cell.tsx +2 -2
- package/src/story-utils/column-def.ts +5 -1
- package/src/table-body.tsx +1 -1
- package/src/table-column-header-cell.tsx +72 -30
- package/src/table-export-drawer.tsx +2 -2
- package/src/table-header.tsx +3 -7
- package/src/table-row-cell-skeleton.tsx +8 -11
- package/src/table-row-cell.tsx +10 -14
- package/src/table-row.tsx +1 -1
- package/src/table-toolbar.module.scss +2 -0
- package/src/table.module.scss +18 -3
- package/src/table.stories.tsx +0 -2
- package/src/table.tsx +2 -1
- package/src/types.ts +3 -2
- package/src/use-truncated-hook.tsx +35 -15
- package/src/utils/custom-functions.ts +7 -2
package/dist/types.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
1
2
|
import { HeadingTagType } from '@purpurds/heading';
|
|
2
3
|
import { SelectProps } from '@purpurds/select';
|
|
3
4
|
import { Cell, FilterFn, Row, RowData, SortingFn } from '@tanstack/react-table';
|
|
@@ -150,7 +151,7 @@ export type WithEmptyTableProps = {
|
|
|
150
151
|
/**
|
|
151
152
|
* Icon to display in the empty table state.
|
|
152
153
|
*/
|
|
153
|
-
emptyTableIcon?:
|
|
154
|
+
emptyTableIcon?: ReactNode;
|
|
154
155
|
};
|
|
155
156
|
export type WithoutEmptyTableProps = {
|
|
156
157
|
emptyTableCopy?: never;
|
|
@@ -196,7 +197,7 @@ export type WithRowSelectionProps<TData> = {
|
|
|
196
197
|
/**
|
|
197
198
|
* setShowOnlySelectedRows - Function to update the showOnlySelectedRows state.
|
|
198
199
|
*/
|
|
199
|
-
setShowOnlySelectedRows:
|
|
200
|
+
setShowOnlySelectedRows: Dispatch<SetStateAction<boolean>>;
|
|
200
201
|
};
|
|
201
202
|
export type WithoutRowSelectionProps = {
|
|
202
203
|
enableRowSelection?: false | undefined;
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-truncated-hook.d.ts","sourceRoot":"","sources":["../src/use-truncated-hook.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,mBAAmB
|
|
1
|
+
{"version":3,"file":"use-truncated-hook.d.ts","sourceRoot":"","sources":["../src/use-truncated-hook.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,mBAAmB;;;;;;CA6CxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { Row } from '@tanstack/react-table';
|
|
|
3
3
|
export declare const filterOnFilterKey: <TData>(row: Row<TData>, columnId: string, filterValue: {
|
|
4
4
|
filterKey: string;
|
|
5
5
|
value: string;
|
|
6
|
+
partialMatch?: boolean;
|
|
6
7
|
}) => boolean;
|
|
7
8
|
export declare const sortOnBadgeVariant: <TData>(row1: Row<TData>, row0: Row<TData>, columnId: string) => number;
|
|
8
9
|
export declare const sortOnBadgeValue: <TData>(row1: Row<TData>, row0: Row<TData>, columnId: string) => number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-functions.d.ts","sourceRoot":"","sources":["../../src/utils/custom-functions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEjD,eAAO,MAAM,iBAAiB,GAAI,KAAK,OAChC,GAAG,CAAC,KAAK,CAAC,YACL,MAAM,eACH;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"custom-functions.d.ts","sourceRoot":"","sources":["../../src/utils/custom-functions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEjD,eAAO,MAAM,iBAAiB,GAAI,KAAK,OAChC,GAAG,CAAC,KAAK,CAAC,YACL,MAAM,eACH;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,KACA,OAQF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,KAAK,QAChC,GAAG,CAAC,KAAK,CAAC,QACV,GAAG,CAAC,KAAK,CAAC,YACN,MAAM,KACf,MAWF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,QAC9B,GAAG,CAAC,KAAK,CAAC,QACV,GAAG,CAAC,KAAK,CAAC,YACN,MAAM,KACf,MAcF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/table",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.7.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/table.cjs.js",
|
|
6
6
|
"types": "./dist/table.d.ts",
|
|
@@ -17,22 +17,22 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@tanstack/react-table": "~8.21.2",
|
|
19
19
|
"classnames": "~2.5.0",
|
|
20
|
-
"@purpurds/badge": "7.
|
|
21
|
-
"@purpurds/button": "7.
|
|
22
|
-
"@purpurds/checkbox": "7.
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
25
|
-
"@purpurds/
|
|
26
|
-
"@purpurds/
|
|
27
|
-
"@purpurds/
|
|
28
|
-
"@purpurds/
|
|
29
|
-
"@purpurds/select": "7.
|
|
30
|
-
"@purpurds/skeleton": "7.
|
|
31
|
-
"@purpurds/text-field": "7.
|
|
32
|
-
"@purpurds/toggle": "7.
|
|
33
|
-
"@purpurds/tokens": "7.
|
|
34
|
-
"@purpurds/tooltip": "7.
|
|
35
|
-
"@purpurds/visually-hidden": "7.
|
|
20
|
+
"@purpurds/badge": "7.7.0",
|
|
21
|
+
"@purpurds/button": "7.7.0",
|
|
22
|
+
"@purpurds/checkbox": "7.7.0",
|
|
23
|
+
"@purpurds/cta-link": "7.7.0",
|
|
24
|
+
"@purpurds/drawer": "7.7.0",
|
|
25
|
+
"@purpurds/heading": "7.7.0",
|
|
26
|
+
"@purpurds/icon": "7.7.0",
|
|
27
|
+
"@purpurds/link": "7.7.0",
|
|
28
|
+
"@purpurds/paragraph": "7.7.0",
|
|
29
|
+
"@purpurds/select": "7.7.0",
|
|
30
|
+
"@purpurds/skeleton": "7.7.0",
|
|
31
|
+
"@purpurds/text-field": "7.7.0",
|
|
32
|
+
"@purpurds/toggle": "7.7.0",
|
|
33
|
+
"@purpurds/tokens": "7.7.0",
|
|
34
|
+
"@purpurds/tooltip": "7.7.0",
|
|
35
|
+
"@purpurds/visually-hidden": "7.7.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@rushstack/eslint-patch": "~1.10.0",
|
|
@@ -57,13 +57,13 @@
|
|
|
57
57
|
"vitest": "^3.1.2",
|
|
58
58
|
"vitest-axe": "~0.1.0",
|
|
59
59
|
"vitest-canvas-mock": "~0.3.3",
|
|
60
|
-
"@purpurds/autocomplete": "7.
|
|
60
|
+
"@purpurds/autocomplete": "7.7.0",
|
|
61
61
|
"@purpurds/component-rig": "1.0.0",
|
|
62
|
-
"@purpurds/
|
|
63
|
-
"@purpurds/
|
|
64
|
-
"@purpurds/
|
|
65
|
-
"@purpurds/
|
|
66
|
-
"@purpurds/
|
|
62
|
+
"@purpurds/label": "7.7.0",
|
|
63
|
+
"@purpurds/listbox": "7.7.0",
|
|
64
|
+
"@purpurds/pagination": "7.7.0",
|
|
65
|
+
"@purpurds/illustrative-icon": "7.7.0",
|
|
66
|
+
"@purpurds/grid": "7.7.0"
|
|
67
67
|
},
|
|
68
68
|
"scripts": {
|
|
69
69
|
"build:dev": "vite",
|
|
@@ -16,7 +16,8 @@ export type LinkCellProps<TData> = {
|
|
|
16
16
|
|
|
17
17
|
export const LinkCell = <TData extends RowData>({ cell }: LinkCellProps<TData>) => {
|
|
18
18
|
const value = cell.getValue<LinkProps>();
|
|
19
|
-
const { showPopover, containerRef, onMouseEnter, onMouseLeave } =
|
|
19
|
+
const { hasPopover, showPopover, containerRef, onMouseEnter, onMouseLeave } =
|
|
20
|
+
useTruncatedTooltip();
|
|
20
21
|
|
|
21
22
|
if (!value) {
|
|
22
23
|
return <EmptyCell />;
|
|
@@ -37,7 +38,9 @@ export const LinkCell = <TData extends RowData>({ cell }: LinkCellProps<TData>)
|
|
|
37
38
|
onMouseLeave={onMouseLeave}
|
|
38
39
|
>
|
|
39
40
|
<Link
|
|
40
|
-
className={cx("purpur-table-row-cell__truncate"
|
|
41
|
+
className={cx("purpur-table-row-cell__truncate", "purpur-table-row-cell__link", {
|
|
42
|
+
"purpur-table-row-cell__link--has-popover": hasPopover,
|
|
43
|
+
})}
|
|
41
44
|
variant={variant ?? "text"}
|
|
42
45
|
href={href}
|
|
43
46
|
onClick={(e) => {
|
|
@@ -12,10 +12,10 @@ export type NumberCellProps<TData> = {
|
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
export const NumberCell = <TData extends RowData>({ cell }: NumberCellProps<TData>) => {
|
|
15
|
-
const text = cell.getValue<string>();
|
|
15
|
+
const text = cell.getValue<string | number>();
|
|
16
16
|
const rightAlignCell = cell.column.columnDef.meta?.numberCellAlignment === "right";
|
|
17
17
|
|
|
18
|
-
if (!text) {
|
|
18
|
+
if (!text && text !== 0) {
|
|
19
19
|
return <EmptyCell />;
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -69,8 +69,12 @@ export const columnDef = [
|
|
|
69
69
|
header: "Link",
|
|
70
70
|
size: 150,
|
|
71
71
|
enableSorting: false,
|
|
72
|
-
enableColumnFilter:
|
|
72
|
+
enableColumnFilter: true,
|
|
73
|
+
filterFn: "filterOnFilterKey",
|
|
73
74
|
meta: {
|
|
75
|
+
filterKey: "children",
|
|
76
|
+
filterVariant: "string",
|
|
77
|
+
filterPlaceholder: "Search by link",
|
|
74
78
|
cellType: "link",
|
|
75
79
|
},
|
|
76
80
|
}),
|
package/src/table-body.tsx
CHANGED
|
@@ -13,7 +13,7 @@ type TableBodyProps = {
|
|
|
13
13
|
const rootClassName = "purpur-table-body";
|
|
14
14
|
|
|
15
15
|
const TableBody = ({ children, className, ...props }: TableBodyProps) => {
|
|
16
|
-
const classes = cx(
|
|
16
|
+
const classes = cx(className, rootClassName);
|
|
17
17
|
|
|
18
18
|
return (
|
|
19
19
|
<tbody className={classes} {...props}>
|
|
@@ -7,11 +7,19 @@ import { IconSorter } from "@purpurds/icon/sorter";
|
|
|
7
7
|
import { Paragraph } from "@purpurds/paragraph";
|
|
8
8
|
import { Select, type SelectProps } from "@purpurds/select";
|
|
9
9
|
import { TextField } from "@purpurds/text-field";
|
|
10
|
+
import { Tooltip } from "@purpurds/tooltip";
|
|
10
11
|
import { VisuallyHidden } from "@purpurds/visually-hidden";
|
|
11
|
-
import {
|
|
12
|
+
import {
|
|
13
|
+
flexRender,
|
|
14
|
+
type Header,
|
|
15
|
+
type RowData,
|
|
16
|
+
type SortDirection,
|
|
17
|
+
type Table,
|
|
18
|
+
} from "@tanstack/react-table";
|
|
12
19
|
import c from "classnames/bind";
|
|
13
20
|
|
|
14
21
|
import styles from "./table.module.scss";
|
|
22
|
+
import useTruncatedTooltip from "./use-truncated-hook";
|
|
15
23
|
import { pxToRemString } from "./utils/unit-conversions";
|
|
16
24
|
const cx = c.bind(styles);
|
|
17
25
|
|
|
@@ -111,20 +119,16 @@ export const TableColumnHeaderCell = <TData extends RowData>({
|
|
|
111
119
|
return (
|
|
112
120
|
<th
|
|
113
121
|
ref={elementRef}
|
|
114
|
-
className={cx(
|
|
115
|
-
|
|
116
|
-
rootClassName,
|
|
117
|
-
{
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
[`${rootClassName}__border-radius-first-cell`]: isFirstColumn,
|
|
125
|
-
[`${rootClassName}__border-radius-last-cell`]: isLastColumn,
|
|
126
|
-
},
|
|
127
|
-
])}
|
|
122
|
+
className={cx(className, rootClassName, {
|
|
123
|
+
[`${rootClassName}__checkbox`]: isCheckBox,
|
|
124
|
+
[`${rootClassName}__sticky-column`]: stickyColumn,
|
|
125
|
+
[`${rootClassName}__sticky-header`]: stickyHeaders,
|
|
126
|
+
[`${rootClassName}__sticky-column__with-sticky-border`]: isScrolled && showBorder,
|
|
127
|
+
[`${rootClassName}__first-header-visible`]: isFirstColumn && isVisible,
|
|
128
|
+
[`${rootClassName}__last-header-visible`]: isLastColumn && isVisible,
|
|
129
|
+
[`${rootClassName}__border-radius-first-cell`]: isFirstColumn,
|
|
130
|
+
[`${rootClassName}__border-radius-last-cell`]: isLastColumn,
|
|
131
|
+
})}
|
|
128
132
|
style={{
|
|
129
133
|
// If column resizing is enabled Don't use column.getSize() on every header and every data cell. Instead, calculate all column widths once upfront, memoized! https://tanstack.com/table/latest/docs/guide/column-sizing#column-sizing-guide
|
|
130
134
|
maxWidth: widthInRemString,
|
|
@@ -239,25 +243,49 @@ const HeaderParagraph = <TData extends RowData>({
|
|
|
239
243
|
}: {
|
|
240
244
|
header: Header<TData, unknown>;
|
|
241
245
|
className?: string;
|
|
242
|
-
}) =>
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
246
|
+
}) => {
|
|
247
|
+
const { showPopover, containerRef, onMouseEnter, onMouseLeave } = useTruncatedTooltip();
|
|
248
|
+
const children = flexRender(header.column.columnDef.header, header.getContext());
|
|
249
|
+
|
|
250
|
+
const content = (
|
|
251
|
+
<div
|
|
252
|
+
ref={containerRef}
|
|
253
|
+
className={cx("purpur-table-row-cell__truncate-wrapper")}
|
|
254
|
+
onMouseEnter={onMouseEnter}
|
|
255
|
+
onMouseLeave={onMouseLeave}
|
|
256
|
+
>
|
|
257
|
+
<Paragraph
|
|
258
|
+
data-testid="purpur-table-column-header-cell-title"
|
|
259
|
+
variant="paragraph-100-bold"
|
|
260
|
+
className={cx(className, "purpur-table-row-cell__truncate")}
|
|
261
|
+
>
|
|
262
|
+
{children}
|
|
263
|
+
</Paragraph>
|
|
264
|
+
</div>
|
|
265
|
+
);
|
|
266
|
+
return (
|
|
267
|
+
<Tooltip
|
|
268
|
+
position="top"
|
|
269
|
+
align="center"
|
|
270
|
+
triggerElement={content}
|
|
271
|
+
// @ts-expect-error open does not exist on tooltip but gets passed down to radix tooltip with ...props
|
|
272
|
+
open={showPopover}
|
|
273
|
+
contentClassName={cx("purpur-table-row-cell__tooltip-content")}
|
|
274
|
+
>
|
|
275
|
+
{children}
|
|
276
|
+
</Tooltip>
|
|
277
|
+
);
|
|
278
|
+
};
|
|
251
279
|
|
|
252
280
|
const getIcon = (sortingDirection: SortDirection | false) => {
|
|
253
281
|
switch (sortingDirection) {
|
|
254
282
|
case "desc":
|
|
255
|
-
return <IconArrowDown size="xs" />;
|
|
283
|
+
return <IconArrowDown size="xs" className={cx(`${rootClassName}__sortable-icon`)} />;
|
|
256
284
|
case "asc":
|
|
257
|
-
return <IconArrowUp size="xs" />;
|
|
285
|
+
return <IconArrowUp size="xs" className={cx(`${rootClassName}__sortable-icon`)} />;
|
|
258
286
|
case false:
|
|
259
287
|
default:
|
|
260
|
-
return <IconSorter size="xs" />;
|
|
288
|
+
return <IconSorter size="xs" className={cx(`${rootClassName}__sortable-icon`)} />;
|
|
261
289
|
}
|
|
262
290
|
};
|
|
263
291
|
|
|
@@ -281,12 +309,26 @@ const Filter = <TData extends RowData>({ header }: { header: Header<TData, unkno
|
|
|
281
309
|
header.column.columnDef.meta ?? {};
|
|
282
310
|
|
|
283
311
|
if (filterVariant === "string") {
|
|
284
|
-
const columnFilterValue =
|
|
312
|
+
const columnFilterValue = filterKey
|
|
313
|
+
? (header.column.getFilterValue() as {
|
|
314
|
+
filterKey: string;
|
|
315
|
+
value: string;
|
|
316
|
+
})
|
|
317
|
+
: (header.column.getFilterValue() as string);
|
|
285
318
|
return (
|
|
286
319
|
<TextField
|
|
287
|
-
onChange={(event) =>
|
|
320
|
+
onChange={(event) => {
|
|
321
|
+
const filter = filterKey
|
|
322
|
+
? { filterKey, value: event.target.value, partialMatch: true }
|
|
323
|
+
: event.target.value;
|
|
324
|
+
header.column.setFilterValue(filter);
|
|
325
|
+
}}
|
|
288
326
|
type="text"
|
|
289
|
-
value={
|
|
327
|
+
value={
|
|
328
|
+
(typeof columnFilterValue === "object" && "value" in columnFilterValue
|
|
329
|
+
? columnFilterValue.value
|
|
330
|
+
: columnFilterValue) ?? ""
|
|
331
|
+
}
|
|
290
332
|
placeholder={filterPlaceholder}
|
|
291
333
|
aria-label={filterAriaLabel}
|
|
292
334
|
/>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { type Dispatch, type SetStateAction } from "react";
|
|
2
2
|
import { Button } from "@purpurds/button";
|
|
3
3
|
import { Drawer } from "@purpurds/drawer";
|
|
4
4
|
import c from "classnames/bind";
|
|
@@ -18,7 +18,7 @@ export type TableExportDrawerProps = {
|
|
|
18
18
|
exportFormats: string[];
|
|
19
19
|
copy: TableExportDrawerCopyProps;
|
|
20
20
|
onExportData: (format: string) => void;
|
|
21
|
-
setDrawerIsOpen:
|
|
21
|
+
setDrawerIsOpen: Dispatch<SetStateAction<boolean>>;
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
const rootClassName = "purpur-table-export-drawer";
|
package/src/table-header.tsx
CHANGED
|
@@ -19,13 +19,9 @@ export const TableHeader = ({
|
|
|
19
19
|
columnFiltersEnabled,
|
|
20
20
|
...props
|
|
21
21
|
}: TableHeaderProps) => {
|
|
22
|
-
const classes = cx(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
{
|
|
26
|
-
[`${rootClassName}--has-filters`]: columnFiltersEnabled,
|
|
27
|
-
},
|
|
28
|
-
]);
|
|
22
|
+
const classes = cx(className, rootClassName, {
|
|
23
|
+
[`${rootClassName}--has-filters`]: columnFiltersEnabled,
|
|
24
|
+
});
|
|
29
25
|
|
|
30
26
|
return (
|
|
31
27
|
<thead className={classes} {...props}>
|
|
@@ -28,17 +28,14 @@ const TableRowCellSkeleton = ({
|
|
|
28
28
|
showBorder,
|
|
29
29
|
cellWidth,
|
|
30
30
|
}: TableRowCellSkeletonProps) => {
|
|
31
|
-
const classes = cx(
|
|
32
|
-
rootClassName,
|
|
33
|
-
{
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
[`${rootClassName}__last-row-last-cell-visible`]: isLastCell && isLastRow,
|
|
40
|
-
},
|
|
41
|
-
]);
|
|
31
|
+
const classes = cx(rootClassName, {
|
|
32
|
+
[`${rootClassName}__sticky-column`]: stickyColumn,
|
|
33
|
+
[`${rootClassName}__sticky-column__with-sticky-border`]: isScrolled && showBorder,
|
|
34
|
+
[`${rootClassName}__border-radius-first-cell`]: isFirstCell && isLastRow,
|
|
35
|
+
[`${rootClassName}__border-radius-last-cell`]: isLastCell && isLastRow,
|
|
36
|
+
[`${rootClassName}__last-row-first-cell-visible`]: isFirstCell && isLastRow,
|
|
37
|
+
[`${rootClassName}__last-row-last-cell-visible`]: isLastCell && isLastRow,
|
|
38
|
+
});
|
|
42
39
|
|
|
43
40
|
const cellWidthString = typeof cellWidth === "string" ? cellWidth : pxToRemString(cellWidth);
|
|
44
41
|
|
package/src/table-row-cell.tsx
CHANGED
|
@@ -83,20 +83,16 @@ const TableRowCell = <TData extends RowData>({
|
|
|
83
83
|
};
|
|
84
84
|
}, []);
|
|
85
85
|
|
|
86
|
-
const classes = cx(
|
|
87
|
-
|
|
88
|
-
rootClassName,
|
|
89
|
-
{
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
[`${rootClassName}__last-row-last-cell-visible`]:
|
|
97
|
-
(cell?.column.getIsLastColumn() || isLastCell) && isVisible && isLastRow,
|
|
98
|
-
},
|
|
99
|
-
]);
|
|
86
|
+
const classes = cx(className, rootClassName, {
|
|
87
|
+
[`${rootClassName}__sticky-column`]: stickyColumn,
|
|
88
|
+
[`${rootClassName}__sticky-column__with-sticky-border`]: isScrolled && showBorder,
|
|
89
|
+
[`${rootClassName}__border-radius-first-cell`]: isFirstCell && isLastRow,
|
|
90
|
+
[`${rootClassName}__border-radius-last-cell`]: isLastCell && isLastRow,
|
|
91
|
+
[`${rootClassName}__last-row-first-cell-visible`]:
|
|
92
|
+
(cell?.column.getIsFirstColumn() || isFirstCell) && isVisible && isLastRow,
|
|
93
|
+
[`${rootClassName}__last-row-last-cell-visible`]:
|
|
94
|
+
(cell?.column.getIsLastColumn() || isLastCell) && isVisible && isLastRow,
|
|
95
|
+
});
|
|
100
96
|
|
|
101
97
|
const cellContent = cell ? getCellContent(cell) : children;
|
|
102
98
|
|
package/src/table-row.tsx
CHANGED
|
@@ -21,7 +21,7 @@ const TableRow = ({
|
|
|
21
21
|
}: TableRowProps) => (
|
|
22
22
|
<tr
|
|
23
23
|
data-testid={dataTestId}
|
|
24
|
-
className={cx(
|
|
24
|
+
className={cx(className, rootClassName, { [`${rootClassName}--selected`]: isSelected })}
|
|
25
25
|
>
|
|
26
26
|
{children}
|
|
27
27
|
</tr>
|
package/src/table.module.scss
CHANGED
|
@@ -8,11 +8,14 @@
|
|
|
8
8
|
flex-direction: column;
|
|
9
9
|
gap: var(--purpur-spacing-200);
|
|
10
10
|
background-color: inherit;
|
|
11
|
+
|
|
12
|
+
&--without-toolbar {
|
|
13
|
+
padding-bottom: var(--purpur-spacing-50);
|
|
14
|
+
}
|
|
11
15
|
}
|
|
12
16
|
|
|
13
17
|
.purpur-table__container {
|
|
14
|
-
overflow
|
|
15
|
-
overflow-y: auto;
|
|
18
|
+
overflow: auto;
|
|
16
19
|
|
|
17
20
|
&:has(.purpur-table-column-header-cell__first-header-visible) {
|
|
18
21
|
border-top-left-radius: var(--table-border-radius);
|
|
@@ -116,6 +119,11 @@
|
|
|
116
119
|
|
|
117
120
|
&__sortable-title {
|
|
118
121
|
padding-left: 0;
|
|
122
|
+
text-align: left;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&__sortable-icon {
|
|
126
|
+
flex-shrink: 0;
|
|
119
127
|
}
|
|
120
128
|
|
|
121
129
|
&__filter-wrapper {
|
|
@@ -123,7 +131,6 @@
|
|
|
123
131
|
padding-right: var(--purpur-spacing-150);
|
|
124
132
|
padding-bottom: var(--purpur-spacing-150);
|
|
125
133
|
flex-direction: column;
|
|
126
|
-
align-items: flex-start;
|
|
127
134
|
align-self: stretch;
|
|
128
135
|
}
|
|
129
136
|
}
|
|
@@ -309,6 +316,14 @@
|
|
|
309
316
|
}
|
|
310
317
|
}
|
|
311
318
|
|
|
319
|
+
&__link {
|
|
320
|
+
padding: var(--purpur-spacing-50);
|
|
321
|
+
|
|
322
|
+
&--has-popover a {
|
|
323
|
+
display: block;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
|
|
312
327
|
&__skeleton {
|
|
313
328
|
height: 30%;
|
|
314
329
|
width: 100%;
|
package/src/table.stories.tsx
CHANGED
|
@@ -1131,8 +1131,6 @@ sorting, and filtering are managed by a server API instead of in the browser.
|
|
|
1131
1131
|
const [tableDataRowCount, setTableDataRowCount] = useState(0);
|
|
1132
1132
|
|
|
1133
1133
|
useEffect(() => {
|
|
1134
|
-
console.log({ rowSelection });
|
|
1135
|
-
|
|
1136
1134
|
if (showOnlySelectedRows) {
|
|
1137
1135
|
const selectedRows = Object.keys(rowSelection).filter(
|
|
1138
1136
|
(key) => (rowSelection as Record<string, unknown>)[key]
|
package/src/table.tsx
CHANGED
|
@@ -94,7 +94,7 @@ export const Table = <TData extends RowData>({
|
|
|
94
94
|
emptyTableHeadingTag,
|
|
95
95
|
emptyTableIcon,
|
|
96
96
|
enableActionBar,
|
|
97
|
-
enableToolbar
|
|
97
|
+
enableToolbar,
|
|
98
98
|
exportDrawerCopy,
|
|
99
99
|
exportFormats,
|
|
100
100
|
fullWidth = true,
|
|
@@ -140,6 +140,7 @@ export const Table = <TData extends RowData>({
|
|
|
140
140
|
rootClassName,
|
|
141
141
|
{
|
|
142
142
|
[`${rootClassName}--${variant}`]: variant,
|
|
143
|
+
[`${rootClassName}--without-toolbar`]: !enableToolbar || !settingsDrawerCopy,
|
|
143
144
|
},
|
|
144
145
|
]);
|
|
145
146
|
|
package/src/types.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { Dispatch, ReactNode, SetStateAction } from "react";
|
|
1
2
|
import { type HeadingTagType } from "@purpurds/heading";
|
|
2
3
|
import type { SelectProps } from "@purpurds/select";
|
|
3
4
|
import type { Cell, FilterFn, Row, RowData, SortingFn } from "@tanstack/react-table";
|
|
@@ -190,7 +191,7 @@ export type WithEmptyTableProps = {
|
|
|
190
191
|
/**
|
|
191
192
|
* Icon to display in the empty table state.
|
|
192
193
|
*/
|
|
193
|
-
emptyTableIcon?:
|
|
194
|
+
emptyTableIcon?: ReactNode;
|
|
194
195
|
};
|
|
195
196
|
|
|
196
197
|
export type WithoutEmptyTableProps = {
|
|
@@ -244,7 +245,7 @@ export type WithRowSelectionProps<TData> = {
|
|
|
244
245
|
/**
|
|
245
246
|
* setShowOnlySelectedRows - Function to update the showOnlySelectedRows state.
|
|
246
247
|
*/
|
|
247
|
-
setShowOnlySelectedRows:
|
|
248
|
+
setShowOnlySelectedRows: Dispatch<SetStateAction<boolean>>;
|
|
248
249
|
};
|
|
249
250
|
|
|
250
251
|
export type WithoutRowSelectionProps = {
|
|
@@ -1,30 +1,50 @@
|
|
|
1
|
-
import { useRef, useState } from "react";
|
|
1
|
+
import { useEffect, useRef, useState } from "react";
|
|
2
2
|
|
|
3
3
|
const useTruncatedTooltip = () => {
|
|
4
|
+
const [hasPopover, setHasPopover] = useState(false);
|
|
4
5
|
const [showPopover, setShowPopover] = useState(false);
|
|
5
6
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const checkContentOverflow = () => {
|
|
10
|
+
if (containerRef.current) {
|
|
11
|
+
const contentElement: HTMLLinkElement | HTMLParagraphElement | null =
|
|
12
|
+
containerRef.current.querySelector("a, p");
|
|
13
|
+
|
|
14
|
+
if (contentElement) {
|
|
15
|
+
const containerWidth = containerRef.current.clientWidth;
|
|
16
|
+
const contentWidth =
|
|
17
|
+
contentElement.tagName.toLowerCase() === "a"
|
|
18
|
+
? contentElement.offsetWidth
|
|
19
|
+
: contentElement.scrollWidth;
|
|
20
|
+
|
|
21
|
+
setHasPopover(contentWidth > containerWidth);
|
|
22
|
+
} else {
|
|
23
|
+
setHasPopover(false);
|
|
24
|
+
}
|
|
25
|
+
} else {
|
|
26
|
+
setHasPopover(false);
|
|
19
27
|
}
|
|
20
|
-
}
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
checkContentOverflow();
|
|
31
|
+
|
|
32
|
+
window.addEventListener("resize", checkContentOverflow);
|
|
33
|
+
|
|
34
|
+
return () => {
|
|
35
|
+
window.removeEventListener("resize", checkContentOverflow);
|
|
36
|
+
};
|
|
37
|
+
}, []);
|
|
38
|
+
|
|
39
|
+
const onMouseEnter = () => {
|
|
40
|
+
setShowPopover(hasPopover);
|
|
21
41
|
};
|
|
22
42
|
|
|
23
43
|
const onMouseLeave = () => {
|
|
24
44
|
setShowPopover(false);
|
|
25
45
|
};
|
|
26
46
|
|
|
27
|
-
return { showPopover, containerRef, onMouseEnter, onMouseLeave };
|
|
47
|
+
return { hasPopover, showPopover, containerRef, onMouseEnter, onMouseLeave };
|
|
28
48
|
};
|
|
29
49
|
|
|
30
50
|
export default useTruncatedTooltip;
|