मैं सामग्री-यूआई की डेटा तालिका की प्रत्येक पंक्ति में एक बटन नहीं जोड़ सकता मेरे पास एक सामग्री-यूआई डेटा-टेबल है जिसे मैं इस तरह प्रस्तुत करता हूं:

<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />

मैंने कॉलम वैरिएबल 'एक्शन' कॉलम में जोड़ा है जहां बटन होना चाहिए। पंक्तियाँ केवल एक डेटा ऑब्जेक्ट हैं जो मुझे प्रॉप्स से मिलती हैं। मैं प्रत्येक पंक्ति में एक बटन कैसे जोड़ सकता हूं (पंक्ति को संपादित करने के लिए)? मैंने डेटा ऐरे को मैप करने की कोशिश की है लेकिन डेटा के हर ऑब्जेक्ट में JSX बटन जोड़ना संभव नहीं है।

10
Ni Tai 13 अक्टूबर 2020, 11:03
क्या आप कुछ कोड जोड़ सकते हैं जिसका उपयोग इस मुद्दे को फिर से बनाने के लिए किया जा सकता है? आप codesandbox.io का उपयोग करके एक रन करने योग्य कार्यशील प्रोग्राम तैयार करने का प्रयास कर सकते हैं जो समस्या प्रस्तुत करता है
 – 
95faf8e76605e973
13 अक्टूबर 2020, 11:16
 – 
Ni Tai
13 अक्टूबर 2020, 11:25

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

Codesandbox Demo

V4

Edit 64331095/cant-add-a-button-to-every-row-in-material-ui-table

31
NearHuscarl 5 अक्टूबर 2021, 10:35
सुनिश्चित नहीं है कि इसका उपयोग कैसे करें क्या आप इसे इस कोड में कर सकते हैं? codesandbox.io/s/nostalgic-feistel-cg9wq?file =/src/App.js
 – 
Ni Tai
13 अक्टूबर 2020, 11:28
बस colDef को कस्टम renderCell प्रॉपर्टी के साथ कॉपी करें। आप अपने डेमो में देख सकते हैं यहां @NiTai
 – 
NearHuscarl
13 अक्टूबर 2020, 11:32
जब मैं बटन में एक विधि जोड़ता हूं जो राज्य को अद्यतन करता है तो मुझे अधिकतम गहराई त्रुटि से अधिक हो जाती है। क्या और किसी ने ऐसा अनुभव किया?
 – 
Re-Angelo
25 अप्रैल 2021, 01:35
Module '"@material-ui/data-grid"' has no exported member 'ColDef'.
 – 
fuat
26 अप्रैल 2021, 20:30
1
क्या आप जो चाहते हैं उसके बारे में अधिक जानकारी के साथ एक नया प्रश्न खोल सकते हैं। यह चैट काफी लंबी होती जा रही है।
 – 
NearHuscarl
26 अप्रैल 2021, 23:00

बस इस पर आया था।

आपको अपने कॉलम एरे में एक रेंडरसेल विधि शामिल करने की आवश्यकता है।

 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>
        )
    }
10
Zack Amin 4 मई 2021, 11:06

जबकि @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 कॉल को बदल दिया है। (पंक्ति आईडी शामिल)

2
LuvForAirplanes 22 जून 2021, 19:18
इसके लिए धन्यवाद। getValue को दो पैरा की जरूरत है और मैं वहां फंस गया था
 – 
blitzblade
7 अगस्त 2021, 10:17