我正在使用primerreact创建一个可重用的自定义数据表。我试图使用冻结列 prop 从总理React数据表列组件。

<DataTable
        value={dataToDisplayPaginated}
        stripedRows
        resizableColumns
        scrollable
        className="custom-data-table-scroll"
        style={{ height: this.state.height, width: this.state.width }}
      >
        {checkbox && (
          <Column
            key="checkbox"
            header={
              <Checkbox
                className="custom-checkbox"
                checked={selectAll}
                onChange={() => this.toggleAllRows()}
              />
            }
            body={(rowData) => (
              <Checkbox
                className="custom-checkbox"
                checked={selectedRows.some((row) => row.id === rowData.id)}
                onChange={() => this.toggleRow(rowData)}
              />
            )}
          />
        )}
       {React.Children.map(this.props.children, (child: ReactNode, index) => {
        if (React.isValidElement<ColumnProps>(child)) {
          return React.cloneElement(child as React.ReactElement<ColumnProps>, {
            header: (
            <>
            {child.props.header}{' '}
            {child.props.sortable &&
            this.renderSortButtons(child.props.field || '', data)}
            {child.props.filter &&
            this.renderFilterIcon(child.props.field || '')}
            </>
            ),
            frozen: child.props.frozen, 
          });
        }
        return null;
        })}
      </DataTable>

字符串
这是我的数据表，

<CustomDataTable
        data={productsData}
        checkbox={true}
        sortField={this.state.sortField}
        sortOrder={this.state.sortOrder}
        onSortChange={this.handleSortChange}
        onSelectionChange={this.handleSelectionChange}
        scrollHeight={this.state.scrollHeight}
        scrollWidth={this.state.scrollWidth}
        scrollable={true}
        height="40%"
        width="100%"
        globalSearch={true} 
        resetIcon={false}   >
        <Column
          field={'id'}
          header={this.getHeader('id')} 
          body={this.IdRenderer}
          sortable={true}
          style={{ minWidth: '50px' }}
          className="font-bold"
          frozen
        />

型
我通过冻结在列 prop 。但它并不像预期的那样工作。附加图片供参考。
x1c 0d1x的数据
在列中添加冻结属性后，标题与数据不对齐。尝试样式化它，仍然不起作用。
如果其他列没有冻结和滚动，他们通过id列数据，甚至id标题。像这样。有人可以帮助我与此请。提前感谢！

的