Do we have any option for a Dark/Light theme for React Grid? or is there any alternative for it? Please provide a sample example to change the theme on React Grid. I have seen all the samples available on the Infragistics website, but unable to find out any option to change the theme color for the Header Toolbar (Filter UI/Column chooser etc.).
www.infragistics.com/.../data-grid
Infragistics provides a "Theme Manager" for React Grid, which allows you to easily switch between various built-in themes or create your own custom theme. Here's an example of how to use the Theme Manager to switch between the "light" and "dark" themes for the React Grid:
First, you need to install the Infragistics React Controls package:
npm install igniteui-react-core igniteui-react-grids
Then, in your React component, import the necessary modules:
import { ThemeManager, Theme } from "igniteui-react-core"; import { IgrGrid } from "igniteui-react-grids";
To switch between the "light" and "dark" themes, you can use the setTheme method of the ThemeManager. Here's an example of how to toggle between the two themes:
setTheme
ThemeManager
// Define the light and dark themes const lightTheme = Theme.createEmpty(); const darkTheme = Theme.createEmpty(); darkTheme.fillColors = ["#1e1e1e"]; darkTheme.accentColor = "#fff"; // Initialize the grid and set the initial theme const gridRef = React.useRef(null); React.useEffect(() => { ThemeManager.setTheme(lightTheme); }, []); // Toggle between the light and dark themes const toggleTheme = () => { const currentTheme = ThemeManager.theme; if (currentTheme === lightTheme) { ThemeManager.setTheme(darkTheme); } else { ThemeManager.setTheme(lightTheme); } }; // Render the grid and a button to toggle the theme return ( <> <IgrGrid ref={gridRef} /> <button onClick={toggleTheme}>Toggle Theme</button> </> );
This example initializes the React Grid with the "light" theme and sets up a button to toggle between the "light" and "dark" themes. When the button is clicked, the toggleTheme function switches between the two themes using the setTheme method of the ThemeManager.
toggleTheme
Note that you can customize the built-in themes or create your own custom theme by modifying the various properties of the Theme object. You can find more information about the ThemeManager and Theme objects in the Infragistics documentation.
Theme
No alternative solutions were found when I investigated this.
Okay, Thanks for the update. Do we have any alternative for this behavior.? To apply background-color or text-color to the column chooser and column pinning portions of the IgrToolbarComponent.
Hello and thank you for following up. I've created a bug internally to address this issue. I've switched this forum over to a private case. C-00227938, and you can access it after signing into your account on the Infragistics website, here: account.infragistics.com/support-cases.
Thanks, @Michael for the update.
I can run this Sample, but I cannot change the styling for "IgrDataGridToolbar" (columnChooser, columnPinning) UI. Please guide me if I am missing something here. Please see the below screenshots for more information.