@npm.tangocode/tc_ui_components/src/documentation/GroupedGrid.md

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

## GroupedGrid ##

## Description ##

An scrolleable groupedGrid.
This feature depends on two componentes GroupedGrid and GropedGridElement

### Props ###

- GroupedGrid

    1. __styles ?__ (GroupedGrid.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match the options below.

    * Root : Is the outer div container of the component

      ```ts
        styles={{
            Root?: <styled component>;               
        }};
    ```
    2. __id ?__ (string): A prefix id for all the html elements of the component

    3. __name ?__ (string): A prefix name for all the html elements of the component
- GroupedGridElement 

    1. __header__ (any) : Is the header element of the grid.
    2. __styles ?__ (GroupedGridElement.Styles) : Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

    * Group : Is the div container for the header and its lines

    * HeaderRoot: The div container of the Header

    * GroupRows: Is the div container for the group of rows

    * RowRoot : Is the div container for a single row

     ```ts
        styles={{
            Group?: <styled component>;               
            HeaderRoot?: <styled component>; 
            GroupRows?: <styled component>; 
            RowRoot?: <styled component>; 
        }};
    ```
    3. __id ?__ (string): A prefix id for all the html elements of the component

    4. __name ?__ (string): A prefix name for all the html elements of the component

### Usage ###

```jsx
render() {
        return (
            <div style={{ width: '100%', height: '180px' }}>
                <GroupedGrid>
                    {this.state.list.map((item, index) =>
                        <GroupedGridElement key={index} header={item.header} >
                            {item.rows.map((row) => { return (row.text) })}
                        </GroupedGridElement>


                    )}
                </GroupedGrid>
            </div>
        );
    }

```

### Styling ###

```jsx

const newGroupedGridStyles = {
        Root: styles.groupedGrid.Root.extend`
           width: 50%;    `
    }

const newGroupedGridElementStyles = {
    Root: styles.groupedGridElement.GroupRows.extend`
        padding: 16px; `
}

render() {
        return (
            <div style={{ width: '100%', height: '180px' }}>
                <GroupedGrid styles={newGroupedGridStyles}>
                    {this.state.list.map((item, index) =>
                        <GroupedGridElement key={index} header={item.header} styles={newGroupedGridElementStyles}>
                            {item.rows.map((row) => { return (row.text) })}
                        </GroupedGridElement>
                    )}
                </GroupedGrid>
            </div>
        );
    }