SortableGridListSortable Grid List is used to display a collection of items in an organized grid and allows rearrangement of these. Any element (text, image, media) can be arranged in a grid and customized.

UX Guidelines

Overview

Usage Examples

SpecMarkdown: **Grid Columns Calculation** Option 1 - Max Item Width: Set maximum width of a single item, and amount of items in a row will be set automatically, according to screen width. Option 2 - Num Columns: Set amount of Columns, and items width will be automatic according to screen width. **Rearranging items** Press and hold an item and to move it around and reorder the grid, the item expands by 10% to indicate that it has been selected.

TabletThe tablet version will keep it’s proportions and will allow displaying up to 6 columns of items, to avoid a cluttered screen.

Dev

PlaygroundCode Example

TIP

This component extends the lists/GridList props.

APIThis is the list of additional props for the component

data

any[] & {id: string}

Data of items with an id prop as unique identifierDo not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item).

extraData

any

Pass any extra data that should trigger a re-render

flexMigration

boolean

A temporary migration flag for enabling flex on the list's container (like it should be by default)

onOrderChange

(newData: T[], newOrder: ItemsOrder) => void

Order change callback

orderByIndex

boolean

Wether to reorder the items by index instead of by swapping locations. Items will move to the new index by pushing other items ahead or aback instead of swapping places with the item at the new index.

renderItem

FlatListProps['renderItem']

Custom render item callback