Display a list of map in an apex:datatable with map key as column header and map values as row values

Question

I have a list of map List<Map<String,Object>> and each map in list has the same keys.
I want to show these data in an apex:datatable with the map keys as Column header and each value corresponding to the key as row values.

Note that i dont want to use <table> and <apex:repeat> for this because of some responsive style issues.

I have created the apex:datatable but the column heading is not displaying
Here is my code

          <apex:dataTable value="{!myMapList}" var="data" >

                 <apex:repeat value="{!data}" var="result"> 
                      <apex:column >
                       <apex:facet name="header">{!result}</apex:facet>
                       {!data[result]}  
                      </apex:column>                        
                 </apex:repeat>
              </apex:dataTable>  

Answer 1

Create a list with the key values of the map in your controller:

List<String> ketValues = yourMap.keySet();

After that, use that list in the repeat code in your visualforce code:

<apex:repeat value="{!ketValues }" var="key">
    <apex:column headerValue="{!key}">
        <apex:outputText value="{!yourMap[key]}"/>
    </apex:column>
</apex:repeat>