import
* as React from
"react"
;
import
{
Stack,
ScrollablePane,
DetailsList,
TooltipHost,
IRenderFunction,
IDetailsColumnRenderTooltipProps,
IDetailsHeaderProps,
StickyPositionType,
Sticky,
ScrollbarVisibility,
} from
"office-ui-fabric-react"
;
export
class
DatasetLayout
extends
React.Component {
private
onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
if
(!props) {
return
null
;
}
const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> = tooltipHostProps => (
<TooltipHost {...tooltipHostProps} />
);
return
(
<Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
{defaultRender!({
...props,
onRenderColumnHeaderTooltip,
})}
</Sticky>
);
};
private
columns = [
{
key:
"name"
,
name:
"Name"
,
isResizable:
true
,
minWidth: 100,
onRender: (item: string) => {
return
<span>{item}</span>;
},
},
];
render() {
return
(
<>
<Stack horizontal styles={{ root: { height:
"100%"
} }}>
<Stack.Item>
{
}
<Stack verticalFill>
<Stack.Item
verticalFill
styles={{
root: {
textAlign:
"left"
,
width:
"150px"
,
paddingLeft:
"8px"
,
paddingRight:
"8px"
,
overflowY:
"auto"
,
overflowX:
"hidden"
,
height:
"100%"
,
background:
"#DBADB1"
,
},
}}
>
<Stack>
<Stack.Item>Left Item 1</Stack.Item>
<Stack.Item>Left Item 2</Stack.Item>
</Stack>
</Stack.Item>
</Stack>
</Stack.Item>
<Stack.Item styles={{ root: { width:
"100%"
} }}>
{
}
<Stack
grow
styles={{
root: {
width:
"100%"
,
height:
"100%"
,
},
}}
>
<Stack.Item verticalFill>
<Stack
grow
styles={{
root: {
height:
"100%"
,
width:
"100%"
,
background:
"#65A3DB"
,
},
}}
>
<Stack.Item>Top Bar</Stack.Item>
<Stack.Item
verticalFill
styles={{
root: {
height:
"100%"
,
overflowY:
"auto"
,
overflowX:
"auto"
,
},
}}
>
<div style={{ position:
"relative"
, height:
"100%"
}}>
<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
<DetailsList
onRenderDetailsHeader={
this
.onRenderDetailsHeader}
compact={
true
}
items={[...Array(200)].map((_, i) => `Item ${i + 1}`)}
columns={
this
.columns}
></DetailsList>
</ScrollablePane>
</div>
</Stack.Item>
<Stack.Item align=
"center"
>Footer</Stack.Item>
</Stack>
</Stack.Item>
</Stack>
</Stack.Item>
</Stack>
</>
);
}
}