feat: implement windowing horizontal by santiago.trigo

DevoInc · Nov 3, 2023 · 6101940 · 6101940
1 parent 1f8b8ea
commit 6101940
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 107 deletions.
diff --git a/packages/table/src/core/Row/Row.tsx b/packages/table/src/core/Row/Row.tsx
@@ -17,8 +17,8 @@ export const Row: React.FC<RowProps> = ({ columnDefs, data, styles }) => {
         return (
           <Cell
             columnDef={columnDef}
-            key={`cell-${columnDef.colId}`}
-            data={data[columnDef.field] ?? ''}
+            key={`cell-${columnDef.id}`}
+            data={data[columnDef.id] ?? ''}
           />
         );
       })}

diff --git a/packages/table/src/core/Row/StyledTableRow.ts b/packages/table/src/core/Row/StyledTableRow.ts
@@ -13,4 +13,5 @@ export const StyledTableRow = styled.tr<StyledTableRowProps>`
   width: 100%;
   height: ${({ styles }) => styles.height};
   transform: ${({ styles }) => styles.transform};
+  display: table;
 `;
diff --git a/packages/table/src/core/Table/StyledTable.ts b/packages/table/src/core/Table/StyledTable.ts
@@ -8,7 +8,7 @@ export interface StyledTableProps {
 }
 
 export const StyledTable = styled.table<StyledTableProps>`
-  display: block;
-  height: auto;
   position: relative;
+  height: ${({ height }) => height};
+  width: 100%;
 `;
diff --git a/packages/table/src/core/Table/StyledTableWrapper.ts b/packages/table/src/core/Table/StyledTableWrapper.ts
@@ -5,9 +5,11 @@ import { scrollbars } from '@devoinc/genesys-ui';
 export interface StyledTableWrapperProps {
   maxHeight?: React.CSSProperties['maxHeight'];
   scrolled?: boolean;
+  height?: React.CSSProperties['height'];
 }
 
 export const StyledTableWrapper = styled.div<StyledTableWrapperProps>`
-  display: inline-block;
   width: 100%;
+  height: ${({ height }) => height};
+  overflow: auto;
 `;
diff --git a/packages/table/src/core/Table/Table.tsx b/packages/table/src/core/Table/Table.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { TableOptionsProps } from '../../declarations';
 
@@ -25,23 +26,45 @@ export const Table: React.FC<TableProps> = ({ tableOptions, data }) => {
 
   const columnsDefs = defineColumnsDefs(defaultColumnDef, columnDefs, types);
 
+  const ref = React.useRef();
+
+  const rowVirtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => ref.current,
+    estimateSize: () => 34,
+    overscan: 5,
+  });
+
+  const columnVirtualizer = useVirtualizer({
+    count: columnsDefs.length,
+    getScrollElement: () => ref.current,
+    estimateSize: () => 34,
+    overscan: 5,
+    horizontal: true,
+  });
+  debugger;
+
   return (
     <StyledTableWrapper
       maxHeight={style?.wrapper?.maxHeight}
       scrolled={style?.wrapper?.scrolled}
+      ref={ref}
+      height={'500px'}
     >
       <StyledTable
-        width={'400px'}
+        width={'100%'}
         minWidth={style?.table?.minWidth}
-        height={'200px'}
+        height={`${rowVirtualizer.getTotalSize()}px`}
       >
         <TableHead
           columnDefs={columnsDefs}
+          columnVirtualizer={columnVirtualizer}
           scrolled={style?.wrapper?.scrolled}
         />
         <TableBody
-          columnDefs={columnsDefs}
           data={data}
+          columnDefs={columnsDefs}
+          rowVirtualizer={rowVirtualizer}
           height={style?.row?.height}
           rowHeight={style?.row?.height}
         />

diff --git a/packages/table/src/core/TableBody/TableBody.tsx b/packages/table/src/core/TableBody/TableBody.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { Row } from '../Row';
 
@@ -8,54 +7,40 @@ import { ColDef } from '../../declarations';
 import { StyledTableBody } from './StyledTableBody';
 
 interface TableBodyProps {
-  data: { [key: string]: unknown }[];
+  rowVirtualizer: unknown;
+  data: unknown;
   columnDefs: ColDef[];
   height?: React.CSSProperties['height'];
   rowHeight?: number;
 }
 
 export const TableBody: React.FC<TableBodyProps> = ({
   columnDefs,
+  rowVirtualizer,
   data,
   height,
   rowHeight,
 }) => {
-  const ref = React.useRef();
-
-  const rowVirtualizer = useVirtualizer({
-    count: data.length,
-    getScrollElement: () => ref.current,
-    estimateSize: () => 34,
-    overscan: 10,
-  });
-
+  debugger;
   return (
-    <div
-      ref={ref}
-      style={{
-        height: '400px',
-        overflow: 'auto',
-      }}
-    >
-      <StyledTableBody height={`${rowVirtualizer.getTotalSize()}px`}>
-        {rowVirtualizer.getVirtualItems().map((virtualItem) => {
-          return (
-            <Row
-              key={'tb_' + virtualItem.key}
-              columnDefs={columnDefs}
-              data={data[virtualItem.index]}
-              styles={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: `${virtualItem.size}px`,
-                transform: `translateY(${virtualItem.start}px)`,
-              }}
-            />
-          );
-        })}
-      </StyledTableBody>
-    </div>
+    <StyledTableBody>
+      {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+        return (
+          <Row
+            key={'tb_' + virtualItem.key}
+            columnDefs={columnDefs}
+            data={data[virtualItem.index]}
+            styles={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          />
+        );
+      })}
+    </StyledTableBody>
   );
 };
diff --git a/packages/table/src/core/TableHead/StyledTableHead.ts b/packages/table/src/core/TableHead/StyledTableHead.ts
@@ -15,6 +15,7 @@ export const StyledTableHead = styled.thead<StyledTableHeadProps>`
   }}
 
   top: 0;
+  vertical-align: middle;
 
   ${({ theme }) => {
     return css`

diff --git a/packages/table/src/core/TableHead/TableHead.tsx b/packages/table/src/core/TableHead/TableHead.tsx
@@ -19,7 +19,7 @@ export const TableHead: React.FC<TableHeadProps> = ({
       <StyledTableHeadRow scrolled={scrolled}>
         {columnDefs.map((columnDef) => (
           <HeaderCell
-            key={columnDef.colId}
+            key={columnDef.id}
             columnDef={columnDef}
             scrolled={scrolled}
           />

diff --git a/packages/table/src/declarations.ts b/packages/table/src/declarations.ts
@@ -2,7 +2,7 @@ import { StyledTableProps } from './core/Table/StyledTable';
 import { StyledTableWrapperProps } from './core/Table/StyledTableWrapper';
 import { DateContext } from './valueFormatters/date';
 
-export type DefaultColDef = Omit<ColDef, 'colId' | 'field'>;
+export type DefaultColDef = Omit<ColDef, 'id'>;
 
 type Types = { id: string };
 type TypesColDef = Omit<ColDef, 'colId'>;

diff --git a/packages/table/src/recipes/Table.stories.tsx b/packages/table/src/recipes/Table.stories.tsx
@@ -5,7 +5,7 @@ import { DropdownMenu, Button, Flex } from '@devoinc/genesys-ui';
 import { TableOptionsProps } from '../declarations';
 import { BasicTable } from './Table';
 
-let index = 0;
+let index = 1;
 
 const data = Holo.of()
   .schema({
@@ -50,13 +50,12 @@ const tableOptions: TableOptionsProps = {
   },
   columnDefs: [
     {
-      colId: 'id',
-      field: 'id',
+      id: 'id',
       type: 'text',
+      headerName: 'id',
     },
     {
-      colId: 'menu',
-      field: 'menu',
+      id: 'menu',
       headerName: 'menu',
       CellRenderer: (params) => {
         return (
@@ -81,64 +80,96 @@ const tableOptions: TableOptionsProps = {
       },
     },
     {
-      colId: 'booleanValue',
-      field: 'booleanValue',
+      id: 'booleanValue',
       headerName: 'booleanValue',
       type: 'tagBoolean',
     },
+    {
+      id: 'name',
+      headerName: 'Name',
+      type: 'text',
+      editable: true,
+    },
+    {
+      id: 'age',
+      headerName: 'age',
+      type: 'number',
+    },
+    {
+      id: 'company',
+      headerName: 'company',
+      type: 'text',
+    },
+    {
+      id: 'balance',
+      headerName: 'balance',
+      type: 'number',
+    },
+    {
+      id: 'status',
+      headerName: 'status',
+      type: 'tag',
+    },
+    {
+      id: 'picture',
+      headerName: 'picture',
+      type: 'link',
+    },
+    {
+      id: 'timestamp',
+      headerName: 'timestamp',
+      type: 'date',
+      editable: true,
+    },
+    {
+      id: 'tags',
+      headerName: 'tags',
+      type: 'tags',
+    },
+    {
+      id: 'name',
+      headerName: 'Name',
+      type: 'text',
+      editable: true,
+    },
+    {
+      id: 'age',
+      headerName: 'age',
+      type: 'number',
+    },
+    {
+      id: 'company',
+      headerName: 'company',
+      type: 'text',
+    },
+    {
+      id: 'balance',
+      headerName: 'balance',
+      type: 'number',
+    },
+    {
+      id: 'status',
+      headerName: 'status',
+      type: 'tag',
+    },
+    {
+      id: 'picture',
+      headerName: 'picture',
+      type: 'link',
+    },
+    {
+      id: 'timestamp',
+      headerName: 'timestamp',
+      type: 'date',
+      editable: true,
+    },
+    {
+      id: 'tags',
+      headerName: 'tags',
+      type: 'tags',
+    },
     // {
-    //   colId: 'name',
-    //   field: 'name',
-    //   headerName: 'Name',
-    //   type: 'text',
-    //   editable: true,
-    // },
-    // {
-    //   colId: 'age',
-    //   field: 'age',
-    //   headerName: 'age',
-    //   type: 'number',
-    // },
-    // {
-    //   colId: 'company',
-    //   field: 'company',
-    //   headerName: 'company',
-    //   type: 'text',
-    // },
-    // {
-    //   colId: 'balance',
-    //   field: 'balance',
-    //   headerName: 'balance',
-    //   type: 'number',
-    // },
-    // {
-    //   colId: 'status',
-    //   field: 'status',
-    //   headerName: 'status',
-    //   type: 'tag',
-    // },
-    // {
-    //   colId: 'picture',
-    //   field: 'picture',
-    //   headerName: 'picture',
-    //   type: 'link',
-    // },
-    // {
-    //   colId: 'timestamp',
-    //   field: 'timestamp',
-    //   headerName: 'timestamp',
-    //   type: 'date',
-    //   editable: true,
-    // },
-    // {
-    //   colId: 'tags',
-    //   field: 'tags',
-    //   headerName: 'tags',
-    //   type: 'tags',
-    // },
-    // {
-    //   colId: 'about',
-    //   field: 'about',
+    //   id: 'about',
     //   headerName: 'about',
     //   type: 'text',
     // },
-Original file line number
+Diff line change
@@ Expand Up @@
       }}
       top: 0;
+      vertical-align: middle;
       ${({ theme }) => {
         return css`
@@ Expand Down @@