office-ui-fabric-react/lib-es2015/components/DetailsList/DetailsListPage.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PageMarkdown, PropertiesTableSet } from '@uifabric/example-app-base';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { DetailsListStatus } from './DetailsList.checklist';
import { DetailsListBasicExample } from './examples/DetailsList.Basic.Example';
var DetailsListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx');
import { DetailsListCompactExample } from './examples/DetailsList.Compact.Example';
var DetailsListCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx');
import { DetailsListCustomColumnsExample } from './examples/DetailsList.CustomColumns.Example';
var DetailsListCustomColumnsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx');
import { DetailsListCustomRowsExample } from './examples/DetailsList.CustomRows.Example';
var DetailsListCustomRowsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomRows.Example.tsx');
import { DetailsListCustomGroupHeadersExample } from './examples/DetailsList.CustomGroupHeaders.Example';
var DetailsListCustomGroupHeadersExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomGroupHeaders.Example.tsx');
import { DetailsListAdvancedExample } from './examples/DetailsList.Advanced.Example';
var DetailsListAdvancedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx');
import { DetailsListGroupedExample } from './examples/DetailsList.Grouped.Example';
var DetailsListGroupedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx');
import { DetailsListDragDropExample } from './examples/DetailsList.DragDrop.Example';
var DetailsListDragDropExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx');
import { DetailsListDocumentsExample } from './examples/DetailsList.Documents.Example';
var DetailsListDocumentsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx');
import { DetailsListNavigatingFocusExample } from './examples/DetailsList.NavigatingFocus.Example';
var DetailsListNavigatingFocusExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx');
var DetailsListPage = /** @class */ (function (_super) {
    tslib_1.__extends(DetailsListPage, _super);
    function DetailsListPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    DetailsListPage.prototype.render = function () {
        return (React.createElement(ComponentPage, { title: 'DetailsList', componentName: 'DetailsListExample', componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/DetailsList', exampleCards: React.createElement("div", null,
                React.createElement(ExampleCard, { title: 'Document DetailsList with 500 items, sorting, filtering, marquee selection, justified columns', isOptIn: true, code: DetailsListDocumentsExampleCode },
                    React.createElement(DetailsListDocumentsExample, null)),
                React.createElement(ExampleCard, { title: 'Simple DetailsList with 500 items, filtering, marquee selection', isOptIn: true, code: DetailsListBasicExampleCode },
                    React.createElement(DetailsListBasicExample, null)),
                React.createElement(ExampleCard, { title: 'Compact DetailsList with 500 items, filtering, marquee selection', isOptIn: true, code: DetailsListCompactExampleCode },
                    React.createElement(DetailsListCompactExample, null)),
                React.createElement(ExampleCard, { title: 'Simple Grouped DetailsList', isOptIn: true, code: DetailsListGroupedExampleCode },
                    React.createElement(DetailsListGroupedExample, null)),
                React.createElement(ExampleCard, { title: 'Rendering custom item columns with sorting', isOptIn: true, code: DetailsListCustomColumnsExampleCode },
                    React.createElement(DetailsListCustomColumnsExample, null)),
                React.createElement(ExampleCard, { title: 'Rendering custom item rows', isOptIn: true, code: DetailsListCustomRowsExampleCode },
                    React.createElement(DetailsListCustomRowsExample, null)),
                ",",
                React.createElement(ExampleCard, { title: 'Rendering custom group headers', isOptIn: true, code: DetailsListCustomGroupHeadersExampleCode },
                    React.createElement(DetailsListCustomGroupHeadersExample, null)),
                React.createElement(ExampleCard, { title: 'Advanced DetailsList of 5000 items, variable row heights', isOptIn: true, code: DetailsListAdvancedExampleCode },
                    React.createElement(DetailsListAdvancedExample, null)),
                React.createElement(ExampleCard, { title: 'Drag and Drop DetailsList with 10 items', isOptIn: true, code: DetailsListDragDropExampleCode },
                    React.createElement(DetailsListDragDropExample, null)),
                React.createElement(ExampleCard, { title: 'Navigating to new content preserving keyboard focus with initialFocusedIndex', isOptIn: true, code: DetailsListNavigatingFocusExampleCode },
                    React.createElement(DetailsListNavigatingFocusExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts')
                ] }), overview: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md')), donts: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, DetailsListStatus)) }));
    };
    return DetailsListPage;
}(React.Component));
export { DetailsListPage };
//# sourceMappingURL=DetailsListPage.js.map