Gallery mode

Set the gallery prop and the grid renders its rows as cards instead of a table: a cover image, a title and a few fields per row, in a wall that fills the width. It is the same <SvGrid>, the same data and columns; the cards are the rows the table would show, so the search box, column filters and the sort carry over, and turning the prop off brings the table back in the same order.

The gallery renderer ships in @svgrid/enterprise, so enableGalleryView() (or installEnterprise(api)) is what lights it up. The gallery prop and the GalleryConfig type are part of the free grid; without the renderer the grid shows a short note where the cards would be.

<script lang="ts">
  import { SvGrid, type GridColumns } from '@svgrid/grid'
  import { enableGalleryView } from '@svgrid/enterprise'

  enableGalleryView()

  type Product = { id: number; name: string; image: string; category: string; price: number }
  let { data }: { data: Product[] } = $props()

  const columns: GridColumns<Product> = [
    { field: 'name', header: 'Product' },
    { field: 'category', header: 'Category' },
    { field: 'price', header: 'Price', format: { type: 'currency', currency: 'USD' } },
  ]
</script>

<SvGrid {data} {columns} getRowId={(r) => String(r.id)}
  gallery={{ coverField: 'image', titleField: 'name', cardFields: ['category', 'price'] }} />

What a card shows

A value is written the way the table cell writes it: through the column's formatter, else its format config (currency, percent, dates), else as text. A column declared by field type (@svgrid/enterprise/fields) draws on the card with its own cell: a select as its colored pill, a rating as stars, a person with an avatar, and the field's type icon sits beside its name.

Clicks

onCardClick(row) is called when a card is clicked, or when its title gets Enter or Space from the keyboard (the title is the card's button). Without it the cards are not clickable. Values on a card are read, not edited.

const gallery = { coverField: 'image', onCardClick: (row: Product) => (picked = row) }

Your own card

card is a snippet that receives each row; the grid lays the cards out and you draw what is inside.

{#snippet profile(p: Person)}
  <article class="profile">
    <img src={p.photo} alt="" width="72" height="72" />
    <strong>{p.name}</strong>
    <span>{p.role}</span>
  </article>
{/snippet}

<SvGrid {data} {columns} gallery={{ card: profile, cardSize: 220 }} />

Filters, sort and search

The cards are the grid's filtered and sorted rows, so everything that shapes the table shapes the wall: api.setFilter, api.setSort, the quick filter, an advanced filter. A new filter or search starts the wall from the top.

Many rows

The wall draws its cards in batches: the first 120, then the next 120 a little before the end comes into view. A gallery over thousands of rows costs about the same to open as a small one. A cover can come from a computed column (fieldFn), so the image need not be stored in the rows.

In a table with views

The fields module's gallery view is this gallery, set up from the view: the cover field, the primary field as the title, the fields the grid shows as the card's fields, and a click that opens the record.