---
name: Measurements Panel
menu: Data Display
route: components/measurementsPanel
---

import { useState } from 'react';
import { Playground, Props } from 'docz';
import {
  SidePanel,
  MeasurementsPanel,
  ButtonGroup,
  Button,
  IconButton,
  Icon,
} from '@ohif/ui';

# Measurements Panel

## Import

```javascript
import { MeasurementsPanel } from '@ohif/ui';
```

## Basic usage

<Playground>
  {() => {
    const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
    const descriptionData = {
      date: '07-Sep-2010',
      modality: 'CT',
      description: 'CHEST/ABD/PELVIS W CONTRAST',
    };
    const measurementTableData = {
      title: 'Measurements',
      amount: 10,
      data: new Array(10).fill({}).map((el, i) => ({
        id: i + 1,
        label: 'Label short description',
        displayText: '24.0 x 24.0 mm (S:4, I:22)',
        isActive: activeMeasurementItem === i + 1,
      })),
      onClick: (id) => setActiveMeasurementItem((s) => (s === id ? null : id)),
      onEdit: (id) => alert(`Edit: ${id}`),
    };
    return (
      <div className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full h-screen">
        <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
          CONTENT
        </div>
        <SidePanel
          side="right"
          iconName="list-bullets"
          iconLabel="Measure"
          componentLabel="Measurements"
          defaultIsOpen={true}
        >
          <MeasurementsPanel
            descriptionData={descriptionData}
            measurementTableData={measurementTableData}
            actionButtons={
              <>
                <ButtonGroup onClick={() => alert('Export')}>
                  <Button
                    className="text-white border-primary-main bg-black text-base py-2 px-2"
                    size="initial"
                    color="inherit"
                  >
                    Export
                  </Button>
                  <IconButton
                    className="bg-black border-primary-main px-2 text-white px-2"
                    color="inherit"
                    size="initial"
                  >
                    <Icon name="arrow-down" />
                  </IconButton>
                </ButtonGroup>
                <Button
                  className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
                  variant="outlined"
                  size="initial"
                  color="inherit"
                  onClick={() => alert('Create Report')}
                >
                  Create Report
                </Button>
              </>
            }
          />
        </SidePanel>
      </div>
    );
  }}
</Playground>

## Properties

<Props of={MeasurementsPanel} />