# DataGrid

Used to show data in a matrix or grid. You can give it a list of items and a function to render those items. Items get layed out in a grid and displayed.

## Installation

```tsx
import { DataGrid } from 'uxp/components';
```

## Signature

```tsx
const DataGrid: React.FunctionComponent<IDataGridProps>
```

## Examples

```tsx
let GridData = [
     {
         icon: "https://static.iviva.com/images/Adani_UXP/QR_badge_icon.svg",
         title: "Item Card",
         subTitle: "Item card with image/icon Item card with image/icon"
     },
     {
         icon: "",
         name: "Dinesh Gamage",
         title: "Item Card",
         subTitle: "Item card with name"
     },
     {
         icon: "https://static.iviva.com/images/Adani_UXP/QR_badge_icon.svg",
         title: "Item Card Title & Icon",
         subTitle: ""
     },
     {
         icon: "https://static.iviva.com/images/Adani_UXP/QR_badge_icon.svg",
         title: "",
         subTitle: "Item Card sub Title & Icon"
     },
     {
         title: "Item Card",
         subTitle: "Item card without image/icon"
     },
     {
         title: "Item Card Title only",
     },
     {
         subTitle: "Item card sub title only"
     },
     {
         icon: "https://static.iviva.com/images/Adani_UXP/QR_badge_icon.svg",
         title: "QR Code",
         subTitle: "scan your code"
     },
     {
         icon: "https://static.iviva.com/images/Adani_UXP/QR_badge_icon.svg",
     },
     null
 ]


 function renderGridItem(item: any, key: number){
     return (<ItemCard
         item={item}
         imageField="icon"
         titleField="title"
         subTitleField="subTitle"
         nameField="name"
     />)
 }

 <DataGrid
     data={GridData}
     renderItem={renderGridItem}
     columns={2}
 />
```

## Properties

| Name       | Type                                    | Mandatory | Default Value | Example Value |
| ---------- | --------------------------------------- | --------- | ------------- | ------------- |
| data       | Array                                   | Yes       | -             | -             |
| renderItem | (item: any, key: number) => JSX.Element | Yes       | -             | \*            |
| columns    | number                                  | Yes       | -             | -             |
| className  | string                                  | No        | -             | -             |

## Related Types

* [IDataGridProps](https://help.iviva.com/uxp/v5/additional-resources/types/idatagridprops)