Skip to content

Commit d27eb01

Browse files
novykhnovykh
committed
Table fixes.
1 parent 521a5f7 commit d27eb01

9 files changed

Lines changed: 144 additions & 223 deletions

File tree

‎src/components/select/index.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const makeCustomStyles = (theme, { size, ...providedStyles } = {}) => ({
9696
borderColor: state.isFocused ? theme.colors.inputBorderFocus : theme.colors.inputBorder,
9797
boxShadow: "none",
9898
minWidth: 160,
99-
...(size === "tiny" ? { minHeight: 28 } : {}),
99+
...(size === "tiny" ? { minHeight: 18 } : { minHeight: 18 }),
100100
":hover": {
101101
borderColor: theme.colors.inputBorderHover,
102102
},
@@ -158,6 +158,16 @@ const makeCustomStyles = (theme, { size, ...providedStyles } = {}) => ({
158158
}),
159159
...(size === "tiny"
160160
? {
161+
dropdownIndicator: styles => ({ ...styles, padding: "3px" }),
162+
clearIndicator: styles => ({ ...styles, padding: "3px" }),
163+
indicatorsContainer: styles => ({ ...styles, minHeight: 18 }),
164+
valueContainer: styles => ({
165+
...styles,
166+
minHeight: 18,
167+
padding: "1px 6px",
168+
}),
169+
}
170+
: {
161171
dropdownIndicator: styles => ({ ...styles, padding: "3px" }),
162172
clearIndicator: styles => ({ ...styles, padding: "3px" }),
163173
indicatorsContainer: styles => ({ ...styles, minHeight: 28 }),
@@ -166,8 +176,7 @@ const makeCustomStyles = (theme, { size, ...providedStyles } = {}) => ({
166176
minHeight: 28,
167177
padding: "1px 6px",
168178
}),
169-
}
170-
: {}),
179+
}),
171180
...providedStyles,
172181
})
173182

‎src/components/tableV2/components/pagination.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, { memo } from "react"
2+
import Flex from "src/components/templates/flex"
3+
import { Text } from "src/components/typography"
4+
import { IconButton } from "src/components/button"
5+
6+
const Pagination = ({ table }) => {
7+
const {
8+
nextPage,
9+
previousPage,
10+
getCanPreviousPage,
11+
getCanNextPage,
12+
getPageCount,
13+
setPageIndex,
14+
resetPageIndex,
15+
} = table
16+
17+
const pageIndex = table.getState().pagination.pageIndex
18+
19+
return (
20+
<Flex
21+
alignItems="center"
22+
justifyContent="end"
23+
height="45px"
24+
background="mainBackground"
25+
border={{ side: "top", color: "borderSecondary" }}
26+
>
27+
<IconButton
28+
title="First"
29+
data-testid={"pagination-go-to-first"}
30+
cursor="pointer"
31+
onClick={resetPageIndex}
32+
icon="chevron_left_start"
33+
iconSize="small"
34+
tooltip="test"
35+
disabled={!getCanPreviousPage()}
36+
/>
37+
<IconButton
38+
title="Previous"
39+
data-testid={"pagination-go-to-previous"}
40+
cursor="pointer"
41+
onClick={previousPage}
42+
icon="chevron_left"
43+
iconSize="small"
44+
tooltip="Previous"
45+
disabled={!getCanPreviousPage()}
46+
/>
47+
<Text data-testid={"pagination-counter"}>
48+
Page {getPageCount() === 0 ? 0 : pageIndex} of {getPageCount()}
49+
</Text>
50+
<IconButton
51+
title="Next"
52+
data-testid={"pagination-go-to-next"}
53+
cursor="pointer"
54+
onClick={nextPage}
55+
icon="chevron_right"
56+
iconSize="small"
57+
disabled={!getCanNextPage()}
58+
/>
59+
<IconButton
60+
title="Last"
61+
data-testid={"pagination-go-to-last"}
62+
cursor="pointer"
63+
onClick={() => setPageIndex(getPageCount() - 1)}
64+
icon="chevron_right_end"
65+
iconSize="small"
66+
disabled={!getCanNextPage()}
67+
/>
68+
</Flex>
69+
)
70+
}
71+
72+
export default memo(Pagination)

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

Lines changed: 0 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -345,83 +345,4 @@ Table.Row = forwardRef(
345345
}
346346
)
347347

348-
export const Pagination = ({
349-
pageIndex,
350-
pageCount,
351-
hasNext,
352-
hasPrevious,
353-
onNextPage,
354-
onPreviousPage,
355-
setPageIndex,
356-
resetPageIndex,
357-
}) => {
358-
const handleOnPrevious = useCallback(() => {
359-
if (hasPrevious) onPreviousPage()
360-
}, [hasPrevious])
361-
362-
const handleOnNextPage = useCallback(() => {
363-
if (hasNext) onNextPage()
364-
}, [hasNext])
365-
366-
const handleGoToLastPage = useCallback(() => {
367-
setPageIndex(pageCount - 1)
368-
}, [pageCount, setPageIndex])
369-
370-
const handleGoToFirstPage = useCallback(() => {
371-
resetPageIndex()
372-
}, [resetPageIndex])
373-
374-
return (
375-
<Flex
376-
alignItems="center"
377-
justifyContent="end"
378-
height="45px"
379-
background="mainBackground"
380-
border={{ side: "top", color: "borderSecondary" }}
381-
>
382-
<IconButton
383-
title="First"
384-
data-testid={"pagination-go-to-first"}
385-
cursor="pointer"
386-
onClick={handleGoToFirstPage}
387-
icon="chevron_left_start"
388-
iconSize="small"
389-
tooltip="test"
390-
disabled={!hasPrevious}
391-
/>
392-
<IconButton
393-
title="Previous"
394-
data-testid={"pagination-go-to-previous"}
395-
cursor="pointer"
396-
onClick={handleOnPrevious}
397-
icon="chevron_left"
398-
iconSize="small"
399-
tooltip="Previous"
400-
disabled={!hasPrevious}
401-
/>
402-
<Text data-testid={"pagination-counter"}>
403-
Page {pageCount === 0 ? 0 : pageIndex} of {pageCount}
404-
</Text>
405-
<IconButton
406-
title="Next"
407-
data-testid={"pagination-go-to-next"}
408-
cursor="pointer"
409-
onClick={handleOnNextPage}
410-
icon="chevron_right"
411-
iconSize="small"
412-
disabled={!hasNext}
413-
/>
414-
<IconButton
415-
title="Last"
416-
data-testid={"pagination-go-to-last"}
417-
cursor="pointer"
418-
onClick={handleGoToLastPage}
419-
icon="chevron_right_end"
420-
iconSize="small"
421-
disabled={!hasNext}
422-
/>
423-
</Flex>
424-
)
425-
}
426-
427348
export default Table

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

Lines changed: 12 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react"
22
import Table from "./base-table"
3-
import HeadCell from "./headCell"
3+
import HeadCells from "./headCells"
44
import Rows from "./rows"
55

66
const FullTable = ({
@@ -34,39 +34,24 @@ const FullTable = ({
3434
{...rest}
3535
>
3636
<Table.Head data-testid={`netdata-table-head${testPrefix}`}>
37-
{table.getHeaderGroups().length > 1 ? (
38-
table.getHeaderGroups().map((headerGroup, index) => (
39-
<Table.HeadRow
40-
key={index}
41-
id={headerGroup.id}
42-
data-testid={`netdata-table-headRow${testPrefix}`}
43-
>
44-
<HeadCell
45-
dataGa={dataGa}
46-
enableResize={enableResize}
47-
enableSorting={enableSorting}
48-
headers={headerGroup.headers}
49-
pinnedStyles={pinnedStyles}
50-
table={table}
51-
testPrefix={testPrefix}
52-
coloredSortedColumn={coloredSortedColumn}
53-
/>
54-
</Table.HeadRow>
55-
))
56-
) : (
57-
<Table.HeadRow data-testid={`netdata-table-headRow${testPrefix}`}>
58-
<HeadCell
37+
{headers.map((headerGroup, index) => (
38+
<Table.HeadRow
39+
key={index}
40+
id={headerGroup.id}
41+
data-testid={`netdata-table-headRow${testPrefix}`}
42+
>
43+
<HeadCells
5944
dataGa={dataGa}
6045
enableResize={enableResize}
6146
enableSorting={enableSorting}
62-
headers={headers}
47+
headers={headerGroup.headers}
6348
pinnedStyles={pinnedStyles}
6449
table={table}
6550
testPrefix={testPrefix}
66-
coloredSortedColumn={coloredSortedColumn}
51+
coloredSortedColumn={enableSorting && coloredSortedColumn}
6752
/>
6853
</Table.HeadRow>
69-
)}
54+
))}
7055
</Table.Head>
7156
<Table.Body data-testid={`netdata-table-body${testPrefix}`}>
7257
<Rows
@@ -79,7 +64,7 @@ const FullTable = ({
7964
table={table}
8065
testPrefix={testPrefix}
8166
testPrefixCallback={testPrefixCallback}
82-
coloredSortedColumn={coloredSortedColumn}
67+
coloredSortedColumn={enableSorting && coloredSortedColumn}
8368
meta={meta}
8469
{...virtualizeOptions}
8570
/>

src/components/tableV2/core/headCell.js renamed to src/components/tableV2/core/headCells.js

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

40-
const HeadCell = ({
40+
const HeadCells = ({
4141
enableResize,
4242
enableSorting,
4343
headers,
@@ -138,4 +138,4 @@ const HeadCell = ({
138138
}
139139
)
140140

141-
export default HeadCell
141+
export default HeadCells

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const ColumnPinning = ({
1717
...rest
1818
}) => {
1919
const getThemeColor = useColor()
20-
const headers = table.getLeftFlatHeaders()
20+
const headers = table.getLeftHeaderGroups()
2121

2222
return (
2323
<Box

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

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

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

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

0 commit comments

Comments
 (0)