feat: improvements for the Table and added context provider for Table…

… configuration.
DevoInc · Nov 28, 2023 · 6888fdf · 6888fdf
1 parent a49389d
commit 6888fdf
Show file tree

Hide file tree

Showing 14 changed files with 112 additions and 101 deletions.
diff --git a/packages/table/src/constants.ts b/packages/table/src/constants.ts
@@ -21,4 +21,5 @@ export const DEFAULT_VIRTUAL_COLUMN: VirtualItem = {
 
 export const DEFAULT_COLDEF: ColDef = {
   id: 'col',
+  headerName: 'Column',
 };
diff --git a/packages/table/src/core/HeaderCell/HeaderCell.tsx b/packages/table/src/core/HeaderCell/HeaderCell.tsx
@@ -14,7 +14,11 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
   headerCellWidth,
   offsetX,
 }) => (
-  <StyledHeaderCell headerCellWidth={headerCellWidth} offsetX={offsetX}>
+  <StyledHeaderCell
+    headerCellWidth={headerCellWidth}
+    offsetX={offsetX}
+    title={colDef.headerName}
+  >
     <Typography.Heading size="h6" truncateLine={1}>
       {colDef.headerName}
     </Typography.Heading>

diff --git a/packages/table/src/core/HeaderCell/StyledHeaderCell.ts b/packages/table/src/core/HeaderCell/StyledHeaderCell.ts
@@ -13,7 +13,7 @@ export const StyledHeaderCell = styled.th<StyledHeaderCellProps>`
   top: 0;
   left: 0;
   box-sizing: border-box;
-  height: 4.2rem;
+  height: 100%;
   padding: 0 1.2rem;
   width: ${({ headerCellWidth }) => headerCellWidth};
   color: ${({ theme }) => theme.alias.color.text.heading.base};

diff --git a/packages/table/src/core/Table/StyledTable.ts b/packages/table/src/core/Table/StyledTable.ts
@@ -11,4 +11,5 @@ export const StyledTable = styled.table<StyledTableProps>`
   position: relative;
   height: ${({ height }) => height};
   width: ${({ width }) => (width ? width : '100%')};
+  min-width: ${({ minWidth }) => minWidth};
 `;
diff --git a/packages/table/src/core/Table/StyledTableWrapper.ts b/packages/table/src/core/Table/StyledTableWrapper.ts
@@ -3,15 +3,13 @@ import styled from 'styled-components';
 import { scrollbars } from '@devoinc/genesys-ui';
 
 export interface StyledTableWrapperProps {
-  scrolled?: boolean;
   maxHeight?: React.CSSProperties['maxHeight'];
 }
 
 export const StyledTableWrapper = styled.div<StyledTableWrapperProps>`
   ${({ theme }) => scrollbars({ theme })};
   display: inline-block;
   width: 100%;
-  overflow-y: ${({ scrolled }) => (scrolled ? 'auto' : 'visible')};
-  overflow-x: auto;
+  overflow: auto;
   max-height: ${({ maxHeight }) => maxHeight};
 `;
diff --git a/packages/table/src/core/Table/Table.tsx b/packages/table/src/core/Table/Table.tsx
@@ -1,10 +1,20 @@
 import * as React from 'react';
-import { TableOptionsProps } from '../../declarations';
+import { useTheme } from 'styled-components';
+import { TableContext } from './context';
+import {
+  Density,
+  RowHeight,
+  TableOptionsProps,
+  TableStyles,
+} from '../../declarations';
 import { TableHead } from '../TableHead';
 import { TableBody } from '../TableBody';
-import { StyledTable } from './StyledTable';
-import { StyledTableWrapper } from './StyledTableWrapper';
-import { getCollatedColumns } from '../utils';
+import { StyledTable, StyledTableProps } from './StyledTable';
+import {
+  StyledTableWrapper,
+  StyledTableWrapperProps,
+} from './StyledTableWrapper';
+import { getCollatedColumns, getMeasures } from '../utils';
 import { useTableVirtualization } from './useTableVirtualization';
 
 interface TableProps {
@@ -25,35 +35,38 @@ export const Table: React.FC<TableProps> = ({ tableOptions, data }) => {
     columnDefs,
     types,
   );
-
+  const theme = useTheme();
   const tableBodyHeight = rowVirtualizer?.getTotalSize() || 0;
   const tableHeight = ref?.current?.clientHeight || 0;
   const tableHeadHeight =
     ref?.current?.querySelector('thead')?.clientHeight || 0;
   const hasScroll = tableBodyHeight > tableHeight - tableHeadHeight;
 
   return (
-    <StyledTableWrapper
-      ref={ref}
-      maxHeight={style?.wrapper?.maxHeight}
-      scrolled={style?.wrapper?.scrolled}
+    <TableContext.Provider
+      value={{
+        styles: tableOptions.style,
+        measures: getMeasures(theme, (tableOptions.style.density = 'default')),
+      }}
     >
-      <StyledTable
-        width={`${columnVirtualizer.getTotalSize()}px`}
-        height={`${rowVirtualizer.getTotalSize()}px`}
-      >
-        <TableHead
-          scrolled={hasScroll}
-          columnVirtualizer={columnVirtualizer}
-          columnDefs={columnDefs}
-        />
-        <TableBody
-          data={data}
-          columnDefs={refinedColumnDefs}
-          rowVirtualizer={rowVirtualizer}
-          columnVirtualizer={columnVirtualizer}
-        />
-      </StyledTable>
-    </StyledTableWrapper>
+      <StyledTableWrapper ref={ref} maxHeight={style?.wrapper?.maxHeight}>
+        <StyledTable
+          width={`${columnVirtualizer.getTotalSize()}px`}
+          height={`${rowVirtualizer.getTotalSize()}px`}
+        >
+          <TableHead
+            columnDefs={columnDefs}
+            columnVirtualizer={columnVirtualizer}
+            scrolled={hasScroll}
+          />
+          <TableBody
+            data={data}
+            columnDefs={refinedColumnDefs}
+            rowVirtualizer={rowVirtualizer}
+            columnVirtualizer={columnVirtualizer}
+          />
+        </StyledTable>
+      </StyledTableWrapper>
+    </TableContext.Provider>
   );
 };
diff --git a/packages/table/src/core/Table/context.ts b/packages/table/src/core/Table/context.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { MeasuresConfig, TableStyles } from '../../declarations';
+
+interface TableContextProps {
+  styles: TableStyles;
+  measures: MeasuresConfig;
+}
+
+export const TableContext = React.createContext<TableContextProps>({
+  density: 'default',
+  row: { height: 'md' },
+  wrapper: {
+    maxHeight: 'none',
+  },
+});
diff --git a/packages/table/src/core/Table/useTableVirtualization.ts b/packages/table/src/core/Table/useTableVirtualization.ts
@@ -1,6 +1,8 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { MutableRefObject, useRef } from 'react';
 import { ColDef, TableOptionsProps } from '../../declarations';
+import { getMeasures } from '../utils';
+import { useTheme } from 'styled-components';
 
 interface UseVirtualizationParams {
   data: { [key: string]: unknown }[];
@@ -17,8 +19,14 @@ const getEstimatedColumnWidth = (
   tableRef?.current?.offsetWidth / colDefs.length ??
   300;
 
-const getEstimatedRowHeight = (options: TableOptionsProps) =>
-  options.style?.row?.height ?? 300;
+const getEstimatedRowHeight = (options: TableOptionsProps) => {
+  const theme = useTheme();
+  return (
+    getMeasures(theme, (options.style.density = 'default')).row.height[
+      options.style?.row?.height || 'md'
+    ] ?? 36
+  );
+};
 
 export const useTableVirtualization = ({
   data,

diff --git a/packages/table/src/core/TableHead/StyledTableHead.ts b/packages/table/src/core/TableHead/StyledTableHead.ts
@@ -1,16 +1,19 @@
 import styled, { css } from 'styled-components';
+import React from 'react';
 import { elevationMixin } from '@devoinc/genesys-ui';
 
 interface StyledTableHeadProps {
   scrolled?: boolean;
   width?: React.CSSProperties['width'];
+  height?: React.CSSProperties['height'];
 }
 
 export const StyledTableHead = styled.thead<StyledTableHeadProps>`
   top: 0;
-  width: 100%;
   display: inline-block;
   position: sticky;
+  height: ${({ height }) => height};
+  width: ${({ width }) => width || '100%'};
 
   ${({ scrolled, theme }) => {
     const tableHeadTokens = theme.cmp.table.head;
@@ -26,8 +29,4 @@ export const StyledTableHead = styled.thead<StyledTableHeadProps>`
       background-color: ${theme.cmp.table.head.color.background};
     `;
   }}
-
-  ${({ width }) => css`
-    width: ${width};
-  `}
 `;
diff --git a/packages/table/src/core/TableHead/StyledTableHeadRow.ts b/packages/table/src/core/TableHead/StyledTableHeadRow.ts
@@ -8,7 +8,6 @@ interface StyledTableHeadRowProps {
 
 export const StyledTableHeadRow = styled.tr<StyledTableHeadRowProps>`
   position: relative;
-  width: ${({ width }) => width};
-  height: ${({ height }) => height};
   display: flex;
+  height: 100%;
 `;
diff --git a/packages/table/src/core/TableHead/TableHead.tsx b/packages/table/src/core/TableHead/TableHead.tsx
@@ -5,6 +5,7 @@ import { HeaderCell } from '../HeaderCell';
 import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { ColDef } from '../../declarations';
 import { getColDefByID } from '../utils';
+import { TableContext } from '../Table/context';
 
 interface TableHeadProps {
   scrolled?: boolean;
@@ -13,19 +14,18 @@ interface TableHeadProps {
 }
 
 export const TableHead: React.FC<TableHeadProps> = ({
-  scrolled,
   columnVirtualizer,
   columnDefs,
+  scrolled,
 }) => {
+  const { styles, measures } = React.useContext(TableContext);
   return (
     <StyledTableHead
       scrolled={scrolled}
       width={`${columnVirtualizer.getTotalSize()}px`}
+      height={`${measures.head.height}px`}
     >
-      <StyledTableHeadRow
-        width={`${columnVirtualizer.getTotalSize()}px`}
-        height={'40px'}
-      >
+      <StyledTableHeadRow width={`${columnVirtualizer.getTotalSize()}px`}>
         {columnVirtualizer
           .getVirtualItems()
           .map((virtualColumn: VirtualItem) => (

diff --git a/packages/table/src/core/utils/sizes.ts b/packages/table/src/core/utils/sizes.ts
@@ -1,48 +1,28 @@
 import { Brand } from '@devoinc/genesys-tokens-types';
-import { RowSizes } from '../../declarations';
-
-export const DENSITY = {
-  DEFAULT: 'default',
-  COMPACT: 'compact',
-  COMFORTABLE: 'comfortable',
-};
+import { Density, MeasuresConfig } from '../../declarations';
+import { getPxFromRem } from '@devoinc/genesys-ui';
 
 /**
  * Returns an object with size values based in design tokens and display density
  */
-export const getSizes = (tokens: Brand['cmp']['table']): RowSizes => {
-  const cellTokens = tokens.cell;
-  const cellWrapperTokens = tokens.cellWrapper;
-  const headTokens = tokens.head;
-  const rowTokens = tokens.row;
+export const getMeasures = (theme: Brand, density: Density): MeasuresConfig => {
+  const headTokens = theme.cmp.table.head;
+  const rowTokens = theme.cmp.table.row;
+  const cellTokens = theme.cmp.table.cell;
   return {
-    head: { height: headTokens.size.height[DENSITY.DEFAULT] },
+    head: { height: getPxFromRem(headTokens.size.height[density]) },
     row: {
       height: {
-        md: rowTokens.size.height[DENSITY.DEFAULT].md,
-        lg: rowTokens.size.height[DENSITY.DEFAULT].lg,
-        xl: rowTokens.size.height[DENSITY.DEFAULT].xl,
-        xxl: rowTokens.size.height[DENSITY.DEFAULT].xxl,
-        xxxl: rowTokens.size.height[DENSITY.DEFAULT].xxxl,
+        md: getPxFromRem(rowTokens.size.height[density].md),
+        lg: getPxFromRem(rowTokens.size.height[density].lg),
+        xl: getPxFromRem(rowTokens.size.height[density].xl),
+        xxl: getPxFromRem(rowTokens.size.height[density].xxl),
+        xxxl: getPxFromRem(rowTokens.size.height[density].xxxl),
       },
-      br: rowTokens.shape.borderRadius[DENSITY.DEFAULT],
     },
     cell: {
-      horPad: cellTokens.space.padding.hor[DENSITY.DEFAULT],
-      verPad: cellTokens.space.padding.ver[DENSITY.DEFAULT].base,
-      verPadTall: cellTokens.space.padding.ver[DENSITY.DEFAULT].tall,
-    },
-    afterRow: {
-      horPad: cellWrapperTokens.space.padding.hor[DENSITY.DEFAULT].afterRow,
-      verPad: cellWrapperTokens.space.padding.ver[DENSITY.DEFAULT].afterRow,
-    },
-    expanded: {
-      horPad: cellWrapperTokens.space.padding.hor[DENSITY.DEFAULT].expanded,
-      verPad: cellWrapperTokens.space.padding.ver[DENSITY.DEFAULT].expanded,
-    },
-    expandedLg: {
-      horPad: cellWrapperTokens.space.padding.hor[DENSITY.DEFAULT].expandedLg,
-      verPad: cellWrapperTokens.space.padding.ver[DENSITY.DEFAULT].expandedLg,
+      horPad: getPxFromRem(cellTokens.space.padding.hor[density]),
+      verPad: getPxFromRem(cellTokens.space.padding.ver[density].base),
     },
   };
 };
diff --git a/packages/table/src/declarations.ts b/packages/table/src/declarations.ts
@@ -1,11 +1,20 @@
 import { StyledTableProps } from './core/Table/StyledTable';
 import { DateContext } from './valueFormatters/date';
 import { StyledTableWrapperProps } from './core/Table/StyledTableWrapper';
+import { getPxFromRem } from '@devoinc/genesys-ui';
 
 export type DefaultColDef = Omit<ColDef, 'id'>;
 
 type Types = { id: string };
 type TypesColDef = Omit<ColDef, 'colId'>;
+export type Density = 'default' | 'compact' | 'comfortable';
+
+export interface TableStyles {
+  density?: Density;
+  wrapper: StyledTableWrapperProps;
+  table?: StyledTableProps;
+  row?: { height: RowHeight };
+}
 
 export interface TableOptionsProps {
   columnDefs?: ColDef[];
@@ -14,11 +23,7 @@ export interface TableOptionsProps {
   context?: {
     [key: string]: unknown;
   };
-  style?: {
-    wrapper: StyledTableWrapperProps;
-    table?: StyledTableProps;
-    row?: { height: number };
-  };
+  style?: TableStyles;
 }
 
 export interface CellRendererParams {
@@ -57,16 +62,18 @@ export interface ColDef {
     };
     textAlign?: 'left' | 'center' | 'right';
     truncateLine?: number;
-    density?: 'default' | 'compact' | 'comfortable';
     boxShadow?: 'base' | 'strong';
+    toEdge: boolean;
   };
   expandedRow?: boolean;
   isDragging?: boolean;
   onReset?: (initialValue: unknown) => void;
   tooltipField?: string;
 }
 
-export interface RowSizes {
+export type RowHeight = 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+
+export interface MeasuresConfig {
   head: { height: number };
   row: {
     height: {
@@ -76,23 +83,9 @@ export interface RowSizes {
       xxl: number;
       xxxl: number;
     };
-    br: number;
   };
   cell: {
     horPad: number;
     verPad: number;
-    verPadTall: number;
-  };
-  afterRow: {
-    horPad: number;
-    verPad: number;
-  };
-  expanded: {
-    horPad: number;
-    verPad: number;
-  };
-  expandedLg: {
-    horPad: number;
-    verPad: number;
   };
 }