英文:
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";
// CSS
import 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%" }}>
<DataGrid
className={`${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";
//css
import 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%" }}>
<DataGrid
className={`${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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论