如何在 Material UI Datagrid 标题名称上添加 Material UI 工具提示？

Question

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

但是，我在 Google 上找不到有关如何在标题名称上添加 Material ui Tooltip 的任何答案。

请有人帮助我。

这是我的代码。我只会在列中保留一些标题，因为它们都非常相似。

 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 的文档中它说

标头 您可以使用以下方式配置标头：

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

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

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