mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-04-05 12:24:27 +00:00
180 lines
5.0 KiB
JavaScript
180 lines
5.0 KiB
JavaScript
/* eslint arrow-body-style: 0 */
|
|
|
|
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import cs from 'classnames';
|
|
|
|
import Header from './header';
|
|
import Caption from './caption';
|
|
import Body from './body';
|
|
import PropsBaseResolver from './props-resolver';
|
|
import Const from './const';
|
|
import { isSelectedAll } from './store/selection';
|
|
|
|
class BootstrapTable extends PropsBaseResolver(Component) {
|
|
constructor(props) {
|
|
super(props);
|
|
this.validateProps();
|
|
|
|
this.state = {
|
|
data: props.data
|
|
};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
this.setState({
|
|
data: nextProps.data
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { loading, overlay } = this.props;
|
|
if (overlay) {
|
|
const LoadingOverlay = overlay(loading);
|
|
return (
|
|
<LoadingOverlay>
|
|
{ this.renderTable() }
|
|
</LoadingOverlay>
|
|
);
|
|
}
|
|
return this.renderTable();
|
|
}
|
|
|
|
renderTable() {
|
|
const {
|
|
store,
|
|
columns,
|
|
keyField,
|
|
id,
|
|
classes,
|
|
striped,
|
|
hover,
|
|
bordered,
|
|
condensed,
|
|
noDataIndication,
|
|
caption,
|
|
rowStyle,
|
|
rowClasses,
|
|
wrapperClasses,
|
|
rowEvents
|
|
} = this.props;
|
|
|
|
const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
|
|
|
|
const tableClass = cs('table', {
|
|
'table-striped': striped,
|
|
'table-hover': hover,
|
|
'table-bordered': bordered,
|
|
'table-condensed': condensed
|
|
}, classes);
|
|
|
|
const cellSelectionInfo = this.resolveSelectRowProps({
|
|
onRowSelect: this.props.onRowSelect
|
|
});
|
|
|
|
const headerCellSelectionInfo = this.resolveSelectRowPropsForHeader({
|
|
onAllRowsSelect: this.props.onAllRowsSelect,
|
|
selected: store.selected,
|
|
allRowsSelected: isSelectedAll(store)
|
|
});
|
|
|
|
const tableCaption = (caption && <Caption>{ caption }</Caption>);
|
|
|
|
return (
|
|
<div className={ tableWrapperClass }>
|
|
<table id={ id } className={ tableClass }>
|
|
{ tableCaption }
|
|
<Header
|
|
columns={ columns }
|
|
sortField={ store.sortField }
|
|
sortOrder={ store.sortOrder }
|
|
onSort={ this.props.onSort }
|
|
onFilter={ this.props.onFilter }
|
|
onExternalFilter={ this.props.onExternalFilter }
|
|
selectRow={ headerCellSelectionInfo }
|
|
/>
|
|
<Body
|
|
data={ this.state.data }
|
|
keyField={ keyField }
|
|
columns={ columns }
|
|
isEmpty={ this.isEmpty() }
|
|
visibleColumnSize={ this.visibleColumnSize() }
|
|
noDataIndication={ noDataIndication }
|
|
cellEdit={ this.props.cellEdit || {} }
|
|
selectRow={ cellSelectionInfo }
|
|
selectedRowKeys={ store.selected }
|
|
rowStyle={ rowStyle }
|
|
rowClasses={ rowClasses }
|
|
rowEvents={ rowEvents }
|
|
/>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
BootstrapTable.propTypes = {
|
|
keyField: PropTypes.string.isRequired,
|
|
data: PropTypes.array.isRequired,
|
|
columns: PropTypes.array.isRequired,
|
|
remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
|
|
pagination: PropTypes.bool
|
|
})]),
|
|
store: PropTypes.object,
|
|
noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|
striped: PropTypes.bool,
|
|
bordered: PropTypes.bool,
|
|
hover: PropTypes.bool,
|
|
id: PropTypes.string,
|
|
classes: PropTypes.string,
|
|
wrapperClasses: PropTypes.string,
|
|
condensed: PropTypes.bool,
|
|
caption: PropTypes.oneOfType([
|
|
PropTypes.node,
|
|
PropTypes.string
|
|
]),
|
|
pagination: PropTypes.object,
|
|
filter: PropTypes.object,
|
|
cellEdit: PropTypes.object,
|
|
selectRow: PropTypes.shape({
|
|
mode: PropTypes.oneOf([Const.ROW_SELECT_SINGLE, Const.ROW_SELECT_MULTIPLE]).isRequired,
|
|
clickToSelect: PropTypes.bool,
|
|
clickToEdit: PropTypes.bool,
|
|
onSelect: PropTypes.func,
|
|
onSelectAll: PropTypes.func,
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
|
classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|
nonSelectable: PropTypes.array,
|
|
bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|
hideSelectColumn: PropTypes.bool,
|
|
selectionRenderer: PropTypes.func,
|
|
selectionHeaderRenderer: PropTypes.func
|
|
}),
|
|
onRowSelect: PropTypes.func,
|
|
onAllRowsSelect: PropTypes.func,
|
|
rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
|
rowEvents: PropTypes.object,
|
|
rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|
defaultSorted: PropTypes.arrayOf(PropTypes.shape({
|
|
dataField: PropTypes.string.isRequired,
|
|
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
|
|
})),
|
|
defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
|
|
overlay: PropTypes.func,
|
|
onTableChange: PropTypes.func,
|
|
onSort: PropTypes.func,
|
|
onFilter: PropTypes.func,
|
|
onExternalFilter: PropTypes.func
|
|
};
|
|
|
|
BootstrapTable.defaultProps = {
|
|
remote: false,
|
|
striped: false,
|
|
bordered: true,
|
|
hover: false,
|
|
condensed: false,
|
|
noDataIndication: null
|
|
};
|
|
|
|
export default BootstrapTable;
|