Docs
Sortable
Sortable
Sortable provides a way to sort items in a list or grid.
Introduction to React
Learn the basics of React and component-based architecture
State Management
Explore different state management solutions in React
React Hooks
Master the use of hooks for state and side effects
Performance Optimization
Techniques to optimize React application performance
Testing React Apps
Learn testing strategies and tools for React applications
React Router
Implement client-side routing in React applications
Server Components
Build server-rendered React components for better performance
React Query
Manage server state and caching in React applications
About
The <Sortable /> component is built on top of @dnd-kit's sortable preset.
Installation
pnpm dlx cross-env REGISTRY_URL=https://ui-x.junwen-k.dev/r pnpm dlx shadcn@latest add sortable
Usage
import {
Sortable,
SortableGrid,
SortableItem,
SortableItemTrigger,
SortableList,
SortableOverlay,
} from "@/components/ui/sortable"<Sortable>
<SortableList>
<SortableItem>
<SortableItemTrigger />
</SortableItem>
</SortableList>
<SortableGrid>
<SortableItem>
<SortableItemTrigger />
</SortableItem>
</SortableGrid>
<SortableOverlay />
</Sortable>Examples
Default
Introduction to React
Learn the basics of React and component-based architecture
State Management
Explore different state management solutions in React
React Hooks
Master the use of hooks for state and side effects
Performance Optimization
Techniques to optimize React application performance
Testing React Apps
Learn testing strategies and tools for React applications
React Router
Implement client-side routing in React applications
Server Components
Build server-rendered React components for better performance
React Query
Manage server state and caching in React applications
Trigger
Introduction to React
Learn the basics of React and component-based architecture
State Management
Explore different state management solutions in React
React Hooks
Master the use of hooks for state and side effects
Performance Optimization
Techniques to optimize React application performance
Testing React Apps
Learn testing strategies and tools for React applications
React Router
Implement client-side routing in React applications
Server Components
Build server-rendered React components for better performance
React Query
Manage server state and caching in React applications
Disabled
Introduction to React
Learn the basics of React and component-based architecture
State Management
Explore different state management solutions in React
React Hooks
Master the use of hooks for state and side effects
Performance Optimization
Techniques to optimize React application performance
Testing React Apps
Learn testing strategies and tools for React applications
React Router
Implement client-side routing in React applications
Server Components
Build server-rendered React components for better performance
React Query
Manage server state and caching in React applications
Swap
Introduction to React
Learn the basics of React and component-based architecture
State Management
Explore different state management solutions in React
React Hooks
Master the use of hooks for state and side effects
Performance Optimization
Techniques to optimize React application performance
Testing React Apps
Learn testing strategies and tools for React applications
React Router
Implement client-side routing in React applications
Server Components
Build server-rendered React components for better performance
React Query
Manage server state and caching in React applications
Form
Tip: When working with database records, items typically include their own id field. To prevent conflicts with useFieldArray's generated IDs:
-
Use
keyNameprop inuseFieldArrayto specify another name for the temporary ID (e.g.,_id).const { fields, move } = useFieldArray({ control: form.control, name: "items", keyName: "_id", }) -
Pass the temporary IDs to
<SortableList />or<SortableGrid />'sitemsprop to maintain the correct sort order during reordering.<SortableList items={fields.map((field) => field._id)} />