मैं सामग्री-यूआई की डेटा तालिका की प्रत्येक पंक्ति में एक बटन नहीं जोड़ सकता मेरे पास एक सामग्री-यूआई डेटा-टेबल है जिसे मैं इस तरह प्रस्तुत करता हूं:
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
मैंने कॉलम वैरिएबल 'एक्शन' कॉलम में जोड़ा है जहां बटन होना चाहिए। पंक्तियाँ केवल एक डेटा ऑब्जेक्ट हैं जो मुझे प्रॉप्स से मिलती हैं। मैं प्रत्येक पंक्ति में एक बटन कैसे जोड़ सकता हूं (पंक्ति को संपादित करने के लिए)? मैंने डेटा ऐरे को मैप करने की कोशिश की है लेकिन डेटा के हर ऑब्जेक्ट में JSX बटन जोड़ना संभव नहीं है।
3 जवाब
आप GridColDef.renderCell को ओवरराइड करके अपना कस्टम घटक जोड़ सकते हैं विधि और जो भी तत्व आप चाहते हैं उसे वापस करें।
नीचे दिया गया उदाहरण एक क्रिया स्तंभ प्रदर्शित करता है जो प्रत्येक पंक्ति में एक बटन प्रस्तुत करता है। बटन पर क्लिक करते समय, यह जेसन स्ट्रिंग में वर्तमान पंक्ति डेटा को अलर्ट करता है:
const columns: GridColDef[] = [
{ field: "id", headerName: "ID", width: 70 },
{
field: "action",
headerName: "Action",
sortable: false,
renderCell: (params) => {
const onClick = (e) => {
e.stopPropagation(); // don't select this row after clicking
const api: GridApi = params.api;
const thisRow: Record<string, GridCellValue> = {};
api
.getAllColumns()
.filter((c) => c.field !== "__check__" && !!c)
.forEach(
(c) => (thisRow[c.field] = params.getValue(params.id, c.field))
);
return alert(JSON.stringify(thisRow, null, 4));
};
return <Button onClick={onClick}>Click</Button>;
}
},
];
V5
V4
Module '"@material-ui/data-grid"' has no exported member 'ColDef'.
बस इस पर आया था।
आपको अपने कॉलम एरे में एक रेंडरसेल विधि शामिल करने की आवश्यकता है।
const columns = [
{
field: 'col1',
headerName: 'Name 1',
width: 150,
disableClickEventBubbling: true,
},
{
field: 'col2',
headerName: 'Name 2',
width: 300,
disableClickEventBubbling: true,
},
{
field: 'col3',
headerName: 'Name 3',
width: 300,
disableClickEventBubbling: true,
},
{
field: 'col4',
headerName: 'Name 4',
width: 100,
disableClickEventBubbling: true,
},
{
field: 'col5',
headerName: 'Name 5',
width: 150,
***renderCell: renderSummaryDownloadButton,***
disableClickEventBubbling: true,
},
{
field: 'col6',
headerName: 'Name 6',
width: 150,
***renderCell: renderDetailsButton,***
disableClickEventBubbling: true,
},
]
उपरोक्त में मैं कॉलम 5 और 6 के अंदर एक बटन प्रस्तुत कर रहा हूं जो प्रत्येक आबादी वाली पंक्ति पर दिखाई देगा।
इसके ऊपर आपके पास एक फ़ंक्शन हो सकता है जो सामग्री-यूआई से एक बटन बनाता है और देता है।
const renderDetailsButton = (params) => {
return (
<strong>
<Button
variant="contained"
color="primary"
size="small"
style={{ marginLeft: 16 }}
onClick={() => {
parseName(params.row.col6)
}}
>
More Info
</Button>
</strong>
)
}
जबकि @NearHuscarl की प्रतिक्रिया पूरी तरह से प्रश्न का उत्तर देती है, मैं एक टाइपस्क्रिप्ट उदाहरण पोस्ट करना चाहूंगा:
const onClick = () => {
const api: GridApi = params.api;
const fields = api
.getAllColumns()
.map((c) => c.field)
.filter((c) => c !== "__check__" && !!c);
const thisRow: any = {};
fields.forEach((f) => {
thisRow[f] = params.getValue(params.id, f);
});
return alert(JSON.stringify(thisRow, null, 4));
};
return <Button onClick={onClick}>Click</Button>;
यह भी ध्यान दें, मैंने getValue कॉल को बदल दिया है। (पंक्ति आईडी शामिल)
getValue को दो पैरा की जरूरत है और मैं वहां फंस गया था