feat(oui-datagrid): permit to access row index (#296)

Author: marie-j

packages/oui-datagrid/README.md

@@ -294,6 +294,26 @@ Or you can use the `page-size` property. It takes precedence over value configur
 </oui-datagrid>
 ```
 
+### Access row index 
+
+```html:preview
+<oui-datagrid rows="$ctrl.data" page-size="5">
+  <oui-column title="'Index'">
+    {{$rowIndex}}
+  </oui-column>
+  <oui-column title="'Name'">
+    {{$row.firstName}} {{$row.lastName}}
+  </oui-column>
+  <oui-column property="email">
+    <a href="mailto:{{$value}}">{{$value}}</a>
+  </oui-column>
+  <oui-column property="phone"></oui-column>
+  <oui-column property="birth">
+    {{$value | date:shortDate}}
+  </oui-column>
+</oui-datagrid>
+```
+
 ### Remote data
 
 ```html

packages/oui-datagrid/src/cell/cell.controller.js

@@ -40,6 +40,7 @@ export default class {
         this.cellScope.$row = this.row;
         this.cellScope.$column = this.column;
         this.cellScope.$value = this.row[this.column.name];
+        this.cellScope.$rowIndex = this.index;
 
         if (this.column.compiledTemplate) {
             this.column.compiledTemplate(this.cellScope, clone => {

packages/oui-datagrid/src/index.spec.js

@@ -1076,6 +1076,38 @@ describe("ouiDatagrid", () => {
             expect(actualCellHtml).toBe(`test: ${fakeData[0].lastName}`);
         });
 
+        it("should support row index data binding inside cell", () => {
+            const element = TestUtils.compileTemplate(`
+                    <oui-datagrid rows="$ctrl.rows">
+                        <oui-column property="firstName"></oui-column>
+                        <oui-column property="">
+                            test: {{ $rowIndex }}
+                        </oui-column>
+                    </oui-datagrid>
+                `, {
+                rows: fakeData.slice(0, 5)
+            }
+            );
+
+            const $firstRow = getRow(element, 0);
+            expect(
+                getCell($firstRow, 1).children().children().html()
+                    .trim())
+                .toBe("test: 0");
+
+            const $middleRow = getRow(element, 2);
+            expect(
+                getCell($middleRow, 1).children().children().html()
+                    .trim())
+                .toBe("test: 2");
+
+            const $lastRow = getRow(element, 4);
+            expect(
+                getCell($lastRow, 1).children().children().html()
+                    .trim())
+                .toBe("test: 4");
+        });
+
         it("should support parent binding inside cell", () => {
             const element = TestUtils.compileTemplate(`
                     <oui-datagrid rows="$ctrl.rows">