@semcore/data-table 2.1.0 → 2.2.0

package/src/Body.tsx

@@ -4,11 +4,11 @@ import { Box, Flex, IBoxProps } from '@semcore/flex-box';
 import ScrollArea from '@semcore/scroll-area';
 import { getFixedStyle, getScrollOffsetValue } from './utils';
 import { RowData, Column, NestedCells, PropsLayer, Cell } from './types';
-import assignProps from '@semcore/utils/lib/assignProps';
-import type ResizeObserverCallback from 'resize-observer-polyfill';
-
+import assignProps, { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
+import ResizeObserver from 'resize-observer-polyfill';
 import scrollStyles from './style/scroll-area.shadow.css';
 import syncScroll from '@semcore/utils/lib/syncScroll';
+import trottle from '@semcore/utils/lib/rafTrottle';
 
 const testEnv = process.env.NODE_ENV === 'test';
 
@@ -24,35 +24,33 @@ type AsProps = {
   onResize: ResizeObserverCallback;
   rowPropsLayers: PropsLayer[];
   use: 'primary' | 'secondary';
+  uniqueKey: string;
+  virtualScroll?: boolean | { tollerance?: number; rowHeight?: number };
 };
 
-class Body extends Component<AsProps> {
-  renderRow(cells: NestedCells, index: number) {
-    const SRow = Box;
-    const { styles, rowPropsLayers } = this.asProps;
-
-    const cellsByColumn = cells.flatRowData || getCellsByColumn(cells);
+type State = {
+  rowHeight: number | undefined;
+  scrollAreaHeight: undefined | number;
+  scrollOffset: number;
+};
 
-    let props = {
-      children: this.renderCells(cells, cellsByColumn, index),
-      theme: undefined,
-      active: undefined,
-    };
+class Body extends Component<AsProps, State> {
+  state: State = {
+    rowHeight: undefined,
+    scrollAreaHeight: undefined,
+    scrollOffset: 0,
+  };
 
-    for (const rowPropsLayer of rowPropsLayers) {
-      const { childrenPropsGetter = (p) => p, ...other } = rowPropsLayer;
-      const propsRow = assignProps(other, props);
-      props = assignProps(childrenPropsGetter(propsRow, cellsByColumn, index), propsRow);
-    }
+  firstRowRef = React.createRef<HTMLElement>();
+  firstRowResizeObserver: ResizeObserver | null = null;
 
-    return sstyled(styles)(<SRow key={index} {...props} />);
-  }
+  getRowHeight = () => {
+    const { virtualScroll } = this.asProps;
+    const rowHeightFromProps = typeof virtualScroll === 'object' && virtualScroll?.rowHeight;
+    return rowHeightFromProps || this.state.rowHeight;
+  };
 
-  renderRows(rows: NestedCells[]) {
-    return rows.map((cells, index) => this.renderRow(cells, index));
-  }
-
-  renderCells(cells: NestedCells, cellsByColumn: RowData, index: number) {
+  renderCells(cells: NestedCells, rowData: RowData, index: number) {
     const SCell = Flex;
     const { styles, columns, use } = this.asProps;
     return cells.map((cell) => {
@@ -73,7 +71,6 @@ class Body extends Component<AsProps> {
         let props: CellProps = {
           name: cell.name,
           children: <>{cell.data}</>,
-          ['data-data']: JSON.stringify(cell.data),
           justifyContent: column?.props?.justifyContent,
           style: {
             width: vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`,
@@ -86,7 +83,7 @@ class Body extends Component<AsProps> {
         for (const cellPropLayer of cell.cellPropsLayers || []) {
           const { childrenPropsGetter = (p) => p, ...other } = cellPropLayer;
           const propsCell = assignProps(other, props);
-          props = assignProps(childrenPropsGetter(propsCell, cellsByColumn, index), propsCell);
+          props = assignProps(childrenPropsGetter(propsCell, rowData, index), propsCell);
         }
 
         return sstyled(styles)(
@@ -96,17 +93,136 @@ class Body extends Component<AsProps> {
     }, [] as React.ReactElement[]);
   }
 
+  renderRow(
+    cells: NestedCells,
+    { dataIndex, topOffset, nested }: { dataIndex: number; topOffset?: number; nested: boolean },
+  ) {
+    const SRow = Box;
+    const { styles, rowPropsLayers, uniqueKey, virtualScroll } = this.asProps;
+    const rowHeightFromProps = typeof virtualScroll === 'object' && virtualScroll?.rowHeight;
+
+    const rowData = cells.flatRowData || getCellsByColumn(cells);
+    const key = rowData[uniqueKey] ? String(rowData[uniqueKey]) : `row_${dataIndex}`;
+    const needToMeasureHeight = dataIndex === 0 && !nested && !rowHeightFromProps;
+
+    let props = {
+      children: this.renderCells(cells, rowData, dataIndex),
+      theme: undefined,
+      active: undefined,
+      positioned: topOffset !== undefined,
+      top: topOffset,
+      ref: needToMeasureHeight ? this.firstRowRef : undefined,
+      key,
+    };
+
+    for (const rowPropsLayer of rowPropsLayers) {
+      const { childrenPropsGetter = (p) => p, ...other } = rowPropsLayer;
+      const propsRow = assignProps(other, props);
+      props = assignProps(childrenPropsGetter(propsRow, rowData, dataIndex), propsRow);
+    }
+
+    return sstyled(styles)(<SRow {...props} />);
+  }
+
+  renderRows(rows: NestedCells[]) {
+    return rows.map((cells, dataIndex) => this.renderRow(cells, { dataIndex, nested: false }));
+  }
+
+  renderVirtualizedRows(rows: NestedCells[]) {
+    if (rows.length === 0) return [];
+
+    const { virtualScroll } = this.asProps;
+    const { scrollOffset, scrollAreaHeight } = this.state;
+    const rowHeight = this.getRowHeight();
+
+    const tollerance = (typeof virtualScroll === 'object' ? virtualScroll?.tollerance : 2) ?? 2;
+    const startIndex = Math.max(Math.floor(scrollOffset / rowHeight!) - tollerance, 0);
+    const lastIndex = Math.min(
+      Math.ceil((scrollOffset + scrollAreaHeight!) / rowHeight!) + tollerance,
+      rows.length,
+    );
+
+    const rowHeightFromProps = typeof virtualScroll === 'object' && virtualScroll?.rowHeight;
+    const needToMeasureFirstRowHeight = !rowHeightFromProps;
+
+    const firstRow = { cells: rows[0], dataIndex: 0, topOffset: 0 };
+    const visibleRows = rowHeight !== undefined ? rows.slice(startIndex, lastIndex) : [];
+    const processedVisibleRows = visibleRows.map((cells, index) => ({
+      cells,
+      dataIndex: startIndex + index,
+      topOffset: rowHeight! * (startIndex + index),
+    }));
+    if (needToMeasureFirstRowHeight && startIndex !== 0) {
+      processedVisibleRows.unshift(firstRow);
+    }
+
+    return processedVisibleRows.map(({ cells, dataIndex, topOffset }) =>
+      this.renderRow(cells, { dataIndex, topOffset, nested: false }),
+    );
+  }
+
+  handleFirstRowResize = trottle((entries: ResizeObserverEntry[]) => {
+    const { contentRect } = entries[0];
+    const { height } = contentRect;
+    this.setState((oldState: State) => {
+      if (oldState.rowHeight === height) return oldState;
+      return { rowHeight: height };
+    });
+  });
+
+  handleScrollAreaResize = trottle((entries: ResizeObserverEntry[]) => {
+    const { virtualScroll } = this.asProps;
+    if (!virtualScroll) return;
+    const { contentRect } = entries[0];
+    const { height } = contentRect;
+    this.setState((oldState: State) => {
+      if (oldState.scrollAreaHeight === height) return oldState;
+      return { scrollAreaHeight: height };
+    });
+  });
+
+  handleScrollAreaScroll = (event: React.SyntheticEvent<HTMLElement>) => {
+    const { scrollTop } = event.target as HTMLElement;
+    const { virtualScroll } = this.asProps;
+    if (virtualScroll) {
+      this.setState((oldState: State) => {
+        if (oldState.scrollOffset === scrollTop) return oldState;
+        return { scrollOffset: scrollTop };
+      });
+    }
+  };
+
+  setupRowSizeObserver = () => {
+    if (!this.firstRowRef.current) return;
+    if (!this.asProps.virtualScroll) return;
+    this.firstRowResizeObserver = new ResizeObserver(this.handleFirstRowResize);
+    this.firstRowResizeObserver.observe(this.firstRowRef.current);
+  };
+
+  componentWillUnmount() {
+    this.firstRowResizeObserver?.disconnect();
+  }
+
   render() {
     const SBody = Root;
     const SBodyWrapper = Box;
     const SScrollAreaBar = ScrollArea.Bar;
-    const { Children, styles, rows, columns, onResize, $scrollRef } = this.asProps;
+    const SHeightHold = Box;
+    const { Children, styles, rows, columns, $scrollRef, virtualScroll, onResize } = this.asProps;
 
     const columnsInitialized = columns.reduce((sum, { width }) => sum + width, 0) > 0 || testEnv;
 
     const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);
     const offsetSum = offsetLeftSum + offsetRightSum;
 
+    const rowHeight = this.getRowHeight();
+    const holdHeight =
+      rowHeight !== undefined && virtualScroll ? rowHeight * rows.length : undefined;
+
+    if (virtualScroll && columnsInitialized && !rowHeight) {
+      new Promise(() => this.setupRowSizeObserver());
+    }
+
     return sstyled(styles)(
       <SBodyWrapper>
         <ScrollArea
@@ -114,10 +230,15 @@ class Body extends Component<AsProps> {
           styles={scrollStyles}
           use:left={`${offsetLeftSum}px`}
           use:right={`${offsetRightSum}px`}
-          onResize={onResize}
+          onResize={callAllEventHandlers(onResize, this.handleScrollAreaResize)}
+          onScroll={this.handleScrollAreaScroll}
         >
           <ScrollArea.Container ref={$scrollRef}>
-            <SBody render={Box}>{columnsInitialized ? this.renderRows(rows) : null}</SBody>
+            <SBody render={Box}>
+              {holdHeight && <SHeightHold hMin={holdHeight} aria-hidden={true} />}
+              {columnsInitialized && !virtualScroll ? this.renderRows(rows) : null}
+              {columnsInitialized && virtualScroll ? this.renderVirtualizedRows(rows) : null}
+            </SBody>
           </ScrollArea.Container>
           <SScrollAreaBar
             orientation="horizontal"

package/src/DataTable.tsx

@@ -36,6 +36,7 @@ type AsProps = {
   use: 'primary' | 'secondary';
   sort: SortDirection[];
   data: RowData[];
+  uniqueKey: string;
 };
 
 type HeadAsProps = {
@@ -79,6 +80,10 @@ export interface IDataTableProps extends IBoxProps {
   sort?: DataTableSort;
   /** Handler call when will request change sort */
   onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;
+  /** Field name in one data entity that is unique accross all set of data
+   * @default id
+   */
+  uniqueKey?: string;
 }
 
 export interface IDataTableHeadProps extends IBoxProps {
@@ -106,6 +111,12 @@ export interface IDataTableColumnProps extends IFlexProps {
 export interface IDataTableBodyProps extends IBoxProps {
   /** Rows table */
   rows?: DataTableRow[];
+  /** When enabled, only visually acessable rows are rendered.
+   * `tollerance` property controls how many rows outside of viewport are render.
+   * `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.
+   * @default { tollerance: 2 }
+   */
+  virtualScroll?: boolean | { tollerance?: number; rowHeight?: number };
 }
 
 export interface IDataTableRowProps extends IBoxProps {
@@ -129,6 +140,7 @@ class RootDefinitionTable extends Component<AsProps> {
 
   static defaultProps = {
     use: 'primary',
+    uniqueKey: 'id',
     sort: [],
     data: [],
   } as AsProps;
@@ -260,7 +272,7 @@ class RootDefinitionTable extends Component<AsProps> {
   }
 
   getBodyProps(props: BodyAsProps) {
-    const { data, use } = this.asProps;
+    const { data, use, uniqueKey } = this.asProps;
 
     const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};
     const rowPropsLayers: PropsLayer[] = [];
@@ -289,13 +301,16 @@ class RootDefinitionTable extends Component<AsProps> {
       }
     });
 
-    return {
+    const result = {
       columns: this.columns,
       rows: this.dataToRows(data, cellPropsLayers),
+      uniqueKey,
       use,
       rowPropsLayers,
       $scrollRef: this.scrollBodyRef,
     };
+
+    return result;
   }
 
   dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {

package/src/style/data-table.shadow.css

@@ -209,6 +209,10 @@ SRow[theme='danger']:hover SCell:not([theme]) {
   background-color: color-mod(var(--red) blend(#fff 85%));
 }
 
+SRow[positioned] {
+  position: absolute;
+}
+
 SCell {
   display: flex;
   flex: 1;
@@ -275,3 +279,10 @@ SScrollAreaBar[orientation='horizontal'] {
   margin-right: calc(var(--right) + 4px);
   width: calc(100% - var(--offsetSum) - 8px);
 }
+
+SHeightHold {
+  position: absolute;
+  top: 0;
+  width: 100px;
+  /* pointer-events: none; */
+}

package/src/types.ts

@@ -33,7 +33,6 @@ export type Column<
     style: React.CSSProperties;
     fixed: 'left' | 'right';
     children: React.ReactNode[];
-
     resizable: boolean;
     sortable: boolean | SortDirection;
     sortDirection: SortDirection;