Skip to content

Commit 3c4503a

Browse files
burbuli8raburbuli8ra
authored
chore(netdata table): add border to last sticky column cells (#409)
* chore(netdata table): add border separator to last pinned column * chore(netadata table): review changes Initialize `pinnedStyles` as an empty object * v2.5.8
1 parent ecf013c commit 3c4503a

File tree

8 files changed

+163
-145
lines changed

8 files changed

+163
-145
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@netdata/netdata-ui",
3-
"version": "2.5.7",
3+
"version": "2.5.8",
44
"description": "netdata UI kit",
55
"main": "./lib/index.js",
66
"files": [

‎src/components/icon/styled.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const SIZES = {
1010
}
1111

1212
const styledColor = ({ theme, color }) => color && `fill: ${getColor(color)({ theme })};`
13-
const styledhoverColor = ({ theme, hoverColor }) =>
13+
const styledHoverColor = ({ theme, hoverColor }) =>
1414
hoverColor && `&:hover { fill: ${getColor(hoverColor)({ theme })}; }`
1515
const styledRotate = ({ rotate }) => !isNaN(rotate) && `transform: rotate(${rotate * 90}deg);`
1616

@@ -21,7 +21,7 @@ export const StyledIcon = styled.svg`
2121
pointer-events: ${({ disabled }) => (disabled ? "none" : "unset")};
2222
${styledRotate}
2323
${styledColor}
24-
${styledhoverColor}
24+
${styledHoverColor}
2525
${margin}
2626
${alignSelf}
2727
`

‎src/components/tableV2/core/base-table.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,6 @@ Table.HeadCell = forwardRef(
119119
children,
120120
align = "left",
121121
width,
122-
maxWidth,
123-
minWidth,
124122
tooltipText,
125123
filter,
126124
onMouseDown,
@@ -134,6 +132,7 @@ Table.HeadCell = forwardRef(
134132
ref
135133
) => (
136134
<StyledHeaderCell
135+
as="th"
137136
ref={ref}
138137
sx={{
139138
textAlign: align,
@@ -145,7 +144,6 @@ Table.HeadCell = forwardRef(
145144
...headStyles,
146145
}}
147146
width={`${width}px`}
148-
as="th"
149147
{...props}
150148
>
151149
<Flex>
@@ -255,39 +253,41 @@ Table.Body = forwardRef(({ children, ...props }, ref) => (
255253
Table.Cell = forwardRef(
256254
(
257255
{
256+
align = "left",
257+
cellStyles = {},
258258
children,
259-
onClick,
260-
width,
261259
maxWidth,
262260
minWidth,
263-
align = "left",
264-
cellStyles = {},
261+
onClick,
262+
pinnedStyles = {},
265263
styles = {},
266-
...props
264+
width,
265+
...rest
267266
},
268267
ref
269268
) => {
270269
const handleClick = e => {
271270
e.persist()
272-
if (props.stopPropagation) e.stopPropagation()
271+
if (rest.stopPropagation) e.stopPropagation()
273272
onClick?.()
274273
}
275274
return (
276275
<Box
277-
width={{ max: `${maxWidth}px`, base: `${width}px`, min: `${minWidth}px` }}
276+
as="td"
277+
onClick={handleClick}
278278
padding={[3]}
279+
ref={ref}
279280
sx={{
280281
textAlign: align,
281282
height: "65px",
282283
maxHeight: "65px",
283284
whiteSpace: "nowrap",
284285
...cellStyles,
286+
...pinnedStyles,
285287
...styles,
286288
}}
287-
as="td"
288-
ref={ref}
289-
{...props}
290-
onClick={handleClick}
289+
width={{ max: `${maxWidth}px`, base: `${width}px`, min: `${minWidth}px` }}
290+
{...rest}
291291
>
292292
{children}
293293
</Box>

‎src/components/tableV2/core/dataCell.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import React, { memo } from "react"
22

33
import Table from "./base-table"
44

5-
const DataCell = ({ cell, testPrefix, flexRender }) => {
5+
const DataCell = ({ cell, flexRender, pinnedStyles, testPrefix }) => {
66
return (
77
<Table.Cell
8-
width={cell.column.getSize()}
9-
minWidth={cell.column.columnDef.minSize}
10-
maxWidth={cell.column.columnDef.maxSize}
118
data-testid={`netdata-table-cell-${cell.column.columnDef.id}${testPrefix}`}
129
key={cell.id}
10+
maxWidth={cell.column.columnDef.maxSize}
11+
minWidth={cell.column.columnDef.minSize}
12+
pinnedStyles={pinnedStyles}
13+
width={cell.column.getSize()}
1314
{...cell.column.columnDef.meta}
1415
>
1516
{flexRender(cell.column.columnDef.cell, cell.getContext())}

‎src/components/tableV2/core/fullTable.js‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,46 @@ import makeHeadCell from "./headCell"
55
import Rows from "./rows"
66

77
const FullTable = ({
8-
tableRef,
9-
getRowHandler,
10-
testPrefix,
118
dataGa,
12-
headers,
13-
enableSorting,
14-
testPrefixCallback,
15-
onClickRow,
16-
table,
179
disableClickRow,
10+
enableResize,
11+
enableSorting,
1812
flexRender,
13+
getRowHandler,
14+
headers,
15+
onClickRow,
1916
onHoverRow,
20-
enableResize,
17+
pinnedStyles = {},
18+
table,
19+
tableRef,
20+
testPrefix,
21+
testPrefixCallback,
2122
width,
2223
}) => {
2324
return (
2425
<Table
25-
width={width}
26-
ref={tableRef}
26+
dataGa={dataGa}
2727
data-testid={`netdata-table${testPrefix}`}
28+
ref={tableRef}
2829
testPrefix={testPrefix}
29-
dataGa={dataGa}
30+
width={width}
3031
>
3132
<Table.Head data-testid={`netdata-table-head${testPrefix}`}>
3233
<Table.HeadRow data-testid={`netdata-table-headRow${testPrefix}`}>
33-
{makeHeadCell({ headers, enableSorting, testPrefix, enableResize, table })}
34+
{makeHeadCell({ enableResize, enableSorting, headers, pinnedStyles, table, testPrefix })}
3435
</Table.HeadRow>
3536
</Table.Head>
3637
<Table.Body data-testid={`netdata-table-body${testPrefix}`}>
3738
<Rows
38-
testPrefix={testPrefix}
39-
testPrefixCallback={testPrefixCallback}
40-
onClickRow={onClickRow}
41-
table={table}
4239
disableClickRow={disableClickRow}
4340
flexRender={flexRender}
4441
getRowHandler={getRowHandler}
42+
onClickRow={onClickRow}
4543
onHoverRow={onHoverRow}
44+
pinnedStyles={pinnedStyles}
45+
table={table}
46+
testPrefix={testPrefix}
47+
testPrefixCallback={testPrefixCallback}
4648
/>
4749
</Table.Body>
4850
</Table>

‎src/components/tableV2/core/headCell.js‎

Lines changed: 65 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -37,82 +37,87 @@ const availableFilters = {
3737
default: SearchFilter,
3838
}
3939

40-
const makeHeadCell = ({ headers, enableSorting, testPrefix, enableResize, table }) => {
41-
const HeadCell = headers.map(
42-
({ id, colSpan, getContext, isPlaceholder, column, getResizeHandler, getSize }) => {
43-
const { getCanSort, columnDef, getCanResize, getIsResizing } = column
44-
const { meta } = columnDef
45-
const headStyles = meta?.headStyles || {}
46-
const styles = meta?.styles || {}
47-
48-
const selectedFilter = meta && meta?.filter?.component ? meta?.filter?.component : "default"
49-
const filterOptions = meta && meta?.filter ? meta?.filter : {}
50-
const tooltipText = meta && meta?.tooltip ? meta?.tooltip : ""
51-
const Filter = availableFilters[selectedFilter]
40+
const makeHeadCell = ({
41+
enableResize,
42+
enableSorting,
43+
headers,
44+
pinnedStyles = {},
45+
table,
46+
testPrefix,
47+
}) =>
48+
headers.map(({ id, colSpan, getContext, isPlaceholder, column, getResizeHandler, getSize }) => {
49+
const { getCanSort, columnDef, getCanResize, getIsResizing } = column
50+
const { meta } = columnDef
51+
const headStyles = {
52+
...(meta?.headStyles || {}),
53+
...pinnedStyles,
54+
}
55+
const styles = meta?.styles || {}
5256

53-
const resizeFuntions =
54-
enableResize && getCanResize()
55-
? {
56-
onMouseDown: getResizeHandler(),
57-
onTouchStart: getResizeHandler(),
58-
getIsResizing,
59-
deltaOffset: table.getState().columnSizingInfo.deltaOffset,
60-
}
61-
: {}
57+
const selectedFilter = meta && meta?.filter?.component ? meta?.filter?.component : "default"
58+
const filterOptions = meta && meta?.filter ? meta?.filter : {}
59+
const tooltipText = meta && meta?.tooltip ? meta?.tooltip : ""
60+
const Filter = availableFilters[selectedFilter]
6261

63-
const headWidth = getSize()
62+
const resizeFuntions =
63+
enableResize && getCanResize()
64+
? {
65+
onMouseDown: getResizeHandler(),
66+
onTouchStart: getResizeHandler(),
67+
getIsResizing,
68+
deltaOffset: table.getState().columnSizingInfo.deltaOffset,
69+
}
70+
: {}
6471

65-
if (getCanSort() && enableSorting) {
66-
return (
67-
<Table.SortingHeadCell
68-
width={headWidth}
69-
minWidth={column.columnDef.minSize}
70-
maxWidth={column.columnDef.maxSize}
71-
data-testid={`netdata-table-head-cell${testPrefix}`}
72-
sortby-testid={`netdata-table-head-cell-sortyBy-${id}${testPrefix}`}
73-
sortDirection={column.getIsSorted()}
74-
onSortClicked={column.getToggleSortingHandler()}
75-
key={id}
76-
colSpan={colSpan}
77-
filter={
78-
column.getCanFilter() && (
79-
<Filter column={column} testPrefix={testPrefix} {...filterOptions} />
80-
)
81-
}
82-
headStyles={headStyles}
83-
styles={styles}
84-
tooltipText={tooltipText}
85-
{...resizeFuntions}
86-
>
87-
{isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}{" "}
88-
</Table.SortingHeadCell>
89-
)
90-
}
72+
const headWidth = getSize()
9173

74+
if (getCanSort() && enableSorting) {
9275
return (
93-
<Table.HeadCell
94-
width={headWidth}
95-
minWidth={column.columnDef.minSize}
96-
maxWidth={column.columnDef.maxSize}
76+
<Table.SortingHeadCell
77+
colSpan={colSpan}
9778
data-testid={`netdata-table-head-cell${testPrefix}`}
98-
key={id}
99-
styles={styles}
100-
tooltipText={tooltipText}
10179
filter={
10280
column.getCanFilter() && (
10381
<Filter column={column} testPrefix={testPrefix} {...filterOptions} />
10482
)
10583
}
10684
headStyles={headStyles}
85+
key={id}
86+
maxWidth={column.columnDef.maxSize}
87+
minWidth={column.columnDef.minSize}
88+
onSortClicked={column.getToggleSortingHandler()}
89+
sortby-testid={`netdata-table-head-cell-sortyBy-${id}${testPrefix}`}
90+
sortDirection={column.getIsSorted()}
91+
styles={styles}
92+
tooltipText={tooltipText}
93+
width={headWidth}
10794
{...resizeFuntions}
10895
>
109-
{isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}
110-
</Table.HeadCell>
96+
{isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}{" "}
97+
</Table.SortingHeadCell>
11198
)
11299
}
113-
)
114100

115-
return HeadCell
116-
}
101+
return (
102+
<Table.HeadCell
103+
data-testid={`netdata-table-head-cell${testPrefix}`}
104+
filter={
105+
column.getCanFilter() && (
106+
<Filter column={column} testPrefix={testPrefix} {...filterOptions} />
107+
)
108+
}
109+
headStyles={headStyles}
110+
maxWidth={column.columnDef.maxSize}
111+
minWidth={column.columnDef.minSize}
112+
key={id}
113+
styles={styles}
114+
tooltipText={tooltipText}
115+
width={headWidth}
116+
{...resizeFuntions}
117+
>
118+
{isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}
119+
</Table.HeadCell>
120+
)
121+
})
117122

118123
export default makeHeadCell

0 commit comments

Comments
 (0)