I am using a PrimeReact table with multi-sort functionality, and I need to change the color of the sort icons for specific columns. Specifically, I want the sort icon in the Code column to be red and the sort icon in the Quantity column to be yellow. In other columns, I would like to apply different custom colors to the sort icons.

Note: In my case, the column names are received from the backend, and the table is generated dynamically. Therefore, adding different class names in the CSS files won't work.

I’ve checked the PrimeReact documentation but couldn’t find any reference or solution for this specific customization. Please suggest any idea/reference link. Thanks.

Code link: PrimeReact Table Example

I am using a PrimeReact table with multi-sort functionality, and I need to change the color of the sort icons for specific columns. Specifically, I want the sort icon in the Code column to be red and the sort icon in the Quantity column to be yellow. In other columns, I would like to apply different custom colors to the sort icons.

Note: In my case, the column names are received from the backend, and the table is generated dynamically. Therefore, adding different class names in the CSS files won't work.

I’ve checked the PrimeReact documentation but couldn’t find any reference or solution for this specific customization. Please suggest any idea/reference link. Thanks.

Code link: PrimeReact Table Example

• reactjs
• react-functional-component
• primereact

2 Answers 2

I tried to help you as far as I understand. We can enter values ​​with pt. ​​In this way, we can give color to the parts we want by dynamically controlling them. In this example, I gave two colors, you can increase them if you want. I hope I was able to help.

import React, { useState, useEffect } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ProductService } from './service/ProductService';

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

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

  const columns = [
    {
      field: 'code',
      header: 'Code',
    },
    {
      field: 'name',
      header: 'Name',
    },
    {
      field: 'category',
      header: 'Category',
    },
    {
      field: 'quantity',
      header: 'Quantity',
    },

    // More fields can be added here dynamically .....
  ];

  return (
    <div className="card">
      <DataTable
        value={products}
        sortMode="multiple"
        tableStyle={{ minWidth: '50rem' }}
      >
        {columns.map(({ field, header }) => {
          return (
            <Column
              key={field}
              field={field}
              header={header}
              style={{ width: '25%' }}
              sortable
              pt={{
                sortIcon:{className:`${field ==='code' ? 'text-red-500' : 'text-green-500'}`}
              }}
            />
          );
        })}
      </DataTable>
    </div>
  );
}

In your components:

<Column 
    field="code" 
    header="Code" 
    sortable 
    headerClassName="code-column-header" 
    style={{ width: '25%' }} 
/>
<Column 
    field="name" 
    header="Name" 
    sortable 
    headerClassName="name-column-header" 
    style={{ width: '25%' }} 
/>
<Column 
    field="category" 
    header="Category" 
    sortable 
    headerClassName="category-column-header" 
    style={{ width: '25%' }} 
/>
<Column 
    field="quantity" 
    header="Quantity" 
    sortable 
    headerClassName="quantity-column-header" 
    style={{ width: '25%' }} 
/>

CSS file (customSortIcons.css):

.code-column-header .p-sortable-column-icon {
    color: red;
}

.quantity-column-header .p-sortable-column-icon {
    color: yellow;
}

.name-column-header .p-sortable-column-icon {
    color: blue;
}

.category-column-header .p-sortable-column-icon {
    color: green;
}