feat: new naming for props and styles for rows.

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

@@ -3,6 +3,8 @@ import { StyledTableCell } from './StyledTableCell';
 import { useRenderContent } from './useRenderContent';
 import { ColDef } from '../../declarations';
 import { useInitialState } from '../../editors/useInitialState';
+import { TableContext } from '../Table/context';
+import { StyledTableCellWrapper } from './StyledTableCellWrapper';
 
 interface CellProps {
   data: unknown;
@@ -19,6 +21,7 @@ export const Cell: React.FC<CellProps> = ({
   cellHeight,
   offsetX,
 }) => {
+  const { measures } = React.useContext(TableContext);
   const { onReset } = columnDef;
 
   useInitialState(data, onReset);
@@ -34,7 +37,14 @@ export const Cell: React.FC<CellProps> = ({
       offsetX={offsetX}
       height={cellHeight}
     >
-      {isEditMode ? editionContent : viewContent}
+      <StyledTableCellWrapper
+        clickable={columnDef.editable}
+        as={columnDef.editable ? 'button' : 'div'}
+        paddingVer={`${measures.cell.verPad}px`}
+        paddingHor={`${measures.cell.horPad}px`}
+      >
+        {isEditMode ? editionContent : viewContent}
+      </StyledTableCellWrapper>
     </StyledTableCell>
   );
 };

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

@@ -1,29 +1,28 @@
 import React from 'react';
 import styled, { DefaultTheme } from 'styled-components';
 
-interface StyledTableCellWrapperProps {
+interface StyledTableCellProps {
   cellWidth?: React.CSSProperties['width'];
   height?: React.CSSProperties['height'];
   offsetX?: number;
   theme: DefaultTheme;
 }
 
 export const StyledTableCell = styled.td.attrs(
-  ({ cellWidth, theme, offsetX, height }: StyledTableCellWrapperProps) => ({
+  ({ cellWidth, theme, offsetX, height }: StyledTableCellProps) => ({
     style: {
       width: cellWidth,
       color: theme.alias.color.text.body.base,
       left: `${offsetX}px`,
       height,
     },
   }),
-)<StyledTableCellWrapperProps>`
+)<StyledTableCellProps>`
   position: absolute;
   top: 0;
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding: 0 1.2rem;
   height: 100%;
   overflow: hidden;
   flex: 0 0 auto;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { ColumnCellStyleProps } from '../../declarations';
+import {
+  btnResetMixin,
+  truncateTypoMixin,
+  typoMixin,
+} from '@devoinc/genesys-ui';
+
+interface StyledTableCellWrapperProps extends ColumnCellStyleProps {
+  clickable?: boolean;
+  paddingVer?: React.CSSProperties['paddingBottom'];
+  paddingHor?: React.CSSProperties['paddingLeft'];
+}
+
+const alignMap = {
+  left: 'flex-start',
+  right: 'flex-end',
+  center: 'center',
+  top: 'flex-start',
+  bottom: 'flex-end',
+};
+
+export const StyledTableCellWrapper = styled.div<StyledTableCellWrapperProps>`
+  ${({ clickable, theme }) => {
+    const tokens = theme.cmp.table.cellClickableWrapper;
+    return (
+      clickable &&
+      css`
+        ${btnResetMixin};
+        user-select: auto;
+        outline: none;
+        cursor: pointer;
+        transition: background-color ease ${tokens.mutation.transitionDuration};
+
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: ${tokens.color.background.hovered};
+        }
+      `
+    );
+  }}
+  ${({ theme, textAlign }) => typoMixin({ theme, textAlign })};
+  ${({ truncateLine }) => truncateTypoMixin({ lineClamp: truncateLine })}
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: ${({ align }) => alignMap[align?.vertical || 'center']};
+  justify-content: ${({ align }) => alignMap[align?.horizontal || 'left']};
+  width: 100%;
+  height: 100%;
+  padding: ${({ paddingVer, paddingHor, toEdge }) =>
+    toEdge ? '0' : `${paddingVer} ${paddingHor}`};
+`;

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

@@ -3,6 +3,7 @@ import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { ColDef } from '../../declarations';
 import { Cell } from '../Cell';
 import { StyledTableRow, StyledTableRowProps } from './StyledTableRow';
+import { TableContext } from '../Table/context';
 
 interface RowProps extends StyledTableRowProps {
   columnDefs: ColDef[];
@@ -23,10 +24,10 @@ export const Row: React.FC<RowProps> = ({
   isDragging,
   modified,
   selected,
-  striped,
   styles,
   columnVirtualizer,
 }) => {
+  const { visualOptions } = React.useContext(TableContext);
   return (
     <StyledTableRow
       disabled={disabled}
@@ -37,7 +38,7 @@ export const Row: React.FC<RowProps> = ({
       isDragging={isDragging}
       modified={modified}
       selected={selected}
-      striped={striped}
+      striped={visualOptions.striped}
       position={styles.position}
       width={styles.width}
       height={styles.height}

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { pseudoElementMixin } from '@devoinc/genesys-ui';
+import {
+  pseudoElementMixin,
+  pseudoElementOverlayMixin,
+} from '@devoinc/genesys-ui';
 
 export interface StyledTableRowProps {
   disabled?: boolean;
@@ -51,7 +54,9 @@ export const StyledTableRow = styled.tr.attrs<StyledTableRowProps>(
     const evenOddType = striped && even ? 'even' : 'odd';
     const rowTokens = theme.cmp.table.row;
     const transitionDuration = rowTokens.mutation.transitionDuration;
-
+    const hoverBgColor = striped
+      ? theme.cmp.table.cell.color.background.backdrop.hovered.strong
+      : theme.cmp.table.cell.color.background.backdrop.hovered.base;
     return css`
       @keyframes modifiedBlink {
         0% {
@@ -85,6 +90,18 @@ export const StyledTableRow = styled.tr.attrs<StyledTableRowProps>(
         return rowTokens.color.background[evenOddType].base;
       }};
 
+      // hovered
+      &::before {
+        ${pseudoElementOverlayMixin({})};
+        transition: background-color ease-in-out
+          ${theme.cmp.table.cell.mutation.transitionDuration};
+        background-color: transparent;
+      }
+
+      &:hover::before {
+        background-color: ${hoverBgColor};
+      }
+
       // draggable
       ${draggable &&
       css`

packages/table/src/core/Table/Table.tsx

@@ -17,11 +17,17 @@ interface TableProps {
 
 export const Table: React.FC<TableProps> = ({ tableOptions, data }) => {
   const theme = useTheme();
-  const { defaultColumnDef, columnDefs, types, style } = tableOptions;
+  const measures = getMeasures(
+    theme,
+    (tableOptions.visualOptions.density = 'default'),
+  );
+  const rowHeight =
+    measures.row.height[tableOptions.visualOptions?.row?.height || 'md'];
+  const { defaultColumnDef, columnDefs, types, visualOptions } = tableOptions;
   const { rowVirtualizer, columnVirtualizer, ref } = useTableVirtualization({
     data,
     columnDefs,
-    tableOptions,
+    rowHeight,
   });
   const refinedColumnDefs = getCollatedColumns(
     defaultColumnDef,
@@ -30,14 +36,18 @@ export const Table: React.FC<TableProps> = ({ tableOptions, data }) => {
   );
   const { hasScroll } = useTableScroll(rowVirtualizer, ref);
   console.info('hasScroll: ', hasScroll);
+  console.info(measures);
   return (
     <TableContext.Provider
       value={{
-        styles: tableOptions.style,
-        measures: getMeasures(theme, (tableOptions.style.density = 'default')),
+        visualOptions: tableOptions.visualOptions,
+        measures,
       }}
     >
-      <StyledTableWrapper ref={ref} maxHeight={style?.wrapper?.maxHeight}>
+      <StyledTableWrapper
+        ref={ref}
+        maxHeight={visualOptions?.wrapper?.maxHeight}
+      >
         <StyledTable
           width={`${columnVirtualizer.getTotalSize()}px`}
           height={`${rowVirtualizer.getTotalSize()}px`}

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

@@ -1,15 +1,34 @@
 import * as React from 'react';
-import { MeasuresConfig, TableStyles } from '../../declarations';
+import { MeasuresConfig, TableVisualOptions } from '../../declarations';
 
 interface TableContextProps {
-  styles: TableStyles;
+  visualOptions: TableVisualOptions;
   measures: MeasuresConfig;
 }
 
 export const TableContext = React.createContext<TableContextProps>({
-  density: 'default',
-  row: { height: 'md' },
-  wrapper: {
-    maxHeight: 'none',
+  visualOptions: {
+    density: 'default',
+    row: { height: 'md' },
+    striped: false,
+    wrapper: {
+      maxHeight: 'none',
+    },
+  },
+  measures: {
+    head: { height: 36 },
+    row: {
+      height: {
+        md: 36,
+        lg: 60,
+        xl: 72,
+        xxl: 84,
+        xxxl: 96,
+      },
+    },
+    cell: {
+      horPad: 12,
+      verPad: 8,
+    },
   },
 });

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

@@ -1,13 +1,11 @@
 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';
+import { ColDef } from '../../declarations';
 
 interface UseVirtualizationParams {
   data: { [key: string]: unknown }[];
   columnDefs: ColDef[];
-  tableOptions: TableOptionsProps;
+  rowHeight: number;
 }
 
 const getEstimatedColumnWidth = (
@@ -19,25 +17,16 @@ const getEstimatedColumnWidth = (
   tableRef?.current?.offsetWidth / colDefs.length ??
   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,
   columnDefs,
-  tableOptions,
+  rowHeight,
 }: UseVirtualizationParams) => {
   const ref = useRef<HTMLDivElement>();
   const rowVirtualizer = useVirtualizer({
     count: data.length,
     getScrollElement: () => ref.current,
-    estimateSize: () => getEstimatedRowHeight(tableOptions),
+    estimateSize: () => rowHeight,
     overscan: 10,
   });
 

packages/table/src/core/TableHead/TableHead.tsx

@@ -18,7 +18,7 @@ export const TableHead: React.FC<TableHeadProps> = ({
   columnDefs,
   scrolled,
 }) => {
-  const { styles, measures } = React.useContext(TableContext);
+  const { measures } = React.useContext(TableContext);
   return (
     <StyledTableHead
       scrolled={scrolled}

packages/table/src/declarations.ts

@@ -1,16 +1,17 @@
+import * as React from 'react';
 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 {
+export interface TableVisualOptions {
   density?: Density;
+  striped?: boolean;
   wrapper: StyledTableWrapperProps;
   table?: StyledTableProps;
   row?: { height: RowHeight };
@@ -23,14 +24,28 @@ export interface TableOptionsProps {
   context?: {
     [key: string]: unknown;
   };
-  style?: TableStyles;
+  visualOptions?: TableVisualOptions;
 }
 
 export interface CellRendererParams {
   value: unknown;
   columnDef: ColDef;
 }
 
+export type CellVerAlign = 'top' | 'bottom' | 'center';
+export type CellHorAlign = 'left' | 'center' | 'right';
+
+export interface ColumnCellStyleProps {
+  align?: {
+    horizontal?: CellHorAlign;
+    vertical?: CellVerAlign;
+  };
+  textAlign?: React.CSSProperties['textAlign'];
+  width?: number;
+  truncateLine?: number;
+  toEdge?: boolean;
+}
+
 interface CellEditorParams {
   value: unknown;
   onChange: () => void;
@@ -52,19 +67,7 @@ export interface ColDef {
     [key: string]: unknown;
   };
 
-  cellStyle?: {
-    minWidth?: number;
-    maxWidth?: number;
-    width?: number;
-    align?: {
-      horizontal?: 'left' | 'center' | 'right';
-      vertical?: 'top' | 'bottom' | 'center';
-    };
-    textAlign?: 'left' | 'center' | 'right';
-    truncateLine?: number;
-    boxShadow?: 'base' | 'strong';
-    toEdge: boolean;
-  };
+  cellStyle?: ColumnCellStyleProps;
   expandedRow?: boolean;
   isDragging?: boolean;
   onReset?: (initialValue: unknown) => void;