Implement sticky columns in GenericTable

src/components/elements/CommonMenuButton.tsx

@@ -102,6 +102,9 @@ const CommonMenuButton = ({
           vertical: 'top',
           horizontal: 'right',
         }}
+        // Bug: Opening the CommonMenu applies padding to the body, which can look weird on mobile.
+        // It's sort of fixable with disableScrollLock, but that seems to introduce other scroll problems.
+        // disableScrollLock={true}
         {...MenuProps}
       >
         {items.map(

src/components/elements/SemanticIcons.tsx

@@ -1,6 +1,7 @@
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import AddIcon from '@mui/icons-material/Add';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowCircleRight from '@mui/icons-material/ArrowCircleRight';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 import ArrowDropUpRoundedIcon from '@mui/icons-material/ArrowDropUpRounded';
@@ -62,6 +63,7 @@ export {
   CloseIcon as CloseIcon,
   MoreVertRoundedIcon as MoreMenuIcon,
   MyLocationIcon as MyLocationIcon,
+  ArrowCircleRight as GoIcon,
 
   // Icons for Form Builder
   CheckBoxIcon as FormBooleanIcon,

src/components/elements/table/GenericTable.tsx

@@ -80,6 +80,50 @@ const clickableRowStyles = {
   cursor: 'pointer',
 };
 
+export const getStickyCellStyles = (
+  sticky?: 'left' | 'right' | undefined
+): SxProps<Theme> => {
+  if (!sticky) return {} as SxProps<Theme>;
+
+  const base = {
+    backgroundColor: 'background.paper', // Otherwise it's transparent and other cell content appears beneath it
+    position: 'sticky',
+    zIndex: 1,
+    maxWidth: '200px', // Mitigates the risk that the column may be so wide as to obscure any scrollable columns
+    overflow: 'clip',
+  };
+
+  // Pseudo-element to achieve a border on sticky cells. `position: sticky` doesn't work with regular border
+  const pseudo = {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: '1px',
+    backgroundColor: 'borders.light',
+    pointerEvents: 'none', // Don't interfere with interactions
+  };
+
+  if (sticky === 'right')
+    return {
+      ...base,
+      right: 0,
+      '&::before': {
+        ...pseudo,
+        left: 0,
+      },
+    } as SxProps<Theme>;
+
+  return {
+    ...base,
+    left: 0,
+    '&::after': {
+      ...pseudo,
+      right: 0,
+    },
+  } as SxProps<Theme>;
+};
+
 const HeaderCell = ({
   children,
   sx,
@@ -237,11 +281,14 @@ const GenericTable = <T extends { id: string }>({
           {columns.map((def, i) => (
             <HeaderCell
               key={key(def) || i}
-              sx={{
-                ...(headerCellSx ? headerCellSx(def) : undefined),
-                textAlign: def.textAlign,
-                width: def.width,
-              }}
+              sx={
+                {
+                  ...getStickyCellStyles(def.sticky),
+                  ...(headerCellSx ? headerCellSx(def) : {}),
+                  textAlign: def.textAlign,
+                  width: def.width,
+                } as SxProps<Theme>
+              }
             >
               {def.header ? (
                 <strong>{def.header}</strong>
@@ -411,15 +458,18 @@ const GenericTable = <T extends { id: string }>({
                         <TableCell
                           key={key(def) || index}
                           {...tableCellProps}
-                          sx={{
-                            width,
-                            minWidth,
-                            ...(isLinked ? { p: 0 } : undefined),
-                            textAlign,
-                            whiteSpace: 'initial',
-                            ...onClickLinkTreatment,
-                            ...tableCellProps?.sx,
-                          }}
+                          sx={
+                            {
+                              ...getStickyCellStyles(def.sticky),
+                              width,
+                              minWidth,
+                              ...(isLinked ? { p: 0 } : undefined),
+                              textAlign,
+                              whiteSpace: 'initial',
+                              ...onClickLinkTreatment,
+                              ...tableCellProps?.sx,
+                            } as SxProps<Theme>
+                          }
                         >
                           {isLinked ? (
                             <RouterLink

src/components/elements/table/TableRowActions.tsx

@@ -1,7 +1,11 @@
-import { Button, Stack } from '@mui/material';
+import { Button, ButtonProps, Stack } from '@mui/material';
 import { ReactNode } from 'react';
 import ButtonLink from '../ButtonLink';
 import CommonMenuButton, { CommonMenuItem } from '../CommonMenuButton';
+import ButtonTooltipContainer from '@/components/elements/ButtonTooltipContainer';
+import { GoIcon } from '@/components/elements/SemanticIcons';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import IconButtonContainer from '@/modules/enrollment/components/IconButtonContainer';
 
 interface TableRowActionsProps<T> {
   record: T;
@@ -21,35 +25,62 @@ const TableRowActions = <T extends { id: string }>({
   primaryActionConfig,
   secondaryActionConfigs,
 }: TableRowActionsProps<T>) => {
+  const isTiny = useIsMobile('sm');
+
+  const primaryAria =
+    primaryActionConfig?.ariaLabel ||
+    `${primaryActionConfig?.title}, ${recordName}`;
+
+  const buttonProps: Pick<ButtonProps, 'size' | 'variant' | 'aria-label'> = {
+    size: 'small',
+    variant: 'outlined',
+    'aria-label': primaryAria,
+  };
+
   return (
-    <Stack direction='row' alignItems='center' justifyContent='end' gap={0.5}>
-      {!!primaryActionConfig && primaryActionConfig.to && (
-        <ButtonLink
-          to={primaryActionConfig.to || ''}
-          size='small'
-          variant='outlined'
-          aria-label={
-            primaryActionConfig.ariaLabel ||
-            `${primaryActionConfig.title}, ${recordName}`
-          }
-          state={primaryActionConfig.linkState}
-        >
-          {primaryActionConfig.title}
-        </ButtonLink>
-      )}
-      {!!primaryActionConfig && primaryActionConfig.onClick && (
-        <Button
-          onClick={primaryActionConfig.onClick}
-          size='small'
-          variant='outlined'
-          aria-label={
-            primaryActionConfig.ariaLabel ||
-            `${primaryActionConfig.title}, ${recordName}`
-          }
-        >
-          {primaryActionConfig.title}
-        </Button>
-      )}
+    <Stack
+      direction='row'
+      alignItems='center'
+      justifyContent='end'
+      gap={{ xs: 0, sm: 0.5 }}
+    >
+      {!!primaryActionConfig &&
+        primaryActionConfig.to &&
+        (isTiny ? (
+          <ButtonTooltipContainer title={primaryAria}>
+            <ButtonLink
+              to={primaryActionConfig.to || ''}
+              state={primaryActionConfig.linkState}
+              {...buttonProps}
+              variant='text'
+              sx={{ maxWidth: '20px', minWidth: 0 }}
+            >
+              <GoIcon />
+            </ButtonLink>
+          </ButtonTooltipContainer>
+        ) : (
+          <ButtonLink
+            to={primaryActionConfig.to || ''}
+            state={primaryActionConfig.linkState}
+            {...buttonProps}
+          >
+            {primaryActionConfig.title}
+          </ButtonLink>
+        ))}
+      {!!primaryActionConfig &&
+        primaryActionConfig.onClick &&
+        (isTiny ? (
+          <IconButtonContainer
+            Icon={GoIcon}
+            onClick={primaryActionConfig.onClick}
+            tooltip={primaryAria}
+            IconButtonProps={{ size: 'medium' }}
+          />
+        ) : (
+          <Button onClick={primaryActionConfig.onClick} {...buttonProps}>
+            {primaryActionConfig.title}
+          </Button>
+        ))}
       {primaryAction}
       {!!secondaryActionConfigs && secondaryActionConfigs.length > 0 && (
         <CommonMenuButton

src/components/elements/table/tableRowActionUtil.tsx

@@ -21,8 +21,10 @@ import { generateSafePath } from '@/utils/pathEncoding';
 
 export const BASE_ACTION_COLUMN_DEF: ColumnDef<any> = {
   key: 'Actions',
-  tableCellProps: { sx: { py: 0 } },
+  tableCellProps: { sx: { py: 0, px: { xs: 1, sm: 2 } } },
   render: '', // gets overridden when used
+  sticky: 'right',
+  width: '0px',
 };
 
 export const getViewClientMenuItem = (client: ClientNameFragment) => {

src/components/elements/table/types.tsx

@@ -19,6 +19,7 @@ type BaseColumnDef<T> = {
   tableCellProps?: TableCellProps;
   optional?: boolean;
   defaultHidden?: boolean;
+  sticky?: 'left' | 'right';
 };
 
 export type ColumnDef<T> =

src/modules/assessments/components/pages/ClientAssessmentsPage.tsx

@@ -30,7 +30,7 @@ const ClientAssessmentsPage = () => {
 
   const columns: ColumnDef<ClientAssessmentType>[] = useMemo(
     () => [
-      ASSESSMENT_COLUMNS.date,
+      { ...ASSESSMENT_COLUMNS.date, sticky: 'left' },
       {
         header: 'Project Name',
         render: (row: ClientAssessmentType) => row.enrollment.projectName,

src/modules/assessments/util.tsx

@@ -99,5 +99,6 @@ export const ASSESSMENT_CLIENT_NAME_COL: ColumnDef<
   ProjectAssessmentType | HhmAssessmentType
 > = {
   header: 'Client Name',
+  sticky: 'left',
   render: (a) => clientBriefName(a.enrollment.client),
 };

src/modules/bulkServices/components/BulkServicesTable.tsx

@@ -74,7 +74,7 @@ const BulkServicesTable: React.FC<Props> = ({
         </NotCollectedText>
       );
       return [
-        CLIENT_COLUMNS.name,
+        { ...CLIENT_COLUMNS.name, sticky: 'left' },
         ...(canViewDob ? [CLIENT_COLUMNS.dobAge] : []),
         {
           header: 'Entry Date',

src/modules/caseNotes/components/EnrollmentCaseNotes.tsx

@@ -7,6 +7,7 @@ import { useViewEditRecordDialogs } from '../../form/hooks/useViewEditRecordDial
 import RelativeDateDisplay from '@/components/elements/RelativeDateDisplay';
 import TableRowActions from '@/components/elements/table/TableRowActions';
 import { BASE_ACTION_COLUMN_DEF } from '@/components/elements/table/tableRowActionUtil';
+import { ColumnDef } from '@/components/elements/table/types';
 import TitleCard from '@/components/elements/TitleCard';
 import NotFound from '@/components/pages/NotFound';
 import GenericTableWithData from '@/modules/dataFetching/components/GenericTableWithData';
@@ -26,12 +27,16 @@ import {
   RecordFormRole,
 } from '@/types/gqlTypes';
 
-export const CASE_NOTE_COLUMNS = {
+export const CASE_NOTE_COLUMNS: Record<
+  string,
+  ColumnDef<CustomCaseNoteFieldsFragment>
+> = {
   InformationDate: {
     header: 'Information Date',
     width: '150px',
     render: ({ informationDate }: CustomCaseNoteFieldsFragment) =>
       parseAndFormatDate(informationDate),
+    sticky: 'left',
   },
   NoteContent: {
     header: 'Note Content',
@@ -52,7 +57,6 @@ export const CASE_NOTE_COLUMNS = {
   NoteContentPreview: {
     key: 'content-preview',
     header: 'Note Content Preview',
-    maxWidth: '450px',
     render: ({ content }: CustomCaseNoteFieldsFragment) => (
       <Box
         sx={{

src/modules/clientFiles/components/ClientFilesPage.tsx

@@ -79,6 +79,7 @@ const ClientFilesPage = () => {
         render: (file) => (
           <Typography variant='inherit'>{file.name}</Typography>
         ),
+        sticky: 'left',
       },
       {
         header: 'File Tags',

src/modules/enrollment/components/EnrollmentAssessmentsTable.tsx

@@ -5,6 +5,7 @@ import {
   BASE_ACTION_COLUMN_DEF,
   getViewAssessmentMenuItem,
 } from '@/components/elements/table/tableRowActionUtil';
+import { ColumnDef } from '@/components/elements/table/types';
 import { ASSESSMENT_COLUMNS } from '@/modules/assessments/util';
 import GenericTableWithData from '@/modules/dataFetching/components/GenericTableWithData';
 import { useFilters } from '@/modules/hmis/filterUtil';
@@ -27,9 +28,9 @@ const EnrollmentAssessmentsTable: React.FC<Props> = ({
   enrollmentId,
   projectId,
 }) => {
-  const columns = useMemo(
+  const columns: ColumnDef<AssessmentFieldsFragment>[] = useMemo(
     () => [
-      ASSESSMENT_COLUMNS.date,
+      { ...ASSESSMENT_COLUMNS.date, sticky: 'left' },
       ASSESSMENT_COLUMNS.type,
       ASSESSMENT_COLUMNS.lastUpdated,
       {

src/modules/enrollment/components/pages/ClientEnrollmentsPage.tsx

@@ -49,6 +49,7 @@ const CLIENT_ENROLLMENT_COLUMNS: {
   projectName: {
     header: 'Project Name',
     render: 'projectName',
+    sticky: 'left',
   },
   organizationName: {
     header: 'Organization Name',

src/modules/enrollment/components/pages/EnrollmentCeAssessmentsPage.tsx

@@ -71,6 +71,7 @@ const EnrollmentCeAssessmentsPage = () => {
         header: 'Assessment Date',
         render: (a: CeAssessmentFieldsFragment) =>
           parseAndFormatDate(a.assessmentDate),
+        sticky: 'left',
       },
       {
         header: 'Assessment Level',

src/modules/enrollment/components/pages/EnrollmentCeEventsPage.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo } from 'react';
 
 import TableRowActions from '@/components/elements/table/TableRowActions';
 import { BASE_ACTION_COLUMN_DEF } from '@/components/elements/table/tableRowActionUtil';
+import { ColumnDef } from '@/components/elements/table/types';
 import TitleCard from '@/components/elements/TitleCard';
 import NotFound from '@/components/pages/NotFound';
 import GenericTableWithData from '@/modules/dataFetching/components/GenericTableWithData';
@@ -66,13 +67,14 @@ const EnrollmentCeEventsPage = () => {
     DataCollectionFeatureRole.CeEvent
   );
 
-  const columns = useMemo(
+  const columns: ColumnDef<EventFieldsFragment>[] = useMemo(
     () => [
       {
         header: 'Event Type',
         render: (e: EventFieldsFragment) => (
           <HmisEnum value={e.event} enumMap={HmisEnums.EventType} />
         ),
+        sticky: 'left',
       },
       {
         header: 'Event Date',

src/modules/enrollment/components/pages/EnrollmentCurrentLivingSituationsPage.tsx

@@ -3,6 +3,7 @@ import { Button } from '@mui/material';
 import { useCallback, useMemo } from 'react';
 import TableRowActions from '@/components/elements/table/TableRowActions';
 import { BASE_ACTION_COLUMN_DEF } from '@/components/elements/table/tableRowActionUtil';
+import { ColumnDef } from '@/components/elements/table/types';
 import TitleCard from '@/components/elements/TitleCard';
 import NotFound from '@/components/pages/NotFound';
 import GenericTableWithData from '@/modules/dataFetching/components/GenericTableWithData';
@@ -93,10 +94,12 @@ const EnrollmentCurrentLivingSituationsPage = () => {
     });
 
   const getColumnDefs = useCallback(
-    (rows: CurrentLivingSituationFieldsFragment[]) => {
+    (
+      rows: CurrentLivingSituationFieldsFragment[]
+    ): ColumnDef<CurrentLivingSituationFieldsFragment>[] => {
       const customColumns = getCustomDataElementColumns(rows);
       return [
-        CLS_COLUMNS.informationDate,
+        { ...CLS_COLUMNS.informationDate, sticky: 'left' },
         CLS_COLUMNS.livingSituation,
         CLS_COLUMNS.locationDetails,
         ...customColumns,