chore: small UI fixes

src/examples/slickgrid/Example2.tsx

@@ -23,7 +23,9 @@ interface DataItem {
   phone: string;
   completed: number;
 }
-interface State extends BaseSlickGridState { }
+interface State extends BaseSlickGridState {
+  resizerPaused: boolean;
+}
 
 // create my custom Formatter with the Formatter type
 const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
@@ -57,7 +59,6 @@ export default class Example2 extends React.Component<Props, State> {
   `;
 
   reactGrid!: SlickgridReactInstance;
-  resizerPaused = false;
 
   constructor(public readonly props: Props) {
     super(props);
@@ -66,6 +67,7 @@ export default class Example2 extends React.Component<Props, State> {
       gridOptions: undefined,
       columnDefinitions: [],
       dataset: [],
+      resizerPaused: false,
     };
   }
 
@@ -139,8 +141,8 @@ export default class Example2 extends React.Component<Props, State> {
       // }
     };
 
-    this.setState(() => ({
-      ...this.state,
+    this.setState((state) => ({
+      ...state,
       columnDefinitions: columns,
       gridOptions,
       dataset: this.getData(),
@@ -182,8 +184,11 @@ export default class Example2 extends React.Component<Props, State> {
   }
 
   togglePauseResizer() {
-    this.resizerPaused = !this.resizerPaused;
-    this.reactGrid?.resizerService.pauseResizer(this.resizerPaused);
+    this.setState((state) => ({
+      ...state,
+      resizerPaused: !state.resizerPaused
+    }));
+    this.reactGrid?.resizerService.pauseResizer(this.state.resizerPaused);
   }
 
   toggleCompletedProperty(item: any) {
@@ -214,7 +219,7 @@ export default class Example2 extends React.Component<Props, State> {
         <div className="subtitle" dangerouslySetInnerHTML={{ __html: this.subTitle }}></div>
         <button className="btn btn-outline-secondary btn-sm btn-icon"
           onClick={() => this.togglePauseResizer()}>
-          Pause auto-resize: <b>{this.resizerPaused}</b>
+          Pause auto-resize: <b>{this.state.resizerPaused + ''}</b>
         </button>
 
         <SlickgridReact gridId="grid2"

src/examples/slickgrid/Example27.tsx

@@ -403,8 +403,8 @@ export default class Example27 extends React.Component<Props, State> {
         <div className="row">
           <div className="col-md-12">
             <button onClick={() => this.addNewRow()} data-test="add-item-btn" className="btn btn-primary btn-xs btn-icon mx-1">
-              <span className="mdi mdi-plus color-white me-1"></span>
-              <span>Add New Item to "Task 1" group</span>
+              <span className="mdi mdi-plus text-white me-1"></span>
+              <span className="text-white">Add New Item to "Task 1" group</span>
             </button>
             <button onClick={() => this.updateFirstRow()} data-test="update-item-btn" className="btn btn-outline-secondary btn-xs btn-icon mx-1">
               <span className="icon mdi mdi-pencil me-1"></span>

src/examples/slickgrid/Example28.tsx

@@ -435,8 +435,8 @@ export default class Example28 extends React.Component<Props, State> {
         <div className="row">
           <div className="col-md-7">
             <button onClick={() => this.addNewFile()} data-test="add-item-btn" className="btn btn-xs btn-icon btn-primary mx-1">
-              <span className="mdi mdi-shape-square-plus me-1"></span>
-              <span>Add New Pop Song</span>
+              <span className="mdi mdi-shape-square-plus me-1 text-white"></span>
+              <span className="text-white">Add New Pop Song</span>
             </button>
             <button onClick={() => this.deleteFile()} data-test="remove-item-btn" className="btn btn-outline-secondary btn-xs btn-icon" disabled={this.state.isRemoveLastInsertedPopSongDisabled}>
               <span className="mdi mdi-minus me-1"></span>

src/slickgrid-react/components/slickgrid-react.tsx

@@ -358,7 +358,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       // React doesn't play well with Custom Events & also the render is called after the constructor which brings a second problem
       // to fix both issues, we need to do the following:
       // loop through all component props and subscribe to the ones that startsWith "on", we'll assume that it's the custom events
-      // we'll and call their listeners when events are dispatching
+      // we'll then call the assigned listener(s) when events are dispatching
       for (const prop in this.props) {
         if (prop.startsWith('on')) {
           this.subscriptions.push(

src/slickgrid-react/components/slickgridReactProps.ts

@@ -135,7 +135,6 @@ export interface SlickgridReactProps {
   onRowsOrCountChanged?: (e: CustomEvent<{ eventData: any; args: OnRowsOrCountChangedEventArgs; }>) => void;
   onSetItemsCalled?: (e: CustomEvent<{ eventData: any; args: OnSetItemsCalledEventArgs; }>) => void;
 
-
   // Slickgrid-React events
   onAfterExportToExcel?: (e: CustomEvent<any>) => void;
   onBeforePaginationChange?: (e: CustomEvent<any>) => void;

vite.config.mts

@@ -1,6 +1,6 @@
+import react from '@vitejs/plugin-react';
 import dns from 'node:dns';
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
 
 dns.setDefaultResultOrder('verbatim');