如何阻止Shopify Polaris DataTable组件内容变更时自动调整列宽

解决方案 #

你可以通过以下几种方式实现固定列宽，解决状态变化时的列宽抖动问题：

1. 使用Polaris DataTable 内置的columnWidths属性
   该属性可以传入与列数对应的宽度配置数组，支持百分比、固定像素值，直接固定每一列的宽度，组件就不会自动计算调整列宽。修改你的DataTable组件代码如下：

<Card>
    <Card.Section>
        <DataTable
            columnContentTypes={[
                'text',
                'text',
                'text'
            ]}
            headings={[
                'Category',
                'Enabled',
                'Actions'
            ]}
            rows={categories}
            verticalAlign="middle"
            // 新增这行，数值可以根据你的视觉需求调整
            columnWidths={['60%', '20%', '20%']}
       />
    </Card.Section>
</Card>

2. 给Badge容器添加固定最小宽度
   状态变更时列宽抖动的核心原因是Badge在不同状态下的文本宽度不同，你可以在生成行数据时，给Badge外层套一个固定最小宽度的容器，避免内容宽度变化触发列宽调整：

for (let category of allCategories.data) {
    let tempArray = [
        category.name, 
        // 给Badge加外层固定宽度容器，宽度可自行调整
        <div style={{minWidth: '80px', textAlign: 'center'}}>
            {enabledOrDisabledTag(category.visibility)}
        </div>,
        <ButtonGroup spacing="extraTight"><Button onClick={() => editCategory(category)} icon={<Icon source={EditMajor} color="base" />}></Button><Button onClick={() => deleteCategory(category.uuid)} destructive icon={<Icon source={DeleteMajor} color="base" />}></Button></ButtonGroup>      
    ];

    convertedData.push(tempArray);
 }

 setCategories(convertedData);

3. 自定义CSS覆盖列宽
   如果以上方案仍不生效，你可以给DataTable添加自定义类名，通过CSS强制固定对应列的宽度：
   首先给组件加类名：

<DataTable
  className="custom-category-table"
  // 其余属性保持不变
/>

然后添加CSS样式：

.custom-category-table .Polaris-DataTable__Cell:nth-child(2) {
  min-width: 100px;
  width: 100px;
}

以上方案任选一种均可解决列宽自动调整的问题，你可以根据自己的项目习惯选择。

内容的提问来源于stack exchange，提问作者IonicMan