首页 > 解决方案 > 如何更改 React Table 中的单元格宽度

问题描述

我需要在使用 React Table 库时更改单元格宽度,但我对宽度更改的任何想法都失败了。我需要这样做以使“Użytkownik/Rola”列更接近,就在“Status”列附近。我不想使用负值的 margin-left 因为它通常不是推荐的解决方案。通常呈现的宽度大于 style={{}} 中提供的宽度这是它的实现方式:

{
            Header: useTranslactionFunc('Status'),
            accessor: 'status',
            width: 40,
            minWidth: 40,
            Cell: (props: CellValue) => (
                <div
                    style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                        marginLeft: '1.5rem',
                    }}
                >
                    {props.cell.value ? (
                        <PlayCircleOutlineIcon
                            style={{
                                color: theme.palette.success.main,
                            }}
                        />
                    ) : (
                        <NotInterestedIcon
                            style={{ color: theme.palette.error.main }}
                        />
                    )}
                </div>
            ),
        },

在这里它是如何呈现的: 在此处输入图像描述

标签: reactjsreact-table

解决方案


我认为该width属性在使用表格布局时不适用。尝试使用useBlockLayout钩子。


推荐阅读