The new RGraph DataGrid

Here's a demonstration of the new DataGrid that's coming in RGraph version 6.21 that I previously mentioned. You can click on the columns to sort the table by that column (if enabled) and the columns are resizable by grabbing in between the columns in the header row. You can also edit the column if you want to by double-clicking on the cell.

There's more work on it to be done, but I think that you'll agree that it's already looking and functioning rather nicely. By using this datagrid on your page along with the RGraph charts and a smattering of ajax you could make yourself quite a nice little client-side application that saves its data to your server.

If you look at the source code of this page you'll see that the datagrid library is inlined which is obviously not great for code reuse and you wouldn't do that normally. You would just use the library as you do other RGraph libraries. Here's a full code example that produces the table shown here:

<div style="margin-left: auto; margin-right: auto; width: 75%" id="myDatagrid"></div>

<script>
    data = [
        ['Bill','Orange',7.3,'Oranges are not the only fruit', 9],
        ['Richard','Apple',9,'Green', 9],
        ['John','Cherry',5,'Red', 10],
        ['Fred','Mango',3.8,'Yellow',6],
        ['Lucy','Pineapple',7000.7,'Yellow',4000]
    ];
        
    new RGraph.DataGrid({
        id: 'myDatagrid',
        data: data,
        options: {
            columnsHeaders: ['Operator','Fruit','Weight','Color','Price'],
            //columnsFooters: ['','','','',''],
            columnsUnitsPre: [,,,,'$'],
            columnsUnitsPost: [,,'kg'],
            //columnsThousand: [],
            //columnsPoint: [],
            columnsDecimals: [,,1,,2],
            //columnsFormatter:[],
            //columnsClick: [],
            sortable: true,
            sortableColumns: [4,2],
            editable: true,
            resizable: true
        }
    }).draw();
</script>