Render mobile vs desktop cells conditionally vs. applying `display: n…

…one` CSS - better performance at scale, and also generally cleaner code
elastic · Apr 3, 2024 · 5634d4c · 5634d4c
1 parent 7725261
commit 5634d4c
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 65 deletions.
diff --git a/src/components/table/_table_cell_content.tsx b/src/components/table/_table_cell_content.tsx
@@ -40,7 +40,7 @@ export const EuiTableCellContent: FunctionComponent<
   const styles = useEuiMemoizedStyles(euiTableCellContentStyles);
   const cssStyles = [
     styles.euiTableCellContent,
-    !isResponsive && styles[align], // On mobile, always align cells to the left
+    styles[align],
     truncateText === true && styles.truncateText,
     truncateText === false && styles.wrapText,
     ...(hasActions

diff --git a/src/components/table/table.styles.ts b/src/components/table/table.styles.ts
@@ -91,19 +91,10 @@ export const euiTableStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     /**
      * Responsive/mobile vs desktop styles
+     * Individual row/cells handle their own desktop vs mobile styles
      */
-    desktop: css`
-      .euiTableHeaderCell--hideForDesktop,
-      .euiTableRowCell--hideForDesktop,
-      .euiTableRowCell__mobileHeader {
-        display: none;
-      }
-    `,
+    desktop: css``,
     mobile: css`
-      .euiTableRowCell--hideForMobile {
-        display: none;
-      }
-
       thead {
         display: none; /* Use mobile versions of selecting and filtering instead */
       }

diff --git a/src/components/table/table_header_cell.tsx b/src/components/table/table_header_cell.tsx
@@ -25,6 +25,7 @@ import { EuiIcon } from '../icon';
 import { EuiInnerText } from '../inner_text';
 
 import { resolveWidthAsStyle } from './utils';
+import { useEuiTableIsResponsive } from './mobile/responsive_context';
 import { EuiTableCellContent } from './_table_cell_content';
 import { euiTableHeaderFooterCellStyles } from './table_cells_shared.styles';
 
@@ -137,11 +138,12 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
 }) => {
   const styles = useEuiMemoizedStyles(euiTableHeaderFooterCellStyles);
 
-  const classes = classNames('euiTableHeaderCell', className, {
-    'euiTableHeaderCell--hideForDesktop': mobileOptions.only,
-    'euiTableHeaderCell--hideForMobile': !mobileOptions.show,
-  });
+  const isResponsive = useEuiTableIsResponsive();
+  const hideForDesktop = !isResponsive && mobileOptions?.only;
+  const hideForMobile = isResponsive && !mobileOptions?.show;
+  if (hideForDesktop || hideForMobile) return null;
 
+  const classes = classNames('euiTableHeaderCell', className);
   const inlineStyles = resolveWidthAsStyle(style, width);
 
   const CellComponent = children ? 'th' : 'td';

diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx
@@ -146,7 +146,6 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
   const cellClasses = classNames('euiTableRowCell', className, {
     'euiTableRowCell--hasActions': hasActions,
     'euiTableRowCell--isExpander': isExpander,
-    'euiTableRowCell--hideForDesktop': mobileOptions.only,
   });
 
   const widthValue = isResponsive
@@ -157,9 +156,6 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
 
   const styleObj = resolveWidthAsStyle(style, widthValue);
 
-  const hideForMobileClasses = 'euiTableRowCell--hideForMobile';
-  const showForMobileClasses = 'euiTableRowCell--hideForDesktop';
-
   const Element = setScopeRow ? 'th' : 'td';
   const sharedProps = {
     scope: setScopeRow ? 'row' : undefined,
@@ -174,54 +170,42 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
     hasActions: hasActions || isExpander,
   };
 
-  if (mobileOptions.show === false) {
-    return (
-      <Element
-        className={`${cellClasses} ${hideForMobileClasses}`}
-        {...sharedProps}
-      >
-        <EuiTableCellContent {...sharedContentProps}>
-          {children}
-        </EuiTableCellContent>
-      </Element>
-    );
-  } else {
-    return (
-      <Element className={cellClasses} {...sharedProps}>
-        {/* Mobile-only header */}
-        {mobileOptions.header && (
-          <div
-            css={styles.euiTableRowCell__mobileHeader}
-            className={`euiTableRowCell__mobileHeader ${showForMobileClasses}`}
-          >
-            {mobileOptions.header}
-          </div>
-        )}
-
-        {/* Content depending on mobile render existing */}
-        {mobileOptions.render ? (
-          <>
-            <EuiTableCellContent
-              className={showForMobileClasses}
-              align={mobileOptions.align ?? align}
-              truncateText={mobileOptions.truncateText ?? truncateText}
-              textOnly={mobileOptions.textOnly ?? textOnly}
+  if (isResponsive) {
+    if (mobileOptions.show === false) {
+      return null;
+    } else {
+      return (
+        <Element className={cellClasses} {...sharedProps}>
+          {mobileOptions.header && (
+            <div
+              className="euiTableRowCell__mobileHeader"
+              css={styles.euiTableRowCell__mobileHeader}
             >
-              {mobileOptions.render}
-            </EuiTableCellContent>
-            <EuiTableCellContent
-              {...sharedContentProps}
-              className={hideForMobileClasses}
-            >
-              {children}
-            </EuiTableCellContent>
-          </>
-        ) : (
+              {mobileOptions.header}
+            </div>
+          )}
+          <EuiTableCellContent
+            {...sharedContentProps}
+            align={mobileOptions.align ?? 'left'} // Default to left aligned mobile cells, unless consumers specifically set an alignment for mobile
+            truncateText={mobileOptions.truncateText ?? truncateText}
+            textOnly={mobileOptions.textOnly ?? textOnly}
+          >
+            {mobileOptions.render || children}
+          </EuiTableCellContent>
+        </Element>
+      );
+    }
+  } else {
+    if (mobileOptions.only) {
+      return null;
+    } else {
+      return (
+        <Element className={cellClasses} {...sharedProps}>
           <EuiTableCellContent {...sharedContentProps}>
             {children}
           </EuiTableCellContent>
-        )}
-      </Element>
-    );
+        </Element>
+      );
+    }
   }
 };