title: How to show row number as the first column?
body: <p>It's like this (but start from 1):</p>
  
  <p><a href="https://i.stack.imgur.com/sgXHs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sgXHs.png" alt="enter image description here"></a></p>
  
  <p>Please note the number is for the <strong>row element</strong> of grid instead of <strong>row data</strong> of the source. So the number shown in the first cell of each rows should indicate the position of the current row (which starts from 1 for the first row) regardless the row data and the sorting criteria.</p>
  
  <p>Update: The result is like this: <a href="https://jsfiddle.net/wp6o350z/" rel="noreferrer">https://jsfiddle.net/wp6o350z/</a></p>
  
  <pre><code>&lt;script src="https://unpkg.com/ag-grid/dist/ag-grid.min.noStyle.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css"&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/ag-grid/dist/styles/ag-theme-balham.css"&gt;
  
  &lt;div id="myGrid" style="height: 200px;width:500px;" class="ag-theme-balham"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript" charset="utf-8"&gt;
      // specify the columns
      var columnDefs = [
        {headerName: "#", field: "row", width: 30 },
        {headerName: "Make", field: "make", width: 100 },
        {headerName: "Model", field: "model", width: 100},
        {headerName: "Price", field: "price", width: 100}
      ];
  
      // specify the data
      var rowData = [
        {row: 1, make: "Toyota", model: "Celica", price: 35000},
        {row: 2, make: "Ford", model: "Mondeo", price: 32000},
        {row: 3, make: "Porsche", model: "Boxter", price: 72000},
        {row: 4, make: "Toyota", model: "Celica", price: 35000},
        {row: 5, make: "Ford", model: "Mondeo", price: 32000},
        {row: 6, make: "Porsche", model: "Boxter", price: 72000},
        {row: 7, make: "Toyota", model: "Celica", price: 35000},
        {row: 8, make: "Ford", model: "Mondeo", price: 32000},
        {row: 9, make: "Porsche", model: "Boxter", price: 72000}
      ];
  
      // let the grid know which columns and what data to use
      var gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
  
      };
  
    // lookup the container we want the Grid to use
    var eGridDiv = document.querySelector('#myGrid');
  
    // create the grid passing in the div to use together with the columns &amp; data we want to use
    new agGrid.Grid(eGridDiv, gridOptions);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The problems in this sample are: </p>
  
  <ol>
  <li>The row number is defined in the data, which is not supported in real case. Maintaining a row is difficult and slow since inserting from the beginning will  need to update many rows.</li>
  <li>Since the row number is defined in the data, after sorting you won't see the row number is randomized. I still want to see the row number start from 1 from the beginning.</li>
  </ol>
  
  <p>Basically it's easier to be part of the grid feature, and many other grids (not limited to JS grids) support this. I'm wondering if it's easy to do it in with ag-grid.</p>