> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codenullapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Matrix

> &#x20;(nothing changes with this step) this data source will fill up the rows of the DataGrid.

#### Add a control Type **DataGrid**

#### **Add the data source in Data Configuration**

&#x20;(nothing changes with this step) this data source will fill up the rows of the DataGrid.

#### **Add Matrix configurations** (new feature)

in order to use it fill up these fields (It Works similar to adding Datasource in **Data Configuration** but with new fields):

1. **Enable the check Is Matrix**

<img src="https://mintcdn.com/codenull/fUND-Qmj85v5Oam-/images/vuQi51kMabnqS3Dtze3t.png?fit=max&auto=format&n=fUND-Qmj85v5Oam-&q=85&s=331378cff2f64aba9a1088a7a4ee51c7" alt="" width="384" height="114" data-path="images/vuQi51kMabnqS3Dtze3t.png" />

&#x20; 2**.  Fill up the Columns Data Source**

<img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/DfML3kLykSqtPcCgEVfQ.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=50ca13ee472cd8d341eeb171787e5703" alt="" width="673" height="557" data-path="images/DfML3kLykSqtPcCgEVfQ.png" />

&#x20; 3\. **We will find new fields:**

* Data Cells Path: Path of the row items
* Data Item Cell Path: Path of the Item to set in every item (row)
* Display Code Path: Path of the value to display in the Item (row)
* Column Title Path: Path of the value (field) to use as Title of the column
* Column Value Path: Path of the field to use as a value in the column

&#x20; 4\. **Cell Click Action**

*Allow adding a button action in every item of the row x column, we add an action when clicking in every item (it works to the action button)*

<img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/SWdDK5xbLCED61Ihed7r.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=95116d6832a86697dcdeaa9374a02e8c" alt="" width="655" height="390" data-path="images/SWdDK5xbLCED61Ihed7r.png" />

<img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/ca5W5sxQOnQgSIY7B4C9.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=fc95cc6408dbcbe3825b600bddc36b20" alt="" width="1615" height="263" data-path="images/ca5W5sxQOnQgSIY7B4C9.png" />
