feat(Table): QUV-1299 Implement Table windowing

packages/table/package.json

@@ -41,6 +41,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.0.0-beta.65",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0"
   }

packages/table/src/core/Cell/Cell.tsx

@@ -1,16 +1,23 @@
 import * as React from 'react';
-
 import { StyledTableCellWrapper } from './StyledTableCellWrapper';
 import { useRenderContent } from './useRenderContent';
 import { ColDef } from '../../declarations';
 import { useInitialState } from '../../editors/useInitialState';
+import { VirtualItem } from '@tanstack/react-virtual';
 
 interface CellProps {
   data: unknown;
   columnDef: ColDef;
+  virtualColumn: VirtualItem;
+  virtualRow: VirtualItem;
 }
 
-export const Cell: React.FC<CellProps> = ({ data, columnDef }) => {
+export const Cell: React.FC<CellProps> = ({
+  data,
+  columnDef,
+  virtualColumn,
+  virtualRow,
+}) => {
   const { onReset } = columnDef;
 
   useInitialState(data, onReset);
@@ -19,7 +26,13 @@ export const Cell: React.FC<CellProps> = ({ data, columnDef }) => {
     useRenderContent(columnDef, data);
 
   return (
-    <StyledTableCellWrapper onDoubleClick={onDoubleClick} ref={cellRef}>
+    <StyledTableCellWrapper
+      onDoubleClick={onDoubleClick}
+      ref={cellRef}
+      width={`${virtualColumn.size}px`}
+      translateX={virtualColumn.start}
+      translateY={virtualRow.start}
+    >
       {isEditMode ? editionContent : viewContent}
     </StyledTableCellWrapper>
   );

packages/table/src/core/Cell/StyledTableCellWrapper.ts

@@ -1,20 +1,24 @@
-import styled, { css } from 'styled-components';
+import styled, { DefaultTheme } from 'styled-components';
 
 interface StyledTableCellWrapperProps {
   width?: React.CSSProperties['width'];
   height?: React.CSSProperties['height'];
+  translateX?: number;
+  translateY?: number;
+  theme: DefaultTheme;
 }
 
-export const StyledTableCellWrapper = styled.td<StyledTableCellWrapperProps>`
+export const StyledTableCellWrapper = styled.td.attrs(
+  ({ width, theme, translateX, translateY }: StyledTableCellWrapperProps) => ({
+    style: {
+      width,
+      color: theme.alias.color.text.body.base,
+      transform: `translateX(${translateX}px) translateY(${translateY}px)`,
+    },
+  }),
+)<StyledTableCellWrapperProps>`
   position: relative;
   box-sizing: border-box;
   vertical-align: middle;
-
-  ${({ width }) => css`
-    width: ${width};
-  `}
-
-  ${({ theme }) => css`
-    color: ${theme.alias.color.text.body.base};
-  `}
+  text-align: center;
 `;

packages/table/src/core/HeaderCell/HeaderCell.tsx

@@ -1,19 +1,22 @@
+import { VirtualItem } from '@tanstack/react-virtual';
 import React from 'react';
-
-import { ColDef } from '../../declarations';
 import { TextRenderer } from '../../renderers';
 import { StyledHeaderCell } from './StyledTableHeaderCellWrapper';
 
 interface HeaderCellProps {
-  columnDef: ColDef;
   scrolled?: boolean;
+  virtualColumn: VirtualItem;
 }
 
 export const HeaderCell: React.FC<HeaderCellProps> = ({
-  columnDef,
   scrolled,
+  virtualColumn,
 }) => (
-  <StyledHeaderCell scrolled={scrolled} width={columnDef?.cellStyle?.width}>
-    <TextRenderer value={columnDef.headerName} bold />
+  <StyledHeaderCell
+    scrolled={scrolled}
+    width={`${virtualColumn.size}px`}
+    offsetX={virtualColumn.start}
+  >
+    <TextRenderer value={virtualColumn.key} bold />
   </StyledHeaderCell>
 );

packages/table/src/core/HeaderCell/StyledTableHeaderCellWrapper.ts

@@ -7,6 +7,7 @@ import { getSizes } from '../utils';
 interface StyledHeaderCellProps {
   scrolled?: boolean;
   width?: React.CSSProperties['width'];
+  offsetX?: number;
 }
 
 export const StyledHeaderCell = styled.th<StyledHeaderCellProps>`
@@ -17,6 +18,10 @@ export const StyledHeaderCell = styled.th<StyledHeaderCellProps>`
     `;
   }}
 
+  ${({ offsetX }) => css`
+    transform: translateX(${offsetX}px);
+  `}
+
   top: 0;
   vertical-align: middle;
   box-sizing: border-box;

packages/table/src/core/Row/Row.tsx

@@ -1,25 +1,37 @@
 import * as React from 'react';
-
 import { StyledTableRow } from './StyledTableRow';
 import { ColDef } from '../../declarations';
 import { Cell } from '../Cell';
+import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 
 interface RowProps {
   columnDefs: ColDef[];
   data: { [key: string]: unknown };
-  height?: React.CSSProperties['height'];
+  styles?: React.CSSProperties;
+  columnVirtualizer: Virtualizer<undefined, Element>;
+  virtualRow: VirtualItem;
 }
 
-export const Row: React.FC<RowProps> = ({ columnDefs, data, height }) => (
-  <StyledTableRow height={height}>
-    {columnDefs.map((columnDef: ColDef) => {
-      return (
-        <Cell
-          columnDef={columnDef}
-          key={`cell-${columnDef.colId}`}
-          data={data[columnDef.field] ?? ''}
-        />
-      );
-    })}
-  </StyledTableRow>
-);
+export const Row: React.FC<RowProps> = ({
+  columnDefs,
+  data,
+  styles,
+  columnVirtualizer,
+  virtualRow,
+}) => {
+  return (
+    <StyledTableRow styles={styles}>
+      {columnVirtualizer.getVirtualItems().map((virtualColumn: VirtualItem) => {
+        return (
+          <Cell
+            columnDef={columnDefs[virtualColumn.index]}
+            key={`cell-${virtualColumn.key}`}
+            data={data[columnDefs[virtualColumn.index].id] ?? ''}
+            virtualColumn={virtualColumn}
+            virtualRow={virtualRow}
+          />
+        );
+      })}
+    </StyledTableRow>
+  );
+};

packages/table/src/core/Row/StyledTableRow.ts

@@ -1,49 +1,15 @@
-import styled, { css } from 'styled-components';
-import { pseudoElementMixin } from '@devoinc/genesys-ui';
-import { getSizes } from '../utils';
+import styled from 'styled-components';
 
 interface StyledTableRowProps {
-  height?: React.CSSProperties['height'];
+  styles?: React.CSSProperties;
 }
 
 export const StyledTableRow = styled.tr<StyledTableRowProps>`
-  ${({ theme }) => {
-    const tableTokens = theme.cmp.table;
-    const cmpTokens = tableTokens.row;
-    const transitionDuration = cmpTokens.mutation.transitionDuration;
-    return css`
-      @keyframes modifiedBlink {
-        0% {
-          background-color: ${cmpTokens.color.background.modifiedBlink};
-        }
-        100% {
-          background-color: ${cmpTokens.color.background.even.highlighted};
-        }
-      }
-      transition: background-color ease ${transitionDuration.bgColor};
-    `;
-  }}
-
-  ${({ height, theme }) => {
-    const tableTokens = theme.cmp.table;
-    const cmpTokens = tableTokens.row;
-    const borderRadius = getSizes(tableTokens).row.br;
-    return css`
-      border: none;
-      border-radius: ${borderRadius};
-      height: ${height + 'px'};
-      background-color: ${cmpTokens.color.background.odd.base};
-
-      // border bottom with pseudo element to avoid border radius effect
-      &::after {
-        ${pseudoElementMixin(null)};
-        bottom: 0;
-        left: ${borderRadius};
-        right: ${borderRadius};
-        height: ${cmpTokens.shape.borderSize.after};
-        background-color: ${cmpTokens.color.background.after};
-        pointer-events: none;
-      }
-    `;
-  }}
+  position: ${({ styles }) => styles.position};
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: ${({ styles }) => styles.height};
+  transform: ${({ styles }) => styles.transform};
+  display: table;
 `;

packages/table/src/core/Table/StyledTable.ts

@@ -1,24 +1,14 @@
 import * as React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 export interface StyledTableProps {
   width?: React.CSSProperties['width'];
   minWidth?: React.CSSProperties['minWidth'];
+  height?: React.CSSProperties['height'];
 }
 
 export const StyledTable = styled.table<StyledTableProps>`
-  height: auto;
-
-  margin: 0;
-
-  ${({ width }) => css`
-    width: ${width};
-  `}
-
-  ${({ minWidth }) => css`
-    min-width: ${minWidth};
-  `}
-
-  border: none;
   position: relative;
+  height: ${({ height }) => height};
+  width: 100%;
 `;

packages/table/src/core/Table/StyledTableWrapper.ts

@@ -1,31 +1,14 @@
 import * as React from 'react';
-import styled, { css } from 'styled-components';
-import { scrollbars } from '@devoinc/genesys-ui';
+import styled from 'styled-components';
 
 export interface StyledTableWrapperProps {
   maxHeight?: React.CSSProperties['maxHeight'];
   scrolled?: boolean;
+  height?: React.CSSProperties['height'];
 }
 
 export const StyledTableWrapper = styled.div<StyledTableWrapperProps>`
-  display: block;
-
-  ${({ theme }) => {
-    return css`
-      ${scrollbars({ theme })}
-    `;
-  }}
-  overflow-x: auto;
-
-  ${({ scrolled }) => {
-    return css`
-      overflow-y: ${scrolled ? 'auto' : 'visible'};
-    `;
-  }}
-
-  ${({ maxHeight = '100%' }) => {
-    return css`
-      max-height: ${maxHeight};
-    `;
-  }}
+  width: 100%;
+  height: ${({ height }) => height};
+  overflow: auto;
 `;