Grids (deprecated)

SbGrid is deprecated in @nujek/ui 0.3.5. Use SbQuery component to retrieve multiple Stories.

Overview

Grids are elements which you can find on mostly every websites. In fact Grids as we use it are not much different from a simple dynamic list. Where each list item links represent a piece of information. Sometimes each list item links to another page, section or it just shows a simple image. A good example for a grid is just a image gallery.

Grids have also features like filtering or sorting. For example on netlifx you can see a grid with various movies and tv series which can be filtered and are searchable.

Nujek Grid

SbGrid is a powerful component for showing a list of data.

The SbGrid component helps with the following use cases:

Display a list of components in a grid/list (Team members, products, portfolio items)
Archive pages for news or blog items
Filter/Sort grid
Make items searchable inside a grid

Prepare Storyblok Scheme

So with our Grid Component we give you the ability to fetch data from storyblok and display it on a grid. In Storyblok you have multiple possibilities to build a grid.

We distinguish between these grid options.

Static/Custom Grids: A static grid is more or less a blok field which can have multiple childs.
Relation Grid: The relation grid has only a source Textfield which links to a set of stories. Blog Archive links to blog posts or Movie Grid links to single Movie Stories.
Mixed Grids: A mixed grid is a relation grid where each item field can be overwritten.

Basic Example

We're using SbGrid to show a simple list from Storyblok.

SbGrid is capable of showing dynamic bloks according to the current storyblok slug. All you need todo is to use the post_type prop.

molecules/CustomGrid.vue

<template>
    <SbGrid
      class="gap-y-8"
      :blok="{ post_type: fullSlug }"
      :columns="gridCols"
    />
</template>

Other examples

<template>
    <SbGrid
        :blok="{
            post_type: 'posts',
            posts_per_page: 3,
            excluding_slugs: story.full_slug,
            is_finite: true
        }"
    />
</template>

<template>
    <SbGrid
        :blok="{
            post_type: 'kategorien',
            sort_by: 'name:asc'
        }"
    />
</template>

Example: Filter by graphql query

<template>
<SbGrid
    :blok="{
        post_type: 'blog',
        posts_per_page: 3,
        is_finite: true
    }"
    v-bind="{
        filterQuery
    }"
/>
</template>
<script>
export default {
  computed: {
    filterQuery() {
      return {
        user_id: {
          in: this.user.id
        }
      }
    }
  }
}
</script>

<template>
    <SbGrid
        :blok="{
            post_type: 'portfolio',
            posts_per_page: 3,
            is_finite: true
        }"
        v-bind="{
            columns: 1,
            filterQuery
        }"
    />
</template>

Component Api

<SbGrid>

Props

Prop	Default	Type	Description
`blok`	`{ post_type: '', posts_per_page: 12, sort_by: '', resolve_relations: '', is_finite: false, style: CARD_STYLE_DEFAULT, excluding_slugs: '' }`	`Object`
`searchTerm`	``	`String`
`filterQuery`	`{}`	`Object`	Add a custom caption text
`columns`	`3`	`Number`	Values: [1, 2, 3, ... 12]
`disableFetch`	`false`	`Boolean`	Experimental: You can disable remote fetching. Use this in combination with dataSource
`disableFetch`	`‘false’`	`Boolean`	Experimental: Instead of auto remote fetching a grid source you can add your manual data source to the grid

Which Grid option should I choose from?

Relation Grids are useful if you just want to link other datasources (e.g. Stories). A typical blog has multiple blog posts. Where each blog post has its own Story in Storyblok. When you want to build an overview page where you show all blog posts on a specific page (e.g /blog). On this blog page you will create a reference to the blog posts folder in Storyblok. (It would be bad if you add every single blog post manually to the list/grid).

Simple Query Basic Grid

Getting started

Components