Grid
component is provided as an alternative to the List component when the defining characteristic of an item is an image.@raycast/api
packageimport { List } from '@raycast/api'
to import { Grid } from '@raycast/api'
;isShowingDetail
prop from the top-level List
component, along with all List.Items' detail
propList
with Grid
,title
or keywords
.Grid
's enableFiltering
prop to false, and the items displayed will be independent of the search bar's text. Note that enableFiltering
is also implicitly set to false if an onSearchTextChange
listener is specified. If you want to specify a change listener and still take advantage of Raycast's built-in filtering, you can explicitly set enableFiltering
to true.searchBarAccessory
prop is useful. Pass it a Grid.Dropdown component, and it will be displayed on the right-side of the search bar. Invoke it either by using the global shortcut ⌘
P
or by clicking on it.React.ReactNode
true
, Raycast will use the query in the search bar to filter grid items. When false
, the extension needs to take care of the filtering.boolean
false
when onSearchTextChange
is specified, true
otherwise.itemSize
prop.boolean
false
string
string
"Search value..."
string
string
true
when using custom filtering logic with asynchronous operations (e.g. network requests).boolean
false
(text: string) => void
(id: string) => void
string
React.ReactNode
defaultValue
will be configured once per component lifecycle. This means that if a user changes the value, defaultValue
won't be configured on re-rendering.string
string
string
"Search..."
boolean
string
(newValue: string) => void
string
string
React.ReactNode
string
EmptyView
that will be displayed if the Grid component either has no children, or if it has children, but none of them match the query in the search bar. This too can be overridden by passing an empty view alongside the other Grid.Item
s.EmptyView
is never displayed if the Grid
's isLoading
property is true and the search bar is empty.string
string
onSelectionChange
handler of the Grid when the item is selected. Make sure to assign each item a unique ID or a UUID will be auto generated.string
string[]
string
or { tooltip: string; value: string }
string
or { tooltip: string; value: string }
string
string
itemSize
prop.