Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: netdata/netdata-ui
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 43926172c111021b2def218d51dcd97fe34fd022
Choose a base ref
..
head repository: netdata/netdata-ui
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: f08140985ad000b218aabee06a3b778f76923fb7
Choose a head ref
Showing with 46 additions and 28 deletions.
  1. +1 −1 package.json
  2. +2 −2 src/components/tableV2/core/rows.js
  3. +40 −22 src/components/tableV2/netdataTable.js
  4. +3 −3 yarn.lock
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@netdata/netdata-ui",
"version": "2.9.3",
"version": "2.9.4",
"description": "netdata UI kit",
"main": "./lib/index.js",
"files": [
4 changes: 2 additions & 2 deletions src/components/tableV2/core/rows.js
View file
Original file line number Diff line number Diff line change
@@ -40,8 +40,8 @@ const Rows = ({

if (!lastItem) return

if (lastItem.index >= rows.length - 1 && hasNextPage && !loading) loadMore()
}, [virtualRows])
if (lastItem.index === rows.length - 1 && hasNextPage && !loading) loadMore()
}, [virtualRows, loading])

const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0

62 changes: 40 additions & 22 deletions src/components/tableV2/netdataTable.js
View file
Original file line number Diff line number Diff line change
@@ -8,6 +8,8 @@ import {
useReactTable,
} from "@tanstack/react-table"
import Flex from "src/components/templates/flex"
import { Text } from "src/components/typography"
import { IconComponents, Icon } from "src/components/icon"
import { comparison, select, includesString } from "./helpers/filterFns"
import useColumns from "./features/useColumns"
import makePagination from "./features/pagination"
@@ -172,6 +174,8 @@ const NetdataTable = ({
testPrefix,
})

const { hasNextPage, loading, warning } = virtualizeOptions

return (
<TableProvider onHoverCell={onHoverCell}>
<Flex height="100%" overflow="hidden" width="100%" column>
@@ -183,39 +187,53 @@ const NetdataTable = ({
searchValue={globalFilter}
/>
) : null}
<Flex ref={scrollParentRef} overflow="auto" width="100%" height="100%">
{enableColumnPinning && (
<ColumnPinning
<Flex column ref={scrollParentRef} overflow="auto" width="100%" height="100%">
<Flex>
{enableColumnPinning && (
<ColumnPinning
enableResize={enableResize}
disableClickRow={disableClickRow}
onClickRow={onClickRow}
testPrefixCallback={testPrefixCallback}
enableSorting={enableSorting}
table={table}
headers={table.getLeftFlatHeaders()}
testPrefix={testPrefix}
dataGa={dataGa}
scrollParentRef={scrollParentRef}
virtualizeOptions={virtualizeOptions}
coloredSortedColumn={enableSorting && coloredSortedColumn}
/>
)}
<MainTable
scrollParentRef={scrollParentRef}
enableResize={enableResize}
disableClickRow={disableClickRow}
onClickRow={onClickRow}
testPrefixCallback={testPrefixCallback}
enableSorting={enableSorting}
enableColumnPinning={enableColumnPinning}
table={table}
headers={table.getLeftFlatHeaders()}
testPrefix={testPrefix}
dataGa={dataGa}
scrollParentRef={scrollParentRef}
tableRef={tableRef}
testPrefix={testPrefix}
virtualizeOptions={virtualizeOptions}
coloredSortedColumn={enableSorting && coloredSortedColumn}
{...rest}
/>
</Flex>
{!hasNextPage && !loading && !!warning && (
<Flex alignItems="center" justifyContent="center" gap={2} padding={[4]} width="100%">
<Icon name="warning_triangle_hollow" color="warning" />{" "}
<Text color="warningText">{warning}</Text>
</Flex>
)}

{hasNextPage && loading && (
<Flex alignItems="center" justifyContent="center" gap={2} padding={[4]} width="100%">
<IconComponents.LoaderIcon /> <Text>Loading more...</Text>
</Flex>
)}
<MainTable
scrollParentRef={scrollParentRef}
enableResize={enableResize}
disableClickRow={disableClickRow}
onClickRow={onClickRow}
testPrefixCallback={testPrefixCallback}
enableSorting={enableSorting}
enableColumnPinning={enableColumnPinning}
table={table}
dataGa={dataGa}
tableRef={tableRef}
testPrefix={testPrefix}
virtualizeOptions={virtualizeOptions}
coloredSortedColumn={enableSorting && coloredSortedColumn}
{...rest}
/>
</Flex>
{enablePagination && makePagination({ table })}
</Flex>
6 changes: 3 additions & 3 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
@@ -10367,9 +10367,9 @@ minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
brace-expansion "^1.1.7"

minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
version "1.2.7"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
version "1.2.8"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==

minipass-collect@^1.0.2:
version "1.0.2"