diff --git a/packages/oui-datagrid/README.md b/packages/oui-datagrid/README.md index 8c605725..a7640633 100644 --- a/packages/oui-datagrid/README.md +++ b/packages/oui-datagrid/README.md @@ -294,6 +294,26 @@ Or you can use the `page-size` property. It takes precedence over value configur ``` +### Access row index + +```html:preview + + + {{$rowIndex}} + + + {{$row.firstName}} {{$row.lastName}} + + + {{$value}} + + + + {{$value | date:shortDate}} + + +``` + ### Remote data ```html diff --git a/packages/oui-datagrid/src/cell/cell.controller.js b/packages/oui-datagrid/src/cell/cell.controller.js index d17d3cdd..ca62b284 100644 --- a/packages/oui-datagrid/src/cell/cell.controller.js +++ b/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 => { diff --git a/packages/oui-datagrid/src/index.spec.js b/packages/oui-datagrid/src/index.spec.js index 0af9c61f..1871e269 100644 --- a/packages/oui-datagrid/src/index.spec.js +++ b/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(` + + + + test: {{ $rowIndex }} + + + `, { + 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(`