diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js index 64b3872b9f..365f601fe0 100644 --- a/src/components/datatable/BodyCell.js +++ b/src/components/datatable/BodyCell.js @@ -208,6 +208,7 @@ export class BodyCell extends Component { if (this.props.expander) { const iconClassName = classNames('p-row-toggler-icon pi pi-fw p-clickable', { 'pi-chevron-down': this.props.expanded, 'pi-chevron-right': !this.props.expanded }); + const ariaControls = `${this.props.tableId ? this.props.tableId + '_' : ''}content_${this.props.rowIndex}_expanded`; let expanderProps = { onClick: this.onExpanderClick, className: 'p-row-toggler p-link', @@ -215,7 +216,7 @@ export class BodyCell extends Component { }; content = ( - @@ -319,7 +320,7 @@ export class BodyCell extends Component { } return ( - { this.container = el; }} className={cellClassName} style={this.props.bodyStyle || this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown} + { this.container = el; }} role="cell" className={cellClassName} style={this.props.bodyStyle || this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown} rowSpan={this.props.rowSpan} onBlur={this.onBlur}> {header} {editorKeyHelper} diff --git a/src/components/datatable/BodyRow.js b/src/components/datatable/BodyRow.js index 19a1f1bc5c..9d8b7ed314 100644 --- a/src/components/datatable/BodyRow.js +++ b/src/components/datatable/BodyRow.js @@ -254,7 +254,7 @@ export class BodyRow extends Component { } } - let cell = ; @@ -263,7 +263,7 @@ export class BodyRow extends Component { } return ( - {this.container = el;}} className={className} onClick={this.onClick} onDoubleClick={this.onDoubleClick} onTouchEnd={this.onTouchEnd} onContextMenu={this.onRightClick} onMouseDown={this.onMouseDown} + {this.container = el;}} className={className} onClick={this.onClick} onDoubleClick={this.onDoubleClick} onTouchEnd={this.onTouchEnd} onContextMenu={this.onRightClick} onMouseDown={this.onMouseDown} onDragStart={this.props.onDragStart} onDragEnd={this.onDragEnd} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop} style={style} onKeyDown={this.onKeyDown}> {cells} diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js index 6259b64b53..fa6fca7757 100644 --- a/src/components/datatable/DataTable.js +++ b/src/components/datatable/DataTable.js @@ -1311,7 +1311,7 @@ export class DataTable extends Component { } createTableBody(value, columns, frozen) { - return {footer} diff --git a/src/components/datatable/HeaderCell.js b/src/components/datatable/HeaderCell.js index c199c1c817..d7166392da 100644 --- a/src/components/datatable/HeaderCell.js +++ b/src/components/datatable/HeaderCell.js @@ -161,7 +161,7 @@ export class HeaderCell extends Component { if (this.props.renderOptions.filterOnly) { return ( - this.el = el} className={classNames('p-filter-column', this.props.columnProps.filterHeaderClassName)} style={this.props.columnProps.filterHeaderStyle||this.props.columnProps.style} + this.el = el} role="columnheader" className={classNames('p-filter-column', this.props.columnProps.filterHeaderClassName)} style={this.props.columnProps.filterHeaderStyle||this.props.columnProps.style} colSpan={this.props.columnProps.colSpan} rowSpan={this.props.columnProps.rowSpan}> {filterElement} {headerCheckbox} @@ -192,7 +192,7 @@ export class HeaderCell extends Component { let sortBadge = this.renderSortBadge(sortMetaDataIndex); return ( - this.el = el} tabIndex={this.props.columnProps.sortable ? this.props.tabIndex : null} + this.el = el} role="columnheader" tabIndex={this.props.columnProps.sortable ? this.props.tabIndex : null} className={className} style={this.props.columnProps.headerStyle||this.props.columnProps.style} onClick={this.onClick} onMouseDown={this.onMouseDown} onKeyDown={this.onKeyDown} colSpan={this.props.columnProps.colSpan} rowSpan={this.props.columnProps.rowSpan} aria-sort={ariaSortData} onDragStart={this.props.onDragStart} onDragOver={this.props.onDragOver} onDragLeave={this.props.onDragLeave} onDrop={this.props.onDrop}> diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js index 31068acb49..0eecd02c73 100644 --- a/src/components/datatable/TableBody.js +++ b/src/components/datatable/TableBody.js @@ -460,8 +460,8 @@ export class TableBody extends Component { } return ( - - + + { content } {this.props.rowGroupHeaderTemplate(rowData, index)} @@ -473,7 +473,7 @@ export class TableBody extends Component { renderRowGroupFooter(rowData, index) { return ( - + {this.props.rowGroupFooterTemplate(rowData, index)} ); @@ -543,7 +543,7 @@ export class TableBody extends Component { let isRowGroupExpanded = this.props.expandableRowGroups && hasSubheaderGrouping && rowGroupHeaderExpanded; if (!this.props.expandableRowGroups || isRowGroupExpanded) { //row content - let bodyRow = {expandedRowContent} + let id = `${this.props.tableId ? this.props.tableId + '_' : ''}content_${i}_expanded`; + let expandedRow = {expandedRowContent} rows.push(expandedRow); } //footer row group - if(hasSubheaderGrouping && (!this.props.expandableRowGroups || isRowGroupExpanded)) { + if (hasSubheaderGrouping && (!this.props.expandableRowGroups || isRowGroupExpanded)) { let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.props.groupField); let nextRowFieldData = ObjectUtils.resolveFieldData(this.props.value[i + 1], this.props.groupField); @@ -579,8 +580,8 @@ export class TableBody extends Component { let emptyMessage = this.props.emptyMessage; rows = !this.props.loading && emptyMessage !== null ? - - + + { (typeof emptyMessage === 'function') ? emptyMessage(this.props.frozen) : emptyMessage } diff --git a/src/components/datatable/TableFooter.js b/src/components/datatable/TableFooter.js index 0e61ebf735..1f4d452c26 100644 --- a/src/components/datatable/TableFooter.js +++ b/src/components/datatable/TableFooter.js @@ -16,11 +16,11 @@ export class TableFooter extends Component { if(this.props.columnGroup) { let rows = React.Children.toArray(this.props.columnGroup.props.children); content = rows.map((row, i) => { - return {this.createFooterCells(row)}; + return {this.createFooterCells(row)}; }); } else { - content = {this.createFooterCells(this)}; + content = {this.createFooterCells(this)}; } return ( @@ -29,4 +29,4 @@ export class TableFooter extends Component { ); } -} \ No newline at end of file +} diff --git a/src/components/datatable/TableHeader.js b/src/components/datatable/TableHeader.js index 22874087b7..b8548db709 100644 --- a/src/components/datatable/TableHeader.js +++ b/src/components/datatable/TableHeader.js @@ -31,7 +31,7 @@ export class TableHeader extends Component { if (this.props.columnGroup) { let rows = React.Children.toArray(this.props.columnGroup.props.children); content = rows.map((row, i) => { - return {this.createHeaderCells(React.Children.toArray(row.props.children), {filterOnly: false, renderFilter: true, renderHeaderCheckbox: true})}; + return {this.createHeaderCells(React.Children.toArray(row.props.children), {filterOnly: false, renderFilter: true, renderHeaderCheckbox: true})}; }); } else { @@ -40,13 +40,13 @@ export class TableHeader extends Component { if (this.hasColumnFilter(columns)) { content = ( <> - {this.createHeaderCells(columns, {filterOnly: false, renderFilter: false, renderHeaderCheckbox: false})} - {this.createHeaderCells(columns, {filterOnly: true, renderFilter: true, renderHeaderCheckbox: true})} + {this.createHeaderCells(columns, {filterOnly: false, renderFilter: false, renderHeaderCheckbox: false})} + {this.createHeaderCells(columns, {filterOnly: true, renderFilter: true, renderHeaderCheckbox: true})} ); } else { - content = {this.createHeaderCells(columns, {filterOnly: false, renderFilter: false, renderHeaderCheckbox: true})}; + content = {this.createHeaderCells(columns, {filterOnly: false, renderFilter: false, renderHeaderCheckbox: true})}; } }