office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
53 lines • 2.46 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Utilities", "office-ui-fabric-react/lib/Fabric", "office-ui-fabric-react/lib/DetailsList"], function (require, exports, tslib_1, React, Utilities_1, Fabric_1, DetailsList_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var GROUP_HEADER_HEIGHT = 40;
var GROUP_ITEM_HEIGHT = 43;
var _columns = [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 200,
isResizable: true
},
{
key: 'value',
name: 'Value',
fieldName: 'value',
minWidth: 100,
maxWidth: 200,
isResizable: true
}
];
var _items = Array.apply(null, Array(1000)).map(function (_, num) { return ({
key: num.toString(),
name: "Item " + num.toString(),
value: num.toString()
}); });
var _groups = Array.apply(null, Array(10)).map(function (_, num) { return ({
key: num.toString(),
name: num.toString(),
startIndex: num * 100,
count: 100
}); });
var DetailsListGroupedLargeExample = /** @class */ (function (_super) {
tslib_1.__extends(DetailsListGroupedLargeExample, _super);
function DetailsListGroupedLargeExample(props) {
var _this = _super.call(this, props) || this;
_this._root = Utilities_1.createRef();
_this._getGroupHeight = function (group) {
return GROUP_HEADER_HEIGHT + GROUP_ITEM_HEIGHT * group.count;
};
return _this;
}
DetailsListGroupedLargeExample.prototype.render = function () {
return (React.createElement(Fabric_1.Fabric, { className: "DetailsList-grouped-large-example" },
React.createElement(DetailsList_1.DetailsList, { componentRef: this._root, items: _items, groups: _groups, columns: _columns, getGroupHeight: this._getGroupHeight, ariaLabelForSelectAllCheckbox: "Toggle selection for all items", ariaLabelForSelectionColumn: "Toggle selection" })));
};
return DetailsListGroupedLargeExample;
}(Utilities_1.BaseComponent));
exports.DetailsListGroupedLargeExample = DetailsListGroupedLargeExample;
});
//# sourceMappingURL=DetailsList.Grouped.Large.Example.js.map