Search code examples
javascriptgoogle-datatable

Understanding Google DataTable prefixes


Google DataTable has this string as schema and data values:

{ 
cols: [{id: 'task',  label: 'Task',          type: 'string'}, 
      {id: 'hours', label: 'Hours per Day', type: 'number'}], 
rows: [{c:[{v: 'Work'},     {v: 11}]}, 
      {c:[{v: 'Eat'},      {v: 2}]}, 
      {c:[{v: 'Commute'},  {v: 2}]}, 
      {c:[{v: 'Watch TV'}, {v:2}]}, 
      {c:[{v: 'Sleep'},    {v:7, f:'7.000'}]} 
     ] 
} 

What is v, f, c?


Solution

  • The documentation, where, as it seems, you got the example from, links to a description of the structure:

    opt_data
    [Optional] Data used to initialize the table. This can either be the JSON returned by calling DataTable.toJSON() on a populated table, or a JavaScript object containing data used to initialize the table. The structure of the JavaScript literal object is described here. If this parameter is not supplied, a new, empty data table will be returned.

    Which leads to:

    rows Property

    The rows property holds an array of row objects.
    Each row object has one required property called c, which is an array of cells in that row. It also has an optional p property that defines a map of arbitrary custom values to assign to the whole row. If your visualization supports any row-level properties it will describe them; otherwise, this property will be ignored.

    Cell Objects

    Each cell in the table is described by an object with the following properties:

    • v [Optional] The cell value. The data type should match the column data type. If null, the whole object should be empty and have neither v nor f properties.
    • f [Optional] A string version of the v value, formatted for display. The values should match, so if you specify Date(2008, 0, 1) for v, you should specify "January 1, 2008" or some such string for this property. This value is not checked against the v value. The visualization will not use this value for calculation, only as a label for display. If omitted, a string version of v will be used.
    • p [Optional] An object that is a map of custom values applied to the cell. These values can be of any JavaScript type. If your visualization supports any cell-level properties, it will describe them; otherwise, this property will be ignored. Example: p:{style: 'border: 1px solid green;'}.