Event handlers and Flex changes

src/Gridler/components/Column.tsx

@@ -18,7 +18,7 @@ export interface GridlerColumn extends Partial<BaseGridColumn> {
     colIndx: string,
     value: any,
     storeState: GridlerStoreState
-  ) => GridCellLoose;
+  ) => Partial<GridCellLoose>;
   defaultIcon?: string;
   disableFilter?: boolean;
   disableMove?: boolean;

src/Gridler/components/Computer.tsx

@@ -181,6 +181,11 @@ export const Computer = React.memo(() => {
       }));
     }).then(() => {
       loadPage(0, 'all');
+      getState('_events')?.dispatchEvent?.(
+        new CustomEvent('onColumnSorted', {
+          detail: { cols: colSort },
+        })
+      );
     });
   }, [colSort]);
 
@@ -192,6 +197,11 @@ export const Computer = React.memo(() => {
     if (JSON.stringify(refLastFilters.current) !== JSON.stringify(colFilters)) {
       loadPage(0, 'all');
       refLastFilters.current = colFilters;
+      getState('_events')?.dispatchEvent?.(
+        new CustomEvent('onColumnFiltered', {
+          detail: { filters: colFilters },
+        })
+      );
     }
   }, [colFilters]);
 

src/Gridler/components/GridlerStore.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable react/react-in-jsx-scope */
+
 /* eslint-disable react-refresh/only-export-components */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
@@ -143,6 +143,7 @@ export interface GridlerState {
   loadingData?: boolean;
   loadPage: (page: number, clearMode?: 'all' | 'page') => Promise<void>;
   mounted: boolean;
+  onCellClicked: (cell: Item, event: CellClickedEventArgs) => void;
   onCellEdited: (cell: Item, newVal: EditableGridCell) => void;
   onColumnMoved: (from: number, to: number) => void;
   onColumnProposeMove: (startIndex: number, endIndex: number) => boolean;
@@ -340,6 +341,16 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
     },
     maxConcurrency: 1,
     mounted: false,
+    onCellClicked: (cell: Item, event: CellClickedEventArgs) => {
+      const state = get();
+      const [col, row] = cell;
+      state.glideProps?.onCellClicked?.(cell, event);
+      state._events.dispatchEvent(
+        new CustomEvent('onCellClicked', {
+          detail: { cell, col, row, state },
+        })
+      );
+    },
     onCellEdited: (cell: Item, newVal: EditableGridCell) => {
       const state = get();
       const [, row] = cell;
@@ -351,6 +362,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
           detail: { cell, newVal, row, state },
         })
       );
+      state.glideProps?.onCellEdited?.(cell, newVal);
     },
     onColumnMoved: (from: number, to: number) => {
       const s = get();
@@ -737,7 +749,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
         const val = String(ref).includes('.') ? (getNestedValue(ref, row) ?? '') : row?.[ref];
 
         if (coldef?.Cell) {
-          return coldef?.Cell(row, col, ref, val, s) as GridCell;
+          return { kind: GridCellKind.Text, ...coldef?.Cell(row, col, ref, val, s) } as GridCell;
         }
         if (s.RenderCell) {
           return s.RenderCell(row, col, ref, val, s);