ReorderableGrid

A reorderable grid allows a user to reorder items within a grid.

Example

function Example() {
  const list = useListState({
    initialItems: [
      { id: '1', type: 'item', text: 'One' },
      { id: '2', type: 'item', text: 'Two' },
      { id: '3', type: 'item', text: 'Three' },
      { id: '4', type: 'item', text: 'Four' },
      { id: '5', type: 'item', text: 'Five' },
      { id: '6', type: 'item', text: 'Six' }
    ]
  });

  const onMove = (keys, target) => {
    if (target.dropPosition === 'before') {
      list.moveItemBefore(target.key, keys);
    } else {
      list.moveItemAfter(target.key, keys);
    }
  };

  return (
    <ReorderableGrid
      items={list.items}
      onMove={onMove}
      aria-label="Reorderable list"
    >
      {(item) => (
        <Item key={item.id} textValue={item.text}>
          {item.type === 'folder' && (
            <Icon name="FolderIcon" variant="outline" />
          )}
          <span>{item.text}</span>
        </Item>
      )}
    </ReorderableGrid>
  );
}

function Example() {
  const list = useListState({
    initialItems: [
      { id: '1', type: 'item', text: 'One' },
      { id: '2', type: 'item', text: 'Two' },
      { id: '3', type: 'item', text: 'Three' },
      { id: '4', type: 'item', text: 'Four' },
      { id: '5', type: 'item', text: 'Five' },
      { id: '6', type: 'item', text: 'Six' }
    ]
  });

  const onMove = (keys, target) => {
    if (target.dropPosition === 'before') {
      list.moveItemBefore(target.key, keys);
    } else {
      list.moveItemAfter(target.key, keys);
    }
  };

  return (
    <ReorderableGrid
      items={list.items}
      onMove={onMove}
      aria-label="Reorderable list"
    >
      {(item) => (
        <Item key={item.id} textValue={item.text}>
          {item.type === 'folder' && (
            <Icon name="FolderIcon" variant="outline" />
          )}
          <span>{item.text}</span>
        </Item>
      )}
    </ReorderableGrid>
  );
}

function Example() {
  const list =
    useListState({
      initialItems: [
        {
          id: '1',
          type: 'item',
          text: 'One'
        },
        {
          id: '2',
          type: 'item',
          text: 'Two'
        },
        {
          id: '3',
          type: 'item',
          text: 'Three'
        },
        {
          id: '4',
          type: 'item',
          text: 'Four'
        },
        {
          id: '5',
          type: 'item',
          text: 'Five'
        },
        {
          id: '6',
          type: 'item',
          text: 'Six'
        }
      ]
    });

  const onMove = (
    keys,
    target
  ) => {
    if (
      target
        .dropPosition ===
        'before'
    ) {
      list
        .moveItemBefore(
          target.key,
          keys
        );
    } else {
      list.moveItemAfter(
        target.key,
        keys
      );
    }
  };

  return (
    <ReorderableGrid
      items={list.items}
      onMove={onMove}
      aria-label="Reorderable list"
    >
      {(item) => (
        <Item
          key={item.id}
          textValue={item
            .text}
        >
          {item.type ===
              'folder' &&
            (
              <Icon
                name="FolderIcon"
                variant="outline"
              />
            )}
          <span>
            {item.text}
          </span>
        </Item>
      )}
    </ReorderableGrid>
  );
}

API