react ダイアログ

const items = [
  { key: '1', name: 'アイテム1', value: '100' },
  { key: '2', name: 'アイテム2', value: '200' },
  // 他の行データを追加
];



import React from 'react';
import { Dialog, DialogType, DialogFooter, PrimaryButton } from '@fluentui/react';
import { DetailsList, DetailsListLayoutMode, SelectionMode, IColumn } from '@fluentui/react/lib/DetailsList';

const MyTableDialog = ({ showDialog, onClose, items }) => {
  const columns: IColumn[] = [
    { key: 'name', name: '名前', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true },
    { key: 'value', name: '値', fieldName: 'value', minWidth: 100, maxWidth: 200, isResizable: true },
  ];

  return (
    <Dialog
      hidden={!showDialog}
      onDismiss={onClose}
      dialogContentProps={{
        type: DialogType.normal,
        title: '表のタイトル',
      }}
      modalProps={{
        isBlocking: false,
        styles: { main: { maxWidth: 600 } },
      }
    >
      <div>
        <DetailsList
          items={items}
          columns={columns}
          selectionMode={SelectionMode.none}
          layoutMode={DetailsListLayoutMode.fixedColumns}
        />
      </div>
      <DialogFooter>
        <PrimaryButton onClick={onClose} text="閉じる" />
      </DialogFooter>
    </Dialog>
  );
};

export default MyTableDialog;












import React, { useState } from 'react';
import MyTableDialog from './MyTableDialog';

const ParentComponent = () => {
  const [isDialogVisible, setIsDialogVisible] = useState(false);

  const openDialog = () => {
    setIsDialogVisible(true);
  }

  const closeDialog = () => {
    setIsDialogVisible(false);
  }

  const items = [
    { key: '1', name: 'アイテム1', value: '100' },
    { key: '2', name: 'アイテム2', value: '200' },
    // 他の行データを追加
  ];

  return (
    <div>
      <a href="#" onClick={openDialog}>ダイアログを開く</a>
      <MyTableDialog showDialog={isDialogVisible} onClose={closeDialog} items={items} />
    </div>
  );
};

export default ParentComponent;