# Add a Story or Clips row
URL: /StorytellerRowView/
## Task
Document how to create and configure Story and Clips rows, size the row container, and set the tile shape with `cellType`.
## Metadata
- Slug: storyteller-row-view
- Source: public-docs/StorytellerRowView.md
- Audience: Engineers adding horizontal Storyteller rows
- Platforms: Web
- Related: Configure Views, Add a Story or Clips Grid, Themes
## Overview
- A row shows Story or Clip tiles in one horizontal line; use `StorytellerStoriesRowView` for Stories and `StorytellerClipsRowView` for Clips.
- Check `getStoriesCount` or `getClipsCount` first to show a row only when it has content.
- The row sizes its tiles to its container's height. Without a container height, the SDK uses a default tile height (160 px square, 120 px or 140 px round) and logs a warning.
- JavaScript and TypeScript `configuration` samples show Stories-only fields (`categories`, `cellType`, `preload`) and shared fields (`displayLimit`, `theme`, `uiStyle` with `Storyteller.UiStyle.dark`).
- `cellType` is `Storyteller.CellType.square` (default) or `.round`: set it in `configuration` on a Stories row, with `clipsRow.cellType` on a Clips row, or with `data-cell-type="round"` on either container.
## When To Use
- Use this page when you add a horizontal row or need round tiles.
- Consult it while troubleshooting row height or Clips row tile shape.
## Integration Steps
1. Create a container `<div>` with a height so tiles have room.
2. Create a `StorytellerStoriesRowView` (optionally with Category IDs) or a `StorytellerClipsRowView` (with a collection ID).
3. Assign a `configuration` object that fits the row type.
4. Set the tile shape with `configuration.cellType` (Stories rows), `clipsRow.cellType` (Clips rows), or `data-cell-type`.
## API Cheat Sheet
- `new Storyteller.StorytellerStoriesRowView(containerId: string, categories?: string[])`: Creates a Stories row; accepts Category IDs.
- `new Storyteller.StorytellerClipsRowView(containerId: string, collectionId: string)`: Creates a Clips row for one collection.
- `row.configuration = { ... }`: Plain object typed `IListConfiguration<'StorytellerStoriesRowView'>` or `IListConfiguration<'StorytellerClipsRowView'>`; Stories rows add `categories`, `cellType`, and `preload`.
- `clipsRow.cellType = Storyteller.CellType.round`: The way to make Clips row tiles round in code.
## Examples
- JavaScript and TypeScript samples define `customTheme`, use `Storyteller.UiStyle.dark`, and set `cellType` for Stories and Clips rows.
- Storyteller Web Showcase links show React components that apply these options.
## Pitfalls / Notes
- A container without a height gets the default tile height and a console warning.
- `configuration` doesn't accept `cellType` for Clips rows; set it on the view or the container.
- There is no `ListConfiguration` class.
## Cross-References
- Configure Views covers the settings rows share with every view.
- Add a Story or Clips Grid covers grid layouts.
- Themes explains the `theme` objects used in the samples.
## Canonical Reference
# Add a Story or Clips row {#configuring-a-storytellerstoriesrowview}

A row shows Story or Clip tiles in one horizontal line that users can scroll.
Use `StorytellerStoriesRowView` for Stories and `StorytellerClipsRowView` for
Clips. To show a row only when it has content, check
[`getStoriesCount`](AdditionalMethods.md#getstoriescount) or
[`getClipsCount`](AdditionalMethods.md#getclipscount) first.

## Initialization

Create the row with the ID of an existing element on your page. Rows take the
same arguments as the other views in
[Configure views](StorytellerListView.md#initialization):

### Stories initialization

```javascript
const storyRow = new Storyteller.StorytellerStoriesRowView('stories-row-id'); // All Categories
const storyRowWithCategories = new Storyteller.StorytellerStoriesRowView(
  'stories-row-id',
  ['category-1', 'category-2']
);
```

### Clips initialization

```javascript
const clipsRow = new Storyteller.StorytellerClipsRowView(
  'clips-row-id',
  'clip-collection-id'
);
```

!!! note

    The row sizes its tiles to the height of its container. Set a height on the container, for example `<div id="stories-row-id" style="height: 200px"></div>`. If the container has no height, the SDK uses a default tile height (160 px for square tiles, and 120 px or 140 px for round tiles, depending on whether titles show). When logging is enabled, the SDK also logs a warning.

## Configuration

Set a row's options with its `configuration` object. TypeScript examples
assume
`import * as Storyteller from '@getstoryteller/storyteller-sdk-javascript';`
and `import type { IListConfiguration } from '@getstoryteller/storyteller-sdk-javascript';`.

### Stories configuration

=== "JavaScript"

    ```javascript
    const customTheme = new Storyteller.UiTheme(); // See Customize themes
    const storyRow = new Storyteller.StorytellerStoriesRowView('stories-row-id');
    storyRow.configuration = {
      categories: ['category1', 'category2', 'category3'], // Stories only
      cellType: Storyteller.CellType.round, // StorytellerStoriesRowView only
      displayLimit: 10,
      preload: true, // Stories only
      theme: customTheme,
      uiStyle: Storyteller.UiStyle.dark,
    };
    ```

=== "TypeScript"

    ```typescript
    const customTheme = new Storyteller.UiTheme(); // See Customize themes
    const storyRow = new Storyteller.StorytellerStoriesRowView('stories-row-id');
    const storyRowConfiguration: IListConfiguration<'StorytellerStoriesRowView'> = {
      categories: ['category1', 'category2', 'category3'], // Stories only
      cellType: Storyteller.CellType.round, // StorytellerStoriesRowView only
      displayLimit: 10,
      preload: true, // Stories only
      theme: customTheme,
      uiStyle: Storyteller.UiStyle.dark,
    };
    storyRow.configuration = storyRowConfiguration;
    ```

For a working React component that applies these options, see the Storyteller
Web Showcase's
[`StorytellerStoriesRowView`](https://github.com/getstoryteller/storyteller-showcase-web/blob/11.0.0/nextjs/src/components/atoms/StorytellerRenderers/StorytellerStoriesRowView.tsx#L61-L85).

### Clips configuration

=== "JavaScript"

    ```javascript
    const customTheme = new Storyteller.UiTheme(); // See Customize themes
    const clipsRow = new Storyteller.StorytellerClipsRowView(
      'clips-row-id',
      'collection-id'
    );
    clipsRow.configuration = {
      displayLimit: 10,
      theme: customTheme,
      uiStyle: Storyteller.UiStyle.dark,
    };
    clipsRow.cellType = Storyteller.CellType.round; // Clips rows set cellType on the view
    ```

=== "TypeScript"

    ```typescript
    const customTheme = new Storyteller.UiTheme(); // See Customize themes
    const clipsRow = new Storyteller.StorytellerClipsRowView(
      'clips-row-id',
      'collection-id'
    );
    const clipsRowConfiguration: IListConfiguration<'StorytellerClipsRowView'> = {
      displayLimit: 10,
      theme: customTheme,
      uiStyle: Storyteller.UiStyle.dark,
    };
    clipsRow.configuration = clipsRowConfiguration;
    clipsRow.cellType = Storyteller.CellType.round; // Clips rows set cellType on the view
    ```

For Clips, the Storyteller Web Showcase's
[`StorytellerClipsRowView`](https://github.com/getstoryteller/storyteller-showcase-web/blob/11.0.0/nextjs/src/components/atoms/StorytellerRenderers/StorytellerClipsRowView.tsx#L62)
builds the row configuration with the collection ID, display limit, and theme.

Rows accept every setting in [Configure views](StorytellerListView.md), plus
the following:

#### cellType

`cellType` sets the tile shape: `Storyteller.CellType.square` (default) or
`Storyteller.CellType.round`.

- On a Stories row, set it in `configuration`.
- On a Clips row, set `clipsRow.cellType`. `configuration` doesn't accept `cellType` for Clips rows.
- On either row, you can instead add `data-cell-type="round"` to the container.