Skip to content

Commit 71a24b1

Browse files
novykhnovykh
committed
Fixed table styles.
1 parent 54d7453 commit 71a24b1

File tree

10 files changed

+117
-77
lines changed

10 files changed

+117
-77
lines changed

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

Lines changed: 82 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Text } from "src/components/typography"
88
import { IconButton } from "src/components/button"
99
import Tooltip from "src/components/drops/tooltip"
1010
import useToggle from "src/hooks/use-toggle"
11+
import { useTableContext } from "../features/provider"
1112

1213
//TODO heights in Table.Cell and Table.HeadCell needs to change and not be direct.
1314
// the problem is when we are applying column pin the second table has different sizes
@@ -28,7 +29,8 @@ const StyledHeaderCell = styled(Box)`
2829
padding: 4px 8px;
2930
border-bottom: 1px solid ${getColor("borderSecondary")};
3031
&:not(:last-child) {
31-
border-right: 1px solid ${getColor("borderSecondary")};
32+
border-right: 1px solid
33+
${({ background, theme }) => getColor(background || "borderSecondary")({ theme })};
3234
}
3335
`
3436

@@ -59,7 +61,7 @@ Table.HeadRow = forwardRef(({ children, ...props }, ref) => (
5961
</StyledHeaderRow>
6062
))
6163

62-
Table.Resizer = ({ onMouseDown, onTouchStart, deltaOffset, getIsResizing }) => {
64+
Table.Resizer = ({ onMouseDown, onTouchStart, deltaOffset, getIsResizing, background }) => {
6365
if (!onMouseDown) return
6466
const resizingProps = getIsResizing() ? { transform: `translateX(${deltaOffset}px)` } : {}
6567

@@ -87,7 +89,7 @@ Table.Resizer = ({ onMouseDown, onTouchStart, deltaOffset, getIsResizing }) => {
8789
}}
8890
onMouseDown={onMouseDown}
8991
onTouchStart={onTouchStart}
90-
background="borderSecondary"
92+
background={background || "borderSecondary"}
9193
position="absolute"
9294
top={0}
9395
right={0}
@@ -99,9 +101,11 @@ Table.Resizer = ({ onMouseDown, onTouchStart, deltaOffset, getIsResizing }) => {
99101
Table.HeadCell = forwardRef(
100102
(
101103
{
104+
id,
102105
children,
103106
align = "left",
104107
width,
108+
minWidth,
105109
tooltipText,
106110
filter,
107111
onMouseDown,
@@ -113,41 +117,48 @@ Table.HeadCell = forwardRef(
113117
...props
114118
},
115119
ref
116-
) => (
117-
<StyledHeaderCell
118-
as="th"
119-
ref={ref}
120-
sx={{
121-
textAlign: align,
122-
fontSize: "14px",
123-
height: "60px",
124-
position: "sticky",
125-
top: 0,
126-
...styles,
127-
...headStyles,
128-
}}
129-
width={`${width}px`}
130-
{...props}
131-
>
132-
<Flex>
133-
{children}
134-
<Box sx={{ marginLeft: "auto" }} position="relative" top={0}>
135-
{tooltipText && (
136-
<Tooltip align="bottom" content={tooltipText}>
137-
<Icon color="nodeBadgeColor" size="small" name="information" />
138-
</Tooltip>
139-
)}
140-
</Box>
141-
</Flex>
142-
<Box sx={{ fontWeight: "normal" }}>{filter}</Box>
143-
<Table.Resizer
144-
onMouseDown={onMouseDown}
145-
onTouchStart={onTouchStart}
146-
getIsResizing={getIsResizing}
147-
deltaOffset={deltaOffset}
148-
/>
149-
</StyledHeaderCell>
150-
)
120+
) => {
121+
const { hoveredColumn, onHover } = useTableContext()
122+
const isHovering = id === hoveredColumn
123+
124+
return (
125+
<StyledHeaderCell
126+
as="th"
127+
ref={ref}
128+
sx={{
129+
textAlign: align,
130+
fontSize: "14px",
131+
height: "60px",
132+
...styles,
133+
...headStyles,
134+
}}
135+
width={{ min: `${minWidth}px`, max: `${width}px` }}
136+
onMouseEnter={() => onHover({ row: null, column: id })}
137+
onMouseLeave={() => onHover()}
138+
{...props}
139+
background={!props.background && isHovering ? "borderSecondary" : props.background}
140+
>
141+
<Flex>
142+
{children}
143+
<Box position="absolute" top={0.5} right={0.5} width={4} height={4}>
144+
{tooltipText && (
145+
<Tooltip align="bottom" content={tooltipText}>
146+
<Icon color="nodeBadgeColor" size="small" name="information" />
147+
</Tooltip>
148+
)}
149+
</Box>
150+
</Flex>
151+
<Box sx={{ fontWeight: "normal" }}>{filter}</Box>
152+
<Table.Resizer
153+
onMouseDown={onMouseDown}
154+
onTouchStart={onTouchStart}
155+
getIsResizing={getIsResizing}
156+
deltaOffset={deltaOffset}
157+
background={props.background}
158+
/>
159+
</StyledHeaderCell>
160+
)
161+
}
151162
)
152163

153164
const sortingIcons = {
@@ -196,13 +207,13 @@ Table.SortingHeadCell = forwardRef(
196207
align={align}
197208
ref={ref}
198209
data-testid={dataTestid}
199-
maxWidth={maxWidth}
200-
width={width}
210+
width={width || maxWidth}
201211
minWidth={minWidth}
202212
tooltipText={tooltipText}
203213
headStyles={headStyles}
204214
{...props}
205215
filter={filter}
216+
{...(!!sortDirection && { background: "successBackground" })}
206217
>
207218
<Box
208219
onMouseEnter={onMouseEnter}
@@ -212,14 +223,20 @@ Table.SortingHeadCell = forwardRef(
212223
cursor="pointer"
213224
data-testid={sortbyTestid}
214225
>
215-
<Flex data-testid="sorting-cell-children-sorting-arrows-wrapper" gap={1}>
226+
<Flex
227+
position="relative"
228+
data-testid="sorting-cell-children-sorting-arrows-wrapper"
229+
gap={1}
230+
>
216231
{children}
217-
<Icon
218-
height="16px"
219-
width="16px"
220-
color={showHoveringIcon ? "textLite" : "text"}
221-
name={sortingIcons[showHoveringIcon ? "indicator" : sortDirection] ?? null}
222-
/>
232+
<Box position="absolute" top={1} right={-12}>
233+
<Icon
234+
height="16px"
235+
width="16px"
236+
color={showHoveringIcon ? "textLite" : "text"}
237+
name={sortingIcons[showHoveringIcon ? "indicator" : sortDirection] ?? null}
238+
/>
239+
</Box>
223240
</Flex>
224241
</Box>
225242
</Table.HeadCell>
@@ -245,6 +262,9 @@ Table.Cell = forwardRef(
245262
pinnedStyles = {},
246263
styles = {},
247264
width,
265+
isColumnHovering,
266+
isRowHovering,
267+
index,
248268
...rest
249269
},
250270
ref
@@ -254,6 +274,7 @@ Table.Cell = forwardRef(
254274
if (rest.stopPropagation) e.stopPropagation()
255275
onClick?.()
256276
}
277+
257278
return (
258279
<Box
259280
as="td"
@@ -269,9 +290,21 @@ Table.Cell = forwardRef(
269290
...pinnedStyles,
270291
...styles,
271292
}}
272-
width={{ max: `${maxWidth}px`, base: `${width}px`, min: `${minWidth}px` }}
293+
width={{ max: `${width || maxWidth}px`, min: `${minWidth}px` }}
273294
overflow="hidden"
274295
{...rest}
296+
background={
297+
!rest.background && (isColumnHovering || isRowHovering)
298+
? "borderSecondary"
299+
: rest.background || (index % 2 == 0 ? "mainBackground" : "tableRowBg")
300+
}
301+
backgroundOpacity={
302+
isColumnHovering && isRowHovering
303+
? rest.backgroundOpacity
304+
? rest.backgroundOpacity + 0.2
305+
: 1
306+
: rest.backgroundOpacity || 0.7
307+
}
275308
>
276309
{children}
277310
</Box>
@@ -280,10 +313,7 @@ Table.Cell = forwardRef(
280313
)
281314

282315
Table.Row = forwardRef(
283-
(
284-
{ children, onClick, disableClickRow, onMouseEnter, onMouseLeave, isHovering, ...props },
285-
ref
286-
) => {
316+
({ children, onClick, disableClickRow, onMouseEnter, onMouseLeave, ...props }, ref) => {
287317
const isRowDisabledForClick = disableClickRow && disableClickRow()
288318
const handleClick = e => {
289319
if (isRowDisabledForClick) return
@@ -308,13 +338,11 @@ Table.Row = forwardRef(
308338
onMouseEnter={handleMouseEnter}
309339
onMouseLeave={handleMouseLeave}
310340
as={StyledRow}
311-
_hover={isHovering && isRowClickable && { background: "borderSecondary" }}
312341
cursor={cursor}
313342
isClickable={!!onClick}
314343
onClick={handleClick}
315344
ref={ref}
316345
{...props}
317-
data-hover={isHovering ? "" : undefined}
318346
>
319347
{children}
320348
</Box>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const FullTable = ({
1111
getRowHandler,
1212
headers,
1313
onClickRow,
14-
onHoverRow,
14+
onHoverCell,
1515
pinnedStyles = {},
1616
table,
1717
tableRef,
@@ -49,7 +49,7 @@ const FullTable = ({
4949
disableClickRow={disableClickRow}
5050
getRowHandler={getRowHandler}
5151
onClickRow={onClickRow}
52-
onHoverRow={onHoverRow}
52+
onHoverCell={onHoverCell}
5353
pinnedStyles={pinnedStyles}
5454
table={table}
5555
testPrefix={testPrefix}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const HeadCell = ({ enableResize, enableSorting, headers, pinnedStyles = {}, tab
7777
}
7878
headStyles={headStyles}
7979
key={id}
80+
id={id}
8081
maxWidth={column.columnDef.maxSize}
8182
minWidth={column.columnDef.minSize}
8283
onSortClicked={column.getToggleSortingHandler()}
@@ -104,6 +105,7 @@ const HeadCell = ({ enableResize, enableSorting, headers, pinnedStyles = {}, tab
104105
maxWidth={column.columnDef.maxSize}
105106
minWidth={column.columnDef.minSize}
106107
key={id}
108+
id={id}
107109
styles={styles}
108110
tooltipText={tooltipText}
109111
width={headWidth}

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Rows = ({
1919
loading,
2020
loadMore,
2121
}) => {
22-
const { onHover, hoveredRow } = useTableContext()
22+
const { onHover, hoveredRow, hoveredColumn } = useTableContext()
2323

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

@@ -69,10 +69,6 @@ const Rows = ({
6969
disableClickRow={() =>
7070
disableClickRow?.({ data: row.original, table: table, fullRow: row })
7171
}
72-
onMouseEnter={() => onHover(row.id)}
73-
onMouseLeave={() => onHover(null)}
74-
isHovering={row.id === hoveredRow}
75-
background={virtualRow.index % 2 == 0 ? "mainBackground" : "tableRowBg"}
7672
>
7773
{cells.map((cell, index) => (
7874
<Table.Cell
@@ -82,7 +78,16 @@ const Rows = ({
8278
minWidth={cell.column.columnDef.minSize}
8379
pinnedStyles={index === cells.length - 1 ? pinnedStyles : {}}
8480
width={cell.column.getSize()}
81+
onMouseEnter={() => onHover({ row: row.id, column: cell.column.id })}
82+
onMouseLeave={() => onHover()}
8583
{...cell.column.columnDef.meta}
84+
{...(!!cell.column.getIsSorted() && {
85+
background: "successBackground",
86+
backgroundOpacity: 0.3,
87+
})}
88+
index={virtualRow.index}
89+
isRowHovering={row.id === hoveredRow}
90+
isColumnHovering={cell.column.id === hoveredColumn}
8691
>
8792
{flexRender(cell.column.columnDef.cell, cell.getContext())}
8893
</Table.Cell>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const ColumnPinning = ({
99
enableResize,
1010
enableSorting,
1111
onClickRow,
12-
onHoverRow,
12+
onHoverCell,
1313
table,
1414
testPrefix,
1515
testPrefixCallback,
@@ -36,7 +36,7 @@ const ColumnPinning = ({
3636
getRowHandler="getLeftVisibleCells"
3737
headers={headers}
3838
onClickRow={onClickRow}
39-
onHoverRow={onHoverRow}
39+
onHoverCell={onHoverCell}
4040
pinnedStyles={{ borderRight: `1px solid ${getThemeColor("borderSecondary")}` }}
4141
table={table}
4242
testPrefix={`pin${testPrefix}`}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const MainTable = ({
1212
testPrefixCallback,
1313
onClickRow,
1414
disableClickRow,
15-
onHoverRow,
15+
onHoverCell,
1616
enableResize,
1717
scrollParentRef,
1818
...rest
@@ -24,7 +24,7 @@ const MainTable = ({
2424
scrollParentRef={scrollParentRef}
2525
width={enableResize ? `${table.getTotalSize()}px` : "100%"}
2626
enableResize={enableResize}
27-
onHoverRow={onHoverRow}
27+
onHoverCell={onHoverCell}
2828
table={table}
2929
headers={headers}
3030
enableSorting={enableSorting}

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ const TableContext = createContext({})
44

55
export const useTableContext = () => useContext(TableContext)
66

7-
const TableProvider = ({ onHoverRow, children }) => {
8-
const [state, setState] = useState({ hoveredRow: null })
7+
const initialState = { hoveredRow: null, hoveredColumn: null }
8+
9+
const TableProvider = ({ onHoverCell, children }) => {
10+
const [state, setState] = useState(initialState)
911

1012
const dispatch = useCallback(values => {
1113
setState(prev => ({
@@ -15,11 +17,11 @@ const TableProvider = ({ onHoverRow, children }) => {
1517
}, [])
1618

1719
const onHover = useCallback(
18-
id => {
19-
dispatch({ hoveredRow: id })
20-
onHoverRow?.(id)
20+
({ row, column } = {}) => {
21+
dispatch({ hoveredRow: row, hoveredColumn: column })
22+
onHoverCell?.({ row, column })
2123
},
22-
[onHoverRow]
24+
[onHoverCell]
2325
)
2426

2527
const contextValue = useMemo(() => ({ ...state, dispatch, onHover }), [state, onHover])

‎src/components/tableV2/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export type NetdataTableProps<T = any, D = any> = {
5555
onGlobalSearchChange?: (value: any) => void
5656
onRowSelected?: (value: any) => void
5757
onClickRow?: (value: any) => void
58-
onHoverRow?: (value: any) => void
58+
onHoverCell?: (value: any) => void
5959
disableClickRow?: (value: any) => void
6060

6161
/**This is an escape hatch test id generator, we use this when we want to have

0 commit comments

Comments
 (0)