You should check the Demo app to see this component in action using data from the OutSystems Sample Data DB.

To use this component, you will need to.

1. Create a DataFetch Action
   1. Create an SQL Query to get your data to fill the DataGrid. As you can see in the demo, your query will need to be something similar to
      1. FROM {HeaderColumnDataEntity} A FULL OUTER JOIN {DynamicColumnsEntity) B ON 1=1 LEFT JOIN {CellValueDataEntity} C on C.AId = A.ID and C.BId = B.Id GROUP BY A, B
         1. This means that every possible combination of values between DynamicColumnsEntity and HeaderColumnDataEntity must appear on the output of the query, even if there is no record C for the row AxB. 
      2. The query has to be sorted by the value that will be the HeaderColumnData
   2. Send the output list of your SQL Query to the ArrangeData_ForDynamicColumns action, mapping which are the values that will become the header row, which will become the Dynamic columns, and what will be the CellValue for the HeaderRowDataXDynamicColumnName cell. Return the Json from the data fetch
   3. Optional queries, but you will need if you plan to use the binding properties of the datagrid to add CSS classes to your grid:
      1. Query all unique HeaderColumnData values and return it on a text list
      2. Query all unique DynamicColumns names and return it on a text list
2. You can choose to use either the Server Action or the Client Action to parse the JSON to Dynamic Columns, both will result the same. The Client Action is on the DatagridDynamicColumns module, and the Server Action is on the DataGridExtension_DynamicColumns module. Both actions have the same name.
   1. Use the ParseJson_ToDynamicColumns action
      1. JsonData_Arranged = Json from data fetch
      2. HeaderColumnFinalName = Name to show on the column with all the HeaderColumnData at the end
      3. HeaderColumnFinalDataType = The data type of your header column data. String by default
      4. CellValueFinalDataType = The data type of your the data from the dynamic columns in your data grid. String by default
   2. Get the value returned by the action, save it on a local variable and use this local variable as the source data for the DataGrid

To help you better visualize how each input will be shown in the final datagrid, you can see this table.

| Header Column Name  | Dynamic C1 | Dynamic C2   | Dynamic C3  |

| Header Colm Data 1     |       Value      |       Value       |       Value       |

| Header Colm Data 2     |       Value      |       Value       |       Value       |

| Header Colm Data 3     |       Value      |       Value       |       Value       |

Each Dynamic C is one of the unique values provided to the DynamicColumnName attribute from the structure below input.

Each Header Colm Data C is one of the unique values provided to the HeaderColumnData attribute from the structure below input.

Each Value is the CellValue from the pair HeaderColumnData x DynamicColumnName from the ArrangeData_ForDynamicColumns structure.

You should check the Demo app to see this component in action using data from the OutSystems Sample Data DB.

To use this component, you will need to.

1. Create a DataFetch Action
   1. Create an SQL Query to get your data to fill the DataGrid. As you can see in the demo, your query will need to be something similar to
      1. FROM {HeaderColumnDataEntity} A FULL OUTER JOIN {DynamicColumnsEntity) B ON 1=1 LEFT JOIN {CellValueDataEntity} C on C.AId = A.ID and C.BId = B.Id GROUP BY A, B
         1. This means that every possible combination of values between DynamicColumnsEntity and HeaderColumnDataEntity must appear on the output of the query, even if there is no record C for the row AxB. 
      2. The query has to be sorted by the value that will be the HeaderColumnData
   2. Send the output list of your SQL Query to the ArrangeData_ForDynamicColumns action, mapping which are the values that will become the header row, which will become the Dynamic columns, and what will be the CellValue for the HeaderRowDataXDynamicColumnName cell. Return the Json from the data fetch
   3. Optional queries, but you will need if you plan to use the binding properties of the datagrid to add CSS classes to your grid:
      1. Query all unique HeaderColumnData values and return it on a text list
      2. Query all unique DynamicColumns names and return it on a text list
2. You can choose to use either the Server Action or the Client Action to parse the JSON to Dynamic Columns, both will result the same. The Client Action is on the DatagridDynamicColumns module, and the Server Action is on the DataGridExtension_DynamicColumns module. Both actions have the same name.
   1. Use the ParseJson_ToDynamicColumns action
      1. JsonData_Arranged = Json from data fetch
      2. HeaderColumnFinalName = Name to show on the column with all the HeaderColumnData at the end
      3. HeaderColumnFinalDataType = The data type of your header column data. String by default
      4. CellValueFinalDataType = The data type of your the data from the dynamic columns in your data grid. String by default
   2. Get the value returned by the action, save it on a local variable and use this local variable as the source data for the DataGrid

To help you better visualize how each input will be shown in the final datagrid, you can see this table.

| Header Column Name  | Dynamic C1 | Dynamic C2   | Dynamic C3  |

| Header Colm Data 1     |       Value      |       Value       |       Value       |

| Header Colm Data 2     |       Value      |       Value       |       Value       |

| Header Colm Data 3     |       Value      |       Value       |       Value       |

Each Dynamic C is one of the unique values provided to the DynamicColumnName attribute from the structure below input.

Each Header Colm Data C is one of the unique values provided to the HeaderColumnData attribute from the structure below input.

Each Value is the CellValue from the pair HeaderColumnData x DynamicColumnName from the ArrangeData_ForDynamicColumns structure.

You should check the Demo app to see this component in action using data from the OutSystems Sample Data DB.

To use this component, you will need to.

1. Create a DataFetch Action
   1. Create an SQL Query to get your data to fill the DataGrid. As you can see in the demo, your query will need to be something similar to
      1. FROM {HeaderColumnDataEntity} A FULL OUTER JOIN {DynamicColumnsEntity) B ON 1=1 LEFT JOIN {CellValueDataEntity} C on C.AId = A.ID and C.BId = B.Id GROUP BY A, B
         1. This means that every possible combination of values between DynamicColumnsEntity and HeaderColumnDataEntity must appear on the output of the query, even if there is no record C for the row AxB. 
      2. The query has to be sorted by the value that will be the HeaderColumnData
   2. Send the output list of your SQL Query to the ArrangeData_ForDynamicColumns action, mapping which are the values that will become the header row, which will become the Dynamic columns, and what will be the CellValue for the HeaderRowDataXDynamicColumnName cell. Return the Json from the data fetch
   3. Optional queries, but you will need if you plan to use the binding properties of the datagrid to add CSS classes to your grid:
      1. Query all unique HeaderColumnData values and return it on a text list
      2. Query all unique DynamicColumns names and return it on a text list
2. You can choose to use either the Server Action or the Client Action to parse the JSON to Dynamic Columns, both will result the same. The Client Action is on the DatagridDynamicColumns module, and the Server Action is on the DataGridExtension_DynamicColumns module. Both actions have the same name.
   1. Use the ParseJson_ToDynamicColumns action
      1. JsonData_Arranged = Json from data fetch
      2. HeaderColumnFinalName = Name to show on the column with all the HeaderColumnData at the end
      3. HeaderColumnFinalDataType = The data type of your header column data. String by default
      4. CellValueFinalDataType = The data type of your the data from the dynamic columns in your data grid. String by default
   2. Get the value returned by the action, save it on a local variable and use this local variable as the source data for the DataGrid

To help you better visualize how each input will be shown in the final datagrid, you can see this table.

| Header Column Name  | Dynamic C1 | Dynamic C2   | Dynamic C3  |

| Header Colm Data 1     |       Value      |       Value       |       Value       |

| Header Colm Data 2     |       Value      |       Value       |       Value       |

| Header Colm Data 3     |       Value      |       Value       |       Value       |

Each Dynamic C is one of the unique values provided to the DynamicColumnName attribute from the structure below input.

Each Header Colm Data C is one of the unique values provided to the HeaderColumnData attribute from the structure below input.

Each Value is the CellValue from the pair HeaderColumnData x DynamicColumnName from the ArrangeData_ForDynamicColumns structure.

You should check the Demo app to see this component in action using data from the OutSystems Sample Data DB.

To use this component, you will need to.

1. Create a DataFetch Action
   1. Create an SQL Query to get your data to fill the DataGrid. As you can see in the demo, your query will need to be something similar to
      1. FROM {HeaderColumnDataEntity} FULL OUTER JOIN {DynamicColumnsEntity) ON 1=1 LEFT JOIN {CellValueDataEntity} GROUP BY {HeaderColumnDataEntity}, {DynamicColumnsEntity}
      2. The query has to be sorted by the value that will be the HeaderColumnData
   2. Send the output list of your SQL Query to the ArrangeData_ForDynamicColumns action, mapping which are the values that will become the header row, which will become the Dynamic columns, and what will be the CellValue for the HeaderRowDataXDynamicColumnName cell. Return the Json from the data fetch
   3. Query all unique HeaderColumnData values and return it on a text list
   4. Query all unique DynamicColumns names and return it on a text list
2. On the query's after fetch,
   1. Use the ParseJson_ToDynamicColumns action
      1. JsonData_Arranged = Json from data fetch
      2. ListOfDynamicColumns = Text List of all unique names that will become dynamic columns
      3. HeaderColumnData = Text List of all data for the header column
      4. HeaderColumnFinalName = Name to show on the column with all the HeaderColumnData at the end
      5. HeaderColumnFinalDataType = The data type of your header column data. String by default
      6. CellValueFinalDataType = The data type of your the data from the dynamic columns in your data grid. String by default
   2. Get the value returner by the action, save it on a local variable and use this local variable as the source data for the DataGrid

To help you better visualize how each input will be shown in the final datagrid, you can see this table.

| Header Column Name  | Dynamic C1 | Dynamic C2   | Dynamic C3  |

| Header Colm Data 1     |       Value      |       Value       |       Value       |

| Header Colm Data 2     |       Value      |       Value       |       Value       |

| Header Colm Data 3     |       Value      |       Value       |       Value       |

Each Dynamic C is one of the values from the ListOfDynamicColumns input.

Each Header Colm Data C is one of the values from the HeaderColumnData input.

Each Value is the CellValue from the pair HeaderColumnData x DynamicColumnName from the ArrangeData_ForDynamicColumns structure.