diff --git a/packages/react-bootstrap-table2/src/body.js b/packages/react-bootstrap-table2/src/body.js index 7bcd373..a32a82e 100644 --- a/packages/react-bootstrap-table2/src/body.js +++ b/packages/react-bootstrap-table2/src/body.js @@ -5,7 +5,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import _ from './utils'; -import Row from './row/simple-row'; +import SimpleRow from './row/simple-row'; import RowAggregator from './row/aggregate-row'; import RowSection from './row/row-section'; import Const from './const'; @@ -24,6 +24,7 @@ class Body extends React.Component { const { columns, data, + tabIndexCell, keyField, isEmpty, noDataIndication, @@ -45,7 +46,7 @@ class Body extends React.Component { } content = ; } else { - let RowComponent = Row; + let RowComponent = SimpleRow; const selectRowEnabled = selectRow.mode !== Const.ROW_SELECT_DISABLED; const expandRowEnabled = !!expandRow.renderer; @@ -73,11 +74,13 @@ class Body extends React.Component { const baseRowProps = { key, row, + tabIndexCell, columns, keyField, cellEdit, value: key, rowIndex: index, + visibleColumnSize, attrs: rowEvents || {}, ...additionalRowProps }; diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 1a1d16d..053cac1 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -43,6 +43,7 @@ class BootstrapTable extends PropsBaseResolver(Component) { data, columns, keyField, + tabIndexCell, id, classes, striped, @@ -89,6 +90,7 @@ class BootstrapTable extends PropsBaseResolver(Component) { + { expandColumnRenderer ? expandColumnRenderer({ expanded diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js index 8d46da1..3d6f023 100644 --- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js +++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js @@ -15,6 +15,7 @@ export default class SelectionCell extends Component { onRowSelect: PropTypes.func, disabled: PropTypes.bool, rowIndex: PropTypes.number, + tabIndex: PropTypes.number, clickToSelect: PropTypes.bool, selectionRenderer: PropTypes.func } @@ -29,7 +30,8 @@ export default class SelectionCell extends Component { this.props.rowIndex !== nextProps.rowIndex || this.props.selected !== nextProps.selected || this.props.disabled !== nextProps.disabled || - this.props.rowKey !== nextProps.rowKey; + this.props.rowKey !== nextProps.rowKey || + this.props.tabIndex !== nextProps.tabIndex; return shouldUpdate; } @@ -60,14 +62,18 @@ export default class SelectionCell extends Component { mode: inputType, selected, disabled, + tabIndex, selectionRenderer } = this.props; + const attrs = {}; + if (tabIndex !== -1) attrs.tabIndex = tabIndex; + return ( { ({ bootstrap4 }) => ( - + { selectionRenderer ? selectionRenderer({ mode: inputType, diff --git a/packages/react-bootstrap-table2/src/row/aggregate-row.js b/packages/react-bootstrap-table2/src/row/aggregate-row.js index 1b3df9d..32c997a 100644 --- a/packages/react-bootstrap-table2/src/row/aggregate-row.js +++ b/packages/react-bootstrap-table2/src/row/aggregate-row.js @@ -1,4 +1,5 @@ /* eslint react/prop-types: 0 */ +/* eslint no-plusplus: 0 */ import React from 'react'; import PropTypes from 'prop-types'; import _ from '../utils'; @@ -55,6 +56,8 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co expanded, selected, selectable, + visibleColumnSize, + tabIndexCell, ...rest } = this.props; const key = _.get(row, keyField); @@ -66,6 +69,8 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co newAttrs.onClick = this.createClickEventHandler(newAttrs.onClick); } + let tabIndexStart = (rowIndex * visibleColumnSize) + 1; + return ( ) : null } @@ -91,6 +97,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co rowIndex={ rowIndex } selected={ selected } disabled={ !selectable } + tabIndex={ tabIndexCell ? tabIndexStart++ : -1 } /> ) : null @@ -101,6 +108,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co keyField={ keyField } rowIndex={ rowIndex } shouldUpdate={ this.shouldUpdateRowContent } + tabIndexStart={ tabIndexCell ? tabIndexStart : -1 } { ...rest } /> diff --git a/packages/react-bootstrap-table2/src/row/row-pure-content.js b/packages/react-bootstrap-table2/src/row/row-pure-content.js index cd1cbfd..5b498ff 100644 --- a/packages/react-bootstrap-table2/src/row/row-pure-content.js +++ b/packages/react-bootstrap-table2/src/row/row-pure-content.js @@ -1,5 +1,6 @@ /* eslint react/prop-types: 0 */ /* eslint react/no-array-index-key: 0 */ +/* eslint no-plusplus: 0 */ import React from 'react'; import _ from '../utils'; @@ -25,9 +26,12 @@ export default class RowPureContent extends React.Component { onStart, clickToEdit, dbclickToEdit, - EditingCellComponent + EditingCellComponent, + tabIndexStart } = this.props; + let tabIndex = tabIndexStart; + return columns.map((column, index) => { if (!column.hidden) { const { dataField } = column; @@ -87,6 +91,10 @@ export default class RowPureContent extends React.Component { editableCell = column.editable(content, row, rowIndex, index); } + if (tabIndexStart !== -1) { + cellAttrs.tabIndex = tabIndex++; + } + return ( - + ); } } -Row.propTypes = { +SimpleRow.propTypes = { row: PropTypes.object.isRequired, rowIndex: PropTypes.number.isRequired, columns: PropTypes.array.isRequired, @@ -47,11 +54,11 @@ Row.propTypes = { attrs: PropTypes.object }; -Row.defaultProps = { +SimpleRow.defaultProps = { editable: true, style: {}, className: null, attrs: {} }; -export default Row; +export default SimpleRow;