ContentGrid

A selectable grid of cards, like the media library.

ContentGrid.tsx

import {ContentCard, ContentGrid, ContentGridItem} from 'alinea/components'

const images = [
  {id: 'oak-dining-chair'},
  {id: 'walnut-stools'},
  {id: 'ceramic-table-lamp'}
]

export function ContentGridExample() {
  return (
    <div style={{width: 640, height: 240}}>
      <ContentGrid
        aria-label="Product images"
        items={images}
        selectionMode="multiple"
        showSelectionControls
        defaultSelectedKeys={new Set(['walnut-stools'])}
        minItemWidth={180}
      >
        {image => (
          <ContentGridItem id={image.id} textValue={image.id}>
            <ContentCard
              variant="media"
              image={`/catalog/${image.id}.jpg`}
              title={`${image.id}.jpg`}
              breadcrumbs={['Media', 'Products']}
              description="JPG"
            />
          </ContentGridItem>
        )}
      </ContentGrid>
    </div>
  )
}

Props

`<ContentGrid>`

PropTypeDefaultDescription

items*Iterable<T>Default –

selectionBehavior'toggle' | 'replace'Default 'toggle'How pointer clicks select cards. With toggle (the default) a click runs the card action, or toggles its selection while cards are selected. With replace a click selects only that card and a double click or Enter runs the card action.

showSelectionControlsbooleanDefault –Show a selection checkbox per card, defaults to multiple selection

minItemWidthnumberDefault 240Minimum card width in pixels, defaults to 240

maxItemWidthnumberDefault 320Maximum card width in pixels, defaults to 320

itemHeightnumberDefault 196Card height in pixels, defaults to 196

gapnumberDefault 16Space between cards in pixels, defaults to 16

maxColumnsnumberDefault 5Defaults to 5

onItemAction(key: Key) => voidDefault –Called when a card is activated (see selectionBehavior), cards can override it with their own onAction

renderEmptyState() => ReactNodeDefault –

dropLabelstringDefault –Shown over the grid while files are dragged onto it

dependenciesReadonlyArray<unknown>Default –Cards are cached per item, list the values children reads besides the item to render them again when those change

children*(item: T) => ReactElementDefault –

`<ContentGridItem>`

PropTypeDefaultDescription

id*KeyDefault –

textValue*stringDefault –Text used for typeahead and as the accessible card name

selectablebooleanDefault trueSet to false to disable selecting the card, its action still runs

onAction() => voidDefault –Called when the card is activated, overrides onItemAction

onClick() => voidDefault –Called on every click or tap of the card, next to its selection. Use it instead of onAction to act on a single click with the replace selection behavior, where onAction needs a double click.

onDoubleClick() => voidDefault –

Also accepts data-* attributes.