---
components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "StructuredListHead", "StructuredListCell", "StructuredListRow", "StructuredListInput"]
---

<script>
  import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
  import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
  import Preview from "../../components/Preview.svelte";
</script>

## Default (read-only)

<StructuredList>
  <StructuredListHead>
    <StructuredListRow>
      <StructuredListCell>Column A</StructuredListCell>
      <StructuredListCell>Column B</StructuredListCell>
      <StructuredListCell>Column C</StructuredListCell>
    </StructuredListRow>
  </StructuredListHead>
  <StructuredListBody>
    <StructuredListRow>
      <StructuredListCell noWrap>Row 1</StructuredListCell>
      <StructuredListCell>Row 1</StructuredListCell>
      <StructuredListCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
        magna, finibus id tortor sed, aliquet bibendum augue.
      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
      <StructuredListCell noWrap>Row 2</StructuredListCell>
      <StructuredListCell>Row 2</StructuredListCell>
      <StructuredListCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
        magna, finibus id tortor sed, aliquet bibendum augue.
      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
      <StructuredListCell noWrap>Row 3</StructuredListCell>
      <StructuredListCell>Row 3</StructuredListCell>
      <StructuredListCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
        magna, finibus id tortor sed, aliquet bibendum augue.
      </StructuredListCell>
    </StructuredListRow>
  </StructuredListBody>
</StructuredList>

## Condensed variant

<StructuredList condensed>
  <StructuredListHead>
    <StructuredListRow>
      <StructuredListCell>Column A</StructuredListCell>
      <StructuredListCell>Column B</StructuredListCell>
      <StructuredListCell>Column C</StructuredListCell>
    </StructuredListRow>
  </StructuredListHead>
  <StructuredListBody>
    <StructuredListRow>
      <StructuredListCell noWrap>Row 1</StructuredListCell>
      <StructuredListCell>Row 1</StructuredListCell>
      <StructuredListCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
        magna, finibus id tortor sed, aliquet bibendum augue.
      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
      <StructuredListCell noWrap>Row 2</StructuredListCell>
      <StructuredListCell>Row 2</StructuredListCell>
      <StructuredListCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
        magna, finibus id tortor sed, aliquet bibendum augue.
      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
      <StructuredListCell noWrap>Row 3</StructuredListCell>
      <StructuredListCell>Row 3</StructuredListCell>
      <StructuredListCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
        magna, finibus id tortor sed, aliquet bibendum augue.
      </StructuredListCell>
    </StructuredListRow>
  </StructuredListBody>
</StructuredList>

## Flush

<StructuredList flush>
  <StructuredListHead>
    <StructuredListRow>
      <StructuredListCell>Column A</StructuredListCell>
      <StructuredListCell>Column B</StructuredListCell>
      <StructuredListCell>Column C</StructuredListCell>
    </StructuredListRow>
  </StructuredListHead>
  <StructuredListBody>
    <StructuredListRow>
      <StructuredListCell noWrap>Row 1</StructuredListCell>
      <StructuredListCell>Row 1</StructuredListCell>
      <StructuredListCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
        magna, finibus id tortor sed, aliquet bibendum augue.
      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
      <StructuredListCell noWrap>Row 2</StructuredListCell>
      <StructuredListCell>Row 2</StructuredListCell>
      <StructuredListCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
        magna, finibus id tortor sed, aliquet bibendum augue.
      </StructuredListCell>
    </StructuredListRow>
    <StructuredListRow>
      <StructuredListCell noWrap>Row 3</StructuredListCell>
      <StructuredListCell>Row 3</StructuredListCell>
      <StructuredListCell>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
        magna, finibus id tortor sed, aliquet bibendum augue.
      </StructuredListCell>
    </StructuredListRow>
  </StructuredListBody>
</StructuredList>

## Selectable rows

<FileSource src="/framed/StructuredList/ProgrammaticStructuredList" />

## Skeleton

<StructuredListSkeleton />

## Skeleton (custom count)

By default, the skeleton will render 5 rows. You can customize the number of rows by passing a `count` prop.

<StructuredListSkeleton count={3} />