October 22, 2024
Chicago 12, Melborne City, USA
CSS

How can I change the order of buttons in PrimeReact OrderList control?


I am using PrimeReact OrderList component. You can review the component from the documentation. There are controls buttons here. They are used to move items up and down. I want the two buttons to be swapped as I marked in the picture. I want to swap these two buttons.

The following code belongs to the PrimeReact OrderList component code. I am using this code.


import React, { useState, useEffect } from 'react';
import { OrderList } from 'primereact/orderlist';
import { ProductService } from './service/ProductService';

export default function BasicDemo() {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        ProductService.getProductsSmall().then((data) => setProducts(data));
    }, []);

    const itemTemplate = (item) => {
        return (
            <div className="flex flex-wrap p-2 align-items-center gap-3">
                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
                    <span className="font-bold">{item.name}</span>
                    <div className="flex align-items-center gap-2">
                        <i className="pi pi-tag text-sm"></i>
                        <span>{item.category}</span>
                    </div>
                </div>
                <span className="font-bold text-900">${item.price}</span>
            </div>
        );
    };
    
    return (
        <div className="card xl:flex xl:justify-content-center">
            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
        </div>
    )
}
        

I tried to do it with CSS but I didn’t succeed. I can do reverse sorting operations or changing the position on the screen with expressions like display flex. But I can’t change the position of the two buttons as shown in the picture. Can you help me?



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video