Material-UI の DataGrid の中にボタンを配置するサンプル
15187 ワード
概要
DataGrid にボタンを配置するサンプル。
こういうの。
ボタン押下でパラメータを渡せるようにする。
一覧のロジック
import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
import Button from '@material-ui/core/Button';
import DeleteButton from './DeleteButton';
// カラム
const columns = [
// 削除ボタン
{
field: 'deleteBtn',
headerName: '削除',
sortable: false,
width: 90,
disableClickEventBubbling: true,
renderCell: (params) => <DeleteButton rowId={ params.id } />
},
// 詳細ボタン
{
field: 'editBtn',
headerName: '詳細',
sortable: false,
width: 90,
disableClickEventBubbling: true,
renderCell: (params) => <Button variant="contained" color="primary">詳細</Button>
},
{ field: 'id', headerName: 'ID', width: 100 },
{ field: 'title', headerName: '本のタイトル', width: 250 },
];
// データ
const rows = [
{ id: 1, title: '君の膵臓をたべたい' },
{ id: 2, title: '容疑者Xの献身' },
{ id: 3, title: 'コンビニ人間' },
{ id: 4, title: '蹴りたい背中' },
{ id: 5, title: '世界の中心で、愛を叫ぶ' },
];
export default function DataGridDemo() {
return (
<div style={{ height: 400, width: 600 }}>
<DataGrid rows={rows} columns={columns} pageSize={5} />
</div>
);
}
削除ボタンのロジック
import React, { useState } from 'react';
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
const DeleteButtonDialog = ({ rowId }) => {
const [open, setOpen] = useState(false); // 確認ダイアログの表示/非表示
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const deleteRow = (rowId, e) => {
// (ここで削除処理)
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleOpen}>
削除
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{'確認'}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">ID「{rowId}」を本当に削除しますか?</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="outlined" color="primary" autoFocus>
やめる
</Button>
<Button onClick={(e) => deleteRow(rowId, e)} color="primary">
削除する
</Button>
</DialogActions>
</Dialog>
</div>
);
};
export default DeleteButtonDialog;
CodesandboxのURLを貼っておきます。
Author And Source
この問題について(Material-UI の DataGrid の中にボタンを配置するサンプル), 我々は、より多くの情報をここで見つけました https://qiita.com/takiguchi-yu/items/4d6e2845402aa2d5f36a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .