@furystack/shades-common-components 11.0.0 → 12.0.0

package/src/components/data-grid/data-grid-row.spec.tsx

@@ -33,11 +33,19 @@ describe('DataGridRow', () => {
     const injector = new Injector()
     const root = document.getElementById('root')!
 
+    // Create shade-data-grid element manually to simulate production structure
+    // shade-data-grid is the scrollable container in production
+    const shadeDataGrid = document.createElement('shade-data-grid')
+    shadeDataGrid.style.overflow = 'auto'
+    shadeDataGrid.style.height = '200px'
+    shadeDataGrid.style.display = 'block'
+    root.appendChild(shadeDataGrid)
+
     initializeShadeRoot({
       injector,
-      rootElement: root,
+      rootElement: shadeDataGrid,
       jsxElement: (
-        <div className="shade-grid-wrapper" style={{ overflow: 'auto', height: '200px' }}>
+        <div className="shade-grid-wrapper">
           <table>
             <thead>
               <tr>
@@ -69,6 +77,8 @@ describe('DataGridRow', () => {
       injector,
       getRow: () => root.querySelector('shades-data-grid-row'),
       getCells: () => root.querySelectorAll('td'),
+      getScrollContainer: () => shadeDataGrid,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
     }
   }
 
@@ -76,49 +86,52 @@ describe('DataGridRow', () => {
     it('should render as a table row element', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getRow } = await renderRow({ entry, service })
-
-        const row = getRow()
-        expect(row).toBeTruthy()
-        expect(row?.tagName.toLowerCase()).toBe('shades-data-grid-row')
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row).toBeTruthy()
+          expect(row?.tagName.toLowerCase()).toBe('shades-data-grid-row')
+        })
       })
     })
 
     it('should render a cell for each column', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getCells } = await renderRow({ entry, service, columns: ['id', 'name'] })
-
-        expect(getCells().length).toBe(2)
+        await usingAsync(await renderRow({ entry, service, columns: ['id', 'name'] }), async ({ getCells }) => {
+          expect(getCells().length).toBe(2)
+        })
       })
     })
 
     it('should render entry property values in cells', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 42, name: 'Test Entry' }
-        const { getCells } = await renderRow({ entry, service })
-
-        const cells = getCells()
-        expect(cells[0]?.textContent).toBe('42')
-        expect(cells[1]?.textContent).toBe('Test Entry')
+        await usingAsync(await renderRow({ entry, service }), async ({ getCells }) => {
+          const cells = getCells()
+          expect(cells[0]?.textContent).toBe('42')
+          expect(cells[1]?.textContent).toBe('Test Entry')
+        })
       })
     })
 
     it('should use custom row components when provided', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Custom' }
-        const { getCells } = await renderRow({
-          entry,
-          service,
-          rowComponents: {
-            id: (e: TestEntry) => <span data-testid="custom-id">ID: {e.id}</span>,
-            name: (e: TestEntry) => <strong data-testid="custom-name">{e.name}</strong>,
+        await usingAsync(
+          await renderRow({
+            entry,
+            service,
+            rowComponents: {
+              id: (e: TestEntry) => <span data-testid="custom-id">ID: {e.id}</span>,
+              name: (e: TestEntry) => <strong data-testid="custom-name">{e.name}</strong>,
+            },
+          }),
+          async ({ getCells }) => {
+            const cells = getCells()
+            expect(cells[0]?.querySelector('[data-testid="custom-id"]')?.textContent).toContain('ID: 1')
+            expect(cells[1]?.querySelector('[data-testid="custom-name"]')?.textContent).toBe('Custom')
           },
-        })
-
-        const cells = getCells()
-        expect(cells[0]?.querySelector('[data-testid="custom-id"]')?.textContent).toContain('ID: 1')
-        expect(cells[1]?.querySelector('[data-testid="custom-name"]')?.textContent).toBe('Custom')
+        )
       })
     })
   })
@@ -127,10 +140,10 @@ describe('DataGridRow', () => {
     it('should not have selected class when entry is not selected', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getRow } = await renderRow({ entry, service })
-
-        const row = getRow()
-        expect(row?.classList.contains('selected')).toBe(false)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(false)
+        })
       })
     })
 
@@ -138,42 +151,42 @@ describe('DataGridRow', () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
         service.selection.setValue([entry])
-        const { getRow } = await renderRow({ entry, service })
-
-        const row = getRow()
-        expect(row?.classList.contains('selected')).toBe(true)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(true)
+        })
       })
     })
 
     it('should update selected class when selection changes', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getRow } = await renderRow({ entry, service })
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(false)
 
-        const row = getRow()
-        expect(row?.classList.contains('selected')).toBe(false)
+          service.selection.setValue([entry])
+          await sleepAsync(50)
+          expect(row?.hasAttribute('data-selected')).toBe(true)
 
-        service.selection.setValue([entry])
-        await sleepAsync(50)
-        expect(row?.classList.contains('selected')).toBe(true)
-
-        service.selection.setValue([])
-        await sleepAsync(50)
-        expect(row?.classList.contains('selected')).toBe(false)
+          service.selection.setValue([])
+          await sleepAsync(50)
+          expect(row?.hasAttribute('data-selected')).toBe(false)
+        })
       })
     })
 
     it('should set aria-selected attribute based on selection', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getRow } = await renderRow({ entry, service })
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.getAttribute('aria-selected')).toBe('false')
 
-        const row = getRow()
-        expect(row?.getAttribute('aria-selected')).toBe('false')
-
-        service.selection.setValue([entry])
-        await sleepAsync(50)
-        expect(row?.getAttribute('aria-selected')).toBe('true')
+          service.selection.setValue([entry])
+          await sleepAsync(50)
+          expect(row?.getAttribute('aria-selected')).toBe('true')
+        })
       })
     })
 
@@ -181,28 +194,34 @@ describe('DataGridRow', () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
         service.selection.setValue([entry])
-        const { getRow } = await renderRow({
-          entry,
-          service,
-          selectedRowStyle: { backgroundColor: 'rgb(255, 0, 0)' },
-        })
-
-        const row = getRow() as HTMLElement | null
-        expect(row?.style.backgroundColor).toBe('rgb(255, 0, 0)')
+        await usingAsync(
+          await renderRow({
+            entry,
+            service,
+            selectedRowStyle: { backgroundColor: 'rgb(255, 0, 0)' },
+          }),
+          async ({ getRow }) => {
+            const row = getRow() as HTMLElement | null
+            expect(row?.style.backgroundColor).toBe('rgb(255, 0, 0)')
+          },
+        )
       })
     })
 
     it('should apply unselectedRowStyle when entry is not selected', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getRow } = await renderRow({
-          entry,
-          service,
-          unselectedRowStyle: { backgroundColor: 'rgb(0, 255, 0)' },
-        })
-
-        const row = getRow() as HTMLElement | null
-        expect(row?.style.backgroundColor).toBe('rgb(0, 255, 0)')
+        await usingAsync(
+          await renderRow({
+            entry,
+            service,
+            unselectedRowStyle: { backgroundColor: 'rgb(0, 255, 0)' },
+          }),
+          async ({ getRow }) => {
+            const row = getRow() as HTMLElement | null
+            expect(row?.style.backgroundColor).toBe('rgb(0, 255, 0)')
+          },
+        )
       })
     })
   })
@@ -211,10 +230,10 @@ describe('DataGridRow', () => {
     it('should not have focused class when entry is not focused', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getRow } = await renderRow({ entry, service })
-
-        const row = getRow()
-        expect(row?.classList.contains('focused')).toBe(false)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-focused')).toBe(false)
+        })
       })
     })
 
@@ -222,28 +241,28 @@ describe('DataGridRow', () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
         service.focusedEntry.setValue(entry)
-        const { getRow } = await renderRow({ entry, service })
-
-        const row = getRow()
-        expect(row?.classList.contains('focused')).toBe(true)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-focused')).toBe(true)
+        })
       })
     })
 
     it('should update focused class when focus changes', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getRow } = await renderRow({ entry, service })
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-focused')).toBe(false)
 
-        const row = getRow()
-        expect(row?.classList.contains('focused')).toBe(false)
-
-        service.focusedEntry.setValue(entry)
-        await sleepAsync(50)
-        expect(row?.classList.contains('focused')).toBe(true)
+          service.focusedEntry.setValue(entry)
+          await sleepAsync(50)
+          expect(row?.hasAttribute('data-focused')).toBe(true)
 
-        service.focusedEntry.setValue(undefined)
-        await sleepAsync(50)
-        expect(row?.classList.contains('focused')).toBe(false)
+          service.focusedEntry.setValue(undefined)
+          await sleepAsync(50)
+          expect(row?.hasAttribute('data-focused')).toBe(false)
+        })
       })
     })
 
@@ -251,28 +270,34 @@ describe('DataGridRow', () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
         service.focusedEntry.setValue(entry)
-        const { getRow } = await renderRow({
-          entry,
-          service,
-          focusedRowStyle: { fontWeight: 'bold' },
-        })
-
-        const row = getRow() as HTMLElement | null
-        expect(row?.style.fontWeight).toBe('bold')
+        await usingAsync(
+          await renderRow({
+            entry,
+            service,
+            focusedRowStyle: { fontWeight: 'bold' },
+          }),
+          async ({ getRow }) => {
+            const row = getRow() as HTMLElement | null
+            expect(row?.style.fontWeight).toBe('bold')
+          },
+        )
       })
     })
 
     it('should apply unfocusedRowStyle when entry is not focused', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getRow } = await renderRow({
-          entry,
-          service,
-          unfocusedRowStyle: { opacity: '0.8' },
-        })
-
-        const row = getRow() as HTMLElement | null
-        expect(row?.style.opacity).toBe('0.8')
+        await usingAsync(
+          await renderRow({
+            entry,
+            service,
+            unfocusedRowStyle: { opacity: '0.8' },
+          }),
+          async ({ getRow }) => {
+            const row = getRow() as HTMLElement | null
+            expect(row?.style.opacity).toBe('0.8')
+          },
+        )
       })
     })
 
@@ -281,10 +306,10 @@ describe('DataGridRow', () => {
         const entry = { id: 1, name: 'Test' }
         const otherEntry = { id: 2, name: 'Other' }
         service.focusedEntry.setValue(otherEntry)
-        const { getRow } = await renderRow({ entry, service })
-
-        const row = getRow()
-        expect(row?.classList.contains('focused')).toBe(false)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-focused')).toBe(false)
+        })
       })
     })
   })
@@ -294,12 +319,12 @@ describe('DataGridRow', () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
         const onRowClick = vi.fn()
-        const { getCells } = await renderRow({ entry, service, onRowClick })
-
-        const cell = getCells()[0]
-        cell.click()
+        await usingAsync(await renderRow({ entry, service, onRowClick }), async ({ getCells }) => {
+          const cell = getCells()[0]
+          cell.click()
 
-        expect(onRowClick).toHaveBeenCalledWith(entry, expect.any(MouseEvent))
+          expect(onRowClick).toHaveBeenCalledWith(entry, expect.any(MouseEvent))
+        })
       })
     })
 
@@ -307,34 +332,34 @@ describe('DataGridRow', () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
         const onRowDoubleClick = vi.fn()
-        const { getCells } = await renderRow({ entry, service, onRowDoubleClick })
-
-        const cell = getCells()[0]
-        const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
-        cell.dispatchEvent(dblClickEvent)
+        await usingAsync(await renderRow({ entry, service, onRowDoubleClick }), async ({ getCells }) => {
+          const cell = getCells()[0]
+          const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
+          cell.dispatchEvent(dblClickEvent)
 
-        expect(onRowDoubleClick).toHaveBeenCalledWith(entry, expect.any(MouseEvent))
+          expect(onRowDoubleClick).toHaveBeenCalledWith(entry, expect.any(MouseEvent))
+        })
       })
     })
 
     it('should not throw when onRowClick is not provided', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getCells } = await renderRow({ entry, service })
-
-        const cell = getCells()[0]
-        expect(() => cell.click()).not.toThrow()
+        await usingAsync(await renderRow({ entry, service }), async ({ getCells }) => {
+          const cell = getCells()[0]
+          expect(() => cell.click()).not.toThrow()
+        })
       })
     })
 
     it('should not throw when onRowDoubleClick is not provided', async () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
-        const { getCells } = await renderRow({ entry, service })
-
-        const cell = getCells()[0]
-        const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
-        expect(() => cell.dispatchEvent(dblClickEvent)).not.toThrow()
+        await usingAsync(await renderRow({ entry, service }), async ({ getCells }) => {
+          const cell = getCells()[0]
+          const dblClickEvent = new MouseEvent('dblclick', { bubbles: true })
+          expect(() => cell.dispatchEvent(dblClickEvent)).not.toThrow()
+        })
       })
     })
   })
@@ -345,11 +370,11 @@ describe('DataGridRow', () => {
         const entry = { id: 1, name: 'Test' }
         service.selection.setValue([entry])
         service.focusedEntry.setValue(entry)
-        const { getRow } = await renderRow({ entry, service })
-
-        const row = getRow()
-        expect(row?.classList.contains('selected')).toBe(true)
-        expect(row?.classList.contains('focused')).toBe(true)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(true)
+          expect(row?.hasAttribute('data-focused')).toBe(true)
+        })
       })
     })
 
@@ -359,11 +384,11 @@ describe('DataGridRow', () => {
         const otherEntry = { id: 2, name: 'Other' }
         service.selection.setValue([entry])
         service.focusedEntry.setValue(otherEntry)
-        const { getRow } = await renderRow({ entry, service })
-
-        const row = getRow()
-        expect(row?.classList.contains('selected')).toBe(true)
-        expect(row?.classList.contains('focused')).toBe(false)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(true)
+          expect(row?.hasAttribute('data-focused')).toBe(false)
+        })
       })
     })
 
@@ -371,11 +396,11 @@ describe('DataGridRow', () => {
       await usingAsync(new CollectionService<TestEntry>(), async (service) => {
         const entry = { id: 1, name: 'Test' }
         service.focusedEntry.setValue(entry)
-        const { getRow } = await renderRow({ entry, service })
-
-        const row = getRow()
-        expect(row?.classList.contains('selected')).toBe(false)
-        expect(row?.classList.contains('focused')).toBe(true)
+        await usingAsync(await renderRow({ entry, service }), async ({ getRow }) => {
+          const row = getRow()
+          expect(row?.hasAttribute('data-selected')).toBe(false)
+          expect(row?.hasAttribute('data-focused')).toBe(true)
+        })
       })
     })
   })

package/src/components/data-grid/data-grid-row.tsx

@@ -1,7 +1,7 @@
 import type { ChildrenList } from '@furystack/shades'
-import { attachStyles, createComponent, Shade } from '@furystack/shades'
+import { createComponent, Shade } from '@furystack/shades'
 import type { CollectionService } from '../../services/collection-service.js'
-import { cssVariableTheme } from '../../services/css-variable-theme.js'
+import { buildTransition, cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { DataRowCells } from './data-grid.js'
 
 export interface DataGridRowProps<T, Column extends string> {
@@ -26,88 +26,105 @@ export const DataGridRow: <T, Column extends string>(
     display: 'table-row',
     cursor: 'default',
     userSelect: 'none',
-    transition: 'background-color 0.15s ease, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out',
+    transition: buildTransition(
+      ['background-color', cssVariableTheme.transitions.duration.fast, 'ease'],
+      ['box-shadow', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.easeInOut],
+      ['transform', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.easeInOut],
+    ),
     borderLeft: '3px solid transparent',
-    '&:not(.selected):hover': {
-      backgroundColor: 'rgba(128, 128, 128, 0.08)',
+    '&:not([data-selected]):hover': {
+      backgroundColor: cssVariableTheme.action.hoverBackground,
     },
-    '&.selected': {
-      backgroundColor: 'rgba(128, 128, 128, 0.15)',
+    '&[data-selected]': {
+      backgroundColor: cssVariableTheme.action.selectedBackground,
       borderLeft: `3px solid ${cssVariableTheme.palette.primary.main}`,
     },
-    '&.focused': {
+    '&[data-focused]': {
       boxShadow: `0 0 0 2px ${cssVariableTheme.palette.primary.main} inset, 0 2px 8px 0px rgba(0,0,0,0.15)`,
       fontWeight: '500',
       transform: 'scale(1.002)',
     },
     '& td': {
       padding: '0.75em 1.2em',
-      borderBottom: '1px solid rgba(128, 128, 128, 0.1)',
+      borderBottom: `1px solid ${cssVariableTheme.action.subtleBorder}`,
       verticalAlign: 'middle',
       fontSize: '0.875rem',
       lineHeight: '1.5',
     },
   },
-  render: ({ props, element, useObservable }) => {
+  render: ({ props, useObservable, useHostProps, useRef }) => {
     const { entry, rowComponents, columns, service } = props
 
-    const updateSelectionState = (selection: unknown[]) => {
-      const isSelected = selection.includes(entry)
-      element.classList.toggle('selected', isSelected)
-      element.setAttribute('aria-selected', isSelected.toString())
+    const [selection] = useObservable('isSelected', service.selection)
+    const [focus] = useObservable('focus', service.focusedEntry)
 
-      if (props.selectedRowStyle && isSelected) {
-        attachStyles(element, { style: props.selectedRowStyle })
-      } else if (props.unselectedRowStyle && !isSelected) {
-        attachStyles(element, { style: props.unselectedRowStyle })
-      }
-    }
+    const isSelected = selection.includes(entry)
+    const isFocused = focus === entry
 
-    const updateFocusState = (focusedEntry?: unknown) => {
-      const isFocused = focusedEntry === entry
-      element.classList.toggle('focused', isFocused)
+    const rowStyle: Record<string, string> = {}
+    if (props.selectedRowStyle && isSelected) {
+      Object.assign(rowStyle, props.selectedRowStyle)
+    } else if (props.unselectedRowStyle && !isSelected) {
+      Object.assign(rowStyle, props.unselectedRowStyle)
+    }
+    if (isFocused && props.focusedRowStyle) {
+      Object.assign(rowStyle, props.focusedRowStyle)
+    } else if (!isFocused && props.unfocusedRowStyle) {
+      Object.assign(rowStyle, props.unfocusedRowStyle)
+    }
 
-      if (isFocused) {
-        if (props.focusedRowStyle) {
-          attachStyles(element, { style: props.focusedRowStyle })
-        }
+    useHostProps({
+      'aria-selected': isSelected.toString(),
+      ...(isSelected ? { 'data-selected': '' } : {}),
+      ...(isFocused ? { 'data-focused': '' } : {}),
+      ...(Object.keys(rowStyle).length > 0 ? { style: rowStyle } : {}),
+    })
 
-        const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
+    const wrapperRef = useRef<HTMLElement>('wrapper')
 
-        const parent = element.closest('.shade-grid-wrapper') as HTMLElement
-        const maxTop = element.offsetTop - headerHeight
-        const currentTop = parent.scrollTop
-        if (maxTop < currentTop) {
-          parent.scrollTo({ top: maxTop, behavior: 'smooth' })
-        }
+    if (isFocused) {
+      queueMicrotask(() => {
+        const el = wrapperRef.current
+        if (!el) return
+        const hostEl = el.closest('shades-data-grid-row') as HTMLElement
+        if (!hostEl) return
+        const scrollContainer = hostEl.closest('shade-data-grid') as HTMLElement
+        if (!scrollContainer) return
 
+        const headerHeight = hostEl.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
         const footerHeight =
-          element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height ||
-          42
-        const visibleMaxTop = parent.clientHeight - footerHeight
-        const desiredMaxTop = element.offsetTop + element.clientHeight
-        if (desiredMaxTop > visibleMaxTop) {
-          parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
-        }
-      } else if (props.unfocusedRowStyle) {
-        attachStyles(element, { style: props.unfocusedRowStyle })
-      }
-    }
+          scrollContainer.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height || 42
 
-    const [selection] = useObservable('isSelected', service.selection, {
-      onChange: updateSelectionState,
-    })
-    updateSelectionState(selection)
+        const containerRect = scrollContainer.getBoundingClientRect()
+        const rowRect = hostEl.getBoundingClientRect()
 
-    const [focus] = useObservable('focus', service.focusedEntry, {
-      onChange: updateFocusState,
-    })
-    updateFocusState(focus)
+        const rowTopInContainer = rowRect.top - containerRect.top
+        const rowBottomInContainer = rowRect.bottom - containerRect.top
+
+        if (rowTopInContainer < headerHeight) {
+          const scrollAdjustment = rowTopInContainer - headerHeight
+          scrollContainer.scrollTo({
+            top: scrollContainer.scrollTop + scrollAdjustment,
+            behavior: 'smooth',
+          })
+        } else if (rowBottomInContainer > scrollContainer.clientHeight - footerHeight) {
+          const scrollAdjustment = rowBottomInContainer - (scrollContainer.clientHeight - footerHeight)
+          scrollContainer.scrollTo({
+            top: scrollContainer.scrollTop + scrollAdjustment,
+            behavior: 'smooth',
+          })
+        }
+      })
+    }
 
     return (
       <>
-        {columns.map((column) => (
-          <td onclick={(ev) => props.onRowClick?.(entry, ev)} ondblclick={(ev) => props.onRowDoubleClick?.(entry, ev)}>
+        {columns.map((column, colIdx) => (
+          <td
+            {...(colIdx === 0 ? { ref: wrapperRef } : {})}
+            onclick={(ev) => props.onRowClick?.(entry, ev)}
+            ondblclick={(ev) => props.onRowDoubleClick?.(entry, ev)}
+          >
             {rowComponents?.[column]?.(entry, { selection, focus }) ||
               rowComponents?.default?.(entry, { selection, focus }) || (
                 <span>