英文:
How to select or deselect a row in a Table using Data Grid Mui
问题
以下是您要翻译的代码部分：
// 如何在@mui/x-data-grid中使用onclick选择和取消选择行，而不使用checkboxSelection属性，// 我正在尝试在Mui中实现行的选择或取消选择// 以下是表格组件文件import * as React from "react";import { v1 } from "uuid";import {DataGrid,GridToolbarContainer,GridToolbarExport} from "@mui/x-data-grid";// CSSimport css from "./index.module.css";export default function Table(props) {const { tableHeader, data } = props;data.forEach((element) => {element["id"] = v1();});function CustomToolbar() {return (<GridToolbarContainer><GridToolbarExport className={`${css.btn}`} /></GridToolbarContainer>);}return (<div style={{ height: 350, width: "100%" }}><DataGridclassName={`${css.root}`}rows={data}columns={tableHeader}pageSize={10}rowHeight={30}autoPageSize={true}disableColumnMenu={true}components={{Toolbar: CustomToolbar,}}/></div>);}
请注意，我只翻译了代码部分，没有包括您要翻译的问题。
英文:
How to select and deselect a row using onclick in @mui/x-data-grid with out the checkboxSelection prop,
I am trying to implement selection or deselection of a row in Mui
Below is Table Component file
import * as React from "react";import { v1 } from "uuid";import {DataGrid,GridToolbarContainer,GridToolbarExport} from "@mui/x-data-grid";//cssimport css from "./index.module.css";export default function Table(props) {const { tableHeader, data } = props;data.forEach((element) => {element["id"] = v1();});function CustomToolbar() {return (<GridToolbarContainer><GridToolbarExport className={`${css.btn}`} /></GridToolbarContainer>);}return (<div style={{ height: 350, width: "100%" }}><DataGridclassName={`${css.root}`}rows={data}columns={tableHeader}pageSize={10}rowHeight={30}autoPageSize={true}disableColumnMenu={true}components={{Toolbar: CustomToolbar,}}/></div>);}
答案1
得分: 1
根据MUI文档，您需要通过@mui/x-data-grid-generator包中的useDemoData钩子来操作：
import * as React from 'react';import { DataGrid } from '@mui/x-data-grid';import { useDemoData } from '@mui/x-data-grid-generator';export default function SingleRowSelectionGrid() {const { data } = useDemoData({dataSet: 'Commodity',rowLength: 10,maxColumns: 6,});return (<div style={{ height: 400, width: '100%' }}><DataGrid {...data} /></div>);}
如果您想要取消选择一行，只需按住Ctrl键并单击它。
英文:
According to MUI docs, you will need to go through the useDemoData hook in the package @mui/x-data-grid-generator:
import * as React from 'react';import { DataGrid } from '@mui/x-data-grid';import { useDemoData } from '@mui/x-data-grid-generator';export default function SingleRowSelectionGrid() {const { data } = useDemoData({dataSet: 'Commodity',rowLength: 10,maxColumns: 6,});return (<div style={{ height: 400, width: '100%' }}><DataGrid {...data} /></div>);}
In case you would like to unselect a row, simply hold <kbd>Ctrl</kbd> and click on it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论