# Subcomponents

## Title

| Props          | Type     | Required |
| -------------- | -------- | -------- |
| `children`     | `string` | ✅        |
| `hasPadding`   | boolean  | ❌        |
| `stackPadding` | boolean  | ❌        |
| `description`  | string   | ❌        |

<details>

<summary>stackPadding</summary>

Adds a padding once the Table `component enters into the` stakeded mode if it is being implemented. If not, it doesn't do nothing.

</details>

<details>

<summary>description</summary>

Adds a text under the title section

</details>

## ControlBar

| Props          | Type        | Required |
| -------------- | ----------- | -------- |
| `children`     | `ReactNode` | ✅        |
| `hasPadding`   | boolean     | ❌        |
| `stackPadding` | boolean     | ❌        |

<details>

<summary>children</summary>

It can receive custom HTML layout structures. Basically, it is an empty div that can receive whatever content the project needs. Usually this section will be used to add filters and controls for the `Table` display.

</details>

## Content

| Props          | Type                                                         | Required |
| -------------- | ------------------------------------------------------------ | -------- |
| `children`     | `ReactNode`                                                  | ✅        |
| `columnSizes`  | string                                                       | ❌        |
| `fixedColumns` | <p>{<br>  column: number,<br>  leftPosition: string<br>}</p> | ❌        |
| `fillStyle`    | 'solid' \| 'striped"                                         | ❌        |
| `borderStyle`  | 'ruled' \| 'grid' \| 'none'                                  | ❌        |

<details>

<summary>children</summary>

This component will only receive as children the following subcomponents:

* Header
* Body

</details>

<details>

<summary>columnSizes</summary>

This property allows to control the behavior of the different column sizing. Basically this is a hook that connects with the `grid-template-columns` css property that controls the `Table` layout structure. In here it can be used CSS functions and patters beside just adding single unit values.

Also, keep in mind this CSS property receives one value by each column, so, if your `Table` has three columns, you should define three values: `1fr 1fr 1fr`.

Or you can also use a CSS function: `repeat(3, 1fr)`

Or combining both patterns (The first column with a static value and the rest of columns with dynamic and repetitive patterns): `24px repeat(2, minmax(500px, 1fr))`

</details>

<details>

<summary>fixedColumns</summary>

In many cases, it will be required to make `horizontal scroll` when the column sizing overflows the actual screen width. When this happens, for users accesibility, it is a good idea to fix the first column so the user can keep the context of what item he is reading.

</details>

<details>

<summary>fillStyle and borderStyle</summary>

These props controls the different `Table` presentations for borders and/or fill of the rows.

</details>

## Header

This subcomponent wrapper controls the header of the `Table` row structure.

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

This component will only receive as children element:

* HeaderCell

</details>

## HeaderCell

| Props       | Type                                            | Required |
| ----------- | ----------------------------------------------- | -------- |
| `children`  | `ReactNode`                                     | ✅        |
| `alignment` | 'left' \| 'center' \| 'right' \| 'spaceBetween' | ❌        |

## Body

This subcomponent wrapper controls the content where are all the rows of the `Table` are going to be placed.

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

This component will only receive as children the following subcomponents:

* Row

</details>

## Row

| Props        | Type        | Required |
| ------------ | ----------- | -------- |
| `children`   | `ReactNode` | ✅        |
| `isSelected` | boolean     | ❌        |
| `hasError`   | boolean     | ❌        |

<details>

<summary>children</summary>

This component will only receive as children the following subcomponents:

* Cell

</details>

## Cell

| Props       | Type                                            | Required |
| ----------- | ----------------------------------------------- | -------- |
| `children`  | `ReactNode`                                     | ✅        |
| `alignment` | 'left' \| 'center' \| 'right' \| 'spaceBetween' | ❌        |

## Stack

The `Stack` content is a exclusive content of SDS `Table` component, where it is being added a new structure that will replace the `Table.Content` by a more easy to read layout for mobile devices where developers can introduce a simplified version of the Table content.

| Props         | Type                 | Required |
| ------------- | -------------------- | -------- |
| `children`    | `ReactNode`          | ✅        |
| `fillStyle`   | 'solid' \| 'striped' | ❌        |
| `borderStyle` | 'ruled' \| 'none'    | ❌        |

<details>

<summary>children</summary>

This component will only receive as children the following subcomponents:

* StackHeader
* StackBody

</details>

## StackHeader

This is a special subcomponent wrapper, that works as a initial row on the top the `StackTable` layout.

| Props         | Type        | Required |
| ------------- | ----------- | -------- |
| `children`    | `ReactNode` | ✅        |
| `columnSizes` | string      | ❌        |

<details>

<summary>children</summary>

This component will only receive as children the following subcomponents:

* StackHeaderCell

</details>

## StackHeaderCell

| Props       | Type                                            | Required |
| ----------- | ----------------------------------------------- | -------- |
| `children`  | `ReactNode`                                     | ✅        |
| `alignment` | 'left' \| 'center' \| 'right' \| 'spaceBetween' | ❌        |

## StackBody

This subcomponent wrapper contains the whole structure of the `TableStack`&#x20;

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

This component will only receive as children the following subcomponents:

* StackItem

</details>

## StackItem

This subcomponent wrapper represents the rows in the standard `Table` component. Here, developers are able to insert multiple rows that will be the equivalento to the columns in the standard `Table` component.

This new structure is to facilitate the reading of rows in mobile devices, opting for a vertical layout instead a horizontal.

| Props        | Type        | Required |
| ------------ | ----------- | -------- |
| `children`   | `ReactNode` | ✅        |
| `isSelected` | boolean     | ❌        |
| `hasError`   | boolean     | ❌        |

<details>

<summary>children</summary>

This component will only receive as children the following subcomponents:

* StackRow

</details>

## StackRow

| Props         | Type        | Required |
| ------------- | ----------- | -------- |
| `children`    | `ReactNode` | ✅        |
| `columnSizes` | string      | ❌        |

<details>

<summary>children</summary>

This component will only receive as children the following subcomponents:

* StackCell

</details>

## StackCell

| Props       | Type                                            | Required |
| ----------- | ----------------------------------------------- | -------- |
| `children`  | `ReactNode`                                     | ✅        |
| `asLabel`   | boolean                                         | ❌        |
| `alignment` | 'left' \| 'center' \| 'right' \| 'spaceBetween' | ❌        |

<details>

<summary>asLabel</summary>

This prop adds styles so the text used inside the `StackCell` can be visualized as the title of the property to put in the cell next to it.

</details>