Frozen prop of column in primeReact is not working as expected

Question

I am creating a reusable custom data table using primereact. I am trying to use frozen columns prop from prime react data table Columns component.

<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>

This is my data table and

<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
        />

I am passing frozen in the columns prop. But it is not working as expected. Attaching pictures for reference.

After adding frozen prop in column, the header is not aligned to the data. Tried styling it, still not worked.

If other columns are not frozen and are scrollable they are passing through the id column data, even the id header. like this. Can someone help me with this please. Thanks in advance!

Answer 1

I tried using CSS and it worked. As I am creating my own custom data table,

{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' : ''}`,
          });

and in the 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 */
}

and it worked for me.