javascript - How to add a Material UI Tooltip on a Material UI Datagrid headername? - Stack Overflow

admin管理员组

文章数量:1324844

I'm finishing my first project but the client wants me to add labels when they hover over certain datagrid cells.

However I can't find any answers on Google on how to add a Material ui Tooltip on the header name.

Someone please help me.

Here's my code. I'll only leave a few headers in the column since they're all quite similar.

 const columns = [
    {
        field: 'memberId',
        headerClassName: 'super-app-theme--header',
        headerAlign: 'center',
        headerName: 'Member ID',
        sortable: true,
        width: 200
    },
    {
        field: 'materialId',
        headerClassName: 'super-app-theme--header',
        headerName: 'Material ID',
        headerAlign: 'center',
        sortable: true,
        width: 200,
        editable: true,
    },
];

const newMembers = []

for(let index in members) {
    newMembers.push(members[index])
}

const displayApiData = () => {
    const loading = [{
        id: 'Calculating...',
        memberId: 'Calculating...',
        materialId: 'Calculating...',
        sectionId: 'Calculating...',
        lm: 'Calculating...',
        lx: 'Calculating...',
        kx: 'Calculating...',
        ly: 'Calculating...',
        ky: 'Calculating...',
        llt: 'Calculating...',
        cbx: 'Calculating...',
        cby: 'Calculating...',
        lsc: 'Calculating...',
        lst: 'Calculating...',
    }]
    if (newMembers === null) {
        return loading
    } else {
        console.log("The new new members === ", JSON.stringify(newMembers));
        let id = 0
        const newOptions = newMembers.map((data) => ({
            id: id++,
            memberId: data.memberId,
            materialId: data.materialId,
            sectionId: data.sectionId,
            lm: data.totalLengthOfMember,
            lx: data.yAxisUnbracedLength,
            kx: data.yAxisEffectiveLengthFactor,
            ly: data.zAxisUnbracedLength,
            ky: data.zAxisEffectiveLengthFactor,
            llt: data.LLT,
            cbx: data.unbracedLengthLateralTorsional,
            cby: data.lateralTorsionalModificationFactor,
            lsc: data.slendernessRatioInCompression,
            lst: data.LST,
        }))
        return (
            newOptions
        )
    }
}

I'm finishing my first project but the client wants me to add labels when they hover over certain datagrid cells.

However I can't find any answers on Google on how to add a Material ui Tooltip on the header name.

Someone please help me.

Here's my code. I'll only leave a few headers in the column since they're all quite similar.

 const columns = [
    {
        field: 'memberId',
        headerClassName: 'super-app-theme--header',
        headerAlign: 'center',
        headerName: 'Member ID',
        sortable: true,
        width: 200
    },
    {
        field: 'materialId',
        headerClassName: 'super-app-theme--header',
        headerName: 'Material ID',
        headerAlign: 'center',
        sortable: true,
        width: 200,
        editable: true,
    },
];

const newMembers = []

for(let index in members) {
    newMembers.push(members[index])
}

const displayApiData = () => {
    const loading = [{
        id: 'Calculating...',
        memberId: 'Calculating...',
        materialId: 'Calculating...',
        sectionId: 'Calculating...',
        lm: 'Calculating...',
        lx: 'Calculating...',
        kx: 'Calculating...',
        ly: 'Calculating...',
        ky: 'Calculating...',
        llt: 'Calculating...',
        cbx: 'Calculating...',
        cby: 'Calculating...',
        lsc: 'Calculating...',
        lst: 'Calculating...',
    }]
    if (newMembers === null) {
        return loading
    } else {
        console.log("The new new members === ", JSON.stringify(newMembers));
        let id = 0
        const newOptions = newMembers.map((data) => ({
            id: id++,
            memberId: data.memberId,
            materialId: data.materialId,
            sectionId: data.sectionId,
            lm: data.totalLengthOfMember,
            lx: data.yAxisUnbracedLength,
            kx: data.yAxisEffectiveLengthFactor,
            ly: data.zAxisUnbracedLength,
            ky: data.zAxisEffectiveLengthFactor,
            llt: data.LLT,
            cbx: data.unbracedLengthLateralTorsional,
            cby: data.lateralTorsionalModificationFactor,
            lsc: data.slendernessRatioInCompression,
            lst: data.LST,
        }))
        return (
            newOptions
        )
    }
}

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Mar 2, 2022 at 13:02 Lawrence MichaelLawrence Michael 8311 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

In the doc of Datagrid it says

Headers You can configure the headers with:

headerName: The title of the column rendered in the column header cell. description: The description of the column rendered as tooltip if the column header name is not fully displayed.

So I'm guessing you have to use the description tag like so.

<DataGrid
   columns={[
     {
        field: 'username',
        headerName: 'Username',
        description: 'The identification used by the person with access to the online service.',
     },
     rows={rows}
/>

本文标签： javascriptHow to add a Material UI Tooltip on a Material UI Datagrid headernameStack Overflow