@uva-glass/component-library 3.55.8 → 3.56.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/DataTable-C46IkAmF.js +154 -0
- package/dist/DataTable-C46IkAmF.js.map +1 -0
- package/dist/assets/DataTable.css +1 -0
- package/dist/{chunk-SZQXB3JV-xjYHmnzP.js → chunk-FON5IJBZ-BBb6rYhU.js} +953 -895
- package/dist/chunk-FON5IJBZ-BBb6rYhU.js.map +1 -0
- package/dist/components/Accordion/Accordion.test.js +1 -1
- package/dist/components/AccordionCard/AccordionCard.test.js +1 -1
- package/dist/components/ActionList/ActionList.test.js +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.test.js +1 -1
- package/dist/components/Attention/Attention.test.js +1 -1
- package/dist/components/Backdrop/Backdrop.test.js +1 -1
- package/dist/components/Buttons/Button.stories.js +1 -1
- package/dist/components/Buttons/Button.test.js +1 -1
- package/dist/components/Buttons/LinkButton.stories.js +1 -1
- package/dist/components/Buttons/LinkButton.test.js +1 -1
- package/dist/components/Buttons/MenuButton.stories.js +1 -1
- package/dist/components/Buttons/MenuButton.test.js +1 -1
- package/dist/components/Card/Card.test.js +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js +1 -1
- package/dist/components/Checkbox/Checkbox.test.js +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +2 -2
- package/dist/components/Chip/Chip.stories.js +1 -1
- package/dist/components/ControlsButton/ControlsButton.stories.js +2 -2
- package/dist/components/DataTable/DataTable.d.ts +39 -0
- package/dist/components/DataTable/DataTable.js +2 -0
- package/dist/components/DataTable/DataTable.stories.d.ts +26 -0
- package/dist/components/DataTable/DataTable.stories.js +40349 -0
- package/dist/components/DataTable/DataTable.stories.js.map +1 -0
- package/dist/components/DataTable/hooks/useVirtualScroll.d.ts +14 -0
- package/dist/components/DataTable/hooks/useVirtualScroll.js +35 -0
- package/dist/components/DataTable/hooks/useVirtualScroll.js.map +1 -0
- package/dist/components/DataTable/index.d.ts +1 -0
- package/dist/components/DataTable/index.js +2 -0
- package/dist/components/DataTable/mockDataTableData.d.ts +39 -0
- package/dist/components/Drawer/Drawer.stories.js +1 -1
- package/dist/components/FeedbackBar/FeedbackBar.test.js +1 -1
- package/dist/components/FormInput/FormInput.stories.js +1 -1
- package/dist/components/Icon/Icon.js +1 -1
- package/dist/components/Icon/Icon.stories.js +1 -1
- package/dist/components/Icon/icons/index.d.ts +8 -2
- package/dist/components/Icon/icons/index.js +1 -1
- package/dist/components/IconButton/IconButton.stories.js +1 -1
- package/dist/components/InputField/InputField.stories.js +1 -1
- package/dist/components/Label/Label.test.js +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.js +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.test.js +1 -1
- package/dist/components/Notification/Notification.stories.js +1 -1
- package/dist/components/Notification/Notification.test.js +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.js +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.js +1 -1
- package/dist/components/RadioGroup/Radiogroup.test.js +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.js +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js +1 -1
- package/dist/components/Sortable/Sortable.stories.js +1 -1
- package/dist/components/StatusBadge/StatusBadge.test.js +1 -1
- package/dist/components/TextArea/TextArea.stories.js +1 -1
- package/dist/components/TextArea/TextArea.test.js +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +1 -1
- package/dist/components/VarIndicator/VarIndicator.stories.js +1 -1
- package/dist/components/VarIndicator/VarIndicator.test.js +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +43 -42
- package/dist/{dist-Cxk2-lJw.js → dist-Dlg0QxSO.js} +413 -193
- package/dist/dist-Dlg0QxSO.js.map +1 -0
- package/dist/{icons-ClUPu6KU.js → icons-C80wqcF0.js} +39 -21
- package/dist/icons-C80wqcF0.js.map +1 -0
- package/dist/index.js +43 -42
- package/dist/setupTests.js +9 -5
- package/dist/setupTests.js.map +1 -1
- package/dist/storybook__react.d.js +24 -7
- package/dist/storybook__react.d.js.map +1 -1
- package/dist/{test-CpW02epT.js → test-Bd7kXF_B.js} +3414 -3412
- package/dist/test-Bd7kXF_B.js.map +1 -0
- package/package.json +26 -26
- package/dist/chunk-SZQXB3JV-xjYHmnzP.js.map +0 -1
- package/dist/dist-Cxk2-lJw.js.map +0 -1
- package/dist/icons-ClUPu6KU.js.map +0 -1
- package/dist/test-CpW02epT.js.map +0 -1
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { t as e } from "./clsx-BWCAbrjV.js";
|
|
2
|
+
import { useVirtualScroll as t } from "./components/DataTable/hooks/useVirtualScroll.js";
|
|
3
|
+
import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
|
|
4
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
5
|
+
import './assets/DataTable.css';//#region src/components/DataTable/DataTable.module.css
|
|
6
|
+
var l = {
|
|
7
|
+
"data-table__container": "_data-table__container_rlt5w_1",
|
|
8
|
+
"data-table__spacer": "_data-table__spacer_rlt5w_8",
|
|
9
|
+
"data-table": "_data-table_rlt5w_1",
|
|
10
|
+
"data-table--virtualized": "_data-table--virtualized_rlt5w_21",
|
|
11
|
+
"data-table__row": "_data-table__row_rlt5w_30",
|
|
12
|
+
"data-table__header-row": "_data-table__header-row_rlt5w_31",
|
|
13
|
+
"data-table__row--active": "_data-table__row--active_rlt5w_40",
|
|
14
|
+
"data-table__cell": "_data-table__cell_rlt5w_48",
|
|
15
|
+
"data-table__sticky-header": "_data-table__sticky-header_rlt5w_56",
|
|
16
|
+
"data-table__empty-state": "_data-table__empty-state_rlt5w_75"
|
|
17
|
+
}, u = 4, d = ({ data: d, columns: f, stickyHeader: p = !1, virtualize: m = null, activeKeys: h = [], noDataMessage: g = "No data to display" }) => {
|
|
18
|
+
let _ = a(null), v = a(null), y = a(null), b = a(null), { visibleItems: x, totalHeight: S, offsetTop: C, onScroll: w, setContainerHeight: T } = t({
|
|
19
|
+
rowHeight: m?.rowHeight ?? 0,
|
|
20
|
+
buffer: m?.buffer ?? u,
|
|
21
|
+
totalItems: d.length
|
|
22
|
+
}), E = a(!1), D = a(!1), [O, k] = o([]), A = i(() => {
|
|
23
|
+
if (!f) return {
|
|
24
|
+
visibleRows: d,
|
|
25
|
+
rowsToRender: d
|
|
26
|
+
};
|
|
27
|
+
let e = m ? x.map((e) => d[e]) : d;
|
|
28
|
+
return {
|
|
29
|
+
visibleRows: e.map((e) => {
|
|
30
|
+
let t = {};
|
|
31
|
+
return f.forEach((n) => {
|
|
32
|
+
t[n.key] = e[n.key];
|
|
33
|
+
}), t;
|
|
34
|
+
}),
|
|
35
|
+
rowsToRender: e
|
|
36
|
+
};
|
|
37
|
+
}, [
|
|
38
|
+
f,
|
|
39
|
+
d,
|
|
40
|
+
m,
|
|
41
|
+
x
|
|
42
|
+
]), j = n((e) => {
|
|
43
|
+
if (!m) return;
|
|
44
|
+
let t = e.currentTarget.scrollTop;
|
|
45
|
+
E.current || (E.current = !0, requestAnimationFrame(() => {
|
|
46
|
+
w({ currentTarget: { scrollTop: t } }), E.current = !1;
|
|
47
|
+
}));
|
|
48
|
+
}, [m, w]), M = (e, t) => typeof e == "function" ? e(t) : e;
|
|
49
|
+
return r(() => {
|
|
50
|
+
if (!m || !_.current) return;
|
|
51
|
+
let e = () => {
|
|
52
|
+
let e = _.current?.parentElement?.clientHeight ?? 0;
|
|
53
|
+
D.current || (D.current = !0, requestAnimationFrame(() => {
|
|
54
|
+
T(e), D.current = !1;
|
|
55
|
+
}));
|
|
56
|
+
};
|
|
57
|
+
return window.addEventListener("resize", e), () => {
|
|
58
|
+
window.removeEventListener("resize", e);
|
|
59
|
+
};
|
|
60
|
+
}, [m, T]), r(() => {
|
|
61
|
+
_.current && T(_.current.parentElement?.clientHeight ?? 0);
|
|
62
|
+
}, [T]), r(() => {
|
|
63
|
+
_.current?.scrollTo({ top: 0 });
|
|
64
|
+
}, [d]), r(() => {
|
|
65
|
+
if (!p || !b.current) return;
|
|
66
|
+
let e = () => {
|
|
67
|
+
let e = b.current?.querySelector("tr");
|
|
68
|
+
if (!e) return;
|
|
69
|
+
let t = e.querySelectorAll("td");
|
|
70
|
+
k(Array.from(t).map((e) => e.getBoundingClientRect().width));
|
|
71
|
+
}, t = new ResizeObserver(() => {
|
|
72
|
+
requestAnimationFrame(e);
|
|
73
|
+
});
|
|
74
|
+
return t.observe(b.current), e(), () => t.disconnect();
|
|
75
|
+
}, [p, A.visibleRows]), d.length ? /* @__PURE__ */ c("div", {
|
|
76
|
+
className: l["data-table__container"],
|
|
77
|
+
onScroll: j,
|
|
78
|
+
ref: _,
|
|
79
|
+
children: [
|
|
80
|
+
m && p && f && /* @__PURE__ */ s("table", {
|
|
81
|
+
className: l["data-table--virtualized"],
|
|
82
|
+
children: /* @__PURE__ */ s("thead", {
|
|
83
|
+
className: l["data-table__sticky-header"],
|
|
84
|
+
children: /* @__PURE__ */ s("tr", {
|
|
85
|
+
className: l["data-table__header-row"],
|
|
86
|
+
ref: y,
|
|
87
|
+
children: f && f.map((e, t) => {
|
|
88
|
+
let n = O[t] ? `${O[t]}px` : e.fixedWidth;
|
|
89
|
+
return /* @__PURE__ */ s("th", {
|
|
90
|
+
className: l["data-table__cell"],
|
|
91
|
+
style: {
|
|
92
|
+
width: n,
|
|
93
|
+
minWidth: n,
|
|
94
|
+
maxWidth: n
|
|
95
|
+
},
|
|
96
|
+
children: M(e?.label)
|
|
97
|
+
}, e.key);
|
|
98
|
+
})
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
}),
|
|
102
|
+
/* @__PURE__ */ s("div", {
|
|
103
|
+
className: l["data-table__spacer"],
|
|
104
|
+
style: { height: S }
|
|
105
|
+
}),
|
|
106
|
+
/* @__PURE__ */ c("table", {
|
|
107
|
+
className: l["data-table"],
|
|
108
|
+
style: m ? { transform: `translateY(${C}px)` } : void 0,
|
|
109
|
+
children: [/* @__PURE__ */ s("thead", {
|
|
110
|
+
className: e({ [l["data-table__sticky-header"]]: p }),
|
|
111
|
+
ref: v,
|
|
112
|
+
children: /* @__PURE__ */ s("tr", {
|
|
113
|
+
className: l["data-table__header-row"],
|
|
114
|
+
children: !m || !p ? f && f.map((e, t) => {
|
|
115
|
+
let n = O[t] ? `${O[t]}px` : e.fixedWidth;
|
|
116
|
+
return /* @__PURE__ */ s("th", {
|
|
117
|
+
className: l["data-table__cell"],
|
|
118
|
+
style: { width: n },
|
|
119
|
+
children: M(e?.label)
|
|
120
|
+
}, e.key);
|
|
121
|
+
}) : /* @__PURE__ */ s("th", {
|
|
122
|
+
colSpan: f?.length,
|
|
123
|
+
style: { height: y.current?.clientHeight }
|
|
124
|
+
})
|
|
125
|
+
})
|
|
126
|
+
}), /* @__PURE__ */ s("tbody", {
|
|
127
|
+
ref: b,
|
|
128
|
+
children: A.visibleRows.map((t, n) => /* @__PURE__ */ s("tr", {
|
|
129
|
+
className: e(l["data-table__row"], { [l["data-table__row--active"]]: h?.includes(A.rowsToRender[n].id) }),
|
|
130
|
+
children: Object.entries(t).map(([e]) => {
|
|
131
|
+
let t = f?.find((t) => t.key === e);
|
|
132
|
+
return /* @__PURE__ */ s("td", {
|
|
133
|
+
className: l["data-table__cell"],
|
|
134
|
+
style: {
|
|
135
|
+
width: t?.fixedWidth,
|
|
136
|
+
height: m ? m.rowHeight : void 0,
|
|
137
|
+
maxHeight: m ? m.rowHeight : void 0
|
|
138
|
+
},
|
|
139
|
+
children: M(t?.cell, A.rowsToRender[n])
|
|
140
|
+
}, e);
|
|
141
|
+
})
|
|
142
|
+
}, A.rowsToRender[n].id))
|
|
143
|
+
})]
|
|
144
|
+
})
|
|
145
|
+
]
|
|
146
|
+
}) : /* @__PURE__ */ s("div", {
|
|
147
|
+
className: l["data-table__empty-state"],
|
|
148
|
+
children: g
|
|
149
|
+
});
|
|
150
|
+
};
|
|
151
|
+
//#endregion
|
|
152
|
+
export { d as t };
|
|
153
|
+
|
|
154
|
+
//# sourceMappingURL=DataTable-C46IkAmF.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTable-C46IkAmF.js","names":[],"sources":["../src/components/DataTable/DataTable.module.css","../src/components/DataTable/DataTable.tsx"],"sourcesContent":[".data-table__container {\n height: 100%;\n overflow-y: auto;\n position: relative;\n width: 100%;\n}\n\n.data-table__spacer {\n background-color: transparent;\n width: 0.0625rem;\n}\n\n.data-table {\n border-collapse: collapse;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n.data-table--virtualized {\n border-collapse: collapse;\n left: 0;\n position: sticky;\n top: 0;\n width: 100%;\n z-index: 10;\n}\n\n.data-table__row,\n.data-table__header-row {\n background-color: var(--color-uva-white);\n border-bottom: 0.0625rem solid var(--color-grey-300);\n}\n\n.data-table__row:hover {\n background-color: var(--color-grey-200);\n}\n\n.data-table__row--active {\n background-color: var(--color-navy-100);\n}\n\n.data-table__row--active:hover {\n background-color: var(--color-navy-200);\n}\n\n.data-table__cell {\n overflow: hidden;\n padding: 0.6875rem 0.75rem;\n text-align: left;\n vertical-align: baseline;\n white-space: nowrap;\n}\n\n.data-table__sticky-header {\n background-color: var(--color-uva-white);\n left: 0;\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.data-table__sticky-header::after {\n border-bottom: 0.0625rem solid var(--color-grey-300);\n content: \"\";\n display: block;\n height: 0.0625rem;\n left: 0;\n position: absolute;\n top: 100%;\n width: 100%;\n}\n\n.data-table__empty-state {\n color: var(--color-grey-600);\n font-size: 1rem;\n padding: 2rem;\n text-align: center;\n}\n","import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport styles from './DataTable.module.css';\r\nimport { useVirtualScroll } from './hooks/useVirtualScroll';\r\n\r\ntype DataTablePrimitive = string | number | boolean | null | undefined;\r\ntype DataTableRow = Record<string, DataTablePrimitive>;\r\nexport type DataTableColumnContent<TRow extends object> = ReactNode | ((row: TRow) => ReactNode);\r\ntype DataTableColumn<TRow extends object> = {\r\n key: Extract<keyof TRow, string>;\r\n label?: ReactNode | ((row: TRow) => ReactNode);\r\n cell?: ReactNode | ((row: TRow) => ReactNode);\r\n fixedWidth?: string;\r\n};\r\ntype DataRow<TRow extends object> = { visibleRows: Partial<TRow>[]; rowsToRender: TRow[] };\r\n\r\nexport type DataTableProps<TRow extends { id: string | number } = DataTableRow & { id: string | number }> = {\r\n /** The data to be displayed in the table */\r\n data: TRow[];\r\n /** The columns configuration for the table */\r\n columns?: DataTableColumn<TRow>[];\r\n /** Whether the table header should be sticky */\r\n stickyHeader?: boolean;\r\n /** Virtualization settings for the table */\r\n virtualize?: {\r\n /** The height of each row in pixels */\r\n rowHeight: number;\r\n /** The number of additional rows to render above and below the visible area for smoother scrolling */\r\n buffer?: number;\r\n } | null;\r\n /** The keys in the data objects that indicate whether a row is active (for styling purposes) */\r\n activeKeys?: (string | number)[];\r\n /** Message to display when there is no data */\r\n noDataMessage?: string;\r\n};\r\n\r\nconst DEFAULT_BUFFER = 4;\r\n\r\nexport const DataTable = <TRow extends { id: string | number } = DataTableRow & { id: string | number }>({\r\n data,\r\n columns,\r\n stickyHeader = false,\r\n virtualize = null,\r\n activeKeys = [],\r\n noDataMessage = 'No data to display',\r\n}: DataTableProps<TRow>) => {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const headerRef = useRef<HTMLTableSectionElement>(null);\r\n const headerRowRef = useRef<HTMLTableRowElement>(null);\r\n const tbodyRef = useRef<HTMLTableSectionElement>(null);\r\n const { visibleItems, totalHeight, offsetTop, onScroll, setContainerHeight } = useVirtualScroll({\r\n rowHeight: virtualize?.rowHeight ?? 0,\r\n buffer: virtualize?.buffer ?? DEFAULT_BUFFER,\r\n totalItems: data.length,\r\n });\r\n const throttling = useRef(false);\r\n const resizeThrottling = useRef(false);\r\n const [columnWidths, setColumnWidths] = useState<number[]>([]);\r\n\r\n const tableData: DataRow<TRow> = useMemo(() => {\r\n if (!columns) return { visibleRows: data, rowsToRender: data };\r\n const rowsToRender = virtualize ? visibleItems.map((index) => data[index]) : data;\r\n const visibleRows = rowsToRender.map((row) => {\r\n const newRow: Partial<TRow> = {};\r\n columns.forEach((col) => {\r\n newRow[col.key] = row[col.key];\r\n });\r\n return newRow;\r\n });\r\n return { visibleRows, rowsToRender };\r\n }, [columns, data, virtualize, visibleItems]);\r\n\r\n const handleScroll = useCallback(\r\n (event: UIEvent<HTMLDivElement>) => {\r\n if (!virtualize) return;\r\n\r\n const scrollTop = event.currentTarget.scrollTop;\r\n\r\n if (!throttling.current) {\r\n throttling.current = true;\r\n\r\n requestAnimationFrame(() => {\r\n onScroll({ currentTarget: { scrollTop } } as UIEvent<HTMLElement>);\r\n throttling.current = false;\r\n });\r\n }\r\n },\r\n [virtualize, onScroll]\r\n );\r\n\r\n const onRenderValue = (value: ((row: TRow) => ReactNode) | ReactNode, row?: TRow) =>\r\n typeof value === 'function' ? value(row!) : value;\r\n\r\n useEffect(() => {\r\n if (!virtualize || !containerRef.current) {\r\n return;\r\n }\r\n\r\n const handleResize = () => {\r\n const containerHeight = containerRef.current?.parentElement?.clientHeight ?? 0;\r\n\r\n if (!resizeThrottling.current) {\r\n resizeThrottling.current = true;\r\n\r\n requestAnimationFrame(() => {\r\n setContainerHeight(containerHeight);\r\n resizeThrottling.current = false;\r\n });\r\n }\r\n };\r\n window.addEventListener('resize', handleResize);\r\n\r\n return () => {\r\n window.removeEventListener('resize', handleResize);\r\n };\r\n }, [virtualize, setContainerHeight]);\r\n\r\n useEffect(() => {\r\n if (containerRef.current) {\r\n setContainerHeight(containerRef.current.parentElement?.clientHeight ?? 0);\r\n }\r\n }, [setContainerHeight]);\r\n\r\n useEffect(() => {\r\n containerRef.current?.scrollTo({ top: 0 });\r\n }, [data]);\r\n\r\n useEffect(() => {\r\n if (!stickyHeader || !tbodyRef.current) return;\r\n\r\n const measureWidths = () => {\r\n const firstRow = tbodyRef.current?.querySelector('tr');\r\n if (!firstRow) return;\r\n\r\n const cells = firstRow.querySelectorAll('td');\r\n const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);\r\n\r\n setColumnWidths(widths);\r\n };\r\n\r\n const observer = new ResizeObserver(() => {\r\n requestAnimationFrame(measureWidths);\r\n });\r\n\r\n observer.observe(tbodyRef.current);\r\n\r\n measureWidths();\r\n\r\n return () => observer.disconnect();\r\n }, [stickyHeader, tableData.visibleRows]);\r\n\r\n return data.length ? (\r\n <div className={styles['data-table__container']} onScroll={handleScroll} ref={containerRef}>\r\n {/* sticky header if virtualized */}\r\n {virtualize && stickyHeader && columns && (\r\n <table className={styles['data-table--virtualized']}>\r\n <thead className={styles['data-table__sticky-header']}>\r\n <tr className={styles['data-table__header-row']} ref={headerRowRef}>\r\n {columns &&\r\n columns.map((column, index) => {\r\n const forcedWidth = columnWidths[index] ? `${columnWidths[index]}px` : column.fixedWidth;\r\n return (\r\n <th\r\n key={column.key}\r\n className={styles['data-table__cell']}\r\n style={{\r\n width: forcedWidth,\r\n minWidth: forcedWidth,\r\n maxWidth: forcedWidth,\r\n }}\r\n >\r\n {onRenderValue(column?.label)}\r\n </th>\r\n );\r\n })}\r\n </tr>\r\n </thead>\r\n </table>\r\n )}\r\n\r\n <div className={styles['data-table__spacer']} style={{ height: totalHeight }} />\r\n <table\r\n className={styles['data-table']}\r\n style={virtualize ? { transform: `translateY(${offsetTop}px)` } : undefined}\r\n >\r\n {/* header */}\r\n <thead className={clsx({ [styles['data-table__sticky-header']]: stickyHeader })} ref={headerRef}>\r\n <tr className={styles['data-table__header-row']}>\r\n {!virtualize || !stickyHeader ? (\r\n columns &&\r\n columns.map((column, index) => {\r\n const forcedWidth = columnWidths[index] ? `${columnWidths[index]}px` : column.fixedWidth;\r\n return (\r\n <th key={column.key} className={styles['data-table__cell']} style={{ width: forcedWidth }}>\r\n {onRenderValue(column?.label)}\r\n </th>\r\n );\r\n })\r\n ) : (\r\n <th colSpan={columns?.length} style={{ height: headerRowRef.current?.clientHeight }} />\r\n )}\r\n </tr>\r\n </thead>\r\n\r\n {/* data rows */}\r\n <tbody ref={tbodyRef}>\r\n {tableData.visibleRows.map((row, index) => (\r\n <tr\r\n key={tableData.rowsToRender[index].id}\r\n className={clsx(styles['data-table__row'], {\r\n [styles['data-table__row--active']]: activeKeys?.includes(tableData.rowsToRender[index].id),\r\n })}\r\n >\r\n {Object.entries(row as Record<string, unknown>).map(([key]) => {\r\n const column = columns?.find((col) => col.key === key);\r\n return (\r\n <td\r\n key={key}\r\n className={styles['data-table__cell']}\r\n style={{\r\n width: column?.fixedWidth,\r\n height: virtualize ? virtualize.rowHeight : undefined,\r\n maxHeight: virtualize ? virtualize.rowHeight : undefined,\r\n }}\r\n >\r\n {onRenderValue(column?.cell, tableData.rowsToRender[index])}\r\n </td>\r\n );\r\n })}\r\n </tr>\r\n ))}\r\n </tbody>\r\n </table>\r\n </div>\r\n ) : (\r\n <div className={styles['data-table__empty-state']}>{noDataMessage}</div>\r\n );\r\n};\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._data-table__container_rlt5w_1{width:100%;height:100%;position:relative;overflow-y:auto}._data-table__spacer_rlt5w_8{background-color:#0000;width:.0625rem}._data-table_rlt5w_1{border-collapse:collapse;width:100%;position:absolute;top:0;left:0}._data-table--virtualized_rlt5w_21{border-collapse:collapse;z-index:10;width:100%;position:sticky;top:0;left:0}._data-table__row_rlt5w_30,._data-table__header-row_rlt5w_31{background-color:var(--color-uva-white);border-bottom:.0625rem solid var(--color-grey-300)}._data-table__row_rlt5w_30:hover{background-color:var(--color-grey-200)}._data-table__row--active_rlt5w_40{background-color:var(--color-navy-100)}._data-table__row--active_rlt5w_40:hover{background-color:var(--color-navy-200)}._data-table__cell_rlt5w_48{text-align:left;vertical-align:baseline;white-space:nowrap;padding:.6875rem .75rem;overflow:hidden}._data-table__sticky-header_rlt5w_56{background-color:var(--color-uva-white);z-index:1;position:sticky;top:0;left:0}._data-table__sticky-header_rlt5w_56:after{border-bottom:.0625rem solid var(--color-grey-300);content:"";width:100%;height:.0625rem;display:block;position:absolute;top:100%;left:0}._data-table__empty-state_rlt5w_75{color:var(--color-grey-600);text-align:center;padding:2rem;font-size:1rem}
|