office-ui-fabric-react/lib/components/DetailsList/DetailsList.doc.js

Reusable React components for building experiences for Office 365.

import * as React from 'react';
import { DetailsListBasicExample } from './examples/DetailsList.Basic.Example';
var DetailsListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx');
var DetailsListBasicExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx');
import { DetailsListAnimationExample } from './examples/DetailsList.Animation.Example';
var DetailsListAnimationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Animation.Example.tsx');
var DetailsListAnimationExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Animation.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');
var DetailsListCompactExampleCodepen = require('!@uifabric/codepen-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');
var DetailsListCustomColumnsExampleCodepen = require('!@uifabric/codepen-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');
var DetailsListCustomRowsExampleCodepen = require('!@uifabric/codepen-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');
var DetailsListCustomGroupHeadersExampleCodepen = require('!@uifabric/codepen-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');
var DetailsListAdvancedExampleCodepen = require('!@uifabric/codepen-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');
var DetailsListGroupedExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx');
import { DetailsListGroupedLargeExample } from './examples/DetailsList.Grouped.Large.Example';
var DetailsListGroupedLargeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Large.Example.tsx');
var DetailsListGroupedLargeExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Large.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');
var DetailsListDragDropExampleCodepen = require('!@uifabric/codepen-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');
var DetailsListDocumentsExampleCodepen = require('!@uifabric/codepen-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 DetailsListNavigatingFocusExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.NavigatingFocus.Example.tsx');
import { ShimmerApplicationExample as DetailsListShimmerExample } from '../Shimmer/examples/Shimmer.Application.Example';
var DetailsListShimmerExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Shimmer/examples/Shimmer.Application.Example.tsx');
var DetailsListShimmerExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/Shimmer/examples/Shimmer.Application.Example.tsx');
import { DetailsListCustomFooterExample } from './examples/DetailsList.CustomFooter.Example';
var DetailsListCustomFooterExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomFooter.Example.tsx');
var DetailsListCustomFooterExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomFooter.Example.tsx');
export var DetailsListPageProps = {
    title: 'DetailsList',
    componentName: 'DetailsList',
    componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/DetailsList',
    examples: [
        {
            title: 'DetailsList with 500 documents, sorting, filtering, marquee selection, justified columns',
            code: DetailsListDocumentsExampleCode,
            codepenJS: DetailsListDocumentsExampleCodepen,
            view: React.createElement(DetailsListDocumentsExample, null)
        }
    ],
    overview: require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListOverview.md'),
    bestPractices: '',
    dos: require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDos.md'),
    donts: require('!raw-loader!office-ui-fabric-react/src/components/DetailsList/docs/DetailsListDonts.md'),
    isHeaderVisible: true
};
function generateProps(example) {
    return {
        title: example.title,
        componentName: 'DetailsList',
        componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/DetailsList',
        examples: [example],
        isHeaderVisible: false,
        isFeedbackVisible: true
    };
}
export var DetailsListBasicPageProps = generateProps({
    title: 'Simple DetailsList with filtering and marquee selection',
    code: DetailsListBasicExampleCode,
    codepenJS: DetailsListBasicExampleCodepen,
    view: React.createElement(DetailsListBasicExample, null)
});
export var DetailsListAnimationPageProps = generateProps({
    title: 'DetailsList with Row animation when cell content changed',
    code: DetailsListAnimationExampleCode,
    codepenJS: DetailsListAnimationExampleCodepen,
    view: React.createElement(DetailsListAnimationExample, null)
});
export var DetailsListCompactPageProps = generateProps({
    title: 'Compact DetailsList with filtering and marquee selection',
    code: DetailsListCompactExampleCode,
    codepenJS: DetailsListCompactExampleCodepen,
    view: React.createElement(DetailsListCompactExample, null)
});
export var DetailsListSimpleGroupedPageProps = generateProps({
    title: 'Simple grouped DetailsList',
    code: DetailsListGroupedExampleCode,
    codepenJS: DetailsListGroupedExampleCodepen,
    view: React.createElement(DetailsListGroupedExample, null)
});
export var DetailsListLargeGroupedPageProps = generateProps({
    title: 'Large grouped DetailsList',
    code: DetailsListGroupedLargeExampleCode,
    codepenJS: DetailsListGroupedLargeExampleCodepen,
    view: React.createElement(DetailsListGroupedLargeExample, null)
});
export var DetailsListCustomColumnsPageProps = generateProps({
    title: 'Rendering custom item columns with sorting',
    code: DetailsListCustomColumnsExampleCode,
    codepenJS: DetailsListCustomColumnsExampleCodepen,
    view: React.createElement(DetailsListCustomColumnsExample, null)
});
export var DetailsListCustomRowsPageProps = generateProps({
    title: 'Rendering custom item rows',
    code: DetailsListCustomRowsExampleCode,
    codepenJS: DetailsListCustomRowsExampleCodepen,
    view: React.createElement(DetailsListCustomRowsExample, null)
});
export var DetailsListCustomGroupHeadersPageProps = generateProps({
    title: 'Rendering custom group headers',
    code: DetailsListCustomGroupHeadersExampleCode,
    codepenJS: DetailsListCustomGroupHeadersExampleCodepen,
    view: React.createElement(DetailsListCustomGroupHeadersExample, null)
});
export var DetailsListAdvancedPageProps = generateProps({
    title: 'Advanced DetailsList of 5000 items with variable row heights',
    code: DetailsListAdvancedExampleCode,
    codepenJS: DetailsListAdvancedExampleCodepen,
    view: React.createElement(DetailsListAdvancedExample, null)
});
export var DetailsListDragDropPageProps = generateProps({
    title: 'DetailsList supporting drag and drop',
    code: DetailsListDragDropExampleCode,
    codepenJS: DetailsListDragDropExampleCodepen,
    view: React.createElement(DetailsListDragDropExample, null)
});
export var DetailsListNavigatingFocusPageProps = generateProps({
    title: 'Navigating to new content while preserving keyboard focus',
    code: DetailsListNavigatingFocusExampleCode,
    codepenJS: DetailsListNavigatingFocusExampleCodepen,
    view: React.createElement(DetailsListNavigatingFocusExample, null)
});
export var DetailsListShimmerPageProps = generateProps({
    title: 'Shimmered DetailsList - usually shown while retrieving data',
    code: DetailsListShimmerExampleCode,
    codepenJS: DetailsListShimmerExampleCodepen,
    view: React.createElement(DetailsListShimmerExample, null)
});
export var DetailsListCustomFooterPageProps = generateProps({
    title: 'Rendering custom DetailsList footer',
    code: DetailsListCustomFooterExampleCode,
    codepenJS: DetailsListCustomFooterExampleCodepen,
    view: React.createElement(DetailsListCustomFooterExample, null)
});
//# sourceMappingURL=DetailsList.doc.js.map