feat: component stickible

Author: Jakub007d

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableExpandableExample.tsx

@@ -17,7 +17,6 @@ const expandableContents: ExpandableContent[] = [
   // Row 1 - Repository one
   { row_id: 1, column_id: 2, content: <div><strong>Branch Details:</strong> 5 active branches, main, develop, feature/new-ui, hotfix/bug-123, release/v2.0</div> },
   { row_id: 1, column_id: 3, content: <div><strong>PR Details:</strong> 3 open PRs, 45 merged this month, avg review time: 2 days</div> },
-  { row_id: 1, column_id: 4, content: <div><strong>Workspace Info:</strong> Production env, 5 active deployments, last updated 2 hours ago</div> },
   { row_id: 1, column_id: 5, content: <div><strong>Commit Info:</strong> Author: John Doe, Message: "Fix critical authentication bug", SHA: a1b2c3d</div> },
 
   // Row 2 - Repository two
@@ -110,7 +109,7 @@ const columns: DataViewTh[] = [
   'Repositories', 
   { cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></> }, 
   'Pull requests', 
-  { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } }, 
+  { cell: 'Workspaces', props: { info: { tooltip: 'More information' }, isStickyColumn: true} }, 
   { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },
 ];
 

packages/module/src/DataViewTableBasic/DataViewTableBasic.tsx

@@ -2,6 +2,8 @@ import { FC, useMemo, useState } from 'react';
 import {
   expandable,
   ExpandableRowContent,
+  InnerScrollContainer,
+  OuterScrollContainer,
   Table,
   TableProps,
   Tbody,
@@ -37,6 +39,10 @@ export interface DataViewTableBasicProps extends Omit<TableProps, 'onSelect' | '
   hasResizableColumns?: boolean;
   /** Toggles expandable */
   isExpandable?: boolean;
+  /** Toogles sticky colums and headder */
+  isSticky?: boolean;
+  /** Toogles draggable rows */
+  isDraggable?: boolean;
 }
 
 export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
@@ -48,6 +54,8 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
   bodyStates,
   hasResizableColumns,
   isExpandable,
+  isSticky = false,
+  isDraggable = true,
   ...props
 }: DataViewTableBasicProps) => {
   const { selection, activeState, isSelectable } = useInternalContext();
@@ -70,13 +78,13 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
     const rowId = isDataViewTdObject(firstCell) ? (firstCell as any).id : undefined;
 
     // Find the matching expanded content by row_id and column_id
-    const expandedRowContent = expandedRows?.find(
+    const expandedRowContent = isExpandable ? expandedRows?.find(
       (content) => content.row_id === rowId && content.column_id === expandedColIndex
-    );
+    ) : undefined;
 
     return (
       <Tbody key={rowIndex} isExpanded={isRowExpanded}>
-        <Tr ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)} isContentExpanded={isRowExpanded} isControlRow>
+        <Tr ouiaId={`${ouiaId}-tr-${rowIndex}`} {...(rowIsObject && row?.props)} isContentExpanded={isRowExpanded} isControlRow draggable={isDraggable}>
           {isSelectable && (
             <Td
               key={`select-${rowIndex}`}
@@ -92,9 +100,9 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
           )}
           {(rowIsObject ? row.row : row).map((cell, colIndex) => {
             const cellIsObject = isDataViewTdObject(cell);
-            const cellExpandableContent = expandedRows?.find(
+            const cellExpandableContent = isExpandable ? expandedRows?.find(
               (content) => content.row_id === rowId && content.column_id === colIndex
-            );
+            ) : undefined;
             return (
               <Td
                 key={colIndex}
@@ -136,6 +144,20 @@ export const DataViewTableBasic: FC<DataViewTableBasicProps> = ({
     );
   }), [ rows, isSelectable, isSelected, isSelectDisabled, onSelect, ouiaId, expandedRowsState, expandedColumnIndex, expandedRows, columns.length ]);
 
+  if(isSticky)
+  {
+    return(
+      <OuterScrollContainer>
+        <InnerScrollContainer>
+          <Table aria-label="Data table" ouiaId={ouiaId} isExpandable={isExpandable} {...props} isStickyHeader>
+            { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} hasResizableColumns={hasResizableColumns} /> }
+            { activeBodyState || renderedRows }
+          </Table>
+        </InnerScrollContainer>
+      </OuterScrollContainer>
+    )
+  }
+  else
   return (
     <Table aria-label="Data table" ouiaId={ouiaId} isExpandable={isExpandable} {...props}>
       { activeHeadState || <DataViewTableHead columns={columns} ouiaId={ouiaId} hasResizableColumns={hasResizableColumns} /> }