Key value

Attributes of one event as a two-column list.

import { KeyValue } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function KeyValueBasic() {
  return (
    <Preview block={true}>
      <KeyValue.Root>
        {Array.from({ length: 3 }, (_, index) => (
          <KeyValue.Item key={index} label={`Key ${index + 1}`}>
            Value {index + 1}
          </KeyValue.Item>
        ))}
      </KeyValue.Root>
    </Preview>
  );
}

Keys are muted and break after a dot, so a long attribute key such as telemetry.sdk.language stays readable. Values wrap anywhere, so long IDs never overflow.
Inside a side panel, pass a narrower keyWidth.
On narrow screens the value moves under its key.

API

PropType

keyWidth?number

On Root. Key column width in px.

Typenumber

Default188

labelReactNode

On Item. The key; a string label breaks after each dot.

TypeReactNode

Parts: Root, Item. Root renders a dl; Item renders a div with the dt and dd inside. Other props go to the dl and the div.