office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.08 kB
JavaScript
module.exports = "/* tslint:disable:no-unused-variable */\nimport * as React from 'react';\n/* tslint:enable:no-unused-variable */\nimport {\n DetailsList,\n IGroup,\n Link\n} from '../../../../index';\nimport { createListItems, createGroups } from '../../../utilities/data';\nimport './DetailsListExample.scss';\n\nconst ITEMS_PER_GROUP = 20;\nconst GROUP_COUNT = 20;\n\nlet _items: any[];\nlet _groups: IGroup[];\n\nexport class DetailsListCustomGroupHeadersExample extends React.Component<any, any> {\n constructor() {\n super();\n\n _items = _items || createListItems(500);\n _groups = _groups || createGroups(GROUP_COUNT, 1, 0, ITEMS_PER_GROUP);\n }\n\n public render() {\n return (\n <div>\n <DetailsList\n items={_items}\n groups={_groups}\n groupProps={{\n onRenderHeader: props => (\n <div className='DetailsListExample-customHeader'>\n <div className='DetailsListExample-customHeaderTitle'>{`I am a custom header for: ${props.group.name}`}</div>\n <div className='DetailsListExample-customHeaderLinkSet'>\n <Link\n className='DetailsListExample-customHeaderLink'\n onClick={ () => props.onToggleSelectGroup(props.group) }>\n { props.isSelected ? 'Remove selection' : 'Select group' }\n </Link>\n <Link\n className='DetailsListExample-customHeaderLink'\n onClick={() => props.onToggleCollapse(props.group)}>\n { props.group.isCollapsed ? 'Expand group' : 'Collapse group' }\n </Link>\n </div>\n </div>\n ),\n onRenderFooter: props => (\n <div className='DetailsListExample-customHeader'>\n <div className='DetailsListExample-customHeaderTitle'>{`I'm a custom footer for: ${props.group.name}`}</div>\n </div>\n )\n }}\n />\n </div>\n );\n }\n\n}\n";