office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
98 lines • 3.53 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Fabric", "office-ui-fabric-react/lib/DetailsList"], function (require, exports, tslib_1, React, Button_1, Fabric_1, DetailsList_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _columns = [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 200,
isResizable: true
},
{
key: 'color',
name: 'Color',
fieldName: 'color',
minWidth: 100,
maxWidth: 200
}
];
var _items = [
{
key: 'a',
name: 'a',
color: 'red'
},
{
key: 'b',
name: 'b',
color: 'red'
},
{
key: 'c',
name: 'c',
color: 'blue'
},
{
key: 'd',
name: 'd',
color: 'blue'
},
{
key: 'e',
name: 'e',
color: 'blue'
}
];
var DetailsListGroupedExample = /** @class */ (function (_super) {
tslib_1.__extends(DetailsListGroupedExample, _super);
function DetailsListGroupedExample(props) {
var _this = _super.call(this, props) || this;
_this.state = {
items: _items
};
return _this;
}
DetailsListGroupedExample.prototype.render = function () {
var items = this.state.items;
return (React.createElement(Fabric_1.Fabric, { className: 'foo' },
React.createElement(Button_1.DefaultButton, { onClick: this._addItem, text: 'Add an item' }),
React.createElement(DetailsList_1.DetailsList, { items: items, groups: [
{
key: 'groupred0',
name: 'By "red"',
startIndex: 0,
count: 2
},
{
key: 'groupgreen2',
name: 'By "green"',
startIndex: 2,
count: 0
},
{
key: 'groupblue2',
name: 'By "blue"',
startIndex: 2,
count: 3
}
], columns: _columns, ariaLabelForSelectAllCheckbox: 'Toggle selection for all items', ariaLabelForSelectionColumn: 'Toggle selection', groupProps: {
showEmptyGroups: true
} })));
};
DetailsListGroupedExample.prototype._addItem = function () {
var items = this.state.items;
this.setState({
items: items.concat([{
key: 'item-' + items.length,
name: 'New item ' + items.length,
color: 'blue'
}])
});
};
return DetailsListGroupedExample;
}(React.Component));
exports.DetailsListGroupedExample = DetailsListGroupedExample;
});
//# sourceMappingURL=DetailsList.Grouped.Example.js.map