feat(simpleTable): Demo clickable rows, remove internal <InteractionStateLayer /> (#94454)

![Screenshot 2025-06-26 at 10 50
17 AM](https://github.com/user-attachments/assets/6c1b024c-f632-48a4-89e1-3e929727e592)

Author: ryan953

static/app/components/tables/simpleTable/index.stories.tsx

@@ -2,6 +2,8 @@ import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 import moment from 'moment-timezone';
 
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
+import Link from 'sentry/components/links/link';
 import {SimpleTable} from 'sentry/components/tables/simpleTable';
 import {TimeAgoCell} from 'sentry/components/workflowEngine/gridCell/timeAgoCell';
 import {t} from 'sentry/locale';
@@ -135,6 +137,64 @@ export default Storybook.story('SimpleTable', story => {
     );
   });
 
+  story('Clickable rows', () => {
+    return (
+      <Fragment>
+        <p>
+          If you want to make a row clickable then you can wrap it in a{' '}
+          <Storybook.JSXNode name="Link" /> or a raw <Storybook.JSXNode name="button" />,
+          but be sure to set <code>display: contents; pointer: cursor;</code> in the css
+        </p>
+        <SimpleTableWithColumns>
+          <SimpleTable.Header>
+            {headers.map(header => (
+              <SimpleTable.HeaderCell key={header.key}>
+                {header.label}
+              </SimpleTable.HeaderCell>
+            ))}
+          </SimpleTable.Header>
+          <SimpleTable.Row>
+            <Link
+              to="#"
+              onClick={e => {
+                // eslint-disable-next-line no-console
+                console.log('clicked a link');
+                e.preventDefault();
+              }}
+              style={{display: 'contents', cursor: 'pointer'}}
+            >
+              <InteractionStateLayer />
+              <SimpleTable.RowCell>
+                Clickable <Storybook.JSXNode name="Link" />
+              </SimpleTable.RowCell>
+              <SimpleTable.RowCell>123</SimpleTable.RowCell>
+              <SimpleTable.RowCell>123</SimpleTable.RowCell>
+              <SimpleTable.RowCell>123</SimpleTable.RowCell>
+            </Link>
+          </SimpleTable.Row>
+          <SimpleTable.Row>
+            <button
+              onClick={e => {
+                // eslint-disable-next-line no-console
+                console.log('clicked a button');
+                e.preventDefault();
+              }}
+              style={{display: 'contents', cursor: 'pointer'}}
+            >
+              <InteractionStateLayer />
+              <SimpleTable.RowCell>
+                Clickable <Storybook.JSXNode name="button" />
+              </SimpleTable.RowCell>
+              <SimpleTable.RowCell>123</SimpleTable.RowCell>
+              <SimpleTable.RowCell>123</SimpleTable.RowCell>
+              <SimpleTable.RowCell>123</SimpleTable.RowCell>
+            </button>
+          </SimpleTable.Row>
+        </SimpleTableWithColumns>
+      </Fragment>
+    );
+  });
+
   story('Custom widths and hidden columns', () => {
     const tableContent = (
       <Fragment>

static/app/components/tables/simpleTable/index.tsx

@@ -69,7 +69,6 @@ function HeaderCell({
 function Row({children, variant = 'default', ...props}: RowProps) {
   return (
     <StyledRow variant={variant} role="row" {...props}>
-      <InteractionStateLayer />
       {children}
     </StyledRow>
   );