Uxd 1984 Data Table updates on data change

packages/DataTable/package.json

@@ -30,10 +30,14 @@
     "lodash.debounce": "^4.0.8",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6",
+    "lodash.isequal": "^4.5.0",
     "react-window-infinite-loader": "^1.0.7"
   },
   "devDependencies": {
+    "@paprika/input": "^4.0.17",
+    "@paprika/button": "^1.1.11",
     "@types/lodash.debounce": "^4.0.6",
+    "@types/lodash.isequal": "^4.5.5",
     "@types/react-table": "^7.7.7",
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.5"

packages/DataTable/src/DataTable.styles.ts

@@ -5,16 +5,18 @@ import { fontSize } from "@paprika/stylers/lib/helpers";
 export const Table = styled.div<{
   width: number;
   height: number;
+  hasInfiniteLoader: boolean;
 }>(
-  ({ width, height }) => css`
+  ({ width, height, hasInfiniteLoader }) => css`
     border: 1px solid ${tokens.border.color};
     border-collapse: collapse;
     box-sizing: border-box;
     height: ${`${height}px`};
-    overflow: hidden;
     width: ${`${width}px`};
     ${fontSize()}
 
+    overflow: ${hasInfiniteLoader ? `hidden;` : `auto;`}
+
     * {
       box-sizing: inherit;
     }

packages/DataTable/src/DataTable.tsx

@@ -32,7 +32,6 @@ interface DataTableComposition {
   InfiniteLoader: React.FC<InfiniteLoaderPublicProps>;
   types: ConstantsTypes;
 }
-
 export interface DataTableProps {
   /** Accessible description of the table */
   a11yText: string;
@@ -95,7 +94,7 @@ function DataTable(
   componentRef: React.RefObject<unknown>
 ) {
   const tableRef = React.useRef<HTMLDivElement>(null);
-  const bestDimensions = useBestTableDimensions({
+  const { dimensions: bestDimensions, resetDimension } = useBestTableDimensions({
     tableRef,
     componentRef,
     maxHeight,
@@ -127,10 +126,9 @@ function DataTable(
     "DataTable.InfiniteLoader": extractedInfiniteLoaderDefinition,
   } = extractChildren(children, ["DataTable.InfiniteLoader"]);
   /* eslint-enable @typescript-eslint/ban-ts-comment */
+  const hasInfiniteLoader = Boolean(extractedInfiniteLoaderDefinition);
 
   function renderTableContent() {
-    const hasInfiniteLoader = Boolean(extractedInfiniteLoaderDefinition);
-
     if (hasInfiniteLoader) {
       const infiniteLoaderPublicProps = extractedInfiniteLoaderDefinition.props as InfiniteLoaderPublicProps;
 
@@ -140,7 +138,9 @@ function DataTable(
           height={bestDimensions.height}
           innerElementType={InnerElement}
           getRowHeight={getRowHeight}
+          resetDimension={resetDimension}
           shouldHaveHorizontalScroll={bestDimensions.shouldHaveHorizontalScroll}
+          shouldHaveVerticalScroll={bestDimensions.shouldHaveVerticalScroll}
           {...infiniteLoaderPublicProps}
         />
       );
@@ -164,6 +164,7 @@ function DataTable(
         data-pka-anchor="dataTable"
         width={bestDimensions.width}
         height={bestDimensions.height}
+        hasInfiniteLoader={hasInfiniteLoader}
         {...tableInstance.getTableProps()}
         {...moreProps}
       >

packages/DataTable/src/components/InfiniteLoader/InfiniteLoader.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { ListChildComponentProps, VariableSizeList } from "react-window";
+import isEqual from "lodash.isequal";
+import { usePrevious } from "@paprika/helpers";
 import ReactInfiniteLoader from "react-window-infinite-loader";
 import TableRow from "../TableRow/TableRow";
 import { TableDataItemType } from "../../types";
@@ -39,6 +41,8 @@ interface InfiniteLoaderPrivateProps {
   height: number;
   getRowHeight: ((index: number) => number) | null;
   shouldHaveHorizontalScroll: boolean;
+  shouldHaveVerticalScroll: boolean;
+  resetDimension: () => void;
 }
 
 function Row(props: ListChildComponentProps): JSX.Element {
@@ -60,15 +64,44 @@ export function InfiniteLoaderImpl({
   itemCount,
   loadMoreItems,
   shouldHaveHorizontalScroll,
+  shouldHaveVerticalScroll,
   isNextPageLoading = false,
   minimumBatchSize = 10,
   threshold = 15,
+  resetDimension,
 }: InfiniteLoaderPrivateProps & InfiniteLoaderPublicProps): JSX.Element {
   const infiniteLoaderRef = React.useRef(null);
   const listRef = React.useRef<VariableSizeList>(null);
-  const { getItemSize } = useItemSizeCalculator(data, getRowHeight);
+  const isLoadingMoreItemsRef = React.useRef(false);
+  const { getItemSize, clearRowHeights } = useItemSizeCalculator(data, getRowHeight);
+
+  const prevData: TableDataItemType[] | undefined = usePrevious(data);
+
+  React.useLayoutEffect(() => {
+    if (!isLoadingMoreItemsRef.current && prevData && listRef.current) {
+      if (!shouldHaveVerticalScroll && data.length !== prevData.length) {
+        isLoadingMoreItemsRef.current = true;
+        resetDimension();
+      } else {
+        const changedIndexes: number[] = [];
+        prevData.forEach((row: TableDataItemType, index: number) => {
+          if (!isEqual(row, data[index])) {
+            changedIndexes.push(index);
+          }
+        });
+        if (changedIndexes.length > 0) {
+          clearRowHeights(changedIndexes);
+          listRef.current.resetAfterIndex(changedIndexes[0]);
+          setTimeout(resetDimension, 100);
+        }
+      }
+    } else {
+      isLoadingMoreItemsRef.current = false;
+    }
+  }, [data, prevData, clearRowHeights, resetDimension, shouldHaveVerticalScroll]);
 
   async function handleLoadMoreItems() {
+    isLoadingMoreItemsRef.current = true;
     await loadMoreItems();
 
     if (listRef.current) {
@@ -94,7 +127,10 @@ export function InfiniteLoaderImpl({
           onItemsRendered={onItemsRendered}
           ref={listRef}
           innerElementType={innerElementType}
-          style={{ overflowX: shouldHaveHorizontalScroll ? "auto" : "hidden" }}
+          style={{
+            overflowX: shouldHaveHorizontalScroll ? "auto" : "hidden",
+            overflowY: shouldHaveVerticalScroll ? "auto" : "hidden",
+          }}
         >
           {Row}
         </VariableSizeList>

packages/DataTable/src/components/InfiniteLoader/useItemSizeCalculator.tsx

@@ -8,7 +8,7 @@ const rowHeightHelper = new RowHeightHelper();
 export default function useItemSizeCalculator(
   data: TableDataItemType[],
   getRowHeight: ((index: number) => number) | null
-): { getItemSize: (index: number) => number } {
+): { getItemSize: (index: number) => number; clearRowHeights: (indexes: number[]) => void } {
   const rowHeights = React.useRef<Record<number, number>>({});
   const { allColumns } = useReactTableContext();
 
@@ -24,6 +24,11 @@ export default function useItemSizeCalculator(
     [allColumns]
   );
 
+  const clearRowHeights = React.useCallback(
+    (indexes: number[]) => indexes.forEach(index => delete rowHeights.current[index]),
+    []
+  );
+
   function getItemSize(index: number): number {
     if (!rowHeights.current[index]) {
       const newRowHeight =
@@ -44,5 +49,5 @@ export default function useItemSizeCalculator(
     return rowHeights.current[index];
   }
 
-  return { getItemSize };
+  return { getItemSize, clearRowHeights };
 }

packages/DataTable/src/hooks/useBestTableDimensions.ts

@@ -8,6 +8,7 @@ type Dimensions = {
   width: number;
   height: number;
   shouldHaveHorizontalScroll: boolean;
+  shouldHaveVerticalScroll: boolean;
 };
 
 export default function useBestTableDimensions({
@@ -22,13 +23,17 @@ export default function useBestTableDimensions({
   maxHeight: string;
   maxWidth: string;
   shouldResizeWithViewport: boolean;
-}): Dimensions {
+}): { dimensions: Dimensions; resetDimension: () => void } {
   const [dimensions, setDimensions] = React.useState<Dimensions>(() => ({
     width: convertSizeStringToNumber(maxWidth, Direction.width),
     height: convertSizeStringToNumber(maxHeight, Direction.height),
     shouldHaveHorizontalScroll: false,
+    shouldHaveVerticalScroll: false,
   }));
 
+  const maxWidthInNumber = React.useCallback(() => convertSizeStringToNumber(maxWidth, Direction.width), [maxWidth]);
+  const maxHeightInNumber = React.useCallback(() => convertSizeStringToNumber(maxHeight, Direction.width), [maxHeight]);
+
   const resetDimension = React.useCallback(() => {
     if (!tableRef.current) return;
 
@@ -42,16 +47,15 @@ export default function useBestTableDimensions({
     setDimensions(() => {
       const realWidth = theadEl.clientWidth;
       const realHeight = theadEl.clientHeight + tbodyEl.clientHeight;
-      const maxWidthInNumber = convertSizeStringToNumber(maxWidth, Direction.width);
-      const maxHeightInNumber = convertSizeStringToNumber(maxHeight, Direction.height);
 
       return {
-        width: Math.min(maxWidthInNumber, realWidth),
-        height: Math.min(maxHeightInNumber, realHeight),
-        shouldHaveHorizontalScroll: maxWidthInNumber < realWidth,
+        width: Math.min(maxWidthInNumber(), realWidth),
+        height: Math.min(maxHeightInNumber(), realHeight),
+        shouldHaveHorizontalScroll: maxWidthInNumber() < realWidth,
+        shouldHaveVerticalScroll: maxHeightInNumber() < realHeight,
       };
     });
-  }, [maxHeight, maxWidth, tableRef]);
+  }, [maxHeightInNumber, maxWidthInNumber, tableRef]);
 
   React.useLayoutEffect(() => {
     resetDimension();
@@ -72,5 +76,5 @@ export default function useBestTableDimensions({
     resize: resetDimension,
   }));
 
-  return dimensions;
+  return { dimensions, resetDimension };
 }

packages/DataTable/stories/DataTable.stories.ts

@@ -8,6 +8,7 @@ import RealWorld from "./examples/RealWorld";
 import RenderRow from "./examples/RenderRow";
 import Showcase from "./examples/Showcase";
 import WithCollapsible from "./examples/WithCollapsible";
+import DataChange from "./examples/DataChange";
 
 export default {
   title: getStoryName("DataTable"),
@@ -29,3 +30,5 @@ export const realWorld = RealWorld;
 export const performance = Performance;
 
 export const withCollapsible = WithCollapsible;
+
+export const dataChange = DataChange;

packages/DataTable/stories/examples/DataChange.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import Input from "@paprika/input";
+import Button from "@paprika/button";
+import DataTable from "../../src";
+import makeData from "../helpers/makeData";
+
+const DataChangeStory: () => JSX.Element = () => {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: "First Name",
+        accessor: "firstName",
+        width: 100,
+      },
+      {
+        Header: "Description",
+        width: 100,
+        accessor: "desc",
+      },
+      {
+        Header: "Last Name",
+        accessor: "lastName",
+        width: 100,
+      },
+      {
+        Header: "Age",
+        accessor: "age",
+        width: 50,
+      },
+      {
+        Header: "Visits",
+        accessor: "visits",
+        width: 60,
+      },
+      {
+        Header: "Status",
+        accessor: "status",
+      },
+    ],
+    []
+  );
+
+  const [items, setItems] = React.useState(() => makeData(5).map(item => ({ ...item, desc: "a custom description" })));
+
+  const handleSave = () => {
+    setItems(prevItems => {
+      const newItemCopy = { ...prevItems[2] };
+      const inputValue = inputRef && inputRef.current ? inputRef.current.value : "";
+      newItemCopy.desc = inputValue;
+      const newItems = [...prevItems];
+      newItems[0] = newItemCopy;
+      newItems[2] = newItemCopy;
+      return newItems;
+    });
+  };
+
+  const handleAddItem = () => {
+    setItems(prevItems => {
+      const newItemCopy = { ...prevItems[0] };
+      const newItems = [...prevItems];
+      newItems.push(newItemCopy);
+      return newItems;
+    });
+  };
+
+  return (
+    <>
+      <Input
+        ref={inputRef}
+        defaultValue="This will be the description that will be set in the data on the first and third row. Click save to update the table data"
+      />
+      <Button onClick={handleSave}>Save</Button>
+      <Button onClick={handleAddItem}>Add item</Button>
+      <DataTable a11yText="A simple data table." columns={columns} data={items}>
+        <DataTable.InfiniteLoader
+          itemCount={items.length}
+          isItemLoaded={index => items[index] !== undefined}
+          loadMoreItems={async () => {
+            console.log("callign loadmore items");
+            // do nothing
+          }}
+        />
+      </DataTable>
+    </>
+  );
+};
+
+export default DataChangeStory;

packages/helpers/src/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+function usePrevious<T>(value: T): T | undefined {
+  const ref = React.useRef<T>();
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+export default usePrevious;

yarn.lock

@@ -5508,6 +5508,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.isequal@^4.5.5":
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/@types/lodash.isequal/-/lodash.isequal-4.5.5.tgz#4fed1b1b00bef79e305de0352d797e9bb816c8ff"
+  integrity sha512-4IKbinG7MGP131wRfceK6W4E/Qt3qssEFLF30LnJbjYiSfHGGRU/Io8YxXrZX109ir+iDETC8hw8QsDijukUVg==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash@*":
   version "4.14.178"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"