[BUG] Table 的 Columns 设置成 align: "right" 跟 sorter 排序一起使用时 表头显示跟align: "right" 不符

[geekerio]

Is there an existing issue for this?

• I have searched the existing issues

Which Component

Table

Semi Version

2.34.0

Current Behavior

{
title: "大小",
dataIndex: "size",
align: "right",
sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
render: (text) => ${text} KB
},

当我给 Columns加上 align: "right", 跟 sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1) 一起使用时出现表头对齐出现问题 tr 是右对齐, th 还是左对齐

Expected Behavior

表头th 跟 tr 都应该是需要 按 Columns 的 align 方式来对齐

Steps To Reproduce

No response

ReproducibleCode

https://codesandbox.io/s/cool-dream-rqid7m


const columns = [
    {
        title: '标题',
        dataIndex: 'name',
        width: 120,
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
                    {text}
                </div>
            );
        },
        filters: [
            {
                text: 'Semi Design 设计稿',
                value: 'Semi Design 设计稿',
            },
            {
                text: 'Semi Pro 设计稿',
                value: 'Semi Pro 设计稿',
            },
        ],
        onFilter: (value, record) => record.name.includes(value),
        sorter: (a, b) => (a.name.length - b.name.length > 0 ? 1 : -1),
    },
    {
        title: '大小',
        dataIndex: 'size',
        align: "right",
        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
        render: text => `${text} KB`,
    },
    {
        title: '所有者',
        align: "right",
        dataIndex: 'owner',
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
                        {typeof text === 'string' && text.slice(0, 1)}
                    </Avatar>
                    {text}
                </div>
            );
        },
    },
    {
        title: '更新日期',
        align: "right",
        dataIndex: 'updateTime',
        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
        render: value => {
            return dateFns.format(new Date(value), 'yyyy-MM-dd');
        },
    },
];

return (
    <div className="App">
      <Table
        columns={columns}
        dataSource={dataSource}
        rowSelection={rowSelection}
        scroll={scroll}
      />
      ;
    </div>
  );

Environment

- OS:
- browser:

Anything else?

No response

[shijiatongxue]

好的，我们排查一下~

[shijiatongxue]

https://codesandbox.io/s/cool-dream-rqid7m

应该是这个版本引入的 bug。

[shijiatongxue]

2.36.0-beta.0 fixed