Detail

The Detail component displays an organised summary of key/value data pairs, providing a clear and structured view of details.

Preview

Usage

import { Detail } from 'components/lib';

function Example(){

  const data = {
    name: "John Doe",
    email: "[e-mail]",
    age: 30
  };

  return <Detail data={ data } show={['name', 'email', 'age']} />;
}

Props

Prop	Description	Required	Value
className	Custom styling	optional	SCSS or Tailwind
data	Data to display in key/value pairs	required	object
show	Array of keys to show	optional	array
translation	reference to a locale object to use for the key translations	optional	string

Notes

• The Detail component uses a table layout to display each key/value pair.

• Keys in the data object are converted to a more readable format by replacing underscores with spaces.

• Custom styles can be applied through the className prop, using predefined styles from the detail.tailwind.js file.

• If the data prop is empty or not provided, the component will return false and not render anything.

• The translation prop can be used to change the key from the default JSON key.

• Keys can be shown/hidden using the show prop array.