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}