Grids show a store's data as a table of rows and columns.

<pre style="font-size: 14pt;color:gray;">
items: [{
    module: Table,
    store: {
        module: Store,
        model: {
            fields: [{ name: <span style="color:blue;">'name'</span> }, { name: <span style="color:blue;">'hp'</span> }, { name: <span style="color:blue;">'attack'</span> }, { name: <span style="color:blue;">'defense'</span> }]
        },
        data: [
            { <span style="color:blue;">"name"</span>: "Bulbasaur" , "pokedex": 1 , <span style="color:blue;">"hp"</span>: 45 , <span style="color:blue;">"defense"</span>: 49 , <span style="color:blue;">"attack"</span>: 49 , <span style="color:blue;">"speed"</span>: 45 },
            { <span style="color:blue;">"name"</span>: "Ivysaur"   , "pokedex": 2 , <span style="color:blue;">"hp"</span>: 60 , <span style="color:blue;">"defense"</span>: 63 , <span style="color:blue;">"attack"</span>: 62 , <span style="color:blue;">"speed"</span>: 60 },
            { <span style="color:blue;">"name"</span>: "Venusaur"  , "pokedex": 3 , <span style="color:blue;">"hp"</span>: 80 , <span style="color:blue;">"defense"</span>: 83 , <span style="color:blue;">"attack"</span>: 82 , <span style="color:blue;">"speed"</span>: 80 },
        ]
    },
    columns: [
        { dataField: <span style="color:blue;">'name'</span>   , text: 'Name' },
        { dataField: <span style="color:blue;">'hp'</span>     , text: 'HP' },
        { dataField: <span style="color:blue;">'attack'</span> , text: 'Attack' },
        { dataField: <span style="color:blue;">'defense'</span>, text: 'Defense' },
    ],
}]
</pre>