Replace_With_Component_Name: Brief_Bug_Description

[XYIAN]

Describe the bug

data table with selectable checkbox rows always changes with the grid size - no way to make it frozen or fixed while using grid props resizable.

It currently doesnt seem possible to have a select row that does not change size(it only has a check box so it changing size looks dumb) while also using other prime react props like resizable

Reproducer

No response

System Information

@latest everything just installed with @latest

Steps to reproduce the behavior

Create grid with props like resizableColumns showGridlines scrollable all at the same time toggled on. then attempt to make the select box column fixed - it will not work

 <DataTable<import('../../types/ClassMember').ClassMember[]>
        key={`datatable-${selectedCase?.caseId ?? 'no-case'}`}
        ref={dt}
        value={displayedMembers}
        emptyMessage={emptyMessage}
        resizableColumns
        showGridlines
        scrollable
        scrollHeight={scrollHeight}
        selection={selection.selectedMembers}
        filters={filters.filters}
        cellMemo={true}
        filterDelay={300}
        onFilter={filters.handleFilterChange}
        filterDisplay="row"
        globalFilterFields={GLOBAL_FILTER_FIELDS}
        onSelectionChange={selection.handleSelectionChange}
        dataKey="id"
        lazy={isLazy}
        loading={lazyLoading ?? false}
        totalRecords={isLazy ? displayTotalRecords : undefined}
        first={isLazy ? lazyState?.first : undefined}
        onPage={isLazy ? onLazyPage : undefined}
        onSort={isLazy ? onLazySort : undefined}
        sortField={isLazy ? lazyState?.sortField : undefined}
        sortOrder={isLazy ? lazyState?.sortOrder : undefined}
        paginator
        rows={isLazy ? lazyState?.rows ?? 50 : 50}
        rowsPerPageOptions={ROWS_PER_PAGE_OPTIONS}
        paginatorTemplate={PAGINATOR_TEMPLATE}
        currentPageReportTemplate={CURRENT_PAGE_REPORT_TEMPLATE}
        paginatorLeft={paginatorLeftRef.current}
        globalFilter={filters.globalFilter}
        header={<DataTableHeader {...headerProps} />}
        selectionMode="checkbox"
        metaKeySelection={false}
        onRowClick={selection.handleRowClick}
        editMode="cell"
        selectOnEdit
        selectionAriaLabel="name"
        virtualScrollerOptions={shouldUseVirtualScroll ? virtualScrollerOptions : undefined}
        pt={DATA_TABLE_PASSTHROUGH_WITH_GRIDLINES}
        tableStyle={
          !hasVisibleDataColumns
            ? { tableLayout: 'fixed', width: '2rem', minWidth: '2rem' }
            : { tableLayout: 'fixed', width: '100%' }
        }
        columnResizeMode="fit"
      >
        <Column
          selectionMode="multiple"
          frozen
          alignFrozen="left"
          header={
            <Button
              type="button"
              icon="pi pi-check-square"
              text
              rounded
              className={`dm-selection-visibility-toggle${selection.showSelectedOnly ? ' is-active' : ''}${selection.isShowSelectedOnlyTurningOff ? ' is-turning-off' : ''}`}
              onClick={selection.toggleShowSelectedOnly}
              disabled={selection.selectedMembers.length === 0}
              tooltip={
                selection.selectedMembers.length === 0
                  ? 'Select rows to enable'
                  : selection.showSelectedOnly
                    ? `Showing ${selection.selectedMembers.length} selected row${selection.selectedMembers.length === 1 ? '' : 's'}. Click to show all rows`
                    : `Show only ${selection.selectedMembers.length} selected row${selection.selectedMembers.length === 1 ? '' : 's'}`
              }
              tooltipOptions={{ position: 'bottom' }}
              aria-label={
                selection.showSelectedOnly
                  ? `Show all rows (currently showing ${selection.selectedMembers.length} selected row${selection.selectedMembers.length === 1 ? '' : 's'})`
                  : `Show only ${selection.selectedMembers.length} selected row${selection.selectedMembers.length === 1 ? '' : 's'}`
              }
            />
          }
          exportable={false}
          resizeable={false}
          pt={DATA_MANAGER_SELECTION_COLUMN_PT}
          style={{ width: '2rem', minWidth: '2rem', maxWidth: '2rem' }}
          headerStyle={{ width: '2rem', minWidth: '2rem', maxWidth: '2rem' }}
        />
        {columns.columnConfigs.map((columnProps) => (
          <Column
            /* Stable key: must NOT include metrics totals. When column_quality refreshes, changing keys
             * remount every Column and nukes PrimeReact cell-edit state (open editors, focus) — feels like whack-a-mole.
             * Header/body templates already receive updated dataWideColumnQuality via column config. */
            key={String(columnProps.field)}
            {...columnProps}
          />
        ))}
      </DataTable>

Expected behavior

No response

[XYIAN]

When gicing a column a width such as width: 1rem it should make the column 1rem and not flex grow - however regardless of all the hard coded widths i try to give it the select column specifically keeps growing.