3

I am having a hard time setting up an ag-grid table in an Angular 6.0 application where the row data model is a an array of simple types (dates, numbers, strings, etc.)

The only way I can do so is to wrap the all the data into an object list (each object containing a single property) and pass it as the row data. It also means that I have to manually and systematically have to unwrap the data whenever I need to access it.

To put it differently, is there a way to define a columnDef without a field in ag-grid table and having it consider implicitly that the field data is the entire row data? 

var gridOptions = {
    columnDefs: [
        {headerName: 'Athlete'}
    ],
    rowData: ['John', 'Oliver']
}
jpadre
  • 31
  • 4
  • If your data is that much simple why use a third party library? just use a html table or ul/li with proper css. – Malindu Sandaruwan Aug 09 '18 at 05:43
  • 1
    I am also interested in the rendering/sorting/editing functionalities of ag-grid, so plain html is not enough in my case. Even it were read-only, I prefer to have one consistent table look and feel for a whole angular application, as I am using ag-grid in the more standard and complex ways. – jpadre Aug 09 '18 at 07:51

2 Answers2

2

I think field is required but colId is not required (it will default to the field). Field is what maps a column to the data set. Here are more details about column definitions.

It may be easier to edit your data before initializing the grid. Something like this may work:

var data = ['John', 'Oliver'].map(name => {return {name} });
var gridOptions = {
    columnDefs: [
        {field:'name', headerName: 'Athlete'}
    ],
    rowData: data
}
Dan Obregon
  • 941
  • 9
  • 22
1

You can config your columnDefs

var gridOptions = {
    columnDefs: [
        {
            headerName: 'Athlete',
            valueGetter: (node) => node.data
        }
    ],
    rowData: ['John', 'Oliver']
}
Max Ivanov
  • 133
  • 1
  • 9