如何在 Material UI 数据网格标题名称上添加 Material UI 工具提示？

Question

我正在完成我的第一个项目，但客户希望我在将鼠标悬停在某些数据网格单元格上时添加标签。

但是我在 Google 上找不到任何关于如何在 header 名称上添加 Material ui 工具提示的答案。

有人请帮助我。

这是我的代码。我只会在专栏中留下一些 header，因为它们都很相似 ui。

 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
        )
    }
}

Answer 1

Datagrid 的文档中说

Headers 您可以配置 headers：

header名称：在列 header 单元格中呈现的列的标题。 description：如果列 header 名称未完全显示，则作为工具提示呈现的列的描述。

所以我猜你必须像这样使用描述标签。

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

如何在 Material UI 数据网格标题名称上添加 Material UI 工具提示？

How to add a Material UI Tooltip on a Material UI Datagrid headername?

javascript

reactjs

material-ui