Skip to content

Commit 2c53b37

Browse files
novykhnovykh
committed
Fix table meta.
1 parent 5d32fd4 commit 2c53b37

9 files changed

Lines changed: 140 additions & 120 deletions

File tree

‎src/components/tableV2/constants.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

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

Lines changed: 23 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,9 @@ import { useTableContext } from "../features/provider"
1515
// than the first one. This is happening when we have a head with a filter and the all
1616
// the cells are being addapted to that size.
1717

18-
const StyledRow = styled.tr`
19-
font-size: 14px;
20-
color: ${getColor("text")};
21-
width: fit-content;
22-
`
23-
const StyledHeaderRow = styled.tr`
24-
background: ${getColor("tableRowBg")};
25-
color: ${getColor("text")};
26-
`
27-
const StyledHeaderCell = styled(Box)`
28-
position: relative;
29-
padding: 4px 8px;
18+
const StyledRow = styled(Text).attrs(props => ({ as: "tr", width: "fit-content", ...props }))``
19+
20+
const HeaderCell = styled(Box)`
3021
border-bottom: 1px solid ${getColor("borderSecondary")};
3122
&:not(:last-child) {
3223
border-right: 1px solid
@@ -56,9 +47,9 @@ Table.Head = forwardRef(({ children, ...props }, ref) => (
5647
))
5748

5849
Table.HeadRow = forwardRef(({ children, ...props }, ref) => (
59-
<StyledHeaderRow ref={ref} {...props}>
50+
<Box as="tr" ref={ref} background="tableRowBg" color="text" {...props}>
6051
{children}
61-
</StyledHeaderRow>
52+
</Box>
6253
))
6354

6455
Table.Resizer = ({ onMouseDown, onTouchStart, deltaOffset, getIsResizing, background }) => {
@@ -118,25 +109,26 @@ Table.HeadCell = forwardRef(
118109
},
119110
ref
120111
) => {
121-
const { hoveredColumn, onHover } = useTableContext()
122-
const isHovering = id === hoveredColumn
112+
const { onHover } = useTableContext()
123113

124114
return (
125-
<StyledHeaderCell
115+
<HeaderCell
126116
as="th"
127117
ref={ref}
128118
sx={{
129119
textAlign: align,
130120
fontSize: "14px",
131-
height: "60px",
132-
...styles,
133-
...headStyles,
134121
}}
122+
position="relative"
123+
padding={[1, 2]}
135124
width={{ min: `${minWidth}px`, max: `${width}px`, base: `${width}px` }}
136125
onMouseEnter={() => onHover({ row: null, column: id })}
137126
onMouseLeave={() => onHover()}
127+
height="60px"
138128
{...props}
139-
background={!props.background && isHovering ? "borderSecondary" : props.background}
129+
{...styles}
130+
{...headStyles}
131+
background={props.background}
140132
>
141133
<Flex>
142134
{children}
@@ -156,7 +148,7 @@ Table.HeadCell = forwardRef(
156148
deltaOffset={deltaOffset}
157149
background={props.background}
158150
/>
159-
</StyledHeaderCell>
151+
</HeaderCell>
160152
)
161153
}
162154
)
@@ -264,7 +256,6 @@ Table.Cell = forwardRef(
264256
minWidth,
265257
onClick,
266258
width,
267-
isColumnHovering,
268259
isRowHovering,
269260
index,
270261
meta,
@@ -287,15 +278,7 @@ Table.Cell = forwardRef(
287278
ref={ref}
288279
sx={{
289280
textAlign: align,
290-
height: "65px",
291-
maxHeight: "65px",
292281
whiteSpace: "nowrap",
293-
...tableMeta?.cellStyles,
294-
...tableMeta?.pinnedStyles,
295-
...tableMeta?.styles,
296-
...meta?.cellStyles,
297-
...meta?.pinnedStyles,
298-
...meta?.styles,
299282
}}
300283
width={{
301284
base: `${width || maxWidth}px`,
@@ -305,17 +288,20 @@ Table.Cell = forwardRef(
305288
overflow="hidden"
306289
{...rest}
307290
background={
308-
!rest.background && (isColumnHovering || isRowHovering)
291+
!rest.background && isRowHovering
309292
? "borderSecondary"
310293
: rest.background || (index % 2 == 0 ? "mainBackground" : "tableRowBg")
311294
}
312295
backgroundOpacity={
313-
isColumnHovering && isRowHovering
314-
? rest.backgroundOpacity
315-
? 0.8
316-
: 1
317-
: rest.backgroundOpacity || 0.7
296+
isRowHovering ? (rest.backgroundOpacity ? 0.8 : 1) : rest.backgroundOpacity || 0.7
318297
}
298+
height="65px"
299+
{...tableMeta?.cellStyles}
300+
{...tableMeta?.pinnedStyles}
301+
{...tableMeta?.styles}
302+
{...meta?.cellStyles}
303+
{...meta?.pinnedStyles}
304+
{...meta?.styles}
319305
>
320306
{children}
321307
</Box>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const FullTable = ({
2121
scrollParentRef,
2222
virtualizeOptions = {},
2323
coloredSortedColumn,
24+
meta,
2425
...rest
2526
}) => {
2627
return (
@@ -58,6 +59,7 @@ const FullTable = ({
5859
testPrefix={testPrefix}
5960
testPrefixCallback={testPrefixCallback}
6061
coloredSortedColumn={coloredSortedColumn}
62+
meta={meta}
6163
{...virtualizeOptions}
6264
/>
6365
</Table.Body>

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

Lines changed: 70 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -46,85 +46,95 @@ const HeadCell = ({
4646
testPrefix,
4747
...rest
4848
}) =>
49-
headers.map(({ id, colSpan, getContext, isPlaceholder, column, getResizeHandler, getSize }) => {
50-
const { getCanSort, columnDef, getCanResize, getIsResizing } = column
51-
const { meta, tableMeta } = columnDef
52-
const headStyles = {
53-
verticalAlign: "baseline",
54-
...(tableMeta?.headStyles || {}),
55-
...(meta?.headStyles || {}),
56-
...pinnedStyles,
57-
}
58-
const styles = meta?.styles || {}
59-
60-
const selectedFilter = meta && meta?.filter?.component ? meta?.filter?.component : "default"
61-
const filterOptions = meta && meta?.filter ? meta?.filter : {}
62-
const tooltipText = meta && meta?.tooltip ? meta?.tooltip : ""
63-
const Filter = availableFilters[selectedFilter]
64-
65-
const resizeFuntions =
66-
enableResize && getCanResize()
67-
? {
68-
onMouseDown: getResizeHandler(),
69-
onTouchStart: getResizeHandler(),
70-
getIsResizing,
71-
deltaOffset: table.getState().columnSizingInfo.deltaOffset,
72-
}
73-
: {}
49+
headers.map(
50+
({ id, colSpan, getContext, isPlaceholder, column, getResizeHandler, getSize }, index) => {
51+
const { getCanSort, columnDef, getCanResize, getIsResizing } = column
52+
53+
const tableMeta =
54+
typeof columnDef.tableMeta === "function"
55+
? columnDef.tableMeta({}, column, index)
56+
: columnDef.tableMeta
57+
58+
const meta =
59+
typeof columnDef.meta === "function" ? columnDef.meta({}, column, index) : columnDef.meta
60+
61+
const headStyles = {
62+
verticalAlign: "baseline",
63+
...(tableMeta?.headStyles || {}),
64+
...(meta?.headStyles || {}),
65+
...pinnedStyles,
66+
}
67+
const styles = meta?.styles || {}
68+
69+
const selectedFilter = meta && meta?.filter?.component ? meta?.filter?.component : "default"
70+
const filterOptions = meta && meta?.filter ? meta?.filter : {}
71+
const tooltipText = meta && meta?.tooltip ? meta?.tooltip : ""
72+
const Filter = availableFilters[selectedFilter]
73+
74+
const resizeFuntions =
75+
enableResize && getCanResize()
76+
? {
77+
onMouseDown: getResizeHandler(),
78+
onTouchStart: getResizeHandler(),
79+
getIsResizing,
80+
deltaOffset: table.getState().columnSizingInfo.deltaOffset,
81+
}
82+
: {}
83+
84+
const headWidth = getSize()
7485

75-
const headWidth = getSize()
86+
if (getCanSort() && enableSorting) {
87+
return (
88+
<Table.SortingHeadCell
89+
colSpan={colSpan}
90+
data-testid={`netdata-table-head-cell${testPrefix}`}
91+
filter={
92+
column.getCanFilter() && (
93+
<Filter column={column} testPrefix={testPrefix} {...filterOptions} />
94+
)
95+
}
96+
headStyles={headStyles}
97+
key={id}
98+
id={id}
99+
maxWidth={column.columnDef.maxSize}
100+
minWidth={column.columnDef.minSize}
101+
onSortClicked={column.getToggleSortingHandler()}
102+
sortby-testid={`netdata-table-head-cell-sortyBy-${id}${testPrefix}`}
103+
sortDirection={column.getIsSorted()}
104+
styles={styles}
105+
tooltipText={tooltipText}
106+
width={headWidth}
107+
{...resizeFuntions}
108+
{...rest}
109+
>
110+
{isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}{" "}
111+
</Table.SortingHeadCell>
112+
)
113+
}
76114

77-
if (getCanSort() && enableSorting) {
78115
return (
79-
<Table.SortingHeadCell
80-
colSpan={colSpan}
116+
<Table.HeadCell
81117
data-testid={`netdata-table-head-cell${testPrefix}`}
82118
filter={
83119
column.getCanFilter() && (
84120
<Filter column={column} testPrefix={testPrefix} {...filterOptions} />
85121
)
86122
}
87123
headStyles={headStyles}
88-
key={id}
89-
id={id}
90124
maxWidth={column.columnDef.maxSize}
91125
minWidth={column.columnDef.minSize}
92-
onSortClicked={column.getToggleSortingHandler()}
93-
sortby-testid={`netdata-table-head-cell-sortyBy-${id}${testPrefix}`}
94-
sortDirection={column.getIsSorted()}
126+
key={id}
127+
id={id}
95128
styles={styles}
96129
tooltipText={tooltipText}
97130
width={headWidth}
98131
{...resizeFuntions}
99132
{...rest}
100133
>
101-
{isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}{" "}
102-
</Table.SortingHeadCell>
134+
{isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}
135+
</Table.HeadCell>
103136
)
104137
}
105-
106-
return (
107-
<Table.HeadCell
108-
data-testid={`netdata-table-head-cell${testPrefix}`}
109-
filter={
110-
column.getCanFilter() && (
111-
<Filter column={column} testPrefix={testPrefix} {...filterOptions} />
112-
)
113-
}
114-
headStyles={headStyles}
115-
maxWidth={column.columnDef.maxSize}
116-
minWidth={column.columnDef.minSize}
117-
key={id}
118-
id={id}
119-
styles={styles}
120-
tooltipText={tooltipText}
121-
width={headWidth}
122-
{...resizeFuntions}
123-
{...rest}
124-
>
125-
{isPlaceholder ? null : flexRender(column.columnDef.header, getContext())}
126-
</Table.HeadCell>
127-
)
128-
})
138+
)
129139

130140
export default HeadCell

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useVirtualizer } from "@tanstack/react-virtual"
33
import { flexRender } from "@tanstack/react-table"
44
import { useTableContext } from "../features/provider"
55
import Table from "./base-table"
6-
import { CELL_HEIGHT } from "../constants"
76

87
const Rows = ({
98
disableClickRow,
@@ -19,16 +18,20 @@ const Rows = ({
1918
loading,
2019
loadMore,
2120
coloredSortedColumn,
21+
meta,
2222
}) => {
23-
const { onHover, hoveredRow, hoveredColumn } = useTableContext()
23+
const { onHover, hoveredRow } = useTableContext()
2424

2525
const { rows } = table.getRowModel()
2626

2727
const virtualizer = useVirtualizer({
2828
count: rows.length,
2929
getScrollElement: () => scrollParentRef.current,
30-
estimateSize: () => CELL_HEIGHT,
31-
overscan: overscan || 5,
30+
estimateSize: () =>
31+
(!!meta.styles?.height && parseInt(meta.styles.height)) ||
32+
(!!meta.cellStyles?.height && parseInt(meta.cellStyles.height)) ||
33+
35,
34+
overscan: overscan || 10,
3235
})
3336

3437
const virtualRows = virtualizer.getVirtualItems()
@@ -66,7 +69,11 @@ const Rows = ({
6669
data-testid={`netdata-table-row${testPrefix}${
6770
testPrefixCallback ? "-" + testPrefixCallback(row.original) : ""
6871
}`}
69-
onClick={() => onClickRow?.({ data: row.original, table: table, fullRow: row })}
72+
onClick={
73+
onClickRow
74+
? () => onClickRow({ data: row.original, table: table, fullRow: row })
75+
: undefined
76+
}
7077
disableClickRow={() =>
7178
disableClickRow?.({ data: row.original, table: table, fullRow: row })
7279
}
@@ -83,7 +90,7 @@ const Rows = ({
8390
onMouseLeave={() => onHover()}
8491
tableMeta={
8592
typeof cell.column.columnDef.tableMeta === "function"
86-
? cell.column.columnDef.tableMeta(row)
93+
? cell.column.columnDef.tableMeta(row, cell, index)
8794
: cell.column.columnDef.tableMeta
8895
}
8996
meta={
@@ -99,7 +106,6 @@ const Rows = ({
99106
})}
100107
index={virtualRow.index}
101108
isRowHovering={row.id === hoveredRow}
102-
isColumnHovering={cell.column.id === hoveredColumn}
103109
>
104110
{flexRender(cell.column.columnDef.cell, cell.getContext())}
105111
</Table.Cell>

‎src/components/tableV2/features/globalControls.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ const GlobalControls = ({
1919
zIndex={10}
2020
background="mainBackground"
2121
padding={[0, 0, 4]}
22-
{...tableMeta?.bulkActionsStyles}
22+
{...tableMeta.bulkActionsStyles}
2323
>
2424
{handleSearch && (
25-
<Flex width={{ max: 100, base: "40%" }} {...tableMeta?.searchContainerStyles}>
25+
<Flex width={{ max: 100, base: "40%" }} {...tableMeta.searchContainerStyles}>
2626
<SearchInput
2727
data-testid="table-global-search-filter"
2828
data-ga={`${dataGa}::search-${wordsCount}-words::table-filter`}
@@ -33,7 +33,7 @@ const GlobalControls = ({
3333
handleSearch(e.target.value)
3434
})}
3535
placeholder={searchPlaceholder}
36-
{...tableMeta?.searchStyles}
36+
{...tableMeta.searchStyles}
3737
/>
3838
</Flex>
3939
)}

0 commit comments

Comments
 (0)