Component

CrankShift

A directly manipulated dial divides a full turn into eight positions. Each position rotates the actual child order in the cargo list, so the crank moves the data rather than merely decorating a control.

Possible use

It could let a reviewer turn a handoff row until the least urgent field reaches the front, or let a presenter rotate agenda items through a ceremonial loading dock.

Reasonable alternative

A reasonable local alternative is keeping the intended order in an array and rendering it directly, with one ordinary reorder interaction if needed. A crank turns a list operation into machinery.

01 / Preview

Try it yourself.

TURN

Title
Status
Owner
Date

Mechanism

1: Start with four fields in their ordinary cargo order.
2: Drag the circular crank, or focus it and use the arrow keys.
3: Every dial position rotates the actual list order.

02 / Usage

Put it somewhere.

example.tsxTSX

import { CrankShift } from "gra-ui";
import "gra-ui/styles.css";

export function ShiftedCargo() {
  return (
    <CrankShift>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
    </CrankShift>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe cargo items rotated through the crank's actual order.