typescript primeReact中列的冻结属性未按预期工作

nuypyhwy  于 2023-11-20  发布在  TypeScript
关注(0)|答案(1)|浏览(133)

我正在使用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标题。像这样。有人可以帮助我与此请。提前感谢!


eeq64g8w

eeq64g8w1#

我尝试使用CSS,它的工作。因为我创建自己的自定义数据表,

{React.Children.map(this.props.children, (child: ReactNode, index) => {
        if (React.isValidElement<ColumnProps>(child)) {
          const { frozen } = child.props;
          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,
            style: { minWidth: '200px' },
            className: `font-bold ${frozen ? 'p-frozen-column' : ''}`,
          });

字符串
在CSS中,

.p-datatable-scrollable .p-frozen-column {
  position: sticky;
  z-index: 1; /* Ensure the frozen column stays above other columns */
}

.p-datatable-scrollable .p-datatable-tbody {
  position: relative; /* Create a stacking context for z-index to work */
  z-index: 0;
}

.p-datatable-scrollable .p-datatable-tbody td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 1; /* Ensure the first column stays above other columns */
}
.p-datatable-scrollable .p-datatable-tbody td:first-child {
  width: 20px; /* Adjust the width of the first column if necessary */
}


对我很有效

相关问题