office-ui-fabric-react/lib/components/DetailsList/examples/DetailsList.Grouped.Large.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, createRef } from 'office-ui-fabric-react/lib/Utilities';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
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 = createRef();
        _this._getGroupHeight = function (group) {
            return GROUP_HEADER_HEIGHT + GROUP_ITEM_HEIGHT * group.count;
        };
        return _this;
    }
    DetailsListGroupedLargeExample.prototype.render = function () {
        return (React.createElement(Fabric, { className: "DetailsList-grouped-large-example" },
            React.createElement(DetailsList, { componentRef: this._root, items: _items, groups: _groups, columns: _columns, getGroupHeight: this._getGroupHeight, ariaLabelForSelectAllCheckbox: "Toggle selection for all items", ariaLabelForSelectionColumn: "Toggle selection" })));
    };
    return DetailsListGroupedLargeExample;
}(BaseComponent));
export { DetailsListGroupedLargeExample };
//# sourceMappingURL=DetailsList.Grouped.Large.Example.js.map