@rttui/skin-anocca 1.0.10 → 1.0.12
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/CHANGELOG.md +15 -0
- package/dist/cjs/index.cjs +49 -12
- package/dist/cjs/index.cjs.map +3 -3
- package/dist/cjs/package.json +1 -1
- package/dist/mjs/index.mjs +49 -12
- package/dist/mjs/index.mjs.map +3 -3
- package/dist/mjs/package.json +1 -1
- package/package.json +2 -2
- package/src/index.tsx +55 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @rttui/skin-anocca
|
|
2
2
|
|
|
3
|
+
## 1.0.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
- @rttui/core@1.0.12
|
|
9
|
+
|
|
10
|
+
## 1.0.11
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Better styling and auto measure columns
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
- @rttui/core@1.0.11
|
|
17
|
+
|
|
3
18
|
## 1.0.10
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -54,22 +54,35 @@ var AnoccaSkin = {
|
|
|
54
54
|
rowHeight: 32,
|
|
55
55
|
headerRowHeight: 32,
|
|
56
56
|
footerRowHeight: 32,
|
|
57
|
-
|
|
58
|
-
const { width, height
|
|
57
|
+
OverlayContainer: ({ children }) => {
|
|
58
|
+
const { width, height } = import_core.useTableContext();
|
|
59
59
|
const cssVars = import_core.useTableCssVars();
|
|
60
|
+
return /* @__PURE__ */ jsx_runtime.jsx("div", {
|
|
61
|
+
className: "rttui-overlay-container",
|
|
62
|
+
style: {
|
|
63
|
+
position: "relative",
|
|
64
|
+
overflow: "hidden",
|
|
65
|
+
width: width + "px",
|
|
66
|
+
height: height + "px",
|
|
67
|
+
...cssVars
|
|
68
|
+
},
|
|
69
|
+
children
|
|
70
|
+
});
|
|
71
|
+
},
|
|
72
|
+
OuterContainer: ({ children }) => {
|
|
73
|
+
const { tableContainerRef } = import_core.useTableContext();
|
|
60
74
|
return /* @__PURE__ */ jsx_runtime.jsx(import_material.Paper, {
|
|
61
75
|
ref: tableContainerRef,
|
|
62
76
|
className: "outer-container",
|
|
63
77
|
elevation: 2,
|
|
64
78
|
sx: {
|
|
65
79
|
overflow: "auto",
|
|
66
|
-
width: width
|
|
67
|
-
height: height
|
|
80
|
+
width: "var(--table-container-width)",
|
|
81
|
+
height: "var(--table-container-height)",
|
|
68
82
|
position: "relative",
|
|
69
83
|
contain: "paint",
|
|
70
84
|
willChange: "transform",
|
|
71
|
-
borderRadius: 1
|
|
72
|
-
...cssVars
|
|
85
|
+
borderRadius: 1
|
|
73
86
|
},
|
|
74
87
|
children
|
|
75
88
|
});
|
|
@@ -164,11 +177,8 @@ var AnoccaSkin = {
|
|
|
164
177
|
};
|
|
165
178
|
if (position === "left") {
|
|
166
179
|
style.left = 0;
|
|
167
|
-
style.boxShadow = "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
168
180
|
} else if (position === "right") {
|
|
169
181
|
style.right = 0;
|
|
170
|
-
style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;
|
|
171
|
-
style.boxShadow = "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
172
182
|
}
|
|
173
183
|
return /* @__PURE__ */ jsx_runtime.jsx(import_material.Box, {
|
|
174
184
|
component: "div",
|
|
@@ -231,14 +241,15 @@ var AnoccaSkin = {
|
|
|
231
241
|
})
|
|
232
242
|
});
|
|
233
243
|
},
|
|
234
|
-
Cell: ({ children, header }) => {
|
|
244
|
+
Cell: import_react.default.forwardRef(({ children, header, isMeasuring }, ref) => {
|
|
235
245
|
const { isPinned } = header;
|
|
236
246
|
return /* @__PURE__ */ jsx_runtime.jsx(import_material.TableCell, {
|
|
237
247
|
className: "td",
|
|
238
248
|
component: "div",
|
|
249
|
+
ref,
|
|
239
250
|
sx: {
|
|
240
251
|
height: "var(--row-height)",
|
|
241
|
-
width: header.width,
|
|
252
|
+
width: isMeasuring ? "auto" : header.width,
|
|
242
253
|
overflow: "hidden",
|
|
243
254
|
textOverflow: "ellipsis",
|
|
244
255
|
whiteSpace: "nowrap",
|
|
@@ -264,6 +275,32 @@ var AnoccaSkin = {
|
|
|
264
275
|
},
|
|
265
276
|
children
|
|
266
277
|
});
|
|
278
|
+
}),
|
|
279
|
+
PinnedColsOverlay: ({ position }) => {
|
|
280
|
+
const { table } = import_core.useTableContext();
|
|
281
|
+
if (!table.getIsSomeColumnsPinned(position)) {
|
|
282
|
+
return null;
|
|
283
|
+
}
|
|
284
|
+
const width = position === "left" ? table.getLeftTotalSize() : table.getRightTotalSize();
|
|
285
|
+
const style = {
|
|
286
|
+
width,
|
|
287
|
+
[position]: 0,
|
|
288
|
+
position: "sticky",
|
|
289
|
+
top: 0,
|
|
290
|
+
bottom: 0,
|
|
291
|
+
zIndex: 20,
|
|
292
|
+
pointerEvents: "none"
|
|
293
|
+
};
|
|
294
|
+
if (position === "left") {
|
|
295
|
+
style.boxShadow = "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
296
|
+
style.borderRight = "1px solid var(--table-border-color)";
|
|
297
|
+
} else if (position === "right") {
|
|
298
|
+
style.boxShadow = "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
299
|
+
}
|
|
300
|
+
return /* @__PURE__ */ jsx_runtime.jsx("div", {
|
|
301
|
+
className: `pinned-${position}-overlay`,
|
|
302
|
+
style
|
|
303
|
+
});
|
|
267
304
|
}
|
|
268
305
|
};
|
|
269
306
|
function TableHeaderCell({
|
|
@@ -311,4 +348,4 @@ function TableHeaderRow({ children }) {
|
|
|
311
348
|
});
|
|
312
349
|
}
|
|
313
350
|
|
|
314
|
-
//# debugId=
|
|
351
|
+
//# debugId=E42CD002BC12A31A64756E2164756E21
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"import {\n Box,\n Paper,\n SxProps,\n TableBody,\n TableCell,\n TableFooter,\n TableHead,\n TableRow,\n Theme,\n useTheme,\n} from \"@mui/material\";\nimport {\n Skin,\n useTableContext,\n useTableCssVars,\n VirtualHeader,\n} from \"@rttui/core\";\nimport React from \"react\";\nimport { flexRender } from \"@tanstack/react-table\";\n\nconst AnoccaSkin: Skin = {\n rowHeight: 32,\n headerRowHeight: 32,\n footerRowHeight: 32,\n OuterContainer: ({ children }) => {\n const { width, height, tableContainerRef } = useTableContext();\n const cssVars = useTableCssVars();\n\n return (\n <Paper\n ref={tableContainerRef}\n className=\"outer-container\"\n elevation={2}\n sx={{\n overflow: \"auto\",\n width: width + \"px\",\n height: height + \"px\",\n position: \"relative\",\n contain: \"paint\",\n willChange: \"transform\",\n borderRadius: 1,\n ...cssVars,\n }}\n >\n {children}\n </Paper>\n );\n },\n TableScroller: () => {\n return (\n <div\n className=\"table-scroller\"\n style={{\n width: \"var(--table-width)\",\n height:\n \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n position: \"absolute\",\n }}\n ></div>\n );\n },\n TableHeader: ({ children }) => {\n return (\n <TableHead\n component=\"div\"\n className=\"thead\"\n sx={{\n position: \"sticky\",\n top: 0,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n }}\n >\n {children}\n </TableHead>\n );\n },\n TableFooter: ({ children }) => {\n return (\n <TableFooter\n component=\"div\"\n className=\"table-footer\"\n sx={{\n position: \"sticky\",\n bottom: -1,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n }}\n >\n {children}\n </TableFooter>\n );\n },\n HeaderRow: TableHeaderRow,\n HeaderCell: (props) => {\n return <TableHeaderCell {...props} />;\n },\n TableBody: ({ children }) => {\n return (\n <TableBody\n component=\"div\"\n className=\"table-body\"\n sx={{ position: \"relative\", width: \"var(--table-width)\" }}\n >\n {children}\n </TableBody>\n );\n },\n PinnedRows: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n };\n if (position === \"top\") {\n style.top = \"var(--header-height)\";\n style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n } else if (position === \"bottom\") {\n style.bottom = \"var(--footer-height)\";\n style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n\n const Component = position === \"top\" ? TableHead : TableFooter;\n\n return (\n <Component\n component=\"div\"\n className={`sticky-${position}-rows`}\n sx={style}\n >\n {children}\n </Component>\n );\n },\n PinnedCols: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n display: \"flex\",\n };\n\n if (position === \"left\") {\n style.left = 0;\n style.boxShadow =\n \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n } else if (position === \"right\") {\n style.right = 0;\n style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n\n return (\n <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n {children}\n </Box>\n );\n },\n\n TableRowWrapper: React.forwardRef(\n ({ children, flatIndex, dndStyle }, ref) => {\n const theme = useTheme();\n const backgroundColor = (theme: Theme) => {\n const baseColor =\n flatIndex % 2 === 0\n ? theme.palette.background.paper\n : theme.palette.mode === \"dark\"\n ? theme.palette.grey[900]\n : theme.palette.grey[100];\n return baseColor;\n };\n\n const vars: Record<string, string> = {\n \"--row-background-color\": backgroundColor(theme),\n };\n\n return (\n <Box\n sx={{\n ...dndStyle,\n ...vars,\n }}\n data-index={flatIndex}\n ref={ref}\n >\n {children}\n </Box>\n );\n },\n ),\n TableRow: ({ children }) => {\n return (\n <TableRow\n component=\"div\"\n className=\"table-row\"\n sx={{\n position: \"relative\",\n width: \"var(--table-width)\",\n display: \"flex\",\n height: \"var(--row-height)\",\n zIndex: 1,\n boxSizing: \"border-box\",\n backgroundColor: \"var(--row-background-color)\",\n }}\n >\n {children}\n </TableRow>\n );\n },\n TableRowExpandedContent: ({ children }) => {\n const { table } = useTableContext();\n return (\n <TableRow\n component=\"div\"\n className=\"expanded-row\"\n sx={{\n backgroundColor: (theme) => theme.palette.background.default,\n }}\n >\n <TableCell\n component=\"div\"\n className=\"expanded-cell\"\n colSpan={table.getAllLeafColumns().length}\n sx={{\n padding: 2,\n }}\n >\n {children}\n </TableCell>\n </TableRow>\n );\n },\n Cell: ({ children, header }) => {\n const { isPinned } = header;\n return (\n <TableCell\n className=\"td\"\n component=\"div\"\n sx={{\n height: \"var(--row-height)\",\n width: header.width,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 5 : 0,\n boxSizing: \"border-box\",\n alignItems: \"center\",\n gap: \"8px\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignContent: \"center\",\n padding: \"6px 12px\",\n backgroundColor: \"var(--row-background-color)\",\n borderBottom: \"none\",\n flexShrink: 0,\n position: \"relative\",\n borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n \".table-row:hover &\": {\n backgroundColor: (theme) => {\n // Always use solid background colors for all cells on hover\n return theme.palette.mode === \"dark\"\n ? \"#1e1e52\" // Dark blue solid color\n : \"#E3F2FD\"; // Light blue solid color\n },\n zIndex: isPinned ? 2 : 0,\n },\n }}\n >\n {children}\n </TableCell>\n );\n },\n};\n\nfunction TableHeaderCell({\n headerId,\n isPinned,\n width,\n header,\n type,\n}: VirtualHeader & {\n type: \"header\" | \"footer\";\n}) {\n return (\n <TableCell\n component=\"div\"\n className=\"th\"\n data-header-id={headerId}\n data-is-pinned={isPinned}\n sx={{\n transition: \"background-color 0.2s ease\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 1 : 0,\n display: \"flex\",\n overflow: \"hidden\",\n height: \"var(--header-row-height)\",\n width,\n position: \"relative\",\n flexShrink: 0,\n alignItems: \"center\",\n gap: \"8px\",\n justifyContent: \"space-between\",\n padding: \"6px 12px\",\n boxSizing: \"border-box\",\n fontWeight: 600,\n backgroundColor: isPinned\n ? (theme) => theme.palette.background.paper\n : \"transparent\",\n borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n {header && !header.isPlaceholder\n ? flexRender(header.column.columnDef[type], header.getContext())\n : null}\n </div>\n </TableCell>\n );\n}\n\nexport { AnoccaSkin };\n\nfunction TableHeaderRow({ children }: { children: React.ReactNode }) {\n return (\n <TableRow\n component=\"div\"\n sx={{ height: \"var(--row-height)\", display: \"flex\" }}\n >\n {children}\n </TableRow>\n );\n}\n"
|
|
5
|
+
"import {\n Box,\n Paper,\n SxProps,\n TableBody,\n TableCell,\n TableFooter,\n TableHead,\n TableRow,\n Theme,\n useTheme,\n} from \"@mui/material\";\nimport {\n Skin,\n useTableContext,\n useTableCssVars,\n VirtualHeader,\n} from \"@rttui/core\";\nimport React, { CSSProperties } from \"react\";\nimport { flexRender } from \"@tanstack/react-table\";\n\nconst AnoccaSkin: Skin = {\n rowHeight: 32,\n headerRowHeight: 32,\n footerRowHeight: 32,\n OverlayContainer: ({ children }) => {\n const { width, height } = useTableContext();\n const cssVars = useTableCssVars();\n return (\n <div\n className=\"rttui-overlay-container\"\n style={{\n position: \"relative\",\n overflow: \"hidden\",\n width: width + \"px\",\n height: height + \"px\",\n ...cssVars,\n }}\n >\n {children}\n </div>\n );\n },\n OuterContainer: ({ children }) => {\n const { tableContainerRef } = useTableContext();\n\n return (\n <Paper\n ref={tableContainerRef}\n className=\"outer-container\"\n elevation={2}\n sx={{\n overflow: \"auto\",\n width: \"var(--table-container-width)\",\n height: \"var(--table-container-height)\",\n position: \"relative\",\n contain: \"paint\",\n willChange: \"transform\",\n borderRadius: 1,\n }}\n >\n {children}\n </Paper>\n );\n },\n TableScroller: () => {\n return (\n <div\n className=\"table-scroller\"\n style={{\n width: \"var(--table-width)\",\n height:\n \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n position: \"absolute\",\n }}\n ></div>\n );\n },\n TableHeader: ({ children }) => {\n return (\n <TableHead\n component=\"div\"\n className=\"thead\"\n sx={{\n position: \"sticky\",\n top: 0,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n }}\n >\n {children}\n </TableHead>\n );\n },\n TableFooter: ({ children }) => {\n return (\n <TableFooter\n component=\"div\"\n className=\"table-footer\"\n sx={{\n position: \"sticky\",\n bottom: -1,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n }}\n >\n {children}\n </TableFooter>\n );\n },\n HeaderRow: TableHeaderRow,\n HeaderCell: (props) => {\n return <TableHeaderCell {...props} />;\n },\n TableBody: ({ children }) => {\n return (\n <TableBody\n component=\"div\"\n className=\"table-body\"\n sx={{ position: \"relative\", width: \"var(--table-width)\" }}\n >\n {children}\n </TableBody>\n );\n },\n PinnedRows: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n };\n if (position === \"top\") {\n style.top = \"var(--header-height)\";\n style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n } else if (position === \"bottom\") {\n style.bottom = \"var(--footer-height)\";\n style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n\n const Component = position === \"top\" ? TableHead : TableFooter;\n\n return (\n <Component\n component=\"div\"\n className={`sticky-${position}-rows`}\n sx={style}\n >\n {children}\n </Component>\n );\n },\n PinnedCols: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n display: \"flex\",\n };\n\n if (position === \"left\") {\n style.left = 0;\n } else if (position === \"right\") {\n style.right = 0;\n }\n\n return (\n <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n {children}\n </Box>\n );\n },\n\n TableRowWrapper: React.forwardRef(\n ({ children, flatIndex, dndStyle }, ref) => {\n const theme = useTheme();\n const backgroundColor = (theme: Theme) => {\n const baseColor =\n flatIndex % 2 === 0\n ? theme.palette.background.paper\n : theme.palette.mode === \"dark\"\n ? theme.palette.grey[900]\n : theme.palette.grey[100];\n return baseColor;\n };\n\n const vars: Record<string, string> = {\n \"--row-background-color\": backgroundColor(theme),\n };\n\n return (\n <Box\n sx={{\n ...dndStyle,\n ...vars,\n }}\n data-index={flatIndex}\n ref={ref}\n >\n {children}\n </Box>\n );\n },\n ),\n TableRow: ({ children }) => {\n return (\n <TableRow\n component=\"div\"\n className=\"table-row\"\n sx={{\n position: \"relative\",\n width: \"var(--table-width)\",\n display: \"flex\",\n height: \"var(--row-height)\",\n zIndex: 1,\n boxSizing: \"border-box\",\n backgroundColor: \"var(--row-background-color)\",\n }}\n >\n {children}\n </TableRow>\n );\n },\n TableRowExpandedContent: ({ children }) => {\n const { table } = useTableContext();\n return (\n <TableRow\n component=\"div\"\n className=\"expanded-row\"\n sx={{\n backgroundColor: (theme) => theme.palette.background.default,\n }}\n >\n <TableCell\n component=\"div\"\n className=\"expanded-cell\"\n colSpan={table.getAllLeafColumns().length}\n sx={{\n padding: 2,\n }}\n >\n {children}\n </TableCell>\n </TableRow>\n );\n },\n Cell: React.forwardRef(({ children, header, isMeasuring }, ref) => {\n const { isPinned } = header;\n return (\n <TableCell\n className=\"td\"\n component=\"div\"\n ref={ref}\n sx={{\n height: \"var(--row-height)\",\n width: isMeasuring ? \"auto\" : header.width,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 5 : 0,\n boxSizing: \"border-box\",\n alignItems: \"center\",\n gap: \"8px\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignContent: \"center\",\n padding: \"6px 12px\",\n backgroundColor: \"var(--row-background-color)\",\n borderBottom: \"none\",\n flexShrink: 0,\n position: \"relative\",\n borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n \".table-row:hover &\": {\n backgroundColor: (theme) => {\n // Always use solid background colors for all cells on hover\n return theme.palette.mode === \"dark\"\n ? \"#1e1e52\" // Dark blue solid color\n : \"#E3F2FD\"; // Light blue solid color\n },\n zIndex: isPinned ? 2 : 0,\n },\n }}\n >\n {children}\n </TableCell>\n );\n }),\n PinnedColsOverlay: ({ position }) => {\n const { table } = useTableContext();\n if (!table.getIsSomeColumnsPinned(position)) {\n return null;\n }\n const width =\n position === \"left\"\n ? table.getLeftTotalSize()\n : table.getRightTotalSize();\n\n const style: CSSProperties = {\n width,\n [position]: 0,\n position: \"sticky\",\n top: 0,\n bottom: 0,\n zIndex: 20,\n pointerEvents: \"none\",\n };\n\n if (position === \"left\") {\n style.boxShadow =\n \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n style.borderRight = \"1px solid var(--table-border-color)\";\n } else if (position === \"right\") {\n style.boxShadow =\n \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n return <div className={`pinned-${position}-overlay`} style={style} />;\n },\n};\n\nfunction TableHeaderCell({\n headerId,\n isPinned,\n width,\n header,\n type,\n}: VirtualHeader & {\n type: \"header\" | \"footer\";\n}) {\n return (\n <TableCell\n component=\"div\"\n className=\"th\"\n data-header-id={headerId}\n data-is-pinned={isPinned}\n sx={{\n transition: \"background-color 0.2s ease\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 1 : 0,\n display: \"flex\",\n overflow: \"hidden\",\n height: \"var(--header-row-height)\",\n width,\n position: \"relative\",\n flexShrink: 0,\n alignItems: \"center\",\n gap: \"8px\",\n justifyContent: \"space-between\",\n padding: \"6px 12px\",\n boxSizing: \"border-box\",\n fontWeight: 600,\n backgroundColor: isPinned\n ? (theme) => theme.palette.background.paper\n : \"transparent\",\n borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n {header && !header.isPlaceholder\n ? flexRender(header.column.columnDef[type], header.getContext())\n : null}\n </div>\n </TableCell>\n );\n}\n\nexport { AnoccaSkin };\n\nfunction TableHeaderRow({ children }: { children: React.ReactNode }) {\n return (\n <TableRow\n component=\"div\"\n sx={{ height: \"var(--row-height)\", display: \"flex\" }}\n >\n {children}\n </TableRow>\n );\n}\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,IAXP;AAiBO,IALP;
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "E42CD002BC12A31A64756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
package/dist/cjs/package.json
CHANGED
package/dist/mjs/index.mjs
CHANGED
|
@@ -20,22 +20,35 @@ var AnoccaSkin = {
|
|
|
20
20
|
rowHeight: 32,
|
|
21
21
|
headerRowHeight: 32,
|
|
22
22
|
footerRowHeight: 32,
|
|
23
|
-
|
|
24
|
-
const { width, height
|
|
23
|
+
OverlayContainer: ({ children }) => {
|
|
24
|
+
const { width, height } = useTableContext();
|
|
25
25
|
const cssVars = useTableCssVars();
|
|
26
|
+
return /* @__PURE__ */ jsx("div", {
|
|
27
|
+
className: "rttui-overlay-container",
|
|
28
|
+
style: {
|
|
29
|
+
position: "relative",
|
|
30
|
+
overflow: "hidden",
|
|
31
|
+
width: width + "px",
|
|
32
|
+
height: height + "px",
|
|
33
|
+
...cssVars
|
|
34
|
+
},
|
|
35
|
+
children
|
|
36
|
+
});
|
|
37
|
+
},
|
|
38
|
+
OuterContainer: ({ children }) => {
|
|
39
|
+
const { tableContainerRef } = useTableContext();
|
|
26
40
|
return /* @__PURE__ */ jsx(Paper, {
|
|
27
41
|
ref: tableContainerRef,
|
|
28
42
|
className: "outer-container",
|
|
29
43
|
elevation: 2,
|
|
30
44
|
sx: {
|
|
31
45
|
overflow: "auto",
|
|
32
|
-
width: width
|
|
33
|
-
height: height
|
|
46
|
+
width: "var(--table-container-width)",
|
|
47
|
+
height: "var(--table-container-height)",
|
|
34
48
|
position: "relative",
|
|
35
49
|
contain: "paint",
|
|
36
50
|
willChange: "transform",
|
|
37
|
-
borderRadius: 1
|
|
38
|
-
...cssVars
|
|
51
|
+
borderRadius: 1
|
|
39
52
|
},
|
|
40
53
|
children
|
|
41
54
|
});
|
|
@@ -130,11 +143,8 @@ var AnoccaSkin = {
|
|
|
130
143
|
};
|
|
131
144
|
if (position === "left") {
|
|
132
145
|
style.left = 0;
|
|
133
|
-
style.boxShadow = "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
134
146
|
} else if (position === "right") {
|
|
135
147
|
style.right = 0;
|
|
136
|
-
style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;
|
|
137
|
-
style.boxShadow = "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
138
148
|
}
|
|
139
149
|
return /* @__PURE__ */ jsx(Box, {
|
|
140
150
|
component: "div",
|
|
@@ -197,14 +207,15 @@ var AnoccaSkin = {
|
|
|
197
207
|
})
|
|
198
208
|
});
|
|
199
209
|
},
|
|
200
|
-
Cell: ({ children, header }) => {
|
|
210
|
+
Cell: React.forwardRef(({ children, header, isMeasuring }, ref) => {
|
|
201
211
|
const { isPinned } = header;
|
|
202
212
|
return /* @__PURE__ */ jsx(TableCell, {
|
|
203
213
|
className: "td",
|
|
204
214
|
component: "div",
|
|
215
|
+
ref,
|
|
205
216
|
sx: {
|
|
206
217
|
height: "var(--row-height)",
|
|
207
|
-
width: header.width,
|
|
218
|
+
width: isMeasuring ? "auto" : header.width,
|
|
208
219
|
overflow: "hidden",
|
|
209
220
|
textOverflow: "ellipsis",
|
|
210
221
|
whiteSpace: "nowrap",
|
|
@@ -230,6 +241,32 @@ var AnoccaSkin = {
|
|
|
230
241
|
},
|
|
231
242
|
children
|
|
232
243
|
});
|
|
244
|
+
}),
|
|
245
|
+
PinnedColsOverlay: ({ position }) => {
|
|
246
|
+
const { table } = useTableContext();
|
|
247
|
+
if (!table.getIsSomeColumnsPinned(position)) {
|
|
248
|
+
return null;
|
|
249
|
+
}
|
|
250
|
+
const width = position === "left" ? table.getLeftTotalSize() : table.getRightTotalSize();
|
|
251
|
+
const style = {
|
|
252
|
+
width,
|
|
253
|
+
[position]: 0,
|
|
254
|
+
position: "sticky",
|
|
255
|
+
top: 0,
|
|
256
|
+
bottom: 0,
|
|
257
|
+
zIndex: 20,
|
|
258
|
+
pointerEvents: "none"
|
|
259
|
+
};
|
|
260
|
+
if (position === "left") {
|
|
261
|
+
style.boxShadow = "4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
262
|
+
style.borderRight = "1px solid var(--table-border-color)";
|
|
263
|
+
} else if (position === "right") {
|
|
264
|
+
style.boxShadow = "-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
265
|
+
}
|
|
266
|
+
return /* @__PURE__ */ jsx("div", {
|
|
267
|
+
className: `pinned-${position}-overlay`,
|
|
268
|
+
style
|
|
269
|
+
});
|
|
233
270
|
}
|
|
234
271
|
};
|
|
235
272
|
function TableHeaderCell({
|
|
@@ -280,4 +317,4 @@ export {
|
|
|
280
317
|
AnoccaSkin
|
|
281
318
|
};
|
|
282
319
|
|
|
283
|
-
//# debugId=
|
|
320
|
+
//# debugId=252CC93CB598D7DF64756E2164756E21
|
package/dist/mjs/index.mjs.map
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"import {\n Box,\n Paper,\n SxProps,\n TableBody,\n TableCell,\n TableFooter,\n TableHead,\n TableRow,\n Theme,\n useTheme,\n} from \"@mui/material\";\nimport {\n Skin,\n useTableContext,\n useTableCssVars,\n VirtualHeader,\n} from \"@rttui/core\";\nimport React from \"react\";\nimport { flexRender } from \"@tanstack/react-table\";\n\nconst AnoccaSkin: Skin = {\n rowHeight: 32,\n headerRowHeight: 32,\n footerRowHeight: 32,\n OuterContainer: ({ children }) => {\n const { width, height, tableContainerRef } = useTableContext();\n const cssVars = useTableCssVars();\n\n return (\n <Paper\n ref={tableContainerRef}\n className=\"outer-container\"\n elevation={2}\n sx={{\n overflow: \"auto\",\n width: width + \"px\",\n height: height + \"px\",\n position: \"relative\",\n contain: \"paint\",\n willChange: \"transform\",\n borderRadius: 1,\n ...cssVars,\n }}\n >\n {children}\n </Paper>\n );\n },\n TableScroller: () => {\n return (\n <div\n className=\"table-scroller\"\n style={{\n width: \"var(--table-width)\",\n height:\n \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n position: \"absolute\",\n }}\n ></div>\n );\n },\n TableHeader: ({ children }) => {\n return (\n <TableHead\n component=\"div\"\n className=\"thead\"\n sx={{\n position: \"sticky\",\n top: 0,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n }}\n >\n {children}\n </TableHead>\n );\n },\n TableFooter: ({ children }) => {\n return (\n <TableFooter\n component=\"div\"\n className=\"table-footer\"\n sx={{\n position: \"sticky\",\n bottom: -1,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n }}\n >\n {children}\n </TableFooter>\n );\n },\n HeaderRow: TableHeaderRow,\n HeaderCell: (props) => {\n return <TableHeaderCell {...props} />;\n },\n TableBody: ({ children }) => {\n return (\n <TableBody\n component=\"div\"\n className=\"table-body\"\n sx={{ position: \"relative\", width: \"var(--table-width)\" }}\n >\n {children}\n </TableBody>\n );\n },\n PinnedRows: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n };\n if (position === \"top\") {\n style.top = \"var(--header-height)\";\n style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n } else if (position === \"bottom\") {\n style.bottom = \"var(--footer-height)\";\n style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n\n const Component = position === \"top\" ? TableHead : TableFooter;\n\n return (\n <Component\n component=\"div\"\n className={`sticky-${position}-rows`}\n sx={style}\n >\n {children}\n </Component>\n );\n },\n PinnedCols: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n display: \"flex\",\n };\n\n if (position === \"left\") {\n style.left = 0;\n style.boxShadow =\n \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n } else if (position === \"right\") {\n style.right = 0;\n style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n\n return (\n <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n {children}\n </Box>\n );\n },\n\n TableRowWrapper: React.forwardRef(\n ({ children, flatIndex, dndStyle }, ref) => {\n const theme = useTheme();\n const backgroundColor = (theme: Theme) => {\n const baseColor =\n flatIndex % 2 === 0\n ? theme.palette.background.paper\n : theme.palette.mode === \"dark\"\n ? theme.palette.grey[900]\n : theme.palette.grey[100];\n return baseColor;\n };\n\n const vars: Record<string, string> = {\n \"--row-background-color\": backgroundColor(theme),\n };\n\n return (\n <Box\n sx={{\n ...dndStyle,\n ...vars,\n }}\n data-index={flatIndex}\n ref={ref}\n >\n {children}\n </Box>\n );\n },\n ),\n TableRow: ({ children }) => {\n return (\n <TableRow\n component=\"div\"\n className=\"table-row\"\n sx={{\n position: \"relative\",\n width: \"var(--table-width)\",\n display: \"flex\",\n height: \"var(--row-height)\",\n zIndex: 1,\n boxSizing: \"border-box\",\n backgroundColor: \"var(--row-background-color)\",\n }}\n >\n {children}\n </TableRow>\n );\n },\n TableRowExpandedContent: ({ children }) => {\n const { table } = useTableContext();\n return (\n <TableRow\n component=\"div\"\n className=\"expanded-row\"\n sx={{\n backgroundColor: (theme) => theme.palette.background.default,\n }}\n >\n <TableCell\n component=\"div\"\n className=\"expanded-cell\"\n colSpan={table.getAllLeafColumns().length}\n sx={{\n padding: 2,\n }}\n >\n {children}\n </TableCell>\n </TableRow>\n );\n },\n Cell: ({ children, header }) => {\n const { isPinned } = header;\n return (\n <TableCell\n className=\"td\"\n component=\"div\"\n sx={{\n height: \"var(--row-height)\",\n width: header.width,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 5 : 0,\n boxSizing: \"border-box\",\n alignItems: \"center\",\n gap: \"8px\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignContent: \"center\",\n padding: \"6px 12px\",\n backgroundColor: \"var(--row-background-color)\",\n borderBottom: \"none\",\n flexShrink: 0,\n position: \"relative\",\n borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n \".table-row:hover &\": {\n backgroundColor: (theme) => {\n // Always use solid background colors for all cells on hover\n return theme.palette.mode === \"dark\"\n ? \"#1e1e52\" // Dark blue solid color\n : \"#E3F2FD\"; // Light blue solid color\n },\n zIndex: isPinned ? 2 : 0,\n },\n }}\n >\n {children}\n </TableCell>\n );\n },\n};\n\nfunction TableHeaderCell({\n headerId,\n isPinned,\n width,\n header,\n type,\n}: VirtualHeader & {\n type: \"header\" | \"footer\";\n}) {\n return (\n <TableCell\n component=\"div\"\n className=\"th\"\n data-header-id={headerId}\n data-is-pinned={isPinned}\n sx={{\n transition: \"background-color 0.2s ease\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 1 : 0,\n display: \"flex\",\n overflow: \"hidden\",\n height: \"var(--header-row-height)\",\n width,\n position: \"relative\",\n flexShrink: 0,\n alignItems: \"center\",\n gap: \"8px\",\n justifyContent: \"space-between\",\n padding: \"6px 12px\",\n boxSizing: \"border-box\",\n fontWeight: 600,\n backgroundColor: isPinned\n ? (theme) => theme.palette.background.paper\n : \"transparent\",\n borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n {header && !header.isPlaceholder\n ? flexRender(header.column.columnDef[type], header.getContext())\n : null}\n </div>\n </TableCell>\n );\n}\n\nexport { AnoccaSkin };\n\nfunction TableHeaderRow({ children }: { children: React.ReactNode }) {\n return (\n <TableRow\n component=\"div\"\n sx={{ height: \"var(--row-height)\", display: \"flex\" }}\n >\n {children}\n </TableRow>\n );\n}\n"
|
|
5
|
+
"import {\n Box,\n Paper,\n SxProps,\n TableBody,\n TableCell,\n TableFooter,\n TableHead,\n TableRow,\n Theme,\n useTheme,\n} from \"@mui/material\";\nimport {\n Skin,\n useTableContext,\n useTableCssVars,\n VirtualHeader,\n} from \"@rttui/core\";\nimport React, { CSSProperties } from \"react\";\nimport { flexRender } from \"@tanstack/react-table\";\n\nconst AnoccaSkin: Skin = {\n rowHeight: 32,\n headerRowHeight: 32,\n footerRowHeight: 32,\n OverlayContainer: ({ children }) => {\n const { width, height } = useTableContext();\n const cssVars = useTableCssVars();\n return (\n <div\n className=\"rttui-overlay-container\"\n style={{\n position: \"relative\",\n overflow: \"hidden\",\n width: width + \"px\",\n height: height + \"px\",\n ...cssVars,\n }}\n >\n {children}\n </div>\n );\n },\n OuterContainer: ({ children }) => {\n const { tableContainerRef } = useTableContext();\n\n return (\n <Paper\n ref={tableContainerRef}\n className=\"outer-container\"\n elevation={2}\n sx={{\n overflow: \"auto\",\n width: \"var(--table-container-width)\",\n height: \"var(--table-container-height)\",\n position: \"relative\",\n contain: \"paint\",\n willChange: \"transform\",\n borderRadius: 1,\n }}\n >\n {children}\n </Paper>\n );\n },\n TableScroller: () => {\n return (\n <div\n className=\"table-scroller\"\n style={{\n width: \"var(--table-width)\",\n height:\n \"calc(var(--table-height) + var(--header-height) + var(--footer-height))\",\n position: \"absolute\",\n }}\n ></div>\n );\n },\n TableHeader: ({ children }) => {\n return (\n <TableHead\n component=\"div\"\n className=\"thead\"\n sx={{\n position: \"sticky\",\n top: 0,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 1px 0 ${theme.palette.divider}`,\n }}\n >\n {children}\n </TableHead>\n );\n },\n TableFooter: ({ children }) => {\n return (\n <TableFooter\n component=\"div\"\n className=\"table-footer\"\n sx={{\n position: \"sticky\",\n bottom: -1,\n width: \"var(--table-width)\",\n zIndex: 2,\n backgroundColor: (theme) => theme.palette.background.paper,\n boxShadow: (theme) => `0 -1px 0 ${theme.palette.divider}`,\n }}\n >\n {children}\n </TableFooter>\n );\n },\n HeaderRow: TableHeaderRow,\n HeaderCell: (props) => {\n return <TableHeaderCell {...props} />;\n },\n TableBody: ({ children }) => {\n return (\n <TableBody\n component=\"div\"\n className=\"table-body\"\n sx={{ position: \"relative\", width: \"var(--table-width)\" }}\n >\n {children}\n </TableBody>\n );\n },\n PinnedRows: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n };\n if (position === \"top\") {\n style.top = \"var(--header-height)\";\n style.borderBottom = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 4px 8px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -6px rgba(0, 0, 0, 0.1)\";\n } else if (position === \"bottom\") {\n style.bottom = \"var(--footer-height)\";\n style.borderTop = (theme) => `1px solid ${theme.palette.divider}`;\n style.boxShadow =\n \"0 -4px 8px -4px rgba(0, 0, 0, 0.15), 0 -6px 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n\n const Component = position === \"top\" ? TableHead : TableFooter;\n\n return (\n <Component\n component=\"div\"\n className={`sticky-${position}-rows`}\n sx={style}\n >\n {children}\n </Component>\n );\n },\n PinnedCols: ({ children, position, pinned }) => {\n if (pinned.length === 0) {\n return null;\n }\n\n const style: SxProps<Theme> = {\n position: \"sticky\",\n zIndex: 3,\n display: \"flex\",\n };\n\n if (position === \"left\") {\n style.left = 0;\n } else if (position === \"right\") {\n style.right = 0;\n }\n\n return (\n <Box component=\"div\" className={`sticky-${position}-cols`} sx={style}>\n {children}\n </Box>\n );\n },\n\n TableRowWrapper: React.forwardRef(\n ({ children, flatIndex, dndStyle }, ref) => {\n const theme = useTheme();\n const backgroundColor = (theme: Theme) => {\n const baseColor =\n flatIndex % 2 === 0\n ? theme.palette.background.paper\n : theme.palette.mode === \"dark\"\n ? theme.palette.grey[900]\n : theme.palette.grey[100];\n return baseColor;\n };\n\n const vars: Record<string, string> = {\n \"--row-background-color\": backgroundColor(theme),\n };\n\n return (\n <Box\n sx={{\n ...dndStyle,\n ...vars,\n }}\n data-index={flatIndex}\n ref={ref}\n >\n {children}\n </Box>\n );\n },\n ),\n TableRow: ({ children }) => {\n return (\n <TableRow\n component=\"div\"\n className=\"table-row\"\n sx={{\n position: \"relative\",\n width: \"var(--table-width)\",\n display: \"flex\",\n height: \"var(--row-height)\",\n zIndex: 1,\n boxSizing: \"border-box\",\n backgroundColor: \"var(--row-background-color)\",\n }}\n >\n {children}\n </TableRow>\n );\n },\n TableRowExpandedContent: ({ children }) => {\n const { table } = useTableContext();\n return (\n <TableRow\n component=\"div\"\n className=\"expanded-row\"\n sx={{\n backgroundColor: (theme) => theme.palette.background.default,\n }}\n >\n <TableCell\n component=\"div\"\n className=\"expanded-cell\"\n colSpan={table.getAllLeafColumns().length}\n sx={{\n padding: 2,\n }}\n >\n {children}\n </TableCell>\n </TableRow>\n );\n },\n Cell: React.forwardRef(({ children, header, isMeasuring }, ref) => {\n const { isPinned } = header;\n return (\n <TableCell\n className=\"td\"\n component=\"div\"\n ref={ref}\n sx={{\n height: \"var(--row-height)\",\n width: isMeasuring ? \"auto\" : header.width,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 5 : 0,\n boxSizing: \"border-box\",\n alignItems: \"center\",\n gap: \"8px\",\n display: \"flex\",\n justifyContent: \"flex-start\",\n alignContent: \"center\",\n padding: \"6px 12px\",\n backgroundColor: \"var(--row-background-color)\",\n borderBottom: \"none\",\n flexShrink: 0,\n position: \"relative\",\n borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n \".table-row:hover &\": {\n backgroundColor: (theme) => {\n // Always use solid background colors for all cells on hover\n return theme.palette.mode === \"dark\"\n ? \"#1e1e52\" // Dark blue solid color\n : \"#E3F2FD\"; // Light blue solid color\n },\n zIndex: isPinned ? 2 : 0,\n },\n }}\n >\n {children}\n </TableCell>\n );\n }),\n PinnedColsOverlay: ({ position }) => {\n const { table } = useTableContext();\n if (!table.getIsSomeColumnsPinned(position)) {\n return null;\n }\n const width =\n position === \"left\"\n ? table.getLeftTotalSize()\n : table.getRightTotalSize();\n\n const style: CSSProperties = {\n width,\n [position]: 0,\n position: \"sticky\",\n top: 0,\n bottom: 0,\n zIndex: 20,\n pointerEvents: \"none\",\n };\n\n if (position === \"left\") {\n style.boxShadow =\n \"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n style.borderRight = \"1px solid var(--table-border-color)\";\n } else if (position === \"right\") {\n style.boxShadow =\n \"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)\";\n }\n return <div className={`pinned-${position}-overlay`} style={style} />;\n },\n};\n\nfunction TableHeaderCell({\n headerId,\n isPinned,\n width,\n header,\n type,\n}: VirtualHeader & {\n type: \"header\" | \"footer\";\n}) {\n return (\n <TableCell\n component=\"div\"\n className=\"th\"\n data-header-id={headerId}\n data-is-pinned={isPinned}\n sx={{\n transition: \"background-color 0.2s ease\",\n whiteSpace: \"nowrap\",\n zIndex: isPinned ? 1 : 0,\n display: \"flex\",\n overflow: \"hidden\",\n height: \"var(--header-row-height)\",\n width,\n position: \"relative\",\n flexShrink: 0,\n alignItems: \"center\",\n gap: \"8px\",\n justifyContent: \"space-between\",\n padding: \"6px 12px\",\n boxSizing: \"border-box\",\n fontWeight: 600,\n backgroundColor: isPinned\n ? (theme) => theme.palette.background.paper\n : \"transparent\",\n borderRight: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <div style={{ flex: 1, display: \"flex\", justifyContent: \"flex-start\" }}>\n {header && !header.isPlaceholder\n ? flexRender(header.column.columnDef[type], header.getContext())\n : null}\n </div>\n </TableCell>\n );\n}\n\nexport { AnoccaSkin };\n\nfunction TableHeaderRow({ children }: { children: React.ReactNode }) {\n return (\n <TableRow\n component=\"div\"\n sx={{ height: \"var(--row-height)\", display: \"flex\" }}\n >\n {children}\n </TableRow>\n );\n}\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": ";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAEA,IAAM,aAAmB;AAAA,EACvB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": ";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAEA,IAAM,aAAmB;AAAA,EACvB,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,kBAAkB,GAAG,eAAe;AAAA,IAClC,QAAQ,OAAO,WAAW,gBAAgB;AAAA,IAC1C,MAAM,UAAU,gBAAgB;AAAA,IAChC,uBACE,IAWE,OAXF;AAAA,MACE,WAAU;AAAA,MACV,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO,QAAQ;AAAA,QACf,QAAQ,SAAS;AAAA,WACd;AAAA,MACL;AAAA,MARF;AAAA,KAWE;AAAA;AAAA,EAGN,gBAAgB,GAAG,eAAe;AAAA,IAChC,QAAQ,sBAAsB,gBAAgB;AAAA,IAE9C,uBACE,IAeE,OAfF;AAAA,MACE,KAAK;AAAA,MACL,WAAU;AAAA,MACV,WAAW;AAAA,MACX,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,cAAc;AAAA,MAChB;AAAA,MAZF;AAAA,KAeE;AAAA;AAAA,EAGN,eAAe,MAAM;AAAA,IACnB,uBACE,IAQG,OARH;AAAA,MACE,WAAU;AAAA,MACV,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QACE;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,KACC;AAAA;AAAA,EAGP,aAAa,GAAG,eAAe;AAAA,IAC7B,uBACE,IAaE,WAbF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA,QACrD,WAAW,CAAC,UAAU,WAAW,MAAM,QAAQ;AAAA,MACjD;AAAA,MAVF;AAAA,KAaE;AAAA;AAAA,EAGN,aAAa,GAAG,eAAe;AAAA,IAC7B,uBACE,IAaE,aAbF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA,QACrD,WAAW,CAAC,UAAU,YAAY,MAAM,QAAQ;AAAA,MAClD;AAAA,MAVF;AAAA,KAaE;AAAA;AAAA,EAGN,WAAW;AAAA,EACX,YAAY,CAAC,UAAU;AAAA,IACrB,uBAAO,IAAC,iBAAD;AAAA,SAAqB;AAAA,KAAO;AAAA;AAAA,EAErC,WAAW,GAAG,eAAe;AAAA,IAC3B,uBACE,IAME,WANF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI,EAAE,UAAU,YAAY,OAAO,qBAAqB;AAAA,MAH1D;AAAA,KAME;AAAA;AAAA,EAGN,YAAY,GAAG,UAAU,UAAU,aAAa;AAAA,IAC9C,IAAI,OAAO,WAAW,GAAG;AAAA,MACvB,OAAO;AAAA,IACT;AAAA,IAEA,MAAM,QAAwB;AAAA,MAC5B,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,IACA,IAAI,aAAa,OAAO;AAAA,MACtB,MAAM,MAAM;AAAA,MACZ,MAAM,eAAe,CAAC,UAAU,aAAa,MAAM,QAAQ;AAAA,MAC3D,MAAM,YACJ;AAAA,IACJ,EAAO,SAAI,aAAa,UAAU;AAAA,MAChC,MAAM,SAAS;AAAA,MACf,MAAM,YAAY,CAAC,UAAU,aAAa,MAAM,QAAQ;AAAA,MACxD,MAAM,YACJ;AAAA,IACJ;AAAA,IAEA,MAAM,YAAY,aAAa,QAAQ,YAAY;AAAA,IAEnD,uBACE,IAME,WANF;AAAA,MACE,WAAU;AAAA,MACV,WAAW,UAAU;AAAA,MACrB,IAAI;AAAA,MAHN;AAAA,KAME;AAAA;AAAA,EAGN,YAAY,GAAG,UAAU,UAAU,aAAa;AAAA,IAC9C,IAAI,OAAO,WAAW,GAAG;AAAA,MACvB,OAAO;AAAA,IACT;AAAA,IAEA,MAAM,QAAwB;AAAA,MAC5B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IAEA,IAAI,aAAa,QAAQ;AAAA,MACvB,MAAM,OAAO;AAAA,IACf,EAAO,SAAI,aAAa,SAAS;AAAA,MAC/B,MAAM,QAAQ;AAAA,IAChB;AAAA,IAEA,uBACE,IAEE,KAFF;AAAA,MAAK,WAAU;AAAA,MAAM,WAAW,UAAU;AAAA,MAAiB,IAAI;AAAA,MAA/D;AAAA,KAEE;AAAA;AAAA,EAIN,iBAAiB,MAAM,WACrB,GAAG,UAAU,WAAW,YAAY,QAAQ;AAAA,IAC1C,MAAM,QAAQ,SAAS;AAAA,IACvB,MAAM,kBAAkB,CAAC,WAAiB;AAAA,MACxC,MAAM,YACJ,YAAY,MAAM,IACd,OAAM,QAAQ,WAAW,QACzB,OAAM,QAAQ,SAAS,SACrB,OAAM,QAAQ,KAAK,OACnB,OAAM,QAAQ,KAAK;AAAA,MAC3B,OAAO;AAAA;AAAA,IAGT,MAAM,OAA+B;AAAA,MACnC,0BAA0B,gBAAgB,KAAK;AAAA,IACjD;AAAA,IAEA,uBACE,IASE,KATF;AAAA,MACE,IAAI;AAAA,WACC;AAAA,WACA;AAAA,MACL;AAAA,MACA,cAAY;AAAA,MACZ;AAAA,MANF;AAAA,KASE;AAAA,GAGR;AAAA,EACA,UAAU,GAAG,eAAe;AAAA,IAC1B,uBACE,IAcE,UAdF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,iBAAiB;AAAA,MACnB;AAAA,MAXF;AAAA,KAcE;AAAA;AAAA,EAGN,yBAAyB,GAAG,eAAe;AAAA,IACzC,QAAQ,UAAU,gBAAgB;AAAA,IAClC,uBACE,IAiBE,UAjBF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV,IAAI;AAAA,QACF,iBAAiB,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA,MACvD;AAAA,MALF,0BAOE,IASE,WATF;AAAA,QACE,WAAU;AAAA,QACV,WAAU;AAAA,QACV,SAAS,MAAM,kBAAkB,EAAE;AAAA,QACnC,IAAI;AAAA,UACF,SAAS;AAAA,QACX;AAAA,QANF;AAAA,OASE;AAAA,KACF;AAAA;AAAA,EAGN,MAAM,MAAM,WAAW,GAAG,UAAU,QAAQ,eAAe,QAAQ;AAAA,IACjE,QAAQ,aAAa;AAAA,IACrB,uBACE,IAmCE,WAnCF;AAAA,MACE,WAAU;AAAA,MACV,WAAU;AAAA,MACV;AAAA,MACA,IAAI;AAAA,QACF,QAAQ;AAAA,QACR,OAAO,cAAc,SAAS,OAAO;AAAA,QACrC,UAAU;AAAA,QACV,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,QAAQ,WAAW,IAAI;AAAA,QACvB,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,aAAa,CAAC,UAAU,aAAa,MAAM,QAAQ;AAAA,QACnD,sBAAsB;AAAA,UACpB,iBAAiB,CAAC,UAAU;AAAA,YAE1B,OAAO,MAAM,QAAQ,SAAS,SAC1B,YACA;AAAA;AAAA,UAEN,QAAQ,WAAW,IAAI;AAAA,QACzB;AAAA,MACF;AAAA,MAhCF;AAAA,KAmCE;AAAA,GAEL;AAAA,EACD,mBAAmB,GAAG,eAAe;AAAA,IACnC,QAAQ,UAAU,gBAAgB;AAAA,IAClC,KAAK,MAAM,uBAAuB,QAAQ,GAAG;AAAA,MAC3C,OAAO;AAAA,IACT;AAAA,IACA,MAAM,QACJ,aAAa,SACT,MAAM,iBAAiB,IACvB,MAAM,kBAAkB;AAAA,IAE9B,MAAM,QAAuB;AAAA,MAC3B;AAAA,OACC,WAAW;AAAA,MACZ,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,IACjB;AAAA,IAEA,IAAI,aAAa,QAAQ;AAAA,MACvB,MAAM,YACJ;AAAA,MACF,MAAM,cAAc;AAAA,IACtB,EAAO,SAAI,aAAa,SAAS;AAAA,MAC/B,MAAM,YACJ;AAAA,IACJ;AAAA,IACA,uBAAO,IAAC,OAAD;AAAA,MAAK,WAAW,UAAU;AAAA,MAAoB;AAAA,KAAc;AAAA;AAEvE;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAGC;AAAA,EACD,uBACE,IAgCE,WAhCF;AAAA,IACE,WAAU;AAAA,IACV,WAAU;AAAA,IACV,kBAAgB;AAAA,IAChB,kBAAgB;AAAA,IAChB,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,QAAQ,WAAW,IAAI;AAAA,MACvB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MACR;AAAA,MACA,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,iBAAiB,WACb,CAAC,UAAU,MAAM,QAAQ,WAAW,QACpC;AAAA,MACJ,aAAa,CAAC,UAAU,aAAa,MAAM,QAAQ;AAAA,IACrD;AAAA,IAzBF,0BA2BE,IAIE,OAJF;AAAA,MAAK,OAAO,EAAE,MAAM,GAAG,SAAS,QAAQ,gBAAgB,aAAa;AAAA,MAArE,UACG,WAAW,OAAO,gBACf,WAAW,OAAO,OAAO,UAAU,OAAO,OAAO,WAAW,CAAC,IAC7D;AAAA,KACJ;AAAA,GACF;AAAA;AAMN,SAAS,cAAc,GAAG,YAA2C;AAAA,EACnE,uBACE,IAKE,UALF;AAAA,IACE,WAAU;AAAA,IACV,IAAI,EAAE,QAAQ,qBAAqB,SAAS,OAAO;AAAA,IAFrD;AAAA,GAKE;AAAA;",
|
|
8
|
+
"debugId": "252CC93CB598D7DF64756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
package/dist/mjs/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rttui/skin-anocca",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"main": "./dist/cjs/index.cjs",
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@rttui/core": "^1.0.
|
|
6
|
+
"@rttui/core": "^1.0.12"
|
|
7
7
|
},
|
|
8
8
|
"module": "./dist/mjs/index.mjs",
|
|
9
9
|
"types": "./dist/types/index.d.ts",
|
package/src/index.tsx
CHANGED
|
@@ -16,16 +16,33 @@ import {
|
|
|
16
16
|
useTableCssVars,
|
|
17
17
|
VirtualHeader,
|
|
18
18
|
} from "@rttui/core";
|
|
19
|
-
import React from "react";
|
|
19
|
+
import React, { CSSProperties } from "react";
|
|
20
20
|
import { flexRender } from "@tanstack/react-table";
|
|
21
21
|
|
|
22
22
|
const AnoccaSkin: Skin = {
|
|
23
23
|
rowHeight: 32,
|
|
24
24
|
headerRowHeight: 32,
|
|
25
25
|
footerRowHeight: 32,
|
|
26
|
-
|
|
27
|
-
const { width, height
|
|
26
|
+
OverlayContainer: ({ children }) => {
|
|
27
|
+
const { width, height } = useTableContext();
|
|
28
28
|
const cssVars = useTableCssVars();
|
|
29
|
+
return (
|
|
30
|
+
<div
|
|
31
|
+
className="rttui-overlay-container"
|
|
32
|
+
style={{
|
|
33
|
+
position: "relative",
|
|
34
|
+
overflow: "hidden",
|
|
35
|
+
width: width + "px",
|
|
36
|
+
height: height + "px",
|
|
37
|
+
...cssVars,
|
|
38
|
+
}}
|
|
39
|
+
>
|
|
40
|
+
{children}
|
|
41
|
+
</div>
|
|
42
|
+
);
|
|
43
|
+
},
|
|
44
|
+
OuterContainer: ({ children }) => {
|
|
45
|
+
const { tableContainerRef } = useTableContext();
|
|
29
46
|
|
|
30
47
|
return (
|
|
31
48
|
<Paper
|
|
@@ -34,13 +51,12 @@ const AnoccaSkin: Skin = {
|
|
|
34
51
|
elevation={2}
|
|
35
52
|
sx={{
|
|
36
53
|
overflow: "auto",
|
|
37
|
-
width: width
|
|
38
|
-
height: height
|
|
54
|
+
width: "var(--table-container-width)",
|
|
55
|
+
height: "var(--table-container-height)",
|
|
39
56
|
position: "relative",
|
|
40
57
|
contain: "paint",
|
|
41
58
|
willChange: "transform",
|
|
42
59
|
borderRadius: 1,
|
|
43
|
-
...cssVars,
|
|
44
60
|
}}
|
|
45
61
|
>
|
|
46
62
|
{children}
|
|
@@ -157,13 +173,8 @@ const AnoccaSkin: Skin = {
|
|
|
157
173
|
|
|
158
174
|
if (position === "left") {
|
|
159
175
|
style.left = 0;
|
|
160
|
-
style.boxShadow =
|
|
161
|
-
"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
162
176
|
} else if (position === "right") {
|
|
163
177
|
style.right = 0;
|
|
164
|
-
style.borderLeft = (theme) => `1px solid ${theme.palette.divider}`;
|
|
165
|
-
style.boxShadow =
|
|
166
|
-
"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
167
178
|
}
|
|
168
179
|
|
|
169
180
|
return (
|
|
@@ -246,15 +257,16 @@ const AnoccaSkin: Skin = {
|
|
|
246
257
|
</TableRow>
|
|
247
258
|
);
|
|
248
259
|
},
|
|
249
|
-
Cell: ({ children, header }) => {
|
|
260
|
+
Cell: React.forwardRef(({ children, header, isMeasuring }, ref) => {
|
|
250
261
|
const { isPinned } = header;
|
|
251
262
|
return (
|
|
252
263
|
<TableCell
|
|
253
264
|
className="td"
|
|
254
265
|
component="div"
|
|
266
|
+
ref={ref}
|
|
255
267
|
sx={{
|
|
256
268
|
height: "var(--row-height)",
|
|
257
|
-
width: header.width,
|
|
269
|
+
width: isMeasuring ? "auto" : header.width,
|
|
258
270
|
overflow: "hidden",
|
|
259
271
|
textOverflow: "ellipsis",
|
|
260
272
|
whiteSpace: "nowrap",
|
|
@@ -285,6 +297,36 @@ const AnoccaSkin: Skin = {
|
|
|
285
297
|
{children}
|
|
286
298
|
</TableCell>
|
|
287
299
|
);
|
|
300
|
+
}),
|
|
301
|
+
PinnedColsOverlay: ({ position }) => {
|
|
302
|
+
const { table } = useTableContext();
|
|
303
|
+
if (!table.getIsSomeColumnsPinned(position)) {
|
|
304
|
+
return null;
|
|
305
|
+
}
|
|
306
|
+
const width =
|
|
307
|
+
position === "left"
|
|
308
|
+
? table.getLeftTotalSize()
|
|
309
|
+
: table.getRightTotalSize();
|
|
310
|
+
|
|
311
|
+
const style: CSSProperties = {
|
|
312
|
+
width,
|
|
313
|
+
[position]: 0,
|
|
314
|
+
position: "sticky",
|
|
315
|
+
top: 0,
|
|
316
|
+
bottom: 0,
|
|
317
|
+
zIndex: 20,
|
|
318
|
+
pointerEvents: "none",
|
|
319
|
+
};
|
|
320
|
+
|
|
321
|
+
if (position === "left") {
|
|
322
|
+
style.boxShadow =
|
|
323
|
+
"4px 0 8px -4px rgba(0, 0, 0, 0.15), 6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
324
|
+
style.borderRight = "1px solid var(--table-border-color)";
|
|
325
|
+
} else if (position === "right") {
|
|
326
|
+
style.boxShadow =
|
|
327
|
+
"-4px 0 8px -4px rgba(0, 0, 0, 0.15), -6px 0 12px -6px rgba(0, 0, 0, 0.1)";
|
|
328
|
+
}
|
|
329
|
+
return <div className={`pinned-${position}-overlay`} style={style} />;
|
|
288
330
|
},
|
|
289
331
|
};
|
|
290
332
|
|