Uxd 1984 Data Table updates on data change

.changeset/young-worms-taste.md

@@ -0,0 +1,5 @@
+---
+"@paprika/data-table": minor
+---
+
+DataTable 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,13 +5,14 @@ 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;
+    overflow: ${hasInfiniteLoader ? `hidden;` : `auto;`}
     width: ${`${width}px`};
     ${fontSize()}
 

packages/DataTable/src/DataTable.tsx

@@ -95,7 +95,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 +127,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,6 +139,7 @@ function DataTable(
           height={bestDimensions.height}
           innerElementType={InnerElement}
           getRowHeight={getRowHeight}
+          resetDimension={resetDimension}
           shouldHaveHorizontalScroll={bestDimensions.shouldHaveHorizontalScroll}
           {...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,6 @@
 import React from "react";
 import { ListChildComponentProps, VariableSizeList } from "react-window";
+import isEqual from "lodash.isequal";
 import ReactInfiniteLoader from "react-window-infinite-loader";
 import TableRow from "../TableRow/TableRow";
 import { TableDataItemType } from "../../types";
@@ -39,6 +40,7 @@ interface InfiniteLoaderPrivateProps {
   height: number;
   getRowHeight: ((index: number) => number) | null;
   shouldHaveHorizontalScroll: boolean;
+  resetDimension: () => void;
 }
 
 function Row(props: ListChildComponentProps): JSX.Element {
@@ -63,12 +65,36 @@ export function InfiniteLoaderImpl({
   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 prevData = React.useRef<TableDataItemType[]>(data);
+  const { getItemSize, clearRowHeights } = useItemSizeCalculator(data, getRowHeight);
+
+  React.useLayoutEffect(() => {
+    if (!isLoadingMoreItemsRef.current && listRef.current) {
+      const changedIndexes: number[] = [];
+      prevData.current.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, 0);
+      } else if (data.length !== prevData.current.length) {
+        resetDimension();
+      }
+    }
+    prevData.current = data;
+    isLoadingMoreItemsRef.current = false;
+  }, [data, clearRowHeights, resetDimension]);
 
   async function handleLoadMoreItems() {
+    isLoadingMoreItemsRef.current = true;
     await loadMoreItems();
 
     if (listRef.current) {
@@ -94,7 +120,9 @@ export function InfiniteLoaderImpl({
           onItemsRendered={onItemsRendered}
           ref={listRef}
           innerElementType={innerElementType}
-          style={{ overflowX: shouldHaveHorizontalScroll ? "auto" : "hidden" }}
+          style={{
+            overflowX: shouldHaveHorizontalScroll ? "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

@@ -22,7 +22,7 @@ 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),
@@ -72,5 +72,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/DataTable/stories/examples/RealWorld.tsx

@@ -117,7 +117,7 @@ export const RealWorldStory: (props: { isForTesting?: boolean }) => JSX.Element
   const [borderType, setBorderType] = React.useState(DataTable.types.borderType.GRID);
   const [hasZebraStripes, setHasZebraStripes] = React.useState(false);
 
-  const { filters, filteredData, getFilterProps, getFilterItemProps } = useFilter({
+  const { filters, getFilterProps, getFilterItemProps } = useFilter({
     columns: columnsSettings,
     data,
     initialState: {

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"