ParamQuery Grid is capable of displaying practically unlimited columns, thanks to virtual rendering for columns or x axis.
In this example the grid displays 10,000 columns without a fuss.


 
 
Test col 0
Test col 3
Test col 6
Test col 9
SubCol 0
SubCol 1
SubCol 2
SubCol 3
SubCol 4
SubCol 5
SubCol 6
SubCol 7
SubCol 8
SubCol 9
SubCol 10
 
 
 
 
 
 
 
 
 
 
 
 
16776396873206042556355718572958275667056888
282652035487345804694356391471547724072296073
31752354163933688780179239282655683545374358
41914210647407676656347371931698146117483226
54327336019639780605173548018559285792786352
65834677685961561474332186730744397871522879
71497142456421211422111464993400171632933092
8312819541004710244229052040929602153425954
93641407049807164917451570286322697977494
10543572858659975787411830264305128171131902
11118517872551341946255093583054226218233303
12100147114665647907855435286220990225264215
133542501266909553105428258543527538724489435
146557411927796807332229524495561677593759001
1592067886296437267845556587254505646847629255
1633097909384284719043946609978878686616152
Loading...

66
 
1
​
2
​
3
    $(function () {
4
        var rowsNum = 100,
5
            colsNum = 10002,
6
            data = [];
7
​
8
        for (var i = 0; i < rowsNum; i++) {
9
            var row = [];
10
            for (var j = 0; j < colsNum; j++) {
11
                row[j] = Math.round(Math.random() * 10000);
12
            }
13
​
14
            data[i] = row;
15
        }
16
​
17
        // header
18
        var colModel = [],
19
            headerCol = {};
20
        for (var i = 0, j = 0; j < colsNum; i++, j++) {
21
            headerCol = {
22
                title: "Test col " + j,
23
                //width: 240,
24
                align: "center"
25
            }
26
            headerCol['colModel'] = [{
27
                title: "SubCol " + j++,
28
                width: 120,
29
                align: "center"
30
            }, {
31
                title: "SubCol " + j++,
32
                width: 120,
33
                align: "center"
34
            }, {
35
                title: "SubCol " + j,
36
                width: 120,
37
                //minWidth: 120,
38
                align: "center"
39
            }];
40
            colModel[i] = headerCol;
41
        }
42
​
43
        //colModel[0].colModel[1].hidden = true;
44
        //colModel[2].colModel[0].hidden = true;
45
​
46
        var obj = {            
47
            hoverMode: 'cell',
48
            selectionModel: {
49
                type: 'cell'
50
            },
51
            minWidth: 400,
52
            numberCell: {
53
                width: 40
54
            },
55
            editable: false,
56
            resizable: true,
57
            virtualX: true,
58
            virtualY: true,
59
            hwrap: false,
60
            colModel: colModel,
61
            dataModel: { data: data }
62
        };
63
​
64
        var $grid = $("#grid_infinite").pqGrid(obj);
65
    });
66
​