How to change the Datatable expansion icon

[kencha1119]

Hello I just updated to 9.6.0
After the update, I cannot see my custom row expansion icons, I used "+" and "-" signs as my icons instead of the chevrons.
Seems like in the latest version , PrimeReact is using svg path to insert a generated value for the icons. How can I use my own icons instead ?

Thank you

[mark103]

In PrimeReact 9.6.0, custom icons for row expansion now use SVG paths. To use your own icons:

• Prepare SVG Paths: Convert your "+" and "-" icons to SVG paths.

• Import Icons: In your component, import the SVG paths for your icons.

• Define Icon Templates: Define templates for the "+" and "-" icons using the imported SVG paths.

• Configure Column Component: In the Column component for row expansion, use the body property to render your custom icons.

Example (using React and TypeScript):

Code: Select all

import React from 'react';
import { Column } from 'primereact/column';

const MyComponent: React.FC = () => {
  const plusIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      {/* Your "+" SVG path */}
    </svg>
  );

  const minusIcon = (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      {/* Your "-" SVG path */}
    </svg>
  );

  return (
    <Column
      field="expandableField"
      body={(rowData: any) => rowData.expanded ? minusIcon : plusIcon}
    />
  );
};

export default MyComponent;

Adjust the above code to match your icon SVG paths and component structure.

Remember to replace expandableField with the actual field you're using for expansion. This approach allows you to use your own custom icons for row expansion in PrimeReact 9.6.0 and later versions.