当没有数据（过滤后）时，React表标头宽度正在发生变化

Question

我正在研究一个具有分类和过滤功能的反应表。当我过滤且没有返回数据（空表）时，标题的宽度没有保持固定，它们会相应地减少到标题标题的长度。发生这种情况是因为当没有数据时，tbody是完全空的，因此没有标头可以用于定义其宽度的单元。

您可以在渲染每个单元格时在架构中看到，我将其分配为课程。我在样式表中使用该类别为单元格提供了特定的宽度。我希望所有单元格的固定宽度为140px，只有摘要单元格（任务类型）的固定宽度为360px。这对单元格非常有用，当有数据时，标题会遵循细胞宽度。

查看图片（由于隐私 +我只显示一行，我必须介绍数据） - 实际上，它还有更多。您可以在图片中看到标题宽度与单元格的宽度匹配。

现在，一旦我过滤数据，并且过滤器输入与任何数据都不匹配，则标题会降低到取决于标题标题长度的宽度。请参阅图片：

最好的比较是彼此顶部的两个标头的图片：

我尝试了很多事情：从使用useblock/absolute/absolute/flexlayOut钩到分配模式中的宽度而不是通过CSS类，可以与CSS一起玩并尝试不同的选项，但到目前为止，没有任何作用。

我将感谢任何提示和建议。

这是表UI的代码：

const TaskManagerTable = (props) => {
    const {columns, data} = props;
    
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow
    } = useTable({
        columns,
        data,
    },
        useFilters,
        useSortBy,
    );


    return (
        <>
            <table className={CLASS_NAMES.TABLE}{...getTableProps()}>
            <thead className={CLASS_NAMES.TABLE_HEAD}>
                {headerGroups.map(headerGroup => {
                    const {key, ...restHeaderGroupProps} = headerGroup.getHeaderGroupProps()
                    return (
                        <tr className={CLASS_NAMES.HEADER_ROW} key={key} {...restHeaderGroupProps}>
                            {headerGroup.headers.map(column => {
                                const {key, ...restColumn} = column.getHeaderProps();
                                return (
                                    <th className={CLASS_NAMES.HEADER_CELL} key={key} {...restColumn}
                                        style={{
                                            cursor: column.canSort ? 'pointer' : 'auto',
                                        }}
                                    >
                                        {column.render('Header')}
                                        <span className={CLASS_NAMES.SORT} {...column.getHeaderProps(column.getSortByToggleProps())}>
                                            {column.isSorted ?
                                                <div className={CLASS_NAMES.ICON_SORTED}>
                                                    <SortIcon dir={column.isSortedDesc ? 'desc' : 'asc'} onClick={_.noop} />
                                                </div>
                                                : column.canSort
                                                    ? <div className={CLASS_NAMES.ICON_CAN_SORT}>
                                                        <SortIcon dir={column.isSortedDesc ? 'desc' : 'asc'} onClick={_.noop} />
                                                    </div> : ''
                                            }
                                        </span>
                                        <span className={CLASS_NAMES.FILTER}>
                                            {column.canFilter ? column.render('Filter') : null}
                                        </span>
                                    </th>
                                )
                            })}
                        </tr>
                    )
                })}
            </thead>
            <tbody {...getTableBodyProps}>
                {rows.map(row => {
                    prepareRow(row)
                    const {key, ...restRowProps} = row.getRowProps();
                    return (
                        <tr key={key} {...restRowProps}>
                            {row.cells.map(cell => {
                                const {key, ...restCellProps} = cell.getCellProps();
                                return (
                                    <td key={key} {...restCellProps}>
                                        {cell.render('Cell')}
                                    </td>
                                );
                            })}
                        </tr>
                    )
                })}
            </tbody>
        </table>
    </>
    )
};

TaskManagerTable.propTypes = {
    columns: PropTypes.array,
    data: PropTypes.array,
};

const mapDispatchToProps = {};

export default connect(null, mapDispatchToProps)(TaskManagerTable);

这是架构：

export default [
    {
        Header: 'ID',
        accessor: 'key',
        Filter: ({ column }) => {
            return (
                <ReactTableFilter containerClassName={CLASS_NAMES.TASK_MANAGER_FILTER_CONTAINER}
                    column={column}
                    popoverInner={<FreeTextFilter handleChangeFilter={column.setFilter} filter={column.filterValue}/>}
                />
            )
        },
        Cell: ({row}) => {
            const key = _.get(row, 'original.key');
            return (
                <div className={CLASS_NAMES.ID_CELL}>
                    <a href={`some link goes here`} target="_blank" rel="noopener noreferrer">{key}</a>
                </div>
            )
        }

    },
    {
        Header: 'Category',
        accessor: 'category',
        Filter: ({ column }) => {
            return (
                <ReactTableFilter containerClassName={CLASS_NAMES.TASK_MANAGER_FILTER_CONTAINER}
                    column={column}
                    popoverInner={<FreeTextFilter handleChangeFilter={column.setFilter} filter={column.filterValue}/>}
                />
            )
        },
        Cell: ({row}) => {
            const category = _.get(row, 'original.category');
            return (
                <div className={CLASS_NAMES.CATEGORY_CELL}>
                    {category}
                </div>
            )
        }
    },
    {
        Header: 'Subcategory',
        accessor: 'subCategory',
        Filter: ({ column }) => {
            return (
                <ReactTableFilter containerClassName={CLASS_NAMES.TASK_MANAGER_FILTER_CONTAINER}
                    column={column}
                    popoverInner={<FreeTextFilter handleChangeFilter={column.setFilter} filter={column.filterValue}/>}
                />
            )
        },
        Cell: ({row}) => {
            const subCategory = _.get(row, 'original.subCategory');
            return (
                <div className={CLASS_NAMES.SUBCATEGORY_CELL}>
                    {subCategory}
                </div>
            )
        }
    },
    {
        Header: 'Task Title',
        accessor: 'summary',    
        className: 'summary',
        Filter: ({ column }) => {
            return (
                <ReactTableFilter containerClassName={CLASS_NAMES.TASK_MANAGER_FILTER_CONTAINER}
                    column={column}
                    popoverInner={<FreeTextFilter handleChangeFilter={column.setFilter} filter={column.filterValue}/>}
                />
            )
        },
        Cell: ({row}) => {
            const summary = _.get(row, 'original.summary');
            return (
                <div className={CLASS_NAMES.SUMMARY_CELL}>
                    {summary}
                </div>
            )
        }
    },
    {
        Header: 'Priority',
        accessor: 'priority',
        Filter: ({ column }) => {
            return (
                <ReactTableFilter containerClassName={CLASS_NAMES.TASK_MANAGER_FILTER_CONTAINER}
                    column={column}
                    popoverInner={<FreeTextFilter handleChangeFilter={column.setFilter} filter={column.filterValue}/>}
                />
            )
        },
        Cell:  ({row}) => {
            const priority = _.get(row, 'original.priority');
            return (
                <div className={CLASS_NAMES.PRIORITY_CELL}>
                    {priority}
                </div>
            )
        }
    },
    {
        Header: 'Status',
        accessor: 'status',
        Filter: ({ column }) => {
            return (
                <ReactTableFilter containerClassName={CLASS_NAMES.TASK_MANAGER_FILTER_CONTAINER}
                    column={column}
                    popoverInner={<FreeTextFilter handleChangeFilter={column.setFilter} filter={column.filterValue}/>}
                />
            )
        },
        Cell: ({row}) => {
            const status = _.get(row, 'original.status');
            return (
                <div className={CLASS_NAMES.STATUS_CELL}>
                    {status}
                </div>
            )
        }
    },
    {
        Header: 'Task Type',
        accessor: 'type',
        Filter: ({ column }) => {
            return (
                <ReactTableFilter containerClassName={CLASS_NAMES.TASK_MANAGER_FILTER_CONTAINER}
                    column={column}
                    popoverInner={<FreeTextFilter handleChangeFilter={column.setFilter} filter={column.filterValue}/>}
                />
            )
        }
]

最后是SCSS：

table {
  width: 100%;
  thead {
    position: sticky;
    top: 0;
    background-color: white;
        tr {
            text-align: left;
            text-transform: uppercase;
            color: #91a4c3;
            font-weight: 400;
            font-size: 12px;
            th {
                padding-left: 10px;
                padding-bottom: 10px;
                .sort-container {
                    margin-left: 25px;
                    position: absolute;
                }
                .filter-container {
                margin-left: 30px;
                position: absolute;
                }
                .icon-can-sort, .filter-component-hide {
                  display: none;
                }
                .filter-component-show {
                  display: block;
                }
                &:hover {
                  .icon-can-sort, .filter-component-hide {
                    display: block;
                  }
                }
                @include relative();
                :nth-child(4) {
                    min-width: 360px;
                }
            }
        }
    }
    tbody {
        overflow-y: auto;
        @include scrollBar();
        tr {
          box-shadow: 0px 1px 5px 0 rgba(104, 105, 111, 0.09);
          height: 45px;
          color: #6a7097;
          text-transform: capitalize;
            td {
                padding-left: 10px;
            }
            .id-cell,
            .category-cell,
            .subcategory-cell,
            .priority-cell,
            .status-cell,
            .type-cell,
            {
                min-width: 140px;
            }
            .summary-cell {
                min-width: 360px;
            }
        } 
    }
}