npx shadcn add https://hq-ui.vercel.app/r/grid-list
The grid list supports drag and drop functionalities if you use the dragAndDropHooks prop along with the useDragAndDrop hook. You can drop data on the entire list, individual items, add new items between existing ones, or rearrange items.
You can move items between positions within the grid list.
Buttons in the Settings menu are misaligned on smaller screens.
Requesting a redesign of the login page to improve user experience.
Implement a dark mode option for improved accessibility and user preference.
Some user profile pictures are not displaying properly in the user dashboard.
The "Learn More" link on the homepage is leading to a 404 error.
Implement a feature to allow users to export their data to PDF format.
The application is not rendering properly on certain mobile devices.
Users are experiencing intermittent connection errors when accessing the database.
Requesting the addition of two-factor authentication for improved security.
Requesting performance optimization for the application to reduce load times.
The grid list can display an empty state when no items are available using the renderEmptyState prop.
The grid list can handle large datasets efficiently with infinite scrolling. This allows for loading more data as the user scrolls down, improving performance and user experience.
The grid list can be controlled, which means the parent component manages the selection state of each item.
You have selected:
Similar to how the Tag Group component can be disabled using isDisabled for children and disabledKeys for the parent, the Grid List supports similar functionality. For example, items "Led Zeppelin" and "The Rolling Stones" are disabled.
To disable items via the parent component, you can use the disabledKeys prop like this:
<GridList
items={items}
aria-label="Select your favorite bands"
selectionMode="multiple"
disabledKeys={[2,5]}
className="min-w-64"
>
{(item) => <GridListItem id={item.id}>{item.name}</GridListItem>}
</GridList>