> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/detail.md).

# Detail

## Preview

<div align="left"><figure><img src="/files/ECWvE5IsoXclWjSdjP5Z" alt="Gravity detail component" width="367"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Detail } from 'components/lib';

function Example(){

  const data = {
    name: "John Doe",
    email: "john.doe@example.com",
    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.