Row

A horizontal row layout component for aligning elements in a line with spatial navigation support.

Import

import { Row } from '@smart-tv/ui';

Basic Usage

Create a horizontal row of items.

<Row focusKey="movie-row">
  {movies.map((movie) => (
    <Card key={movie.id} focusKey={`movie-${movie.id}`}>
      <CardContent>
        <img src={movie.poster} alt={movie.title} />
        <h4>{movie.title}</h4>
      </CardContent>
    </Card>
  ))}
</Row>

Row with Title

Add a title to describe the row content.

<Row focusKey="trending-row" title="Trending Now">
  {trendingMovies.map((movie) => (
    <Card key={movie.id} focusKey={`trending-${movie.id}`}>
      <img src={movie.poster} alt={movie.title} />
    </Card>
  ))}
</Row>

Scrollable Row

Enable horizontal scrolling for long lists.

<Row
  focusKey="scrollable-row"
  scrollable={true}
  title="Continue Watching"
>
  {continueWatching.map((item) => (
    <Card key={item.id} focusKey={`continue-${item.id}`}>
      <img src={item.thumbnail} />
      <div className="progress" style={{ width: `${item.progress}%` }} />
    </Card>
  ))}
</Row>

Custom Spacing

Control the gap between items in the row.

<Row
  focusKey="custom-spacing-row"
  gap={6}
  title="New Releases"
>
  {newReleases.map((item) => (
    <Card key={item.id} focusKey={`new-${item.id}`}>
      {item.content}
    </Card>
  ))}
</Row>

With Navigation Arrows

Add left/right navigation buttons for mouse users.

<Row
  focusKey="nav-row"
  title="Popular Movies"
  showNavigation={true}
  onNavigateLeft={() => scrollLeft()}
  onNavigateRight={() => scrollRight()}
>
  {popularMovies.map((movie) => (
    <Card key={movie.id} focusKey={`popular-${movie.id}`}>
      {movie.content}
    </Card>
  ))}
</Row>

Props

Prop	Type	Default	Description
focusKey	string	required	Unique identifier
title	string	-	Row title header
scrollable	boolean	false	Enable horizontal scrolling
gap	number	4	Gap between items
showNavigation	boolean	false	Show navigation arrows
onNavigateLeft	function	-	Left arrow click handler
onNavigateRight	function	-	Right arrow click handler
className	string	-	Additional CSS classes
children	ReactNode	-	Row items

Best Practices

Use descriptive titles to identify row content
Enable scrolling for rows with many items
Keep item sizes consistent within a row
Use appropriate gap spacing for comfortable navigation
Consider showing 3-5 items visible at once