Frontend: InteractiveTable fix - prevent styles from leaking into tables added in expanded rows (#88948)

* fix: prevent styles from leaking into tables added in expanded rows

packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx

@@ -34,23 +34,20 @@ const getStyles = (theme: GrafanaTheme2) => {
       width: '100%',
       overflowX: 'auto',
     }),
+    cell: css({
+      padding: theme.spacing(1),
+      minWidth: theme.spacing(3),
+    }),
     table: css({
       borderRadius: theme.shape.radius.default,
       width: '100%',
-
-      td: {
-        padding: theme.spacing(1),
-      },
-
-      'td, th': {
-        minWidth: theme.spacing(3),
-      },
     }),
     disableGrow: css({
       width: 0,
     }),
     header: css({
       borderBottom: `1px solid ${theme.colors.border.weak}`,
+      minWidth: theme.spacing(3),
       '&, & > button': {
         position: 'relative',
         whiteSpace: 'nowrap',
@@ -85,10 +82,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: 'expanded-row-content',
       borderBottom: 'none',
     }),
-    expandedContentRow: css({
-      label: 'expanded-row-content',
-
-      td: {
+    expandedContentCell: css({
       borderBottom: `1px solid ${theme.colors.border.weak}`,
       position: 'relative',
       padding: theme.spacing(2, 2, 2, 5),
@@ -102,7 +96,9 @@ const getStyles = (theme: GrafanaTheme2) => {
         bottom: theme.spacing(2),
         background: theme.colors.border.medium,
       },
-      },
+    }),
+    expandedContentRow: css({
+      label: 'expanded-row-content',
     }),
     sortableHeader: css({
       /* increases selector's specificity so that it always takes precedence over default styles  */
@@ -290,7 +286,7 @@ export function InteractiveTable<TableData extends object>({
                   {row.cells.map((cell) => {
                     const { key, ...otherCellProps } = cell.getCellProps();
                     return (
-                      <td key={key} {...otherCellProps}>
+                      <td className={styles.cell} key={key} {...otherCellProps}>
                         {cell.render('Cell', { __rowID: rowId })}
                       </td>
                     );
@@ -298,7 +294,9 @@ export function InteractiveTable<TableData extends object>({
                 </tr>
                 {isExpanded && renderExpandedRow && (
                   <tr {...otherRowProps} id={rowId} className={styles.expandedContentRow}>
-                    <td colSpan={row.cells.length}>{renderExpandedRow(row.original)}</td>
+                    <td className={styles.expandedContentCell} colSpan={row.cells.length}>
+                      {renderExpandedRow(row.original)}
+                    </td>
                   </tr>
                 )}
               </Fragment>