{isLoading &&
}
diff --git a/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteVirtualization.test.tsx b/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteVirtualization.test.tsx
deleted file mode 100644
index cf358c3a09..0000000000
--- a/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteVirtualization.test.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import { renderHook } from "@testing-library/react-hooks";
-import { useInfiniteVirtualization } from "./useInfiniteVirtualization";
-import { act } from "@testing-library/react";
-import type { Row as ReactTableRowType } from "react-table";
-
-describe("useInfiniteVirtualization", () => {
- // Mock factory function to create test rows
- const createMockRows = (
- count: number,
- startIndex = 0,
- ): ReactTableRowType
>[] => {
- return Array.from({ length: count }, (_, i) => ({
- id: `${startIndex + i + 1}`,
- original: { id: startIndex + i + 1, name: `Test ${startIndex + i + 1}` },
- index: startIndex + i,
- cells: [],
- values: {},
- getRowProps: jest.fn(),
- allCells: [],
- subRows: [],
- isExpanded: false,
- canExpand: false,
- depth: 0,
- toggleRowExpanded: jest.fn(),
- state: {},
- toggleRowSelected: jest.fn(),
- getToggleRowExpandedProps: jest.fn(),
- isSelected: false,
- isSomeSelected: false,
- isGrouped: false,
- groupByID: "",
- groupByVal: "",
- leafRows: [],
- getToggleRowSelectedProps: jest.fn(),
- setState: jest.fn(),
- }));
- };
-
- const mockRows = createMockRows(2);
-
- const defaultProps = {
- rows: mockRows,
- loadMore: jest.fn(),
- pageSize: 10,
- };
-
- beforeEach(() => {
- jest.clearAllMocks();
- });
-
- it("1. should return correct itemCount when totalRecordsCount is provided", () => {
- const totalRecordsCount = 100;
- const { result } = renderHook(() =>
- useInfiniteVirtualization({
- ...defaultProps,
- totalRecordsCount,
- }),
- );
-
- expect(result.current.itemCount).toBe(mockRows.length);
- });
-
- it("2. should return rows length as itemCount when totalRecordsCount is not provided", () => {
- const { result } = renderHook(() =>
- useInfiniteVirtualization(defaultProps),
- );
-
- expect(result.current.itemCount).toBe(defaultProps.rows.length);
- });
-
- it("3. should update cachedRows when rows are provided", () => {
- const { result } = renderHook(() =>
- useInfiniteVirtualization(defaultProps),
- );
-
- expect(result.current.cachedRows).toEqual(mockRows);
- });
-
- it("4. should return zero itemCount when there are no records", () => {
- const { result } = renderHook(() =>
- useInfiniteVirtualization({
- ...defaultProps,
- rows: [],
- }),
- );
-
- expect(result.current.itemCount).toBe(0);
- });
-
- it("5. should cache rows from multiple page loads", () => {
- const pageSize = 2;
- const { rerender, result } = renderHook(
- (props) => useInfiniteVirtualization(props),
- {
- initialProps: {
- ...defaultProps,
- rows: createMockRows(pageSize),
- pageSize,
- },
- },
- );
-
- // Initial page loaded
- expect(result.current.cachedRows.length).toBe(pageSize);
-
- // Load second page
- act(() => {
- rerender({
- ...defaultProps,
- rows: createMockRows(pageSize, pageSize),
- pageSize,
- });
- });
-
- // Should now have both pages cached
- expect(result.current.cachedRows.length).toBe(pageSize * 2);
- expect(result.current.cachedRows[0].id).toBe("1");
- expect(result.current.cachedRows[2].id).toBe("3");
- });
-
- it("6. should handle partial page loads and detect end of data", () => {
- const pageSize = 10;
- const partialPageSize = 3;
-
- // Initial full page
- const { rerender, result } = renderHook(
- (props) => useInfiniteVirtualization(props),
- {
- initialProps: {
- ...defaultProps,
- rows: createMockRows(pageSize),
- pageSize,
- },
- },
- );
-
- // Then partial page to signal end of data
- act(() => {
- rerender({
- ...defaultProps,
- rows: createMockRows(partialPageSize, pageSize),
- pageSize,
- });
- });
-
- // Should mark all items as loaded including those beyond the actual data
- expect(result.current.cachedRows.length).toBe(pageSize + partialPageSize);
- expect(result.current.itemCount).toBe(pageSize + partialPageSize);
- });
-
- it("7. should handle empty page load as end of data", () => {
- const pageSize = 5;
-
- // Initial page
- const { rerender, result } = renderHook(
- (props) => useInfiniteVirtualization(props),
- {
- initialProps: {
- ...defaultProps,
- rows: createMockRows(pageSize),
- pageSize,
- },
- },
- );
-
- // Then empty page to signal end of data
- act(() => {
- rerender({
- ...defaultProps,
- rows: [],
- pageSize,
- });
- });
-
- // Should identify all items as loaded
- expect(result.current.cachedRows.length).toBe(pageSize);
- expect(result.current.itemCount).toBe(pageSize);
- });
-
- it("8. should maintain correct page reference during multiple rerenders", () => {
- const pageSize = 2;
-
- // First page
- const { rerender, result } = renderHook(
- (props) => useInfiniteVirtualization(props),
- {
- initialProps: {
- ...defaultProps,
- rows: createMockRows(pageSize),
- pageSize,
- },
- },
- );
-
- // Second page
- act(() => {
- rerender({
- ...defaultProps,
- rows: createMockRows(pageSize, pageSize),
- pageSize,
- });
- });
-
- // Third page
- act(() => {
- rerender({
- ...defaultProps,
- rows: createMockRows(pageSize, pageSize * 2),
- pageSize,
- });
- });
-
- // Should have all pages cached
- expect(result.current.cachedRows.length).toBe(pageSize * 3);
- });
-});
diff --git a/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteVirtualization.tsx b/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteVirtualization.tsx
deleted file mode 100644
index 25816c4644..0000000000
--- a/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteVirtualization.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import type { Row as ReactTableRowType } from "react-table";
-export interface UseInfiniteVirtualizationProps {
- rows: ReactTableRowType>[];
- totalRecordsCount?: number;
- loadMore: () => void;
- pageSize: number;
-}
-
-export interface UseInfiniteVirtualizationReturn {
- itemCount: number;
- hasMoreData: boolean;
- cachedRows: ReactTableRowType>[];
-}
-
-interface LoadedRowsCache {
- [pageIndex: number]: ReactTableRowType>[];
-}
-
-export const useInfiniteVirtualization = ({
- loadMore,
- pageSize,
- rows,
- totalRecordsCount,
-}: UseInfiniteVirtualizationProps): UseInfiniteVirtualizationReturn => {
- const [loadedPages, setLoadedPages] = useState({});
- const lastLoadedPageRef = useRef(0);
- const hasMoreDataRef = useRef(true);
-
- useEffect(() => {
- if (rows.length > 0) {
- const currentPageIndex = lastLoadedPageRef.current;
-
- setLoadedPages((prev) => ({
- ...prev,
- [currentPageIndex]: rows,
- }));
-
- // Only increment if we got a full page or some data
- if (rows.length === pageSize) {
- lastLoadedPageRef.current = currentPageIndex + 1;
- } else if (rows.length < pageSize && rows.length > 0) {
- // If we got less than a full page, assume this is the last page
- hasMoreDataRef.current = false;
- }
-
- // load another page in initial load if there is more data to load
- if (cachedRows.length < pageSize * 2) {
- loadMore();
- }
- } else if (rows.length === 0 && lastLoadedPageRef.current > 0) {
- // If no rows are returned and we've loaded at least one page, assume end of data
- hasMoreDataRef.current = false;
- }
- }, [rows, pageSize]);
-
- const cachedRows = useMemo(() => {
- const allRows: ReactTableRowType>[] = [];
-
- Object.keys(loadedPages)
- .map(Number)
- .sort((a, b) => a - b)
- .forEach((pageIndex) => {
- allRows.push(...loadedPages[pageIndex]);
- });
-
- return allRows;
- }, [loadedPages]);
-
- const itemCount = useMemo(() => {
- // If we know there's no more data, cap itemCount at cachedRows.length
- if (!hasMoreDataRef.current) {
- return cachedRows.length;
- }
-
- return cachedRows.length;
- }, [totalRecordsCount, cachedRows.length]);
-
- return {
- itemCount,
- cachedRows,
- hasMoreData: hasMoreDataRef.current,
- };
-};
diff --git a/app/client/src/widgets/TableWidgetV2/component/header/actions/Actions.test.tsx b/app/client/src/widgets/TableWidgetV2/component/header/actions/Actions.test.tsx
index 64359bf5a6..22ee192607 100644
--- a/app/client/src/widgets/TableWidgetV2/component/header/actions/Actions.test.tsx
+++ b/app/client/src/widgets/TableWidgetV2/component/header/actions/Actions.test.tsx
@@ -139,6 +139,7 @@ describe("TableWidget Actions Component", () => {
showConnectDataOverlay: false,
onConnectData: jest.fn(),
isLoading: false,
+ endOfData: false,
};
const renderWithTableProvider = (props: Partial) => {
diff --git a/app/client/src/widgets/TableWidgetV2/component/index.tsx b/app/client/src/widgets/TableWidgetV2/component/index.tsx
index deaa969d57..480e05e2c2 100644
--- a/app/client/src/widgets/TableWidgetV2/component/index.tsx
+++ b/app/client/src/widgets/TableWidgetV2/component/index.tsx
@@ -108,6 +108,7 @@ interface ReactTableComponentProps {
showConnectDataOverlay: boolean;
onConnectData: () => void;
isInfiniteScrollEnabled: boolean;
+ endOfData: boolean;
}
function ReactTableComponent(props: ReactTableComponentProps) {
@@ -127,6 +128,7 @@ function ReactTableComponent(props: ReactTableComponentProps) {
disableDrag,
editableCell,
editMode,
+ endOfData,
filters,
handleColumnFreeze,
handleReorderColumn,
@@ -243,6 +245,7 @@ function ReactTableComponent(props: ReactTableComponentProps) {
editMode={editMode}
editableCell={editableCell}
enableDrag={memoziedEnableDrag}
+ endOfData={endOfData}
filters={filters}
handleColumnFreeze={handleColumnFreeze}
handleReorderColumn={handleReorderColumn}
diff --git a/app/client/src/widgets/TableWidgetV2/component/types.ts b/app/client/src/widgets/TableWidgetV2/component/types.ts
index e127093c6f..4e8978327f 100644
--- a/app/client/src/widgets/TableWidgetV2/component/types.ts
+++ b/app/client/src/widgets/TableWidgetV2/component/types.ts
@@ -80,6 +80,7 @@ export interface TableProps {
showConnectDataOverlay: boolean;
onConnectData: () => void;
isInfiniteScrollEnabled: boolean;
+ endOfData: boolean;
}
export interface TableProviderProps extends TableProps {
diff --git a/app/client/src/widgets/TableWidgetV2/constants.ts b/app/client/src/widgets/TableWidgetV2/constants.ts
index 16d58e6d08..9c8283501b 100644
--- a/app/client/src/widgets/TableWidgetV2/constants.ts
+++ b/app/client/src/widgets/TableWidgetV2/constants.ts
@@ -113,6 +113,8 @@ export interface TableWidgetProps
customIsLoading: boolean;
customIsLoadingValue: boolean;
infiniteScrollEnabled: boolean;
+ cachedTableData: Record>>;
+ endOfData: boolean;
}
export enum TableVariantTypes {
diff --git a/app/client/src/widgets/TableWidgetV2/widget/__tests__/TableRendered.test.ts b/app/client/src/widgets/TableWidgetV2/widget/__tests__/TableRendered.test.ts
index cbc55a1019..94473816df 100644
--- a/app/client/src/widgets/TableWidgetV2/widget/__tests__/TableRendered.test.ts
+++ b/app/client/src/widgets/TableWidgetV2/widget/__tests__/TableRendered.test.ts
@@ -108,6 +108,8 @@ describe("TableWidgetV2 getWidgetView", () => {
defaultNewRow: {},
frozenColumnIndices: { a: 1 },
infiniteScrollEnabled: false,
+ endOfData: false,
+ cachedTableData: {},
};
describe("TableWidgetV2 loading checks", () => {
diff --git a/app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getProcessedTableData.test.js b/app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getProcessedTableData.test.js
new file mode 100644
index 0000000000..29d0d1f5f1
--- /dev/null
+++ b/app/client/src/widgets/TableWidgetV2/widget/__tests__/derived.test/getProcessedTableData.test.js
@@ -0,0 +1,63 @@
+import _ from "lodash";
+import moment from "moment";
+import derivedProperty from "../../derived";
+
+describe("validate getProcessedTableData function", () => {
+ const defaultInput = {
+ infiniteScrollEnabled: false,
+ cachedTableData: {
+ 1: [
+ {
+ id: 1,
+ name: "John",
+ },
+ {
+ id: 2,
+ name: "Ron",
+ },
+ ],
+ 2: [
+ {
+ id: 3,
+ name: "Doe",
+ },
+ {
+ id: 4,
+ name: "Foo",
+ },
+ ],
+ },
+ tableData: [
+ {
+ id: 3,
+ name: "John",
+ },
+ {
+ id: 4,
+ name: "Ron",
+ },
+ ],
+ transientTableData: {},
+ };
+
+ it("should return the tableData as the processData when infiniteScrollEnabled is false", () => {
+ const { getProcessedTableData } = derivedProperty;
+ const processedData = getProcessedTableData(defaultInput, moment, _);
+
+ expect(processedData.map((i) => i.id)).toStrictEqual([3, 4]);
+ });
+
+ it("should return the cachedTableData as the processData when infiniteScrollEnabled is true", () => {
+ const { getProcessedTableData } = derivedProperty;
+ const processedData = getProcessedTableData(
+ {
+ ...defaultInput,
+ infiniteScrollEnabled: true,
+ },
+ moment,
+ _,
+ );
+
+ expect(processedData.map((i) => i.id)).toStrictEqual([1, 2, 3, 4]);
+ });
+});
diff --git a/app/client/src/widgets/TableWidgetV2/widget/derived.js b/app/client/src/widgets/TableWidgetV2/widget/derived.js
index b4a318dba3..098a5d4ea7 100644
--- a/app/client/src/widgets/TableWidgetV2/widget/derived.js
+++ b/app/client/src/widgets/TableWidgetV2/widget/derived.js
@@ -198,10 +198,18 @@ export default {
//
getProcessedTableData: (props, moment, _) => {
let data;
+ let tableData;
- if (_.isArray(props.tableData)) {
+ if (props.infiniteScrollEnabled) {
+ /* This logic is needed as the cachedTableData will have data based on each pageNo. Since the object would be { 1: array of page 1 data, 2: array of page 2 data }, hence the values will have array of array data, hence it is flattened to store back in tableData for processing. */
+ tableData = _.flatten(_.values(props.cachedTableData));
+ } else {
+ tableData = props.tableData;
+ }
+
+ if (_.isArray(tableData)) {
/* Populate meta keys (__originalIndex__, __primaryKey__) and transient values */
- data = props.tableData.map((row, index) => ({
+ data = tableData.map((row, index) => ({
...row,
__originalIndex__: index,
__primaryKey__: props.primaryColumnId
diff --git a/app/client/src/widgets/TableWidgetV2/widget/index.tsx b/app/client/src/widgets/TableWidgetV2/widget/index.tsx
index 9cee3b08c0..555782096c 100644
--- a/app/client/src/widgets/TableWidgetV2/widget/index.tsx
+++ b/app/client/src/widgets/TableWidgetV2/widget/index.tsx
@@ -229,6 +229,8 @@ class TableWidgetV2 extends BaseWidget {
: undefined,
customIsLoading: false,
customIsLoadingValue: "",
+ cachedTableData: {},
+ endOfData: false,
};
}
@@ -912,6 +914,9 @@ class TableWidgetV2 extends BaseWidget {
//dont neet to batch this since single action
this.hydrateStickyColumns();
}
+
+ // Commit Batch Updates property `true` is passed as commitBatchMetaUpdates is not called on componentDidMount and we need to call it for updating the batch updates
+ this.updateInfiniteScrollProperties(true);
}
componentDidUpdate(prevProps: TableWidgetProps) {
@@ -982,18 +987,35 @@ class TableWidgetV2 extends BaseWidget {
pushBatchMetaUpdates("filters", []);
}
- }
- /*
- * Clear transient table data and editablecell when tableData changes
- */
- if (isTableDataModified) {
+ /*
+ * Clear transient table data and editablecell when tableData changes
+ */
pushBatchMetaUpdates("transientTableData", {});
// reset updatedRowIndex whenever transientTableData is flushed.
pushBatchMetaUpdates("updatedRowIndex", -1);
+ /*
+ * Updating the caching layer on table data modification
+ * Commit Batch Updates property `false` is passed as commitBatchMetaUpdates is called on componentDidUpdate
+ * and we need not to explicitly call it for updating the batch updates
+ * */
+ this.updateInfiniteScrollProperties();
+
this.pushClearEditableCellsUpdates();
pushBatchMetaUpdates("selectColumnFilterText", {});
+ } else {
+ // TODO: reset the widget on any property change, like if the toggle of infinite scroll is enabled and previously it was disabled, currently we update cachedTableData property to the current tableData at pageNo.
+ /*
+ * Commit Batch Updates property `false` is passed as commitBatchMetaUpdates is called on componentDidUpdate
+ * and we need not to explicitly call it for updating the batch updates
+ * */
+ if (
+ !prevProps.infiniteScrollEnabled &&
+ this.props.infiniteScrollEnabled
+ ) {
+ this.updateInfiniteScrollProperties();
+ }
}
if (!pageNo) {
@@ -1272,6 +1294,7 @@ class TableWidgetV2 extends BaseWidget {
disabledAddNewRowSave={this.hasInvalidColumnCell()}
editMode={this.props.renderMode === RenderModes.CANVAS}
editableCell={this.props.editableCell}
+ endOfData={this.props.endOfData}
filters={this.props.filters}
handleColumnFreeze={this.handleColumnFreeze}
handleReorderColumn={this.handleReorderColumn}
@@ -1965,7 +1988,8 @@ class TableWidgetV2 extends BaseWidget {
*/
if (this.props.isAddRowInProgress) {
row = filteredTableData[rowIndex - 1];
- originalIndex = rowIndex === 0 ? -1 : row[ORIGINAL_INDEX_KEY] ?? rowIndex;
+ originalIndex =
+ rowIndex === 0 ? -1 : row?.[ORIGINAL_INDEX_KEY] ?? rowIndex;
} else {
row = filteredTableData[rowIndex];
originalIndex = row ? row[ORIGINAL_INDEX_KEY] ?? rowIndex : rowIndex;
@@ -2983,6 +3007,45 @@ class TableWidgetV2 extends BaseWidget {
super.updateOneClickBindingOptionsVisibility(true);
}
};
+
+ updateInfiniteScrollProperties(shouldCommitBatchUpdates?: boolean) {
+ const {
+ cachedTableData,
+ commitBatchMetaUpdates,
+ infiniteScrollEnabled,
+ pageNo,
+ pageSize,
+ processedTableData,
+ pushBatchMetaUpdates,
+ tableData,
+ totalRecordsCount,
+ } = this.props;
+
+ if (infiniteScrollEnabled) {
+ // Update the cache key for a particular page whenever this function is called. The pageNo data is updated with the tableData.
+ const updatedCachedTableData = {
+ ...(cachedTableData || {}),
+ [pageNo]: tableData,
+ };
+
+ pushBatchMetaUpdates("cachedTableData", updatedCachedTableData);
+
+ // The check (!!totalRecordsCount && processedTableData.length === totalRecordsCount) is added if the totalRecordsCount property is set then match the length with the processedTableData which has all flatted data from each page in a single array except the current tableData page i.e. [ ...array of page 1 data, ...array of page 2 data ]. Another 'or' check is if (tableData.length < pageSize) when totalRecordsCount is undefined. Table data has a single page data and if the data comes out to be lesser than the pageSize, it is assumed that the data is finished.
+ if (
+ (!!totalRecordsCount &&
+ processedTableData.length + tableData.length === totalRecordsCount) ||
+ (!totalRecordsCount && tableData.length < pageSize)
+ ) {
+ pushBatchMetaUpdates("endOfData", true);
+ } else {
+ pushBatchMetaUpdates("endOfData", false);
+ }
+
+ if (shouldCommitBatchUpdates) {
+ commitBatchMetaUpdates();
+ }
+ }
+ }
}
export default TableWidgetV2;