office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
66 lines (64 loc) • 9.43 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Link", "@uifabric/example-app-base", "./examples/DetailsList.Basic.Example", "./examples/DetailsList.Compact.Example", "./examples/DetailsList.CustomColumns.Example", "./examples/DetailsList.CustomRows.Example", "./examples/DetailsList.CustomGroupHeaders.Example", "./examples/DetailsList.Advanced.Example", "./examples/DetailsList.Grouped.Example", "./examples/DetailsList.DragDrop.Example", "./examples/DetailsList.Documents.Example", "./examples/DetailsList.NavigatingFocus.Example"], function (require, exports, tslib_1, React, Link_1, example_app_base_1, DetailsList_Basic_Example_1, DetailsList_Compact_Example_1, DetailsList_CustomColumns_Example_1, DetailsList_CustomRows_Example_1, DetailsList_CustomGroupHeaders_Example_1, DetailsList_Advanced_Example_1, DetailsList_Grouped_Example_1, DetailsList_DragDrop_Example_1, DetailsList_Documents_Example_1, DetailsList_NavigatingFocus_Example_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DetailsListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx');
var DetailsListCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx');
var DetailsListCustomColumnsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx');
var DetailsListCustomRowsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx');
var DetailsListCustomGroupHeadersExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx');
var DetailsListAdvancedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx');
var DetailsListGroupedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx');
var DetailsListDragDropExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx');
var DetailsListDocumentsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx');
var DetailsListNavigatingFocusExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx');
var DetailsListPage = (function (_super) {
tslib_1.__extends(DetailsListPage, _super);
function DetailsListPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
DetailsListPage.prototype.render = function () {
return (React.createElement(example_app_base_1.ComponentPage, { title: 'DetailsList', componentName: 'DetailsListExample', exampleCards: React.createElement("div", null,
React.createElement(example_app_base_1.ExampleCard, { title: 'Document DetailsList with 500 items, sorting, filtering, marquee selection', isOptIn: true, code: DetailsListDocumentsExampleCode },
React.createElement(DetailsList_Documents_Example_1.DetailsListDocumentsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple DetailsList with 500 items, filtering, marquee selection', isOptIn: true, code: DetailsListBasicExampleCode },
React.createElement(DetailsList_Basic_Example_1.DetailsListBasicExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Compact DetailsList with 500 items, filtering, marquee selection', isOptIn: true, code: DetailsListCompactExampleCode },
React.createElement(DetailsList_Compact_Example_1.DetailsListCompactExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Simple Grouped DetailsList', isOptIn: true, code: DetailsListGroupedExampleCode },
React.createElement(DetailsList_Grouped_Example_1.DetailsListGroupedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom item columns with sorting', isOptIn: true, code: DetailsListCustomColumnsExampleCode },
React.createElement(DetailsList_CustomColumns_Example_1.DetailsListCustomColumnsExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom item rows', isOptIn: true, code: DetailsListCustomRowsExampleCode },
React.createElement(DetailsList_CustomRows_Example_1.DetailsListCustomRowsExample, null)),
",",
React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom group headers', isOptIn: true, code: DetailsListCustomGroupHeadersExampleCode },
React.createElement(DetailsList_CustomGroupHeaders_Example_1.DetailsListCustomGroupHeadersExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Advanced DetailsList of 5000 items, variable row heights', isOptIn: true, code: DetailsListAdvancedExampleCode },
React.createElement(DetailsList_Advanced_Example_1.DetailsListAdvancedExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Drag and Drop DetailsList with 10 items', isOptIn: true, code: DetailsListDragDropExampleCode },
React.createElement(DetailsList_DragDrop_Example_1.DetailsListDragDropExample, null)),
React.createElement(example_app_base_1.ExampleCard, { title: 'Navigating to new content preserving keyboard focus with initialFocusedIndex', isOptIn: true, code: DetailsListNavigatingFocusExampleCode },
React.createElement(DetailsList_NavigatingFocus_Example_1.DetailsListNavigatingFocusExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/DetailsList.Props.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null,
"DetailsList is a derivative of the ",
React.createElement(Link_1.Link, { href: '#/examples/list' }, "List"),
" component. It is a robust way to display an information rich collection of items. It can support powerful ways to aid a user in finding content with sorting, grouping and filtering. Lists are a great way to handle large amounts of content, but poorly designed Lists can be difficult to parse."),
React.createElement("p", null, "Use a DetailsList when density of information is critical. Lists can support single and multiple selection, as well as drag and drop and marquee selection. They are composed of a column header, which contains the metadata fields which are attached to the list items, and provide the ability to sort, filter and even group the list. List items are composed of selection, icon, and name columns at minimum. One can also include other columns such as Date Modified, or any other metadata field associated with the collection. Place the most important columns from left to right for ease of recall and comparison."),
React.createElement("p", null, "DetailsList is classically used to display files, but is also used to render custom lists that can be purely metadata. Avoid using file type icon overlays to denote status of a file as it can make the entire icon unclear. Be sure to leave ample width for each column\u2019s data. If there are multiple lines of text in a column, consider the variable row height variant.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use them to display content."),
React.createElement("li", null, "Provide useful columns of metadata."),
React.createElement("li", null, "Display columns in order of importance left to right or right to left depending on the standards of the culture."),
React.createElement("li", null, "Give columns ample default width to display information."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use them to display commands or settings."),
React.createElement("li", null, "Overload the view with too many columns that require excessive horizontal scrolling."),
React.createElement("li", null, "Make columns so narrow that it truncates the information in typical cases."))), isHeaderVisible: this.props.isHeaderVisible }));
};
return DetailsListPage;
}(React.Component));
exports.DetailsListPage = DetailsListPage;
});
//# sourceMappingURL=DetailsListPage.js.map