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
How to change the Datatable expansion icon
In PrimeReact 9.6.0, custom icons for row expansion now use SVG paths. To use your own icons:
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.
- 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.
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;
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.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 12 guests