# PricingTable

To implement PricingTable component into your project you'll need to the import at least the PricingTable and the [PricingTableItem](#pricingTableItem):

```jsx
import PricingTable, { PricingTableItem } from "@kiwicom/orbit-components/lib/PricingTable";
```

After adding import into your project you can use it simply like:

```jsx
<PricingTable>
  <PricingTableItem>content</PricingTableItem>
  <PricingTableItem>content</PricingTableItem>
</PricingTable>
```

## Props

Table below contains all types of the props available in the PricingTable component.

| Name                 | Type         | Default | Description                                                          |
| :------------------- | :----------- | :------ | :------------------------------------------------------------------- |
| children             | `React.Node` |         | The content of the PricingTable. [See Subcomponents](#subcomponents) |
| dataTest             | `string`     |         | Optional prop for testing purposes.                                  |
| defaultActiveElement | `number`     | `0`     | Sets default active element on mobile view                           |

---

## Subcomponents

PricingTable component needs to be used with it's subcomponent PricingTableItem

### PricingTableItem

```jsx
import PricingTable, { PricingTableItem } from "@kiwicom/orbit-components/lib/PricingTable";
```

#### Props

Table below contains all types of the props in the PricingTableItem component.

| Name              | Type                    | Default | Description                                                                    |
| :---------------- | :---------------------- | :------ | :----------------------------------------------------------------------------- |
| action            | `React$Node`            |         | Area for action elements, like Button.                                         |
| badge             | `string \| React$Node`  |         | Badge above the PricingTableItem, [works with Orbit Badge](../Badge/README.md) |
| **children**      | `React.Node`            |         | Content of the PricingTableItem component.                                     |
| dataTest          | `string`                |         | Optional prop for testing purposes.                                            |
| featureIcon       | `React$Node`            |         | Feature Icon displayed at top of the PricingTableItem                          |
| mobileDescription | `Translation`           |         | Description of PricingTableItem, displayed on mobile                           |
| name              | `Translation`           |         | Name of PricingTableItem                                                       |
| onClick           | `() => void \| Promise` |         | Function for handling the onClick event.                                       |
| price             | `Translation`           |         | Price of item                                                                  |
| priceBadge        | `React$Node`            |         | Badge instead of `price`, [works with Orbit Badge](../Badge/README.md)         |