How to resize the columns in custom way in react

Question

I am using prime react to create my custom data table. I am implementing resizable prop from prime react column component. But I want to change the behavior of the resizable prop a bit. Usually the resizable columns will start expanding or shrinking from right to extreme right or right to left. So to the column headers right side the resizable icon will appear.

I am having the column header like this. So for me the the resize option will start from right side of the filter icon. If I shrink it will hide the filter icon first, then sort icons, then column header.

Now I want to make it custom. If I start shrinking from the other side, it should start hiding from the start of the column name. By extreme shrinking the column name might get hidden but I should be able to see sort icons and filter icon. I want to keep the column name, sort icons and filter icon position to be in the same way. But I want to achieve this.

 <div className="custom-data-table">
    {loading ? (
      <div className='loader'>
      <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
      <div>Loading...</div>
      </div>
    ) : (
      <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>

 <Column
            field={'id'}
            header={this.getHeader('id')} 
            body={this.IdRenderer}
            sortable={true}
            filter
            resizeable
          />

Passing resizable prop in column component is useless, without passing resizable Columns in data table. Please help me with this. Thanks in advance!