Grid List

A grid-based list component for displaying items in a structured layout with optional interactivity.

Anatomy 

<script>
  import {
    GridList,
    GridListRoot,
    GridListHeader,
    GridListItem,
    GridListCell,
  } from "@saas-ui/svelte/components/grid-list";
</script>

<GridList.Root interactive>
  <GridList.Header>
    <GridList.Cell>Name</GridList.Cell>
    <GridList.Cell>Status</GridList.Cell>
  </GridList.Header>
  <GridList.Item>
    <GridList.Cell>Item 1</GridList.Cell>
    <GridList.Cell>Active</GridList.Cell>
  </GridList.Item>
</GridList.Root>

Examples

Basic Accessibility

Basic GridList with interactive items.

With Header Accessibility

GridList with a GridList.Header section.

Props

Prop Type Default Description
interactive boolean false Whether the grid list items are interactive.
class text - Additional CSS classes to apply.