如何在资料UI资料档名称上加入资料UI工具提示？

Question

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

但是，我在Google上找不到任何关于如何在标题名上添加一个重要的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

在达塔格力的医生里，它说

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

headerName:列标题单元格中呈现的列的标题。描述:如果列标题名称未完全显示，则该列的说明以工具提示形式呈现。

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

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