npm package: @licuido-ui/ui_compare-the-feature
Description: what the difference between a Component and a Feature is.Easily identify
Latest version: 0.0.2

# CompareTheFeature

what the difference between a Component and a Feature is.Easily identify

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link CompareTheFeature](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_compare-the-feature
```

## Import component

```jsx
import { CompareTheFeature } from '@licuido-ui/ui_compare-the-feature';
```

## Usage

```jsx
<CompareTheFeature rowData={[]} columnData={[]} />
```

## Image

![alt text](./compareTheFeature.png)

## Sample Code

```jsx
<CompareTheFeature
  compareHeadingColor={''}
  compareHeadingSize={12}
  compareHeadingStyle={{}}
  compareHeadingAlign={'left'}
  rowAlign={'left'}
  compareRowTitleColor={''}
  compareRowTitleSize={12}
  compareRowTitleStyle={{}}
  rowBorderColor={''}
  tableRootStyle={{}}
  rowData={[
    {
      id: 1,
      title: 'Import Data from Cloud Storage Services',
      Personal: '',
      Starter: <TickIcon />,
      Professional: <TickIcon />,
      style: {},
    },
  ]}
  columnData={[ 
    { id: 1, key: 'title', title: 'Titles', style: {} },
    ]}
/>
```

## Props

| **Name**                 | **Description**                    | **Default** | **Control**                                        |
| ------------------------ | ---------------------------------- | ----------- | -------------------------------------------------- |
| **compareHeadingColor**  | string                             | ""          | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **compareHeadingSize**   | number                             | 12          | 12                                                 |
| **compareHeadingStyle**  | SxProps&lt;\{\}&gt;                | \{ \}       | compareHeadingStyle : \{\}                         |
| **compareHeadingAlign**  | "center" `or` "left"  `or` "right" | center      | center                                             |
| **compareRowTitleColor** | string                             | ""          | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **compareRowTitleSize**  | number                             | 12          | 12                                                 |
| **compareRowTitleStyle** | SxProps&lt;\{\}&gt;                | \{ \}       | compareRowTitleStyle : \{\}                        |
| **rowBorderColor**       | string                             | ""          | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **tableRootStyle**       | SxProps&lt;\{\}&gt;                | \{ \}       | tableRootStyle : \{\}                              |
| **rowData**              | RowDataProps\[\]                   | []          | []                                                 |
| **columnData**           | columnData []                      | []          | []                                                 |
| **className**            | string                             | \-          | Set string                                         |
| **id**                   | string                             | string      | string                                             |
| **sx**                   | SxProps&lt;Theme&gt;               | \-          | Set object                                         |