The datagrid component

• Introduction
• Example
• Properties
• Methods
• Events
• Searching the datagrid
• Editing the datagrid
• Customising the datagrid with CSS
• Integrating the datagrid with forms
• Column ranges in properties
• Frequently asked questions

Introduction

The datagrid component is new to RGraph in version 6.21 and is an easy way to show data to your users. It's very customisable with standard CSS and extensible with a whole host of events and API calls that are available. It can be quickly integrated into your pages and forms so it allows you to quickly and easily build your website and standardise the look of data tables across all of your pages.

Watch the video overview of the datagrid:

`

Example

Here's a basic example of the datagrid with resizable columns, paging and a search function which can be sorted by clicking on the column headers. There's a button underneath the datagrid which resets the column widths back to the default by using an api call.

<script src="RGraph.common.core.js" ></script>
<script src="RGraph.datagrid.js" ></script>

<div style="width: 75%;margin-left: auto; margin-right: auto">
    <div id="myGrid"></div>
    <button onclick="myGrid.resetColumnWidths()" style="cursor: pointer; font-size: 20pt">Reset column sizes</button></button>
</div>

<script>
    data = [
        ['2001-01-02', 'Richard', 'Monday',       124],
        ['2004-10-11', 'Jane',    'Tuesday',      152],
        ['2003-02-28', 'Lucy',    'Wednesday',    98],
        ['2003-03-29', 'Jerry',   'Thursday',     95],
        ['2009-08-25', 'Alex',    'Friday',       103],
        ['2003-08-26', 'Freddy',  'Saturday',     311],
        ['2012-03-26', 'Kev',     'Monday',       112],
        ['2005-05-26', 'Mo',      'Thursday',     321],
        ['2007-01-26', 'Joe',     'Tuesday',      477],
        ['2006-05-26', 'Neil',    'Sunday',       233],
        ['2009-07-26', 'Bill',    'Monday',       633],
        ['2003-09-26', 'Hoolio',  'Wednesday',    122],
        ['2012-02-26', 'Vera',    'Friday',       466],
        ['2011-06-26', 'Luis',   'Tuesday',       355],
        ['2001-04-26', 'Fay',    'Thursday',      255],
        ['2000-02-26', 'Doug',   'Monday',        844],
        ['2015-03-26', 'Mo',     'Friday',        433],
        ['2010-06-26', 'Ben',    'Sunday',        748],
        ['2013-05-26', 'Kevin',  'Monday',        354],
        ['2010-02-26', 'Chloe',  'Thursday',      956],
        ['2008-08-26', 'Sammy',  'Sunday',        445],
        ['2006-11-26', 'Flo',    'Wednesday',     122],
        ['2003-06-26', 'Gill',   'Friday',        656],
        ['2004-12-26', 'Zak',    'Saturday',      321],
        ['2006-03-13', 'Peter',  'Tuesday',       56]
    ];
    
    myGrid = new RGraph.Datagrid({
        id: 'myGrid',
        data: data,
        options: {
            pagingPerPage: 10,
            columnsHeaders: ['Date','Name','Day of week','Amount'],
            columnsFooters: ['','',''],
            columnsResizable: true,
            columnsResizablePersistent: true,
            columnsUnitsPre: ['','','','&amp;pound;'],
            columnsHTML: 3,
            columnsFormatted: [0,3],
            columnsFormatter:[function (opt)
            {
                return RGraph.PHP.date('jS F Y', RGraph.parseDate(opt.value, 's'));
            }],
            search: true,
            style: [
                'table tbody tr td:nth-child(4) {font-weight: bold;}'
            ]
        }
    }).draw();
</script>

Properties

You can use these properties to control how the datagrid appears. You can set them by including them in the options section of the configuration as shown above.

• Row properties
• Column properties
• Sorting properties
• Search properties
• Paging properties
• Editable properties
• Miscellaneous properties

var meta = RGraph.Registry.get('row-click-meta');

var meta = RGraph.Registry.get('cell-click-meta');

columnsHTML: '2-4',
columnsFormatted: '2-4',

columnsFormatter: function (opt)
{
    console.log(opt);
    return opt.number;
},

var f1 = function (opt)
{
   // This is the formatter function for the THIRD column
    console.log(opt);
    return opt.number;
};

var f2 = function (opt)
{
   // This is the formatter function for the SIXTH column
    console.log(opt);
    return opt.number;
};
//...

columnsFormatter: [,,f1,,,f2]

columnsFormatter: [function (opt)
{
   // opt.object - The datagrid object
   // opt.value  - The value in the cell
   // opt.column - The index of the column
   // opt.row    - The index of the row

   // REMEMBER: The RGraph.parseDate function returns a timestamp
   // in milliseconds by default, so you must specify the second
   // argument to get a value in seconds which you can then pass
   // to the RGraph.PHP.date function.
    var timestamp = RGraph.parseDate(opt.value,'s');
    
   // The desired format: 23:03 March 5th 2006
    return RGraph.PHP.date('H:i F jS Y', timestamp);
}]

columnsFormatter: [function (opt)
{
   // opt.object - The datagrid object
   // opt.value  - The value in the cell
   // opt.column - The index of the column
   // opt.row    - The index of the row

    return moment(opt.value).format("HH:MM MMMM Do YYYY");
}]

23:03 March 5th 2006

// An example of a custom sort function which sorts
// the rows by the last character in the cell.
// Because an array encapsulates the function -
// this function will only be used for the first
// column. Normal sorting is used for the other
// columns.
// 
// @param object obj       The chart object
// @param number column    A number representing the column index
//                         (starts at zero).
// @param number direction The direction to be sorted in. 1
//                         means ascending and -1 means
//                         descending.
// @param mixed  a         The first value to compare.
// @param mixed  b         The second value to compare.
sortableCompare: [function (obj, column, direction, a, b)
{
    a = a.substr(-1).charCodeAt(0);
    b = b.substr(-1).charCodeAt(0);

    return direction > 0 ? a - b : b - a;
}]

events: {
   // This event fires just before the new data is to be saved.
   // You can use the event to check the data and reject it if
   // necessary. To reject the edit, you can set the
   // meta.cancelEdit property (as shown below) and
   // the edit will not be saved.
   // 
   // If you do this you'll probably want to also show a message
   // to the user telling them why their edit was rejected - you
   // can do this with a simple JavaScript alert() dialog or
   // perhaps with the ModalDialog that's bundled with RGraph.
   // The demos/datagrid-editable.html demo shows an example
   // of using the ModalDialog to tell the user their edit was
   // rejected.
    beforeeditsave: function (obj, meta)
    {
       // Verify the new data if necessary and either accept it
       // (do nothing) or set the meta.cancelEdit property to
       // reject it.
       // 
       // meta.cancelEdit = true;
    },
    
   // This event fires at the end of the edit when the new
   // data has been saved.
    editcomplete: function (obj, meta)
    {
        var data = obj.getData();
        
        console.log(data[meta.row]);
    }
}

style: [
    'table thead tr th:nth-child(2) {font-weight: bold; color: red;background-color: #ddd;}',
    'table tbody tr td:nth-child(2) {font-weight: bold; color: red;background-color: #ddd;}'
]

style: [
    'div#myGrid table thead th:nth-child(2) {font-weight: bold; color: red;background-color: #ddd;}',
    'div#myGrid table tbody td:nth-child(2) {font-weight: bold; color: red;background-color: #ddd;}'
]

Methods

You can use these functions to do various things, allowing you to control and manipulate the datagrid.

obj.find('Jerry');             // Find the first instance of the word Jerry
obj.find('Jerry', {all: true});// Find all instances of the word Jerry
obj.find(/^jer/i);             // Regular expression find
obj.find(/^jer/i, {all: true});// Use a Regular expression and find all of the matches

.on('draw', function (obj)
{
   // Put your code here. Depending on the event, you can sometimes
   // get metadata passed as the second argument to the function
   // (or you can also get it from from the RGraph registry).
   // See the list of event types below for more detail.
});

Events

These events are available to help you to integrate the datagrid into your website. You can add them to your datagrid by using the events property just like other RGraph objects, as shown below. Some of the events are passed metadata as the second argument that you can use to determine how to act in the event listener. The events that support this are noted below.

<script>
    new RGraph.Datagrid({
        id: 'myGrid',
        data: [
            ['15th March 2006',    'Jane',   19],
            ['8th August 2006',    'Freddy', 23],
            ['21st September 2006','Rod',    41],
            ['5th December 2006',  'Peter',  12],
            ['21st February 2007', 'Gary',   24],
            ['24th March 2007',    'Jamie',  37]
        ],
        options: {
            columnsHeaders: ['Date','Competitor','Score'],
            
            events: {
                draw:       function (obj) {alert('The datagrid was drawn!');},
                rowclick:   function (obj, meta) {alert('A row was clicked!');},
                cellclick:  function (obj, meta) {alert('A cell was clicked!');}
            }
        }
    }).draw();
</script>

events: {
    rowclick: function (obj, meta)
    {    
        var object  = meta.object;  // The RGraph object
        var event   = meta.event;   // The standard event object
        var data    = meta.data;    // All of the values in the row
        var element = meta.element; // THe HTML <tr> element
        var html    = meta.html;    // The innerHTML of the row
        var row     = meta.row;     // The index of the row
        var id      = meta.user_id; // The user ID which you can assign to the row with
                                    // the rowsIDs property
    }

events: {
    cellclick: function (obj, meta)
    {    
        var object  = meta.object;  // The RGraph object
        var event   = meta.event;   // The standard event object
        var data    = meta.data;    // The row of data
        var element = meta.element; // THe HTML <td>element
        var html    = meta.html;    // The innerHTML of the cell
        var row     = meta.row;     // The index of the row
        var column  = meta.column;  // The index of the column
        var value   = meta.value;   // The value of the cell
        var user_id = meta.user_id; // The user ID which you can assign to the row with
                                    // the rowsIDs property
    }
}

events: {
    beforeedit: function (obj, meta)
    {
        var object  = meta.object; // The RGraph object
        var value   = meta.value;  // The value of the cell
        var cell    = meta.cell;   // The HTML  cell
        var row     = meta.row;    // The index of the row
        var column  = meta.column; // The index of the column
        var user_id = meta.user_id;// The ID of the row if one has been assigned
                                   // with the rowsIDs property.
    }
}

  
events: {
    beforeeditsave: function (obj, meta)
    {
        var object   = meta.object;        // The RGraph object
        var original = meta.original_value;// The original value of the cell
        var value    = meta.value;         // The value of the cell that's about to be saved
        var cell     = meta.cell;          // The HTML  cell
        var row      = meta.row;           // The index of the row
        var column   = meta.column;        // The index of the column
        var user_id  = meta.user_id;       // The ID of the row if one has been assigned
                                           // with the rowsIDs property.

       // Set this to true if you want to cancel/reject the edit
       // meta.cancelEdit = true;
    }
}

events: {
    aftereditsave: function (obj, meta)
    {
        var object   = meta.object;        // The RGraph object
        var original = meta.original_value;// The original value of the cell
        var value    = meta.value;         // The new value of the cell
        var cell     = meta.cell;          // The HTML  cell
        var row      = meta.row;           // The index of the row
        var column   = meta.column;        // The index of the column
        var user_id  = meta.user_id;       // The ID of the row if one has been assigned
                                           // with the rowsIDs property.
    }
}

events: {
    editcomplete: function (obj, meta)
    {
        var object   = meta.object;        // The RGraph object
        var value    = meta.value;         // The new value of the cell
        var original = meta.original_value;// The original value of the cell
        var cell     = meta.cell;          // The HTML  cell
        var row      = meta.row;           // The index of the row
        var column   = meta.column;        // The index of the column
        var user_id  = meta.user_id;       // The ID of the row if one has been assigned
                                           // with the rowsIDs property.
    }
}

events: {
    editcancelled: function (obj, meta)
    {    
        var object  = meta.object;  // The RGraph object
        var value   = meta.value;   // The original value of the cell that was being edited
        var cell    = meta.cell;    // The HTML  cell
        var row     = meta.row;     // The index of the row
        var column  = meta.column;  // The index of the column
        var user_id = meta.user_id; // The ID of the row if one has been assigned
                                    // with the rowsIDs property.
    }
}

Searching the datagrid

If you enable the search feature, you'll be able to search the contents of the datagrid. There will be a search input above the datagrid into which you can enter one or more terms that you wish to search for. You can then press enter and the results that you see will be filtered to those that contain the search term.

There are two main styles of search:

1. The first is a plain text search. You can enter a search like this: ora Or you can use multiple words like this: jul ora It's case-insensitive, so you can enter uppercase or lowercase letters and it won't matter. You can enter multiple words to narrow down the search and the only rows that are displayed will be those that contain all of the words. You can also use basic wildcards as part of your word(s)and these are:
   • * (asterisk) Use this to represent any number of characters.
   • ? (question mark) Use this to represent a single character.
2. The second type of search is an advanced regular expression search. The syntax of a regular expression search is important so this may only be useful if you already know how to use regular expressions. The style of the regular expression is the same as normal javascript, though the only modifier that's supported is the i (case-insensitivity) modifier. Otherwise, the regular expression can be just like a normal javascript regular expression. You can mix and match regular expressions with normal words. You can learn more about regular expressions at the Mozilla Developer Network page.

Some examples of searches include:

• jul single word
• jul oran multiple words
• jer?y using a wildcard (the wildcard represents a single character)
• j*y using a wildcard (the wildcard represents multiple characters)
• ra /J.*/ a basic word combined with a regular expression
• /J.*/ regular expression
• /Je/ regular expression
• /JE/i case-insensitive regular expression

Editing the datagrid

You can set the datagrid values to be editable if you wish by setting the editable property to true This gives you a good quality interface to show data from your database and let your users edit it (either all of the columns it or just certain columns).

There are events available that help with this and these are:

• beforeedit
• beforeeditsave
• aftereditsave
• editcomplete

These events are documented above in the events section but the most useful is the beforeeditsave event. This allows you to verify the data as you wish and optionally set the meta.cancelEdit property to reject the edit. If you don't set this property the edit will be accepted.

Customising the datagrid with CSS

At its most basic level, the datagrid is an HTML table utilising standard tags. You can see the structure in the FAQ question below. This means that you can use standard CSS selectors to change the way that things look to the user. For example:

<style>
    /*
    * Remember that you may need to use the !important modifier
    * if you're overriding the default styles.
    */
    div#myGrid table tbody tr.rgraph-datagrid-row-hover {
        background-color: #00f1;
    }




    /*
    * If you have two (or more) datagrids on a page, you can also do
    * this to provide the row highlighting for both of them in one
    * go.
    */
    div:is(#myGrid, #myGrid2) table tbody tr.rgraph-datagrid-row-hover {
        background-color: #00f1 !important;
    }
</style>

Or if you want to highlight a particular row, you can make use of the CSS nth-child pseudo-selector like this:

<style>
    /* Highlight the third row (in CSS the counting begins at 1) */
    table tbody tr:nth-child(3) {
        background-color: yellow ;
    }
</style>

Using the style property to set CSS

As well as setting your CSS the normal way - using style HTML tags - you can also use the style property of the datagrid. Here's an example:

<script>
    new RGraph.Datagrid({
        id: 'myGrid',
        data: [
            [324, 'Richard', 'Web developer'],
            [435, 'Dave', 'Customer Services'],
            [112, 'Charles', 'Manager'],
            [698, 'Freddy', 'Driver'],
        ],
        options: {
            style: [
                'table tbody tr:nth-child(2) td:nth-child(2):hover div {color: red; font-weight: bold;}'
            ]
        }
    }).draw();
</script>

The rule is made a little bit more specific at runtime, specific to a single datagrid, by adding the ID of the div tag to it. So the above rule is actually transformed into the following:

<script>
    new RGraph.Datagrid({
        id: 'myGrid',
        data: [
            [324, 'Richard', 'Web developer'],
            [435, 'Dave', 'Customer Services'],
            [112, 'Charles', 'Manager'],
            [698, 'Freddy', 'Driver'],
        ],
        options: {
            style: [
                'div#myGrid table tbody tr:nth-child(2) td:nth-child(2):hover div {color: red; font-weight: bold;}'
            ]
        }
    }).draw();
</script>

Integrating the datagrid with forms

Integrating the datagrid with a form on your webpage can make it very useful when presenting the user with a choice and getting an answer from them. Consider the following example:

This is the HTML code for this datagrid. Notice that it sits within a form tag and there's a submit button just below where the datagrid will be rendered.

<form action="datagrid.html" method="post">
    <div style="margin-left: auto; margin-right: auto; width: 600px">
        <div style="width: 600px" id="myGrid"></div>
        <input type="submit" name="submit" value="Update" style="font-size: 20pt; cursor: pointer"/>
    </div>
</form>

And here's the code for the datagrid. Notice that the columnsHTML option has been given and is set to an array that contains just one number - 0 This means that the first column (the numbering begins at zero) is allowed to have HTML in it. So a checkbox will be shown and not the HTML tag for the checkbox.

<script>
    data = [
        ['<input type="checkbox" name="players[]" value="15" style="transform: scale(1.5)" />', 'Mary','1st October 1985','Winner by default'],
        ['<input type="checkbox" name="players[]" value="2" style="transform: scale(1.5)" />', 'Freddy','27th July 1980','3rd place - runner up'],
        ['<input type="checkbox" name="players[]" value="43" style="transform: scale(1.5)" />', 'Jamie','6th March 1967','2nd place - finalist'],
        ['<input type="checkbox" name="players[]" value="21" style="transform: scale(1.5)" />', 'Gary','7th April 1982','1st place - winner'],
    ];
    myGrid = new RGraph.Datagrid({
        id: 'myGrid',
        data: data,
        options: {
            columnsHeaders: ['', 'Person','Date of event','Final position'],
            columnsHTML: [0],
            columnsWidths: [30],
            sortable: false,
            rowsClickCheckbox: true
        }
    }).draw();
</script>

But what if you didn't want the first column to have the same styling as the rest of the table? Well, you could do that with a snippet of CSS, utilising the nth-child pseudo-selector and moving the submit button to the right a small amount accordingly, so that it lines up with, what is now, the main table. Here's the updated example along with the necessary CSS code:

The necessary CSS markup:

<style>
    div#myGrid-container input[type=submit]{
        margin-left: 30px;
    }

    div#myGrid input[type=checkbox] {
        cursor: pointer;
    }
    
    div#myGrid table thead tr th:nth-child(1n+2) {
        background-color: black;
        color: white !important;
    }
    
    div#myGrid table thead tr th:nth-child(1),
    div#myGrid table tbody tr td:nth-child(1) {
        background-color: white;
    }
    
    div#myGrid table thead tr th:nth-child(1) div {
        border: none;
    }
</style>

The HTML markup and the javascript code is the same as the example above - so you can use that.

Adding a "select all" button to your datagrid

If you're adding checkboxes to your datagrid, then one thing that you may want is an easy way for your users to check all of those checkboxes at once. This is quite easy and just requires a little javascript function like this:

<script>
    //
    // A function that facilitates the easy selection of all of
    // the checkboxes on the datagrid in one go.
    //
    function selectAll ()
    {
        // Use the standard DOM function to get references to all
        // of the checkboxes within the datagrid.
        var checkboxes = document.querySelectorAll('div#myGrid input[type=checkbox]');
        
        // Loop through the checkboxes setting the checked state
        // to the inverse of the window.allCheckboxesCheckedState
        // variable.
        checkboxes.forEach((value,key,array) =>
        {
            value.checked = !window.allCheckboxesCheckedState;
        });
        
        // Reverse the state of the window.allCheckboxesCheckedState
        // variable.
        window.allCheckboxesCheckedState = !window.allCheckboxesCheckedState;
    }
</script>

<button onclick="selectAll()">Select all</button>

Column ranges in properties

Column ranges are used with several properties to allow you to specify a range of column indexes. The properties that accept column ranges are:

• columnsHTML
• columnsFormatted
• columnsResizableHandles
• sortableColumns
• editableColumns
• searchExclude

And you can specify any of the following:

• A simple number

  searchExclude: 4

• A simple number (as a string)

  searchExclude: '4'

• A comma-separated range of numbers

  searchExclude: '2,3,4'

• An array of numbers

  searchExclude: [2,3,4]

• A range of column indexes (inclusive)

  searchExclude: '2-4'

• A range of column indexes with no lower limit

  searchExclude: '-4'

• A range of column indexes with no upper limit

  searchExclude: '2-'

• A comma-separated combination of any of the above

  searchExclude: '2,3,4-6'

For example:

columnsHTML: '4',
columnsFormatted: '2,3,4',
columnsResizableHandles: 1,
sortableColumns: '2-',
editableColumns: '-4',
searchExclude: '2,3,5-7,9-'

Frequently asked questions

• What is the structure of the resulting table?
• How do I make the rows highlighted when they're hovered over?
• How can I add scrolling to my datagrid?
• How do I hide my ID column?

What is the structure of the resulting table?

The RGraph datagrid produces a standard HTML table element with the following structure:

<div id="myGrid">
    
    <!-- Search container -->
    <div class="rgraph-datagrid-search-container"></div>
    
    <!-- Paging links container -->
    <div class="rgraph-datagrid-paging-links"></div>

    <table class="rgraph-datagrid">
        
        <!-- Column headers -->
        <thead>
            <tr>
                <th><div class="rgraph-datagrid-cell-content">Name</div></th>
                <th><div class="rgraph-datagrid-cell-content">Day</div></th>
                <th><div class="rgraph-datagrid-cell-content">Amount</div></th>
            </tr>
        </thead>
        
        <!-- Data rows -->
        <tbody>
        
            <!-- First row -->
            <tr>
                <td><div class="rgraph-datagrid-cell-content">Richard</div></td>
                <td><div class="rgraph-datagrid-cell-content">Monday</div></td>
                <td><div class="rgraph-datagrid-cell-content">23</div></td>
            </tr>

            <!-- Second row -->
            <tr>
                <td><div class="rgraph-datagrid-cell-content">David</div></td>
                <td><div class="rgraph-datagrid-cell-content">Tuesday</div></td>
                <td><div class="rgraph-datagrid-cell-content">46</div></td>
            </tr>
        </tbody>
        
        <!-- Column footers -->
        <tfoot>
            <tr>
                <td><div class="rgraph-datagrid-cell-content"></div></td>
                <td><div class="rgraph-datagrid-cell-content"></div></td>
                <td><div class="rgraph-datagrid-cell-content"></div></td>
            </tr>
        </tfoot>
    </table>
</div>

How do I make the rows highlighted when they're hovered over?

You can do this by adding a small bit of CSS to your page. To be specific to a single datagrid, you could add this:

<style>
    /*
    *  Add row highlighting to a single datagrid.
    */
    div#myGrid table tbody tr.rgraph-datagrid-row-hover {
        background-color: #00f1; // You may also need to add the !important modifier
                                 // if your selector is not specific enough.
    }
</style>

Or to add row highlighting to all of the datagrid instances on the page you can use a CSS selector that's a broader match like this:

<style>
    /*
    * Add row highlighting to all of the datagrids on the page.
    * You may need to use the !important modifier here too.
    */
    .rgraph-datagrid-row-hover {
        background-color: #00f1 !important;
    }
</style>

Instead of embedding the style in your page, you can utilise the style property for this to make it easy and that would look like this (this would be specific to the datagrid of course):

<script>
    new RGraph.Datagrid({
        id: 'myGrid',
        data: [
            [324, 'Richard', 'Web developer'],
            [435, 'Dave', 'Customer Services'],
            [112, 'Charles', 'Manager'],
            [698, 'Freddy', 'Driver'],
        ],
        options: {
            style: [
                'table tbody tr.rgraph-datagrid-row-hover {background-color: #00f1;}'
            ]
        }
    }).draw();
</script>

How can I add scrolling to my datagrid?

If you have a lot of data that you want to show in the datagrid but don't want it to take up a large amount of vertical space, then there is something that you can do and that's to add scrolling to the datagrid body. This is demonstrated by the datagrid that's shown above and you can also see a demo in the download archive. It's done by adding a small amount of CSS to your page and that is as follows:

<style>
    div#myGrid table {
        display: block;
    }

    div#myGrid table tbody {
        max-height: 150px;
        overflow-x:hidden;
        overflow-y:auto;
        display: block;
        width: 100%;
    }
</style>

Or using the style configuration property you could do this:

<script>
    data = [
        ['Richard','Oranges',  124],
        ['Jane',  'Apples',    152],
        ['Lucy',  'Grapes',    98],
        ['Jerry', 'Gooseberry',95],
        ['Alex',  'Mango',     103],
        ['Freddy','Apple',     111],
        ['Peter', 'Orange',    56],
        ['Jim',   'Pear',      16],
        ['James', 'Apple',     43],
        ['Doug',  'Blueberry', 84],
        ['Carl',  'Peach',     126],
        ['Dave',  'Kiwi',      13],
        ['Peter', 'Almonds',   84]
    ];

    myGrid = new RGraph.Datagrid({
        id: 'myGrid',
        data: data,
        options: {
            columnsHeaders: ['Name','Fruit','Amount (Kg)'],
            style: [
                'table {display: block;}',
                'table tbody {max-height: 150px;overflow-x:hidden;overflow-y:auto;display: block;width: 100%;}',
                'table tbody tr.rgraph-datagrid-row-hover {background-color: #00f1;}'
            ]
        }
    }).draw();
</script>

How do I hide the ID column on my grid?

What if you have a set of data and the first column is an ID that perhaps is coming from your database? Maybe it's just not practical to not select that column in the first place but you don't want that information displayed to the user. Well, instead of messing with the data you can just hide that column with a little CSS. Here's the datagrid before the CSS has been applied with the ID column still visible.

And here's the CSS that hides the first column. It also centers the datagrid in its container (there's a tiny bit of space left on either side and this is because of the now missing column).

<style>
    div#myGrid table {
        margin-left: auto;
        margin-right: auto;
    }

    div#myGrid table tr :where(th, td):nth-child(1) {
        display: none;
    }
</style>

And here's the resulting datagrid, which now has the first column hidden.

<script>
    myGrid6 = new RGraph.Datagrid({
        id: 'myGrid6',
        data: [
            [435, 'Richard','Web developer',25000],
            [884, 'Jane', 'Customer Service Operative',18000],
            [463,'Martha','Sales executive',23000],
            [135,'Janet','Office admin',21000]
        ],
        options: {
            columnsHeaders: ['','Name','Occupation','Salary'],
            
            // Reduce the size of the first column
            columnsWidths: [5],
            
            style: [
                // Center the datagrid in its div
                'table {margin-left: auto;margin-right: auto;}',
                
                // Hide the first column (which has the ID numbers in)
                'table :where(tbody, thead) tr :where(td, th):nth-child(1) {display: none;}',
                
                'table thead tr th div {background-color: black; color: white;}',
                'table thead tr th span {color: white;}'
            ]
        }
    }).draw();
</script>

You can of course just alter your data before you pass it to the datagrid if you prefer and that would look like this:

// The original data array
myData = [
    [48645, 'Richard', 'Web developer'],
    [88432, 'Alex', 'Web developer'],
    [35684, 'Nick','CTO'],
    [94325,'Kjell','Product manager'],
    [44351, 'Scott','Product manager'],
    [94643,'Doug','CEO'],
];

// Run the .slice() function on each entry in myArray and return
// the new array.
myData1 = myData.map(row => row.slice(1));

console.log(myData1);

// myData1 = [
//     ['Richard','Web developer'],
//     ['Alex',   'Web developer'],
//     ['Nick',   'CTO'],
//     ['Kjell',  'Product manager'],
//     ['Scott',  'Product manager'],
//     ['Doug',   'CEO'],
// ];