Skip to Content
We're rolling out the first batch of Game UIs right now, and it might take a few days to fully wrap up. If you're already testing the UI comps, we'd love to hear any feedback you've got! 🙏
UI DocsECHOReorderable

Reorderable List

import { h } from "preact" import { useState } from "preact/hooks" import { ReorderableList } from "@/comps/echo/reorderable" export const ReorderableListBaseDemo = () => { const [data, setData] = useState([ { position: 3, mass: 6.941, id: 'Li', name: 'Lithium' }, { position: 11, mass: 22.990, id: 'Na', name: 'Sodium' }, { position: 17, mass: 35.453, id: 'Cl', name: 'Chlorine' }, { position: 26, mass: 55.845, id: 'Fe', name: 'Iron' }, { position: 82, mass: 207.2, id: 'Pb', name: 'Lead' }, ]) return <ReorderableList class="w-[300px]" items={data} onChange={setData} rowHeight={60} renderItem={(row) => ( <div class="flex-row items-center h-full w-full bg-white px-2 rounded m-[1px] ml-[2px] border-gray-400 border-[1px]"> <div class="h-full w-[50px] justify-center items-center bold text-2xl">{row.id}</div> <div class="ml-4"> <div class="h-full w-full justify-center bold mb-1">{row.name}</div> <div class="h-full w-full justify-center text-[10px] text-gray-500"> {`Position: ${row.position}, Mass: ${row.mass}`} </div> </div> </div> )} /> }

Reorderable List with Handle

import { h } from "preact" import { useState } from "preact/hooks" import { ReorderableList } from "@/comps/echo/reorderable" export const ReorderableListHandleDemo = () => { const [data, setData] = useState([ { position: 3, mass: 6.941, id: 'Li', name: 'Lithium' }, { position: 11, mass: 22.990, id: 'Na', name: 'Sodium' }, { position: 17, mass: 35.453, id: 'Cl', name: 'Chlorine' }, { position: 26, mass: 55.845, id: 'Fe', name: 'Iron' }, { position: 82, mass: 207.2, id: 'Pb', name: 'Lead' }, ]) return <ReorderableList class="w-[340px]" items={data} onChange={setData} rowHeight={60} handle={() => <div class="w-[30px] h-full justify-center items-center bg-white rounded m-[1px] bold border-gray-400 border-[1px]">⋮⋮</div>} renderItem={(row) => ( <div class="flex-row items-center h-full w-full bg-white px-2 rounded m-[1px] ml-[2px] border-gray-400 border-[1px]"> <div class="h-full w-[50px] justify-center items-center bold text-2xl">{row.id}</div> <div class="ml-4"> <div class="h-full w-full justify-center bold mb-1">{row.name}</div> <div class="h-full w-full justify-center text-[10px] text-gray-500"> {`Position: ${row.position}, Mass: ${row.mass}`} </div> </div> </div> )} /> }

Scrollable Reorderable List

import { h } from "preact" import { useState } from "preact/hooks" import { ScrollableReorderableList } from "@/comps/echo/reorderable" export const ReorderableListScrollableDemo = () => { const [data, setData] = useState([ { position: 3, mass: 6.941, id: 'Li', name: 'Lithium' }, { position: 11, mass: 22.990, id: 'Na', name: 'Sodium' }, { position: 17, mass: 35.453, id: 'Cl', name: 'Chlorine' }, { position: 26, mass: 55.845, id: 'Fe', name: 'Iron' }, { position: 82, mass: 207.2, id: 'Pb', name: 'Lead' }, { position: 6, mass: 12.011, id: 'C', name: 'Carbon' }, { position: 7, mass: 14.007, id: 'N', name: 'Nitrogen' }, { position: 39, mass: 88.906, id: 'Y', name: 'Yttrium' }, { position: 56, mass: 137.33, id: 'Ba', name: 'Barium' }, { position: 58, mass: 140.12, id: 'Ce', name: 'Cerium' }, ]) return <ScrollableReorderableList class="w-full" scrollViewClass="w-[360px] h-[300px]" items={data} onChange={setData} rowHeight={60} handle={() => <div class="w-[30px] h-full justify-center items-center bg-white rounded m-[1px] bold border-gray-400 border-[1px]">⋮⋮</div>} renderItem={(row) => ( <div class="flex-row items-center h-full bg-white px-2 rounded m-[1px] ml-[2px] border-gray-400 border-[1px] grow shrink"> <div class="h-full w-[50px] justify-center items-center bold text-2xl">{row.id}</div> <div class="ml-4"> <div class="h-full w-full justify-center bold mb-1">{row.name}</div> <div class="h-full w-full justify-center text-[10px] text-gray-500"> {`Position: ${row.position}, Mass: ${row.mass}`} </div> </div> </div> )} /> }