I wanna make a scalable grid of items were items with showDefault: true always are shown at the top and then one can click arrow button to expand grid to also show the items with showDefault: false
Any way to make this?
interface IGridItem {
id: string
name: string
showDefault: boolean
}
function MyGrid(){
return (
<>
<IconButton onClick={}><ArrowIcon/></IconButton>
<Box
sx={{
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(187, 1fr))"
}}
>
{items.filter(item => item.showDefault).map(item => <MyGridItem key={item.id} item={item}/>)}
{items.filter(item => !item.showDefault).map(item => <MyGridItem key={item.id} item={item}/>)}
</Box>
</>
)
}
function MyGridItem({item}: {item: IGridItem}){
return (
<Box>
{item.name}
</Box>
)
}
You could conditionally render the items that you want, whether the non-default ones should be shown:
interface IGridItem {
id: string
name: string
showDefault: boolean
}
function MyGrid(){
const [showDefault, setShowDefault] = useState(false);
const handleOnShowDefault = () => {
setShowDefault(prev => !prev);
}
return (
<>
<IconButton onClick={handleOnShowDefault}><ArrowIcon/></IconButton>
<Box
sx={{
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(187, 1fr))"
}}
>
{items.filter(item => item.showDefault).map(item =>
<MyGridItem key={item.id} item={item}/>
)}
{showDefault && items.filter(item => !item.showDefault).map(item =>
<MyGridItem key={item.id} item={item}/>
)}
</Box>
</>
)
}
function MyGridItem({item}: {item: IGridItem}){
return (
<Box>
{item.name}
</Box>
)
}