wix-style-react
Version:
wix-style-react
906 lines (904 loc) • 33.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.DataTableHeader = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _system = require("@wix/wix-ui-icons-common/system");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactWindow = require("react-window");
var _reactScrollSync = require("react-scroll-sync");
var _TooltipCommon = require("../../common/PropTypes/TooltipCommon");
var _DataTableSt = require("./DataTable.st.css");
var _InfiniteScroll = _interopRequireDefault(require("../../utils/InfiniteScroll"));
var _InfoIcon = _interopRequireDefault(require("../../InfoIcon"));
var _DataTable2 = require("./DataTable.utils");
var _context = require("../../WixStyleReactMaskingProvider/context");
var _DataTableRow = _interopRequireDefault(require("./components/DataTableRow"));
var _excluded = ["children"],
_excluded2 = ["content"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Table/DataTable/DataTable.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DataTableHeader = props => {
var {
dataHook,
horizontalScroll,
leftShadowVisible,
rightShadowVisible,
stickyColumns,
rowVerticalPadding
} = props;
var headerContainerRef = _react.default.useRef();
var wrapWithHorizontalScroll = table => /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(_DataTableSt.classes.scrollWrapper, {
[_DataTableSt.classes.leftShadowVisible]: !!leftShadowVisible,
[_DataTableSt.classes.rightShadowVisible]: !!rightShadowVisible,
[_DataTableSt.classes.withStickyColumns]: !!stickyColumns
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(_reactScrollSync.ScrollSyncPane, {
attachTo: headerContainerRef,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 7
}
}, table));
var table = /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
ref: headerContainerRef,
className: (0, _classnames.default)({
[_DataTableSt.classes.tableHeaderScrollContent]: horizontalScroll
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("table", {
style: {
width: props.width
},
className: (0, _DataTableSt.st)(_DataTableSt.classes.table, {
rowVerticalPadding
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, props, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 9
}
}))));
return horizontalScroll ? wrapWithHorizontalScroll(table) : table;
};
exports.DataTableHeader = DataTableHeader;
DataTableHeader.propTypes = {
width: _propTypes.default.string
};
class DataTable extends _react.default.Component {
constructor(_props) {
super(_props);
this._updateScrollShadows = () => {
var {
onUpdateScrollShadows
} = this.props;
if (!onUpdateScrollShadows) {
return;
}
var {
scrollLeft,
scrollWidth,
clientWidth
} = this.contentRef.current;
var leftShadowVisible = scrollLeft > 0;
var rightShadowVisible = scrollWidth - scrollLeft > clientWidth;
onUpdateScrollShadows(leftShadowVisible, rightShadowVisible);
};
this.wrapWithInfiniteScroll = table => {
return /*#__PURE__*/_react.default.createElement(_InfiniteScroll.default, {
ref: this.props.infiniteScrollRef,
pageStart: 0,
loadMore: this.loadMore,
data: this.props.data,
hasMore: !this.props.controlled ? this.state.currentPage < this.state.lastPage || this.props.hasMore : this.props.hasMore,
loader: this.props.loader,
useWindow: this.props.useWindow,
scrollElement: this.props.scrollElement,
initialLoad: this.props.initialLoad,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 7
}
}, table);
};
this.wrapWithHorizontalScroll = (table, attachTo) => {
var {
leftShadowVisible,
rightShadowVisible,
stickyColumns
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(this.style.scrollWrapper, {
[this.style.leftShadowVisible]: !!leftShadowVisible,
[this.style.rightShadowVisible]: !!rightShadowVisible,
[this.style.withStickyColumns]: !!stickyColumns
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_reactScrollSync.ScrollSyncPane, {
attachTo: attachTo,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 9
}
}, table));
};
this.renderTable = rowsToRender => {
var {
dataHook,
showLastRowDivider,
horizontalScroll,
rowVerticalPadding,
removeRowDetailsPadding,
dragAndDrop,
onDragStart,
onDragEnd,
onDragCancel,
isDragAndDropDisabled,
data
} = this.props;
var style = {
width: this.props.width
};
var className = (0, _DataTableSt.st)(_DataTableSt.classes.table, {
removeRowDetailsPadding,
showLastRowDivider,
rowVerticalPadding
});
var table = /*#__PURE__*/_react.default.createElement("table", {
id: this.props.id,
style: style,
className: className,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 7
}
}, !this.props.hideHeader && /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, this.props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 36
}
})), this.renderBody(rowsToRender));
if (dragAndDrop) {
var {
DroppableTableContext
} = dragAndDrop;
table = /*#__PURE__*/_react.default.createElement(DroppableTableContext, {
items: data,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
onDragCancel: onDragCancel,
isDragAndDropDisabled: isDragAndDropDisabled,
horizontalScroll: horizontalScroll,
className: className,
style: style,
renderRow: this.renderRowWithMaskingClassNames,
renderTableContainer: table => {
var child = /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)({
[_DataTableSt.classes.tableHeaderScrollContent]: horizontalScroll
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 15
}
}, table);
if (horizontalScroll) {
child = this.wrapWithHorizontalScroll(child);
}
return child;
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 247,
columnNumber: 9
}
}, table);
}
table = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
"data-hook": dataHook
}, horizontalScroll ? {
className: _DataTableSt.classes.tableBodyScrollContent,
ref: this.contentRef,
onScroll: this._updateScrollShadows
} : undefined, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 7
}
}), table);
return table;
};
this.renderBody = rows => {
var {
BodyElementType = 'tbody'
} = this.props;
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactMaskingContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 7
}
}, _ref => {
var {
maskingClassNames
} = _ref;
return /*#__PURE__*/_react.default.createElement(BodyElementType, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 303,
columnNumber: 11
}
}, rows.map((rowData, index) => this.renderRow({
rowData,
rowNum: index,
maskingClassNames
})));
});
};
this.renderRowWithMaskingClassNames = _ref2 => {
var {
rowData,
rowNum,
style,
isDragOverlay
} = _ref2;
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactMaskingContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 319,
columnNumber: 5
}
}, _ref3 => {
var {
maskingClassNames
} = _ref3;
return this.renderRow({
rowData,
rowNum,
style,
maskingClassNames,
isDragOverlay
});
});
};
this.renderRow = rowProps => {
return /*#__PURE__*/_react.default.createElement(_DataTableRow.default, (0, _extends2.default)({
key: rowProps.rowNum
}, rowProps, this.props, {
toggleRowDetails: this.toggleRowDetails,
showDetails: !!this.state.selectedRows.get(rowProps.rowData),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 334,
columnNumber: 7
}
}));
};
this.calcLastPage = _ref4 => {
var {
data,
itemsPerPage
} = _ref4;
return Math.ceil(data.length / itemsPerPage) - 1;
};
this.loadMore = () => {
if (!this.props.controlled && this.state.currentPage < this.state.lastPage) {
this.setState({
currentPage: this.state.currentPage + 1
});
} else {
this.props.loadMore && this.props.loadMore();
}
};
this.toggleRowDetails = selectedRow => {
var {
selectedRows
} = this.state;
var allowMultipleRowDetails = this.props.allowMultiDetailsExpansion && !this.props.virtualized;
var newSelectedRows = new Map([...(allowMultipleRowDetails ? [...selectedRows] : []), [selectedRow, !selectedRows.get(selectedRow)]]);
this.setState({
selectedRows: newSelectedRows
});
};
this.renderVirtualizedRow = _ref5 => {
var {
data,
index,
style
} = _ref5;
return this.renderRow({
rowData: data.data[index],
rowNum: index,
style
});
};
this.renderVirtualizedMemoizedRow = /*#__PURE__*/(0, _react.memo)(this.renderVirtualizedRow, _DataTable2.virtualRowsAreEqual);
this.getVirtualRowHeight = () => this.props.virtualizedLineHeight;
this.virtualizedTableElementWithRefForward = /*#__PURE__*/_react.default.forwardRef((props, ref) => this.renderVirtualizedTableElement(_objectSpread(_objectSpread({}, props), {}, {
ref
})));
this.renderVirtualizedTableElement = _ref6 => {
var {
children
} = _ref6,
rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
var {
dragAndDrop,
data,
onDragStart,
onDragEnd,
onDragCancel,
isDragAndDropDisabled,
horizontalScroll
} = this.props;
var table = /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({}, rest, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 398,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, this.props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 399,
columnNumber: 9
}
})), children);
if (dragAndDrop) {
var {
DroppableTableContext
} = dragAndDrop;
table = /*#__PURE__*/_react.default.createElement(DroppableTableContext, {
items: data,
onDragStart: onDragStart,
onDragEnd: onDragEnd,
onDragCancel: onDragCancel,
isDragAndDropDisabled: isDragAndDropDisabled,
horizontalScroll: horizontalScroll,
className: (0, _classnames.default)(this.style.table, this.style.virtualized),
renderRow: this.renderRow,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 408,
columnNumber: 9
}
}, table);
}
return table;
};
this.renderVirtualizedTable = () => {
var {
dataHook,
data,
virtualizedTableHeight,
virtualizedListRef
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 431,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_reactWindow.VariableSizeList, {
ref: virtualizedListRef,
className: (0, _classnames.default)(this.style.table, this.style.virtualized),
height: virtualizedTableHeight,
itemCount: data.length,
itemData: this.props,
width: "100%",
itemSize: this.getVirtualRowHeight,
outerElementType: this.virtualizedTableElementWithRefForward,
innerElementType: "tbody",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 432,
columnNumber: 9
}
}, this.renderVirtualizedMemoizedRow));
};
var state = {
selectedRows: new Map()
};
if (!_props.controlled && _props.infiniteScroll) {
state = _objectSpread(_objectSpread({}, state), this.createInitialScrollingState(_props));
}
this.state = state;
this.contentRef = /*#__PURE__*/_react.default.createRef();
if (_props.horizontalScroll && 'ResizeObserver' in window) {
this.contentResizeObserver = new ResizeObserver(this._updateScrollShadows);
}
}
componentDidMount() {
var {
contentResizeObserver,
contentRef
} = this;
if (contentResizeObserver && contentRef.current) {
contentResizeObserver.observe(contentRef.current);
}
}
componentWillUnmount() {
var {
contentResizeObserver,
contentRef
} = this;
if (contentResizeObserver && contentRef.current) {
contentResizeObserver.unobserve(contentRef.current);
}
}
get style() {
return _DataTableSt.classes;
}
UNSAFE_componentWillReceiveProps(nextProps) {
var isLoadingMore = false;
if (!this.props.controlled && this.props.infiniteScroll && nextProps.data !== this.props.data) {
if (nextProps.data instanceof Array && this.props.data instanceof Array) {
isLoadingMore = true;
var lastPage = this.calcLastPage(nextProps);
var currentPage = this.state.currentPage < lastPage ? this.state.currentPage + 1 : this.state.currentPage;
this.setState({
lastPage,
currentPage
});
}
if (!isLoadingMore) {
this.setState(this.createInitialScrollingState(nextProps));
}
}
}
createInitialScrollingState(props) {
return {
currentPage: 0,
lastPage: this.calcLastPage(props)
};
}
render() {
var {
virtualized,
data,
showHeaderWhenEmpty,
horizontalScroll,
infiniteScroll,
itemsPerPage,
controlled
} = this.props;
if (!data.length && !showHeaderWhenEmpty) {
return null;
}
if (virtualized) {
return this.renderVirtualizedTable(data);
}
var rowsToRender = !controlled && infiniteScroll ? data.slice(0, (this.state.currentPage + 1) * itemsPerPage) : data;
var table = this.renderTable(rowsToRender);
if (horizontalScroll) {
table = this.wrapWithHorizontalScroll(table, this.contentRef);
}
if (infiniteScroll) {
table = this.wrapWithInfiniteScroll(table);
}
return table;
}
}
class TableHeader extends _react.Component {
constructor() {
super(...arguments);
this.renderSortingArrow = (sortDescending, colNum) => {
if (sortDescending === undefined) {
return null;
}
var Arrow = sortDescending ? _system.SortByArrowDown : _system.SortByArrowUp;
return /*#__PURE__*/_react.default.createElement("span", {
"data-hook": "".concat(colNum, "_title"),
className: this.style.sortArrow,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 483,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(Arrow, {
height: 12,
"data-hook": sortDescending ? 'sort_arrow_dec' : 'sort_arrow_asc',
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 484,
columnNumber: 9
}
}));
};
this.renderInfoTooltip = (tooltipProps, colNum) => {
if (tooltipProps === undefined) {
return null;
}
var {
content
} = tooltipProps,
otherTooltipProps = (0, _objectWithoutProperties2.default)(tooltipProps, _excluded2);
return /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
content: content,
tooltipProps: otherTooltipProps,
dataHook: "".concat(colNum, "_info_tooltip"),
className: this.style.infoTooltipWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 499,
columnNumber: 7
}
});
};
this.renderHeaderCell = (column, colNum) => {
var _column$key;
var {
stickyColumns,
columns,
isApplyColumnWidthStyle
} = this.props;
var stickyColumnStyle = colNum < stickyColumns ? (0, _DataTable2.getStickyColumnStyle)(columns, column) : undefined;
var widthStyle = isApplyColumnWidthStyle ? column.width ? {
width: column.width
} : {
flex: 1
} : {
width: column.width
};
var style = _objectSpread(_objectSpread(_objectSpread({}, isApplyColumnWidthStyle && typeof column.style !== 'function' ? column.style : undefined), widthStyle), {}, {
padding: this.props.thPadding,
height: this.props.thHeight,
fontSize: this.props.thFontSize,
border: this.props.thBorder,
boxShadow: this.props.thBoxShadow,
color: this.props.thColor,
opacity: this.props.thOpacity,
letterSpacing: this.props.thLetterSpacing,
cursor: column.sortable === undefined ? 'auto' : 'pointer'
}, stickyColumnStyle);
var optionalHeaderCellProps = {};
if (column.sortable) {
optionalHeaderCellProps.onClick = () => this.props.onSortClick && this.props.onSortClick(column, colNum);
}
var isSticky = colNum < stickyColumns;
return /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
key: (_column$key = column.key) !== null && _column$key !== void 0 ? _column$key : colNum,
"data-hook": column.dataHook,
style: style,
"data-sticky": isSticky,
className: (0, _classnames.default)(this.style.thText, {
[this.style.thSkinStandard]: !this.props.skin || this.props.skin === 'standard',
[this.style.thSkinNeutral]: this.props.skin === 'neutral',
[this.style.sticky]: isSticky,
[this.style.lastSticky]: colNum === stickyColumns - 1,
[this.style.stickyActionCell]: column.stickyActionCell
})
}, optionalHeaderCellProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 548,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(this.style.thContainer, {
[this.style.alignStart]: !column.align || column.align === 'start',
[this.style.alignCenter]: column.align === 'center',
[this.style.alignEnd]: column.align === 'end'
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 563,
columnNumber: 9
}
}, column.title, this.renderSortingArrow(column.sortDescending, colNum), this.renderInfoTooltip(column.infoTooltipProps, colNum)));
};
}
get style() {
return _DataTableSt.classes;
}
render() {
var {
columns,
dragAndDrop,
isDragAndDropDisabled,
headerRowClass,
headerClass
} = this.props;
// Backwards compatibility - if `dragAndDrop` is set but createDragHandleColumn is `null` (older version), still render the drag-handle header cell
var dragHandleHeaderCell = dragAndDrop && dragAndDrop.createDragHandleColumn == null && !isDragAndDropDisabled ? /*#__PURE__*/_react.default.createElement("th", {
width: "50px",
className: (0, _classnames.default)(this.style.thText, this.style.dnd, {
[this.style.thSkinStandard]: !this.props.skin || this.props.skin === 'standard',
[this.style.thSkinNeutral]: this.props.skin === 'neutral'
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 592,
columnNumber: 9
}
}) : null;
return /*#__PURE__*/_react.default.createElement("thead", {
style: {
display: this.props.hideHeaderAccessible ? 'none' : undefined
},
className: (0, _classnames.default)(headerClass),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 603,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("tr", {
className: (0, _classnames.default)(headerRowClass),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 609,
columnNumber: 9
}
}, dragHandleHeaderCell, columns.map(this.renderHeaderCell)));
}
}
TableHeader.propTypes = {
onSortClick: _propTypes.default.func,
thPadding: _propTypes.default.string,
thHeight: _propTypes.default.string,
thFontSize: _propTypes.default.string,
thBorder: _propTypes.default.string,
thColor: _propTypes.default.string,
thOpacity: _propTypes.default.string,
thLetterSpacing: _propTypes.default.string,
thBoxShadow: _propTypes.default.string,
headerRowClass: _propTypes.default.string,
headerClass: _propTypes.default.string,
columns: _propTypes.default.array,
skin: _propTypes.default.oneOf(['standard', 'neutral']),
leftShadowVisible: _propTypes.default.bool,
rightShadowVisible: _propTypes.default.bool,
dragAndDrop: _propTypes.default.object,
hideHeaderAccessible: _propTypes.default.bool
};
function validateData(props, propName) {
if (props[propName]) {
if (props[propName].constructor && props[propName].constructor.name && props[propName].constructor.name.toLowerCase().indexOf('array') > -1) {
return null;
} else {
return Error('Data element must be an array type');
}
}
return null;
}
DataTable.defaultProps = {
data: [],
columns: [],
selectedRowsIds: [],
isRowSelected: null,
showHeaderWhenEmpty: false,
infiniteScroll: false,
itemsPerPage: 20,
width: '100%',
loadMore: null,
hasMore: false,
initialLoad: true,
loader: /*#__PURE__*/_react.default.createElement("div", {
className: "loader",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 645,
columnNumber: 11
}
}, "Loading ..."),
scrollElement: null,
useWindow: true,
showLastRowDivider: true,
virtualizedLineHeight: 60,
skin: 'standard',
horizontalScroll: false,
stickyColumns: 0,
isRowDisabled: () => false,
rowVerticalPadding: 'small',
removeRowDetailsPadding: false,
dragAndDrop: null
};
DataTable.propTypes = {
dataHook: _propTypes.default.string,
/** An id to pass to the table */
id: _propTypes.default.string,
/** The data to display. (If data.id exists then it will be used as the React key value for each row, otherwise, the rowIndex will be used) */
data: validateData,
/** Configuration of the table's columns. See table below */
columns: _propTypes.default.arrayOf(_propTypes.default.shape({
title: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]).isRequired,
render: _propTypes.default.func.isRequired,
sortable: _propTypes.default.bool,
infoTooltipProps: _propTypes.default.shape(_TooltipCommon.TooltipCommonProps),
sortDescending: _propTypes.default.bool,
align: _propTypes.default.oneOf(['start', 'center', 'end']),
important: _propTypes.default.bool,
style: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
stickyActionCell: _propTypes.default.bool
})).isRequired,
/** Should the table show the header when data is empty */
showHeaderWhenEmpty: _propTypes.default.bool,
/** A string data-hook to apply to all table body rows. or a func which calculates the data-hook for each row - Signature: `(rowData, rowNum) => string` */
rowDataHook: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
/** A class to apply to all table body rows */
rowClass: _propTypes.default.string,
/** A class to apply to the header table row */
headerRowClass: _propTypes.default.string,
/** A class to apply to the table header */
headerClass: _propTypes.default.string,
/** A func that gets row data and returns a class(es) to apply to that specific row */
dynamicRowClass: _propTypes.default.func,
/** A func that gets row data and returns boolean if row is selected or not */
isRowSelected: _propTypes.default.func,
/** A func that gets row data and returns boolean if row is highlighted or not */
isRowHighlight: _propTypes.default.func,
/** A callback method to be called on row click. Signature: `onRowClick(rowData, rowNum)` */
onRowClick: _propTypes.default.func,
/** A callback method to be called on row mouse enter. Signature: `onMouseEnterRow(rowData, rowNum)` */
onMouseEnterRow: _propTypes.default.func,
/** A callback method to be called on row mouse leave. Signature: `onMouseLeaveRow(rowData, rowNum)` */
onMouseLeaveRow: _propTypes.default.func,
/** If true, table will not render all data to begin with, but will gradually render the data as the user scrolls */
infiniteScroll: _propTypes.default.bool,
/** If infiniteScroll is on, this prop will determine how many rows will be rendered on each load */
itemsPerPage: _propTypes.default.number,
/** The width of the fixed table. Can be in percentages or pixels. */
width: _propTypes.default.string,
/** Table styling. Supports `standard` and `neutral`. */
skin: _propTypes.default.oneOf(['standard', 'neutral']),
/** A callback when more items are requested by the user. */
loadMore: _propTypes.default.func,
/** Whether there are more items to be loaded. Event listeners are removed if false. */
hasMore: _propTypes.default.bool,
/** The loader to show when loading more items. */
loader: _propTypes.default.node,
/** Add scroll listeners to the window, or else, the component's parentNode. */
useWindow: _propTypes.default.bool,
/** Add scroll listeners to specified DOM Object. */
scrollElement: _propTypes.default.object,
/** Indicates whether to invoke `loadMore` on the initial rendering. */
initialLoad: _propTypes.default.bool,
/** Table cell vertical padding:
* - `large`: 24px
* - `medium`: 18px
* - `small`: 15px
* - `tiny`: 12px
* */
rowVerticalPadding: _propTypes.default.oneOf(['tiny', 'small', 'medium', 'large']),
/** this prop is deprecated and should not be used
* @deprecated
*/
thPadding: _propTypes.default.string,
/** this prop is deprecated and should not be used
* @deprecated
*/
thHeight: _propTypes.default.string,
/** this prop is deprecated and should not be used
* @deprecated
*/
thFontSize: _propTypes.default.string,
/** this prop is deprecated and should not be used
* @deprecated
*/
thBorder: _propTypes.default.string,
/** this prop is deprecated and should not be used
* @deprecated
*/
thColor: _propTypes.default.string,
/** this prop is deprecated and should not be used
* @deprecated
*/
thOpacity: _propTypes.default.string,
/** this prop is deprecated and should not be used
* @deprecated
*/
thBoxShadow: _propTypes.default.string,
/** this prop is deprecated and should not be used
* @deprecated
*/
thLetterSpacing: _propTypes.default.string,
/** Function that returns React component that will be rendered in row details section. Example: `rowDetails={(row, rowNum) => <MyRowDetailsComponent {...row} />}` */
rowDetails: _propTypes.default.func,
/** Removes row details padding */
removeRowDetailsPadding: _propTypes.default.bool,
/** Allows to open multiple row details */
allowMultiDetailsExpansion: _propTypes.default.bool,
/** Should we remove the header of the table from DOM. */
hideHeader: _propTypes.default.bool,
/** Should we hide the header of the table with display: none. */
hideHeaderAccessible: _propTypes.default.bool,
/** A flag specifying weather to show a divider after the last row */
showLastRowDivider: _propTypes.default.bool,
/** A flag specifying weather to apply column width style to table cells */
isApplyColumnWidthStyle: _propTypes.default.bool,
/** ++EXPERIMENTAL++ virtualize the table scrolling for long list items */
virtualized: _propTypes.default.bool,
/** ++EXPERIMENTAL++ Set virtualized table height */
virtualizedTableHeight: _propTypes.default.number,
/** ++EXPERIMENTAL++ Set virtualized table row height */
virtualizedLineHeight: _propTypes.default.number,
/** ++EXPERIMENTAL++ Set ref on virtualized List containing table rows */
virtualizedListRef: _propTypes.default.any,
/** array of selected ids in the table. Note that `isRowSelected` prop provides greater selection logic flexibility and is recommended to use instead. */
selectedRowsIds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
/** A callback function called on each column title click. Signature `onSortClick(colData, colNum)` */
onSortClick: _propTypes.default.func,
/** a function which will be called for every row in `data` to specify if it should appear as disabled. Example: `isRowDisabled={(rowData) => !rowData.isEnabled}` */
isRowDisabled: _propTypes.default.func,
/* Horizontal scroll support props. */
horizontalScroll: _propTypes.default.bool,
stickyColumns: _propTypes.default.number,
leftShadowVisible: _propTypes.default.bool,
rightShadowVisible: _propTypes.default.bool,
onUpdateScrollShadows: _propTypes.default.func,
dragAndDrop: _propTypes.default.object,
onDragEnd: _propTypes.default.func,
onDragStart: _propTypes.default.func,
onDragCancel: _propTypes.default.func,
isDragAndDropDisabled: _propTypes.default.bool
};
DataTable.displayName = 'DataTable';
var _default = exports.default = DataTable;
//# sourceMappingURL=DataTable.js.map