diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js index 516bf5f0b9..46d0038bad 100644 --- a/src/components/datatable/DataTable.js +++ b/src/components/datatable/DataTable.js @@ -6,9 +6,9 @@ import DomHandler from '../utils/DomHandler'; import ObjectUtils from '../utils/ObjectUtils'; import { ScrollableView } from './ScrollableView'; import { TableBody } from './TableBody'; -import { TableLoadingBody } from './TableLoadingBody'; import { TableFooter } from './TableFooter'; import { TableHeader } from './TableHeader'; +import { TableLoadingBody } from './TableLoadingBody'; export class DataTable extends Component { @@ -1154,7 +1154,7 @@ export class DataTable extends Component { createScrollableView(value, columns, frozen, headerColumnGroup, footerColumnGroup, totalRecords) { return diff --git a/src/components/datatable/ScrollableView.js b/src/components/datatable/ScrollableView.js index 2e17938421..7701ca84c3 100644 --- a/src/components/datatable/ScrollableView.js +++ b/src/components/datatable/ScrollableView.js @@ -18,6 +18,8 @@ export class ScrollableView extends Component { rows: null, totalRecords: null, loading: false, + tableStyle: null, + tableClassName: null, onVirtualScroll: null } @@ -34,6 +36,8 @@ export class ScrollableView extends Component { rows: PropTypes.number, totalRcords: PropTypes.number, loading: PropTypes.bool, + tableStyle: PropTypes.any, + tableClassName: PropTypes.string, onVirtualScroll: PropTypes.func } @@ -198,7 +202,10 @@ export class ScrollableView extends Component { render() { let className = classNames('p-datatable-scrollable-view', {'p-datatable-frozen-view': this.props.frozen, 'p-datatable-unfrozen-view': !this.props.frozen && this.props.frozenWidth}); - let tableClassName = classNames('p-datatable-scrollable-body-table', {'p-datatable-virtual-table': this.props.virtualScroll}); + let tableBodyClassName = classNames('p-datatable-scrollable-body-table', this.props.tableClassName, {'p-datatable-virtual-table': this.props.virtualScroll}); + let tableHeaderClassName = classNames('p-datatable-scrollable-header-table', this.props.tableClassName); + let tableFooterClassName = classNames('p-datatable-scrollable-footer-table', this.props.tableClassName); + let tableBodyStyle = Object.assign({top:'0'}, this.props.tableStyle); let width = this.props.frozen ? this.props.frozenWidth : 'calc(100% - ' + this.props.frozenWidth + ')'; let left = this.props.frozen ? null : this.props.frozenWidth; let colGroup = this.renderColGroup(); @@ -208,7 +215,7 @@ export class ScrollableView extends Component {
{ this.container = el; }}>
{ this.scrollHeader= el; }} onScroll={this.onHeaderScroll}>
{ this.scrollHeaderBox = el; }}> - +
{colGroup} {this.props.header} {this.props.frozenBody} @@ -216,7 +223,7 @@ export class ScrollableView extends Component {
{ this.scrollBody = el; }} onScroll={this.onBodyScroll}> -
this.scrollTable = el} style={{top:'0'}} className={tableClassName}> +
this.scrollTable = el} style={tableBodyStyle} className={tableBodyClassName}> {colGroup} {this.props.body}
@@ -225,7 +232,7 @@ export class ScrollableView extends Component {
{ this.scrollFooter = el; }}>
{ this.scrollFooterBox = el; }}> - +
{colGroup} {this.props.footer}