InformationPanel
A side panel for viewing additional information without leaving the main context.
Content for row -1 goes here.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime voluptatem praesentium nulla temporibus sit est officiis nobis nostrum, accusamus natus?
import * as React from 'react';
import {
Button,
InformationPanel,
InformationPanelBody,
InformationPanelHeader,
InformationPanelWrapper,
Table,
Text,
} from '@itwin/itwinui-react';
export default () => {
const [openRowIndex, setOpenRowIndex] = React.useState(-1);
return (
<InformationPanelWrapper>
<WrappedTable setOpenRowIndex={setOpenRowIndex} />
<InformationPanel
isOpen={openRowIndex != undefined && openRowIndex !== -1}
>
<InformationPanelHeader onClose={() => setOpenRowIndex(-1)}>
<Text variant='subheading'>Row {openRowIndex ?? 0}</Text>
</InformationPanelHeader>
<InformationPanelBody>
<Text as='p'>Content for row {openRowIndex ?? 0} goes here.</Text>
<Text as='p'>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime
voluptatem praesentium nulla temporibus sit est officiis nobis
nostrum, accusamus natus?
</Text>
</InformationPanelBody>
</InformationPanel>
</InformationPanelWrapper>
);
};
function WrappedTable({ setOpenRowIndex }) {
return (
<div className='demo-table'>
<Table
columns={[
{ id: 'name', Header: 'Name', accessor: 'name' },
{
Header: 'Details',
Cell: ({ row }) => (
<Button onClick={() => setOpenRowIndex(row.index)}>
Click me
</Button>
),
},
]}
data={[{ name: 'Row0' }, { name: 'Row1' }, { name: 'Row2' }]}
emptyTableContent='No data.'
/>
</div>
);
}
The InformationPanel
opens from the side of the screen and overlays the main content. It is typically used to display additional information or actions without navigating away from the current view. It is specifically designed to work well with complex tables, which would otherwise start overflowing horizontally.
Usage
There are two main pieces to this component:
- The
InformationPanelWrapper
is used to wrap around the “main” view (e.g. Table) on which the panel will overlay. - The
InformationPanel
is the actual panel that is displayed. It will be positioned relative toInformationPanelWrapper
and its visibility can be controlled by theisOpen
prop.
Subcomponents
Inside the InformationPanel
component, there are two main subcomponents that can be used to structure the content:
- The
InformationPanelHeader
is used to display a header at the top of the panel. It consists of a title, a close button (which will invoke theonClose
callback when clicked), and optional actions on the right side (controlled by theactions
prop). - The
InformationPanelBody
is used to display the main content of the panel. It can contain any arbitrary content.
There is also an optional InformationPanelContent
, which provides an easy way to display a list of key-value pairs. There can be multiple InformationPanelContent
instances inside the InformationPanelBody
. The key-value pairs can either be displayed on separate lines (default) or on the same line next to each other (using displayStyle="inline"
).
Horizontal orientation
By default, the orientation
of the Information Panel component is "vertical"
. In this orientation, the panel appears from the right side of the screen.
To make the panel appear from the bottom, orientation='horizontal'
can be used.
import * as React from 'react';
import {
Button,
InformationPanel,
InformationPanelBody,
InformationPanelContent,
InformationPanelHeader,
InformationPanelWrapper,
Input,
Label,
Table,
Text,
InputGrid,
IconButton,
} from '@itwin/itwinui-react';
import { SvgWindowPopout } from '@itwin/itwinui-icons-react';
export default () => {
const [openRowIndex, setOpenRowIndex] = React.useState(-1);
return (
<InformationPanelWrapper>
<WrappedTable setOpenRowIndex={setOpenRowIndex} />
<InformationPanel
isOpen={openRowIndex != undefined && openRowIndex !== -1}
orientation='horizontal'
>
<InformationPanelHeader
onClose={() => setOpenRowIndex(-1)}
actions={
<IconButton
label='Open in new window'
styleType='borderless'
onClick={() => {}}
>
<SvgWindowPopout />
</IconButton>
}
>
<Text variant='subheading'>Row {openRowIndex ?? 0}</Text>
</InformationPanelHeader>
<InformationPanelBody>
<InformationPanelContent displayStyle='inline'>
<InputGrid>
<Label htmlFor='name-input'>File name</Label>
<Input
size='small'
id='name-input'
value={`Row ${openRowIndex ?? 0}`}
readOnly
/>
</InputGrid>
<InputGrid>
<Label htmlFor='author-input'>Author</Label>
<Input
size='small'
id='author-input'
defaultValue='DJ Terry'
readOnly
/>
</InputGrid>
<InputGrid>
<Label htmlFor='year-input'>Year</Label>
<Input
size='small'
id='year-input'
defaultValue='2021'
readOnly
/>
</InputGrid>
</InformationPanelContent>
</InformationPanelBody>
</InformationPanel>
</InformationPanelWrapper>
);
};
function WrappedTable({ setOpenRowIndex }) {
return (
<div className='demo-table'>
<Table
columns={[
{ id: 'name', Header: 'Name', accessor: 'name' },
{
Header: 'Details',
Cell: ({ row }) => (
<Button onClick={() => setOpenRowIndex(row.index)}>
Details
</Button>
),
},
]}
data={[{ name: 'Row0' }, { name: 'Row1' }, { name: 'Row2' }]}
emptyTableContent='No data.'
/>
</div>
);
}
Props
Prop | Description | Default |
---|---|---|
isOpen | Is the panel open? boolean | false |
orientation | Orientation of the panel. "vertical" | "horizontal" | 'vertical' |
resizable | Set to false to make the panel non-resizable. boolean | true |
children | Content of the panel. ReactNode | |
as | "symbol" | "object" | "div" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 158 more ... | FunctionComponent<...> |