InformationPanel

A side panel for viewing additional information without leaving the main context.

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 to InformationPanelWrapper and its visibility can be controlled by the isOpen prop.

<InformationPanelWrapper>
  <Table ... /> {/* component to overlay */}

  <InformationPanel isOpen={true}>…</InformationPanel>
</InformationPanelWrapper>

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 the onClose callback when clicked), and optional actions on the right side (controlled by the actions prop).
The InformationPanelBody is used to display the main content of the panel. It can contain any arbitrary content.

<InformationPanel>
  <InformationPanelHeader
    onClose={() => {}}
    actions={
      <IconButton label='Open in new window' styleType='borderless' onClick={() => {}}>
        <SvgWindowPopout />
      </IconButton>
    }
  >
    <Text variant='subheading' as='h2'>
      InfoPanel heading
    </Text>
  </InformationPanelHeader>

  <InformationPanelBody>…</InformationPanelBody>
</InformationPanel>

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").

<InformationPanelContent displayStyle='inline'>
  <Label htmlFor='name-input'>File name</Label>
  <Input id='name-input' value='Alpha.mp3' />

  <Label htmlFor='year-input'>Year</Label>
  <Input id='year-input' value='2021' />

  <Label htmlFor='path-input'>Path</Label>
  <Input id='path-input' value='/Shared/Music/' />
</InformationPanelContent>

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<...>