# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/detail.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.